/* ============================================================================
   SAPÉ website — page-specific layout.
   Consumes the vendored ds/*.css tokens + component classes; adds only what
   the design system doesn't already define (header, hero, section shells,
   product preview popups, footer, contact layout, mobile nav, responsive).

   Conventions:
   - Every size, radius, duration and colour comes from a --sape-* token where
     one exists. The few literals that remain are commented where they occur.
   - Breakpoints: 1120px (header badge hides), 860px (nav collapses, hero
     stacks), 768px (tighter vertical rhythm), 640px (footer stacks), 480px
     (phone header). Each marks a different layout event, so they are not
     merged.
   ============================================================================ */

/* The ds components.css sets display:flex/grid on several classes (.sape-alert,
   .sape-error, ...) that we also toggle with the `hidden` attribute; author
   rules beat the UA [hidden] rule at equal specificity, so without this an
   element can be both `hidden` and visibly flexed. Force hidden to always win. */
[hidden] { display: none !important; }

.skip-link {
  position: absolute;
  left: var(--sape-spacing-2);
  top: -48px;
  z-index: var(--sape-motion-z-index-toast);
  background: var(--sape-color-surface-base);
  color: var(--sape-color-text-primary);
  padding: var(--sape-spacing-3) var(--sape-spacing-4);
  border-radius: var(--sape-radius-md);
  box-shadow: var(--sape-shadow-level-3);
  transition: top var(--sape-motion-duration-fast) var(--sape-motion-easing-standard);
}
.skip-link:focus { top: var(--sape-spacing-2); }

/* ---- header --------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: var(--sape-motion-z-index-sticky);
  background: color-mix(in srgb, var(--sape-color-surface-base) 92%, transparent);
  backdrop-filter: saturate(1.25) blur(14px);
  border-bottom: var(--sape-border-width-hairline) solid var(--sape-color-border-subtle);
}
.site-header__inner {
  max-width: var(--sape-size-content-wide);
  margin: 0 auto;
  padding: 0 var(--sape-spacing-6);
  min-height: 104px; /* 88px logo + 8px above and below */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--sape-spacing-5);
}
.site-header__brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  justify-self: start;
  /* Floor so the brand mark can never be squeezed illegible by the controls
     beside it — and so it stays the same size in every language. */
  min-width: 350px;
}
/* Logo: 350×88 on desktop (owner's call: twice the original size). Height is
   capped so the header band, not the SVG's aspect ratio, sets the layout. */
.brand-logo { max-width: 350px; max-height: 88px; width: auto; height: auto; display: block; }
.brand-logo--dark { display: none; }
:root[data-theme="dark"] .brand-logo--dark { display: block; }
:root[data-theme="dark"] .brand-logo--light { display: none; }
.site-footer .brand-logo { max-width: 225px; max-height: none; width: 100%; margin-bottom: var(--sape-spacing-4); }

.site-header__badge {
  justify-self: center;
  display: inline-flex;
  align-items: center;
  padding: 9px var(--sape-spacing-6); /* 1.5× the 6px/16px badge */
  border: var(--sape-border-width-hairline) solid var(--sape-color-border-control);
  border-radius: var(--sape-radius-full);
  background: var(--sape-color-surface-hover);
  color: var(--sape-color-text-secondary);
  font-size: var(--sape-font-size-18); /* 1.5× the 12px badge */
  font-weight: var(--sape-font-weight-semibold);
  letter-spacing: 0.08em; /* matches .u-eyebrow */
  text-transform: uppercase;
  white-space: nowrap;
}

.site-header__controls { display: flex; align-items: center; gap: var(--sape-spacing-3); flex-wrap: nowrap; justify-self: end; }
.site-nav { display: flex; align-items: center; gap: 2px; }
.site-nav__link {
  min-height: var(--sape-size-control-md);
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border-radius: var(--sape-radius-md);
  color: var(--sape-color-text-secondary);
  font-weight: var(--sape-font-weight-medium);
  font-size: var(--sape-font-size-14);
  text-decoration: none;
  white-space: nowrap;
}
.site-nav__link:hover { color: var(--sape-color-text-primary); background: var(--sape-color-surface-hover); text-decoration: none; }

