/* ==========================================================================
   Blush POC — Site footer (S9, from Figma)
   A direct child of .page (inside its gutters), on the light page ground.
   Mobile-first: everything stacks, links in a column. Desktop lays the meta
   pieces (socials · links · copyright) into one row and enlarges the top gap.
   Colours: heading/links/copy = brown; social icons = light-brown; the big
   "blush" wordmark = --color-blush-wash painted through a CSS mask (the SVG
   shape stays external — assets/icons/footer-wordmark.svg). Loaded after
   content.css, before polish.css.
   ========================================================================== */

.site-footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
  padding-block-start: var(--space-40);   /* mobile top; desktop → 80 */
  color: var(--color-brown);
  /* Dissolve the whole footer as it scrolls under the fixed header logo — BOTH
     breakpoints (the product info fades under the logo, so the footer must too).
     The mask band rides the header's LIVE bottom edge; --footer-fade-a/-b are
     set per scroll frame by js/scroll.js. Defaults = no fade (whole footer
     opaque) until the script runs / on reduced motion. */
  -webkit-mask-image: linear-gradient(to bottom,
      transparent var(--footer-fade-a, -1px), #000 var(--footer-fade-b, 0px));
          mask-image: linear-gradient(to bottom,
      transparent var(--footer-fade-a, -1px), #000 var(--footer-fade-b, 0px));
}

/* --- Intro: About + blurb ------------------------------------------------ */
.site-footer__intro {
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
  max-width: 30rem;                        /* the blurb measure (≈ the 488px Figma column) */
}
.site-footer__heading {
  font-family: var(--font-title);
  font-weight: var(--weight-title);
  letter-spacing: var(--tracking-title);
  line-height: var(--leading-title);
  font-size: var(--size-heading);          /* Figma "About" — fixed both breakpoints */
  color: var(--color-brown);
}
.site-footer__blurb { color: var(--color-brown); }   /* .type-body sets the face/size */

/* --- Meta: socials, links, copyright ------------------------------------- */
.site-footer__meta {
  display: flex;
  flex-direction: column;
  gap: var(--space-40);
}
.site-footer__social,
.site-footer__links {
  list-style: none;
  padding: 0;
  margin: 0;
}
.site-footer__social {
  display: flex;
  align-items: center;
  gap: var(--space-20);
}
.site-footer__social-link {
  display: inline-flex;
  color: var(--color-light-brown);         /* Figma social glyph colour */
}
.site-footer__social-icon {
  height: var(--icon-md);                  /* Figma social glyph size */
  width: auto;
}
.site-footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--space-20);
}
.site-footer__link {
  font-family: var(--font-body);
  font-weight: var(--weight-strong);       /* bold links (Figma) */
  font-size: var(--size-body);
  color: var(--color-brown);
  text-decoration: none;
}
.site-footer__copy {
  font-family: var(--font-body);
  font-weight: var(--weight-body);         /* light (Figma) */
  font-size: var(--size-body);
  color: var(--color-brown);
}

/* --- The big blush wordmark ---------------------------------------------- */
/* Full content width, its own aspect; the tint is a token painted through the
   SVG as an alpha mask, so the shape is external but the colour composes. */
.site-footer__wordmark {
  width: 100%;
  aspect-ratio: 1240 / 405;
  background-color: var(--color-blush-wash);
  -webkit-mask: url(../assets/icons/footer-wordmark.svg) center / contain no-repeat;
          mask: url(../assets/icons/footer-wordmark.svg) center / contain no-repeat;
}

/* --- Mobile: the wordmark clears the fixed drawer peek ------------------- */
@media (max-width: 767px) {
  /* --drawer-peek is set on .page (js/drawer.js measures it); inherit it so
     the wordmark rests exactly at the drawer's top edge, never swallowed. */
  .site-footer { padding-block-end: var(--drawer-peek, 0px); }
}

/* --- Desktop: meta becomes one row; bigger top + wordmark gaps ----------- */
@media (min-width: 768px) {
  .site-footer {
    padding-block-start: var(--space-80);
    /* Align the footer to the CONTENT GRID (operator, S9): inset to the text
       block's left edge and the media block's right edge — the same bounds the
       logo and product columns sit in. Both are centred --media-size blocks in
       equal 1fr tracks (header + product mirror), so the inset = a block's auto
       margin = (column − block) / 2; it collapses to 0 once a column is
       narrower than the block. (100% = the page content width.) */
    --footer-col-gap: clamp(var(--space-20), 6vw, var(--space-80));
    padding-inline: max(0px,
        calc((100% - var(--footer-col-gap) - 2 * var(--media-size)) / 4));
  }
  .site-footer__meta {
    flex-direction: row;
    align-items: center;
    gap: var(--space-40);
  }
  .site-footer__links {
    flex-direction: row;
    gap: var(--space-40);
  }
  .site-footer__wordmark { margin-block-start: var(--space-40); }  /* → 80 above */
}

/* --- Hover polish (pointer devices) -------------------------------------- */
@media (hover: hover) {
  .site-footer__link:hover { color: var(--color-accent); }
  .site-footer__social-link { transition: color 200ms ease; }
  .site-footer__social-link:hover { color: var(--color-accent); }
}