/* footer.css — SINGLE source for the site footer. Used by BOTH the React
   Footer.jsx (SPA routes) and the site-chrome.js injected footer (static pages),
   which now emit identical `.footer__*` markup. Edit the footer here, once.
   Full-width stacked layout, identical on desktop + mobile (larger on desktop).
   Colours fall back to literals so it works on pages that don't load colour vars. */

.footer {
  background: var(--forest, #3B542A); color: var(--cream, #FFFDF5);
  display: flex; flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom);
  font-family: var(--font-label, 'Jost', system-ui, sans-serif);
}
.footer a { color: inherit; text-decoration: none; }

.footer__text {
  display: flex; flex-direction: column;
  padding: clamp(44px, 5vw, 92px) clamp(22px, 4.5vw, 76px) clamp(20px, 2.4vw, 38px);
  gap: clamp(38px, 5vw, 80px);
}

/* ---- top: menu links (left) · n. / @nourrir.life / legal (right) ---- */
.footer__top { display: grid; grid-template-columns: 1fr auto; gap: clamp(20px, 5vw, 72px); align-items: start; }
.footer__nav { display: flex; flex-direction: column; gap: clamp(8px, 0.9vw, 13px); }
.footer__navlink { font: 300 clamp(13px, 1vw, 15px)/1 var(--font-label, 'Jost', sans-serif); letter-spacing: .04em; color: var(--cream, #FFFDF5); opacity: .82; align-self: flex-start; white-space: nowrap; transition: color .2s, opacity .2s; }
.footer__navlink:hover { opacity: 1; color: var(--gold, #B2914A); }

.footer__sign { display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: clamp(10px, 1.2vw, 18px); }
.footer__mono { font: 500 clamp(26px, 2.4vw, 38px)/1 var(--font-display, 'Cormorant Garamond', serif); color: var(--cream, #FFFDF5); }
.footer__contact { display: flex; flex-direction: column; align-items: flex-end; }
.footer__contact a { font: 300 clamp(13px, 1vw, 15px)/1.5 var(--font-label, 'Jost', sans-serif); letter-spacing: .04em; color: var(--cream, #FFFDF5); opacity: .82; transition: color .2s, opacity .2s; }
.footer__contact a:hover { opacity: 1; color: var(--gold, #B2914A); }
/* legal stacked vertically, one per line, right-aligned under @nourrir.life */
.footer__legal { display: flex; flex-direction: column; align-items: flex-end; gap: clamp(6px, 0.6vw, 9px); margin-top: clamp(8px, 1vw, 14px); }
.footer__legal a { font: 300 clamp(13px, 1vw, 15px)/1 var(--font-label, 'Jost', sans-serif); letter-spacing: .04em; color: var(--cream, #FFFDF5); opacity: .82; transition: color .2s, opacity .2s; }
.footer__legal a:hover { opacity: 1; color: var(--gold, #B2914A); }

/* ---- closing wordmark + tagline: span the full footer width on each breakpoint.
   "nourrir." width ≈ 3.13×font; "Eat with intention." width ≈ 6.8×font, so the
   tagline font is 0.46× the wordmark font → their rendered edges align. ---- */
.footer__close { display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(2px, 0.6vw, 10px); }
.footer__wordmark { font: 500 clamp(64px, 26.5vw, 340px)/0.92 var(--font-display, 'Cormorant Garamond', serif); letter-spacing: .005em; color: var(--cream, #FFFDF5); opacity: .97; }
.footer__tag { font: 500 italic clamp(29px, 12.2vw, 156px)/1 var(--font-display, 'Cormorant Garamond', serif); letter-spacing: .005em; color: var(--cream, #FFFDF5); opacity: .8; }

/* ---- creed: full width, edge to edge ---- */
.footer__creed { font: 300 clamp(10px, 1.35vw, 15px)/1.6 var(--font-label, 'Jost', sans-serif); letter-spacing: .18em; text-transform: uppercase; color: var(--gold, #B2914A); opacity: .85; text-align: center; }

/* ---- image tiles at the base ---- */
.footer__media { display: grid; grid-template-columns: 1fr 1fr; height: clamp(150px, 18vw, 300px); }
.footer__slot { position: relative; overflow: hidden; background-color: #2c2922; background-size: cover; background-position: center; }
.footer__slot::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, rgba(8,7,10,.42) 0%, rgba(8,7,10,0) 38%); }
.footer__slot .label, .footer__slot .sc-label { position: absolute; right: 18px; top: 16px; z-index: 1; font: 300 11px/1 var(--font-label, 'Jost', sans-serif); letter-spacing: .2em; text-transform: uppercase; color: rgba(255,253,245,.92); }

/* hide the redundant plain "nourrir.life" line if a footer still ships it */
.footer__contact a:nth-child(2) { display: none; }

/* ---- DESKTOP (>=761px) — composed, content-constrained, centred. Mobile is the
   base rules + the <=760 block below and is intentionally left untouched. ---- */
/* ---- DESKTOP (>=761px) — ORIGINAL "Jacquemus split": text column left, two
   images right; no big wordmark. (Reverted from the full-width wordmark layout;
   the shared markup is reproduced via display:contents + order.) MOBILE (<=760)
   is the base + the <=760 block below and is deliberately left untouched. ---- */
@media (min-width: 761px) {
  .footer { display: grid; grid-template-columns: minmax(300px, 34%) 1fr; min-height: clamp(560px, 80vh, 840px); }
  .footer__text { display: flex; flex-direction: column; max-width: none; margin: 0; padding: clamp(40px, 4vw, 72px); gap: 0; }
  .footer__top, .footer__sign, .footer__close { display: contents; }
  .footer__wordmark { display: none; }
  .footer__nav { order: 1; display: flex; flex-direction: column; gap: 11px; margin-top: auto; }
  .footer__navlink { font: 300 13px/1 var(--font-label, 'Jost', sans-serif); letter-spacing: .04em; }
  .footer__legal { order: 2; display: flex; flex-direction: row; align-items: flex-start; gap: 18px; margin-top: clamp(22px, 3vh, 34px); }
  .footer__legal a { font: 300 11px/1 var(--font-label, 'Jost', sans-serif); letter-spacing: .06em; opacity: .5; }
  .footer__mono { order: 4; align-self: flex-start; text-align: left; margin-top: auto; font: 500 34px/1 var(--font-display, 'Cormorant Garamond', serif); }
  .footer__tag { order: 5; align-self: flex-start; text-align: left; margin-top: 10px; font: 500 italic clamp(15px, 1.4vw, 18px)/1.4 var(--font-display, 'Cormorant Garamond', serif); opacity: .8; }
  .footer__contact { order: 6; align-items: flex-start; text-align: left; gap: 5px; margin-top: clamp(22px, 3vh, 34px); }
  .footer__contact a { font: 300 12px/1.5 var(--font-label, 'Jost', sans-serif); letter-spacing: .04em; opacity: .7; }
  .footer__creed { order: 7; text-align: left; margin-top: clamp(20px, 3vh, 30px); font: 300 11px/1.6 var(--font-label, 'Jost', sans-serif); letter-spacing: .14em; text-transform: uppercase; color: var(--gold, #B2914A); opacity: .85; }
  .footer__media { max-width: none; margin: 0; width: auto; height: auto; grid-template-columns: 1fr 1fr; }
  /* home: the footer is the final hijack panel — fill it so no cream shows below
     (the panel centres its child; without this the 80vh footer leaves a gap). */
  .hijack__panel:last-child .footer { min-height: 100vh; min-height: 100dvh; }
}

/* ---- HOME hijack footer: the final one-screen snap panel (mobile only). Fill the
   container exactly so the slideshow snaps cleanly; the design above still fits. ---- */
@media (max-width: 760px) {
  .footer__text { padding: clamp(72px, 11vh, 96px) 22px clamp(14px, 2vh, 22px); gap: clamp(26px, 4vh, 44px); }
  /* Mobile footer top: the n. mono is a standalone mark ABOVE both lists; the two text
     lists (nav | contact+legal) then align row-for-row from a shared top baseline with a
     matching row rhythm (equal 12px gaps + equal type, so each left item lines up with
     the right item on its row). Desktop Jacquemus split is untouched (>=761 block). */
  .footer__top { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(16px, 6vw, 44px); align-items: start; }
  .footer__mono { grid-column: 1 / -1; align-self: start; text-align: left; margin: 0 0 clamp(20px, 5vw, 30px); font: 500 clamp(32px, 9vw, 46px)/1 var(--font-display, 'Cormorant Garamond', serif); }
  .footer__nav { grid-column: 1; gap: 12px; }
  .footer__navlink { line-height: 1; }
  .footer__sign { grid-column: 2; align-items: flex-start; text-align: left; gap: 12px; }
  .footer__contact { align-items: flex-start; }
  .footer__contact a { line-height: 1; }
  .footer__legal { align-items: flex-start; margin-top: 0; gap: 12px; }
  .footer__legal a { line-height: 1; }
  .hijack__panel:last-child .footer { height: 100% !important; min-height: 0 !important; overflow: hidden; }
  .hijack__panel:last-child .footer__text { flex: 1 1 auto; padding-bottom: 0; gap: 0; justify-content: space-between; }
  .hijack__panel:last-child .footer__close { margin: auto 0; }
  .hijack__panel:last-child .footer__media { height: clamp(120px, 20vh, 200px); }
}
.footer__slot { aspect-ratio: auto; }