.lang-switch { display: flex; align-items: center; gap: 2px; border: var(--sape-border-width-hairline) solid var(--sape-color-border-control); border-radius: var(--sape-radius-full); padding: 2px; }
.lang-switch__btn {
  border: none;
  border-radius: var(--sape-radius-full);
  min-height: var(--sape-size-control-sm);
  padding: 0 var(--sape-spacing-3);
  font-size: var(--sape-font-size-12);
  font-weight: var(--sape-font-weight-semibold);
  cursor: pointer;
  background: transparent;
  color: var(--sape-color-text-secondary);
  font-family: inherit;
}
.lang-switch__btn[aria-pressed="true"] {
  background: var(--sape-color-action-primary-background);
  color: var(--sape-color-action-primary-text);
}

.theme-toggle,
.mobile-nav-toggle {
  width: var(--sape-size-control-md); height: var(--sape-size-control-md);
  border-radius: var(--sape-radius-full);
  border: var(--sape-border-width-hairline) solid var(--sape-color-border-control);
  background: var(--sape-color-surface-base);
  align-items: center; justify-content: center;
  color: var(--sape-color-text-primary);
  cursor: pointer;
  flex: none;
}
.theme-toggle { display: inline-flex; }
.theme-toggle:hover, .mobile-nav-toggle:hover { border-color: var(--sape-color-border-selected); }
.theme-toggle__icon--sun { display: none; }
:root[data-theme="dark"] .theme-toggle__icon--sun { display: block; }
:root[data-theme="dark"] .theme-toggle__icon--moon { display: none; }
:root[data-theme="light"] .theme-toggle__icon--moon { display: block; }

.mobile-nav-toggle { display: none; }
.mobile-nav {
  display: none;
  flex-direction: column;
  gap: 2px;
  padding: var(--sape-spacing-2) var(--sape-spacing-6) var(--sape-spacing-4);
  border-top: var(--sape-border-width-hairline) solid var(--sape-color-border-subtle);
}
.mobile-nav .site-nav__link { justify-content: flex-start; }

/* Below ~1120px the 350px logo, the badge, the nav and the controls no longer
   fit on one row in every language; the badge is the first thing to go, so
   the logo never has to shrink while the desktop nav is visible. */
@media (max-width: 1120px) {
  .site-header__badge { display: none; }
  .site-header__inner { grid-template-columns: 1fr auto; }
}
/* Collapse the desktop nav at the same point the hero stacks. With nav and
   badge gone the controls are the same width in every language, so the logo
   can scale fluidly with the remaining space and stay language-independent. */
@media (max-width: 860px) {
  .site-nav { display: none; }
  .mobile-nav-toggle { display: inline-flex; }
  .mobile-nav.is-open { display: flex; }
  .site-header__brand { min-width: 0; }
  .brand-logo { width: 100%; max-height: none; }
}
/* Phone: the nav and badge are gone, so the controls are the same width in
   every language and the logo can safely shrink. 16px gutters. */
@media (max-width: 480px) {
  .site-header__inner { padding: 0 var(--sape-spacing-4); gap: var(--sape-spacing-3); min-height: 72px; }
  .site-header__controls { gap: 6px; }
  .lang-switch__btn { padding: 0 var(--sape-spacing-2); }
}

