/* ==========================================================================
   TAULA — Block HP-8: Footer
   Reusable block — homepage + product pages.

   Layout:
   - 100vw × 100vh full-screen section
   - Full-bleed background image (object-fit: cover)
   - Content pinned to bottom: H2 nav links row + legal line
   - All text: white
   ========================================================================== */

/* ── Section shell ──────────────────────────────────────────────────────── */
.taula-footer {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* pins content to bottom */
}

/* ── Full-bleed background image ─────────────────────────────────────────── */
.taula-footer__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  z-index: 0;
}

/* Subtle dark gradient at the bottom — improves link legibility over the image */
.taula-footer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.20) 35%,
    transparent 65%
  );
  z-index: 1;
  pointer-events: none;
}

/* ── Bottom content wrapper ──────────────────────────────────────────────── */
.taula-footer__bottom {
  position: relative;
  z-index: 2;
  padding: 0 80px 48px;
}

/* ── Navigation link row ─────────────────────────────────────────────────── */
.taula-footer__nav {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px 32px;
  margin: 0 0 16px;
}

/* H2-scale footer links */
.taula-footer__link {
  font-family: var(--font-heading); /* Staatliches */
  font-size: 64px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  color: #ffffff;
  text-decoration: none;
  transition: opacity 0.2s ease;
  white-space: nowrap;
}

.taula-footer__link:hover {
  opacity: 0.65;
}

/* Policy links (Refund Policy / Legal / Cookie Settings) — small Geist body text */
.taula-footer__link--small {
  font-family: var(--font-body); /* Geist */
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

/* ── Legal copyright line ────────────────────────────────────────────────── */
.taula-footer__legal {
  font-family: var(--font-body); /* Geist */
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.65);
  margin: 0;
  line-height: 1.5;
}

/* ── CSS-driven language switching ──────────────────────────────────────── */
.taula-footer__lang {
  display: none;
}

html[data-taula-lang="CA"] .taula-footer__lang[data-lang="CA"],
html[data-taula-lang="ES"] .taula-footer__lang[data-lang="ES"],
html[data-taula-lang="EN"] .taula-footer__lang[data-lang="EN"] {
  display: inline;
}

/* Fallback: show EN when no lang attribute is set */
html:not([data-taula-lang]) .taula-footer__lang[data-lang="EN"],
html[data-taula-lang=""] .taula-footer__lang[data-lang="EN"] {
  display: inline;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .taula-footer__bottom {
    padding-left: 60px;
    padding-right: 60px;
  }

  .taula-footer__link {
    font-size: 52px;
  }

}

@media (max-width: 768px) {
  .taula-footer__bottom {
    padding-left: 32px;
    padding-right: 32px;
    padding-bottom: 36px;
  }

  .taula-footer__nav {
    gap: 8px 20px;
    margin-bottom: 12px;
  }

  .taula-footer__link {
    font-size: 40px;
  }

}

@media (max-width: 480px) {
  .taula-footer__bottom {
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 28px;
  }

  .taula-footer__link {
    font-size: 32px;
    white-space: normal;
  }

}