// =============================================================================
// FOOTER — Task #30 (v2) + existing footer styles
// Adds newsletter CTA card ABOVE the footer. Section bg #f2f1ec.
// Social icon boxes keep --radius-2xs (2px), NOT the new 4px radius-xs.
// Mobile-first: base = 375px, desktop via respond-to('desktop')
// Measurements: design/measurements-v2.json → "footer"
//   Web:    section pt-80; CTA card 1200×384 px-48 py-64; footer gap 56px
//   Mobile: section pt-56; CTA card full-width px-16 py-64; footer px-16
// =============================================================================

@import '../mixins';

// =============================================================================
// FOOTER CTA CARD — newsletter signup above footer (Task #30)
// Figma: 1200×384 card, #fcfbf7 bg, 2px white border, radius 4px
//        px-48 py-64, left-aligned eyebrow + Playfair 48 heading + outline button
// =============================================================================

.footer__cta-section {
  // Section rhythm (56px mobile+tablet, 80px laptop+ — --section-space,
  // tokens.scss) on both edges. Was top-only, with no bottom padding at all
  // below 1440px — this component ran straight into the footer beneath it.
  padding-block: var(--section-space);     // (bg via .bg-pampas on <section>)
  display: flex;
  justify-content: center;
  // Horizontal inset via .container below 1200px; above that the card's own
  // max-width (--container-max, 1200px) keeps it from reading edge-to-edge.

  @include respond-to('laptop') {
    padding-bottom: 92px;                  // desktop: gap-92 between CTA card and footer (Figma one-off)
  }
}

.footer__cta-card {
  width: 100%;
  max-width: var(--container-max);        // 1200px
  min-height: 384px;
  background-color: var(--color-cream);   // #fcfbf7
  border: 2px solid var(--color-white);
  border-radius: var(--radius-xs);        // 4px
  padding: 4rem 16px;                      // mobile: py-64 px-16
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  overflow: hidden;
  position: relative;

  @include respond-to('desktop') {
    padding: 4rem 3rem;                   // desktop: py-64 px-48
  }
}

// Decorative elephant illustration — right side of the card, behind the text.
// Figma confirms the graphic is intentionally larger than the card at BOTH
// breakpoints and bleeds past its edges, clipped by the card's own
// overflow:hidden — never scaled to fit. Mobile (18580:9022, 375×386 card):
// top -77px, left 107px, 504×519px. Desktop (18580:8896, 1200×384 card):
// top -207px, right -62.5px, 618×659px.
.footer__cta-illustration {
  position: absolute;
  top: -77px;
  left: 107px;
  width: 504px;
  height: 519px;
  object-fit: contain;
  pointer-events: none;
  z-index: 0;

  @include respond-to('desktop') {
    top: -207px;
    right: -62.5px;
    left: auto;
    width: 618px;
    height: 659px;
  }
}

// Text + button sit above the illustration
.footer__cta-heading,
.footer__cta-subtitle,
.footer__cta-card .btn {
  position: relative;
  z-index: 1;
}

.footer__cta-heading {
  font-family: var(--font-display);
  font-size: var(--fs-display-sm);       // 30px mobile
  font-weight: 400;
  line-height: var(--lh-display-sm);
  letter-spacing: 0;
  color: var(--color-gold-dark);          // #956019
  margin: 0;
  max-width: 749px;

  // Below 576px, .container is un-capped/fluid (Bootstrap's own stepped
  // max-widths only start at the "sm" tier, 576px+), so the card's available
  // width grows smoothly with viewport in this range — but non-monotonically
  // in its effect on wrapping: measured word widths "...Latest" 312px,
  // "...Updates" 427px, "...Updates And Booking" ~412px. Between viewport
  // 376–491px the available width (~312–412px) fits "Register For The
  // Latest" on line 1 and "Updates And Booking" on line 2, but not enough for
  // "Exclusives" too — stranding it alone as a single-word orphan on line 3.
  // Below 376px and above 491px this doesn't happen (confirmed empirically
  // across the full 320–767px range) — cap max-width only in this exact band
  // so the break instead lands after "The" (matching the already-good
  // 340–375px wrap), leaving the good ranges on either side untouched.
  @media (min-width: 23.5rem) and (max-width: 30.6875rem) { // 376–491px
    max-width: 290px;
  }

  // Bootstrap's .container uses stepped, fixed max-widths per breakpoint tier
  // (540/720/960/1200px), not a smoothly scaling width — so within the "md"
  // tier (768–991px) the card is fixed at 720px regardless of actual viewport
  // width, giving the heading only ~652px to wrap in. At 30px font that forces
  // a break after "Booking", leaving "Exclusives" alone as a single-word
  // orphan on line 2. Measured word widths at this font/tier: "...Updates"
  // 427px, "...Updates And" 488px — constrain max-width to land the break
  // after "Updates" instead, giving a balanced "...Updates" / "And Booking
  // Exclusives" split. Every other tier already wraps (or fits on one line)
  // without this problem, so it's scoped tightly to just this range.
  @media (min-width: 48rem) and (max-width: 61.9375rem) { // 768–991px, Bootstrap's md tier
    max-width: 460px;
  }

  @include respond-to('desktop') {
    font-size: var(--fs-display-lg);     // 48px desktop
    line-height: var(--lh-display-lg);
    letter-spacing: -0.96px;
  }
}

.footer__cta-subtitle {
  @include body-text;
  margin: 0;
}

// =============================================================================
// MAIN FOOTER — below the CTA card
// =============================================================================