/* ---- hero -------------------------------------------------------------- */
.hero { padding: 0 var(--sape-spacing-6); }
.hero__inner {
  max-width: var(--sape-size-content-wide);
  margin: 0 auto;
  padding: var(--sape-spacing-16) 0 var(--sape-spacing-10);
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 320px);
  gap: var(--sape-spacing-10);
  align-items: center;
}
.hero__title {
  margin: 0;
  max-width: 760px;
  font-size: clamp(var(--sape-font-size-32), 5vw, var(--sape-font-size-48));
  line-height: var(--sape-font-line-height-tight);
  letter-spacing: -.01em;
  font-weight: var(--sape-font-weight-semibold);
}
.hero__lede { max-width: 640px; margin: var(--sape-spacing-5) 0 0; color: var(--sape-color-text-secondary); font-size: var(--sape-font-size-18); line-height: var(--sape-font-line-height-relaxed); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: var(--sape-spacing-3); margin-top: var(--sape-spacing-8); }
.hero__photo { width: 100%; max-width: 320px; justify-self: end; }
/* 8:7 is the desktop composition (320×280); keeping it as a ratio means the
   crop scales instead of letterboxing when the column goes full width. */
.hero__photo img {
  width: 100%; height: auto; aspect-ratio: 8 / 7; object-fit: cover; display: block;
  border-radius: var(--sape-radius-xl);
  box-shadow: var(--sape-shadow-level-1);
}
@media (max-width: 860px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__photo { max-width: 100%; justify-self: stretch; }
}

/* ---- section shell ------------------------------------------------------ */
/* Page-level section wrapper. Composed alongside the DS rather than
   overriding .sape-section, whose vertical padding we don't want. */
.page-section {
  padding: 0 var(--sape-spacing-6);
  border-top: var(--sape-border-width-hairline) solid var(--sape-color-border-subtle);
  scroll-margin-top: 104px; /* = header min-height */
}
.section-inner { max-width: var(--sape-size-content-wide); margin: 0 auto; padding: var(--sape-spacing-16) 0; }
.section-inner > .u-eyebrow { margin: 0 0 var(--sape-spacing-4); }
.section-inner > h2 { margin: 0 0 var(--sape-spacing-3); max-width: 720px; font-size: var(--sape-font-size-32); line-height: var(--sape-font-line-height-snug); font-weight: var(--sape-font-weight-semibold); }
.section-inner > p { margin: 0 0 var(--sape-spacing-10); max-width: 640px; font-size: var(--sape-font-size-16); line-height: var(--sape-font-line-height-normal); color: var(--sape-color-text-secondary); }

/* ---- signals ------------------------------------------------------------ */
.signals .section-inner > h2 { margin-bottom: var(--sape-spacing-6); }
.signals__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sape-spacing-4); }
.signals__grid .sape-card { gap: var(--sape-spacing-2); }
.signal-icon { display: inline-flex; color: var(--sape-color-text-brand); margin-bottom: var(--sape-spacing-1); }
.signals__grid h3 { margin: 0; font-size: var(--sape-font-size-16); font-weight: var(--sape-font-weight-semibold); }
.signals__grid .u-muted { font-size: var(--sape-font-size-14); line-height: var(--sape-font-line-height-normal); }

/* ---- products ------------------------------------------------------------ */
.products__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sape-spacing-4); }
.products__card { display: flex; flex-direction: column; gap: var(--sape-spacing-3); }
.products__card--uc { border-style: dashed; }
.products__icon { color: var(--sape-color-text-brand); }
.products__card h3 { margin: var(--sape-spacing-2) 0 0; font-size: var(--sape-font-size-18); }
/* flex:1 lets the description absorb the length difference between
   products (English vs. longer German/Spanish strings) so the verified
   line, contribute link and footer row land at the same height across
   every card in the row, regardless of description length. */
.products__desc { flex: 1; margin: 0; color: var(--sape-color-text-secondary); font-size: var(--sape-font-size-14); line-height: var(--sape-font-line-height-normal); }
/* One borrowed line from each product's README — the detail a reader remembers. */
.products__pull {
  margin: 0;
  padding: var(--sape-spacing-2) var(--sape-spacing-3);
  border-left: var(--sape-border-width-strong) solid var(--sape-color-text-brand);
  background: var(--sape-color-surface-hover);
  border-radius: 0 var(--sape-radius-sm) var(--sape-radius-sm) 0;
  color: var(--sape-color-text-primary);
  font-size: var(--sape-font-size-14);
  line-height: var(--sape-font-line-height-normal);
  font-style: italic;
}
.products__verified { margin: 0; color: var(--sape-color-text-muted); font-size: var(--sape-font-size-12); }
.products__contribute {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  height: 36px; box-sizing: border-box; padding: 0 var(--sape-spacing-3);
  border: var(--sape-border-width-hairline) dashed var(--sape-color-border-control); border-radius: var(--sape-radius-full);
  color: var(--sape-color-text-brand); font-size: var(--sape-font-size-14); font-weight: var(--sape-font-weight-medium); text-decoration: none;
}
.products__contribute:hover { border-color: var(--sape-color-border-selected); background: var(--sape-color-surface-selected); text-decoration: none; }
.products__footer { display: flex; gap: var(--sape-spacing-2); align-items: center; justify-content: space-between; flex-wrap: wrap; }
.products__badges { display: flex; gap: var(--sape-spacing-2); align-items: center; flex-wrap: wrap; }

.product-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  padding: 0;
  border: var(--sape-border-width-hairline) solid var(--sape-color-border-subtle);
  border-radius: var(--sape-radius-lg);
  overflow: visible;
  background: none;
  cursor: zoom-in;
  font: inherit;
}
.product-preview:focus-visible { outline: 2px solid var(--sape-color-border-focus); outline-offset: 2px; }
/* inner radius = outer radius minus the border, so the corners nest cleanly */
.product-preview__frame { display: block; width: 100%; height: 100%; border-radius: calc(var(--sape-radius-lg) - var(--sape-border-width-hairline)); overflow: hidden; }
.product-preview__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.product-preview__popup {
  position: fixed;
  top: 50%; left: 50%;
  width: min(90vw, 900px);
  max-height: 85vh;
  z-index: var(--sape-motion-z-index-popover);
  border-radius: var(--sape-radius-lg);
  overflow: hidden;
  border: var(--sape-border-width-hairline) solid var(--sape-color-border-subtle);
  box-shadow: var(--sape-shadow-level-5);
  /* Default/fallback resting transform — used only until product-preview.js
     stamps a real "grow from the thumbnail" starting point via inline
     style right before opening (see that file for why: relying on the
     :hover pseudo-class itself to snapshot the "before" state is racy —
     the custom-property write can lose to the browser's own style
     recalculation). */
  transform: translate(-50%, -50%) scale(0.4);
  opacity: 0;
  /* Token durations go to 0ms under prefers-reduced-motion (ds/foundations.css). */
  transition: transform var(--sape-motion-duration-slow) var(--sape-motion-easing-emphasized), opacity var(--sape-motion-duration-base) var(--sape-motion-easing-standard);
  pointer-events: none;
}
.product-preview__popup img { width: 100%; height: 100%; max-height: 85vh; object-fit: contain; display: block; background: var(--sape-color-surface-base); }
.product-preview.is-open .product-preview__popup {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

/* ---- profile -------------------------------------------------------------- */
.profile__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sape-spacing-8); }
.profile__grid p { margin: 0; color: var(--sape-color-text-secondary); font-size: var(--sape-font-size-16); line-height: var(--sape-font-line-height-relaxed); }

/* ---- contact -------------------------------------------------------------- */
.contact__links { display: flex; gap: var(--sape-spacing-3); flex-wrap: wrap; margin-bottom: var(--sape-spacing-8); }
.contact__link {
  display: inline-flex; align-items: center; gap: var(--sape-spacing-2);
  padding: var(--sape-spacing-3) var(--sape-spacing-4); border: var(--sape-border-width-hairline) solid var(--sape-color-border-subtle); border-radius: var(--sape-radius-lg);
  color: var(--sape-color-text-primary); font-size: var(--sape-font-size-14); font-weight: var(--sape-font-weight-medium); text-decoration: none;
}
.contact__link:hover { border-color: var(--sape-color-border-selected); color: var(--sape-color-text-brand); text-decoration: none; }