.site-footer {
  // 56px top+bottom, flat at every width — the footer's own internal inset,
  // not the shared section rhythm (--section-space). .footer__cta-section
  // above already supplies the 56/80px section-edge padding above this.
  padding-block: var(--space-14); // (horizontal inset via .container)
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.5rem;                                  // mobile: gap-40

  @include respond-to('desktop') {
    gap: 3.5rem;                                // gap-56 on desktop
  }
}

// ─── Logo ─────────────────────────────────────────────────────────────────────
.site-footer__logo {
  display: flex;
  justify-content: center;

  a {
    display: inline-flex;
    text-decoration: none;
  }

  img {
    width: 227.708px;
    height: 80px;
    display: block;
  }
}

// ─── Partners + social row ────────────────────────────────────────────────────
.site-footer__partners-social {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;                                  // mobile: gap-40 (was 70px desktop only)
  flex-wrap: wrap;

  @include respond-to('desktop') {
    gap: 4.375rem;                              // 70px on desktop
  }
}

.site-footer__partners {
  display: flex;
  align-items: center;
  gap: 2.5rem;                                  // 40px

  img {
    height: 44px;                               // mobile: 44px
    display: block;
    object-fit: contain;

    &:first-child { width: 45px; }
    &:last-child  { width: 91px; }

    @include respond-to('desktop') {
      height: 66px;

      &:first-child { width: 62px; }
      &:last-child  { width: 125.71px; }
    }
  }
}

// Social icon row — mobile: 40×40px; desktop: 48×48px
.site-footer__social {
  display: flex;
  align-items: center;
  gap: 0.5rem;                                  // mobile: gap-8
}

.site-footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;                                  // mobile: 40×40px
  height: 40px;
  border: 1px solid var(--color-green-spring);  // #bcbfb8
  border-radius: var(--radius-2xs);             // 2px — keep 2px NOT 4px
  color: var(--color-nandor);
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;

  svg,
  img {
    width: 20px;                                // mobile: 20px icons
    height: 20px;
    flex-shrink: 0;
  }

  &:hover {
    background-color: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-white);
  }

  &:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
  }

  @include respond-to('desktop') {
    width: 48px;
    height: 48px;
    gap: 1rem;                                  // social icons gap-16

    svg,
    img {
      width: 22px;
      height: 22px;
    }
  }
}

// Desktop social gap set on the row
@include respond-to('desktop') {
  .site-footer__social {
    gap: 1rem;
  }
}

// ─── Nav links ────────────────────────────────────────────────────────────────
.site-footer__nav {
  width: 100%;
}

.site-footer__nav-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.375rem;                                // mobile: gap-22 (~22px)
  list-style: none;
  margin: 0 auto;                               // center the box itself — justify-content
  padding: 0;                                   // only centers items *within* it, not the box
  // Figma groups these 8 links as 3 rows (3/3/2) via a flex-wrap container
  // sized so each row's natural content width causes it to wrap at the
  // right point — not a fixed 285px. This browser's real Inter metrics need
  // ~289px for row 1 (CONTACT/CONSERVATION/ACCESSIBILITY) but only ~297px
  // is where a 4th item (KEEP IN TOUCH) would start fitting alongside row 2's
  // own 3 items — so 292px is the width where flex-wrap's normal algorithm
  // produces exactly 3/3/2 on its own: wide enough for each row's 3(or 2)
  // items, narrow enough that the next item never has room to join.
  max-width: 292px;

  @include respond-to('desktop') {
    gap: 3rem;                                  // 48px desktop
    max-width: none;
  }
}

.site-footer__nav-item {
  // intentionally empty
}

.site-footer__nav-link {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--color-text-secondary);
  text-decoration: none;
  letter-spacing: 0;
  white-space: nowrap;

  &:hover {
    color: var(--color-gold-dark);
    text-decoration: underline;
    text-underline-offset: 3px;
  }

  &:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 2px;
  }
}

// ─── Copyright ────────────────────────────────────────────────────────────────
.site-footer__copyright-wrap {
  width: calc(100% - 2rem);
  margin-inline: 1rem;
  border-top: 1px solid var(--color-border);
  padding-block: 1rem;
  text-align: center;
  box-sizing: border-box;

  // Figma 18580:8896 — nav→copyright gap is 40px, not .site-footer's uniform
  // 56px (logo→partners-social and partners-social→nav are correctly 56px;
  // only this last pair differs). Pull up by the 16px difference instead of
  // fragmenting .site-footer's single gap into a non-uniform, harder-to-read set.
  // Tied to the footer's own existing 1440px convention (.site-footer's gap
  // switches at the same respond-to('desktop') breakpoint).
  @include respond-to('desktop') {
    margin-top: -1rem; // 56px gap - 16px = 40px net
  }

  // The divider line itself is decoupled from .site-footer's 1200px .container
  // cap: Figma sizes it 1408px on a 1440px frame — i.e. inset only 16px from
  // the true viewport edge, not the container edge. Break out to viewport
  // width (same centering technique as slider-breakout, symmetric instead of
  // right-only), then re-inset by 16px with padding. Tied to 1200px (75rem) —
  // where .container itself actually becomes the width-constraining factor
  // (main.scss) — not the footer's unrelated 1440px typography breakpoint;
  // below 1200px .container has no gutter for this element to escape from.
  @media (min-width: 75rem) {
    align-self: flex-start; // .site-footer has align-items:center, which would otherwise
                             // auto-center this wider-than-parent box on top of the manual
                             // margin-left below, double-shifting it off-screen
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(-50vw + 50%); // re-centers this element on the viewport, not .site-footer
    padding-inline: 16px;           // Figma's 16px inset from the viewport edge
  }
}

.site-footer__copyright {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--color-text-secondary);
  margin: 0;
}