.contact-form { display: grid; gap: var(--sape-spacing-4); max-width: 640px; }
.contact-form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sape-spacing-4); }
.contact-form__submit { display: flex; gap: var(--sape-spacing-3); }
.phone-row { display: flex; gap: var(--sape-spacing-2); }
.phone-row__country { flex: 0 1 160px; min-width: 120px; }
.phone-row__number { flex: 1; min-width: 0; }

.sape-alert { position: relative; }
.contact-alert__dismiss {
  position: absolute; top: var(--sape-spacing-2); right: var(--sape-spacing-2);
  border: 0; background: transparent; cursor: pointer;
  font-size: var(--sape-font-size-18); line-height: 1; color: inherit; opacity: .7;
  padding: var(--sape-spacing-1);
}
.contact-alert__dismiss:hover { opacity: 1; }

/* ---- footer -------------------------------------------------------------- */
.site-footer { padding: var(--sape-spacing-12) var(--sape-spacing-6); background: var(--sape-color-background-inverse); color: var(--sape-color-text-inverse); }
/* Three explicit columns: the brand column needs more room than the two link
   lists, and auto-fit produced a dead fourth column at desktop and a ragged
   wrap at tablet. */
.site-footer__inner {
  max-width: var(--sape-size-content-wide);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(200px, 1.4fr) repeat(2, minmax(130px, 1fr));
  gap: var(--sape-spacing-8);
}
.site-footer p { margin: 0 0 var(--sape-spacing-4); color: color-mix(in srgb, var(--sape-color-text-inverse) 74%, transparent); font-size: var(--sape-font-size-14); max-width: 280px; line-height: var(--sape-font-line-height-normal); }
.site-footer h3 { color: inherit; font-size: var(--sape-font-size-14); margin: 0; }
.site-footer__links { display: grid; gap: var(--sape-spacing-2); margin-top: var(--sape-spacing-3); }
.site-footer__links a { color: color-mix(in srgb, var(--sape-color-text-inverse) 74%, transparent); text-decoration: none; font-size: var(--sape-font-size-14); }
.site-footer__links a:hover { color: var(--sape-color-text-inverse); text-decoration: none; }
.site-footer__founder { display: flex; align-items: center; gap: var(--sape-spacing-3); }
.site-footer__founder img { width: 88px; height: 88px; border-radius: var(--sape-radius-full); object-fit: cover; display: block; }
.site-footer__founder span { font-size: var(--sape-font-size-14); color: color-mix(in srgb, var(--sape-color-text-inverse) 74%, transparent); }
.site-footer__founder .brand-logo--dark-only { display: none; }
:root[data-theme="dark"] .site-footer__founder .brand-logo--dark-only { display: block; }
:root[data-theme="dark"] .site-footer__founder .brand-logo--light-only { display: none; }
.site-footer__legal { grid-column: 1 / -1; padding-top: var(--sape-spacing-5); border-top: var(--sape-border-width-hairline) solid color-mix(in srgb, var(--sape-color-text-inverse) 24%, transparent); font-size: var(--sape-font-size-12); color: color-mix(in srgb, var(--sape-color-text-inverse) 60%, transparent); }

/* Three columns fit down to ~640px (200 + 130 + 130 + two 32px gaps); below
   that, stack. */
@media (max-width: 640px) {
  .site-footer__inner { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .hero__inner { padding: var(--sape-spacing-10) 0 var(--sape-spacing-8); }
  .section-inner { padding: var(--sape-spacing-12) 0; }
}