/* =========================================================
   Lirem Inc. — Responsive System Layer
   Loaded AFTER style.css. Implements the fluid/adaptive spec:
   fluid type & spacing, container system, container queries,
   logical properties, dvh/svh heroes, touch & a11y, safe-area,
   and structural (non-hack) horizontal-overflow prevention.
   ========================================================= */

/* ----------------------------------------------------------
   1) Fluid tokens — spacing & layout scale (clamp-based)
   ---------------------------------------------------------- */
:root {
  /* Fluid spacing ramp (min @375px … max @1440px+) */
  --space-3xs: clamp(2px,  0.3vw,  4px);
  --space-2xs: clamp(4px,  0.5vw,  8px);
  --space-xs:  clamp(8px,  1vw,   14px);
  --space-sm:  clamp(12px, 1.4vw, 20px);
  --space-md:  clamp(18px, 2.4vw, 32px);
  --space-lg:  clamp(28px, 4vw,   56px);
  --space-xl:  clamp(40px, 6vw,   88px);
  --space-2xl: clamp(56px, 9vw,  128px);

  /* Section rhythm & grid gutters (fluid) */
  --section-pad: clamp(64px, 9vw, 140px);
  --grid-gap:    clamp(20px, 4vw, 64px);

  /* Container: cap + fluid inline padding (px-6 … 2xl:px-28 ≈ 24…112) */
  --container-max: 1440px;
  --container-pad: clamp(24px, 6vw, 112px);

  /* A11y-tuned muted text (≥4.5:1 on white & on --c-bg-soft) */
  --c-muted: #5A6678; /* WCAG AA: ~5.0:1 on #fff, ~4.7:1 on #F6F9FC */
}

/* ----------------------------------------------------------
   2) Container system (logical properties + safe-area)
   ---------------------------------------------------------- */
.container,
.container-narrow {
  max-inline-size: var(--container-max);
  /* inline padding respects notches/safe areas on both sides */
  padding-inline: max(var(--container-pad), env(safe-area-inset-left), env(safe-area-inset-right));
  margin-inline: auto;
}
.container-narrow { max-inline-size: min(920px, var(--container-max)); }

@media (min-width: 1680px) { :root { --container-max: 1680px; } }
@media (min-width: 1920px) { :root { --container-max: 1920px; } }

/* Section vertical rhythm → logical block padding */
.section { padding-block: var(--section-pad); padding-inline: 0; }

/* ----------------------------------------------------------
   3) Fluid typography (spec scale; no fixed px, relative line-height)
   Component-specific sizes in style.css are more specific and keep
   their own identity (hero headline, kinetic display, etc.).
   ---------------------------------------------------------- */
h1 { font-size: clamp(22px, calc(14px + 1.55vw), 48px); line-height: 1.18; }
h2 { font-size: clamp(20px, calc(12px + 1.2vw),  38px); line-height: 1.3; }
h3 { font-size: clamp(18px, calc(12px + 0.8vw),  26px); line-height: 1.35; }
p  { font-size: clamp(13px, calc(9px  + 0.4vw),  18px); line-height: 1.8; }

/* Readable measure for long-form body text (character-based, never fixed px) */
.section-lede,
.page-hero .lede,
.hero-sub,
.hero-statement,
.mv-narrative p,
.mv-jp-large,
.stat-desc,
.cta p,
.footer-brand p {
  max-inline-size: min(70ch, 100%);
}

/* ----------------------------------------------------------
   4) Structural horizontal-overflow prevention (no overflow-x hack)
   ---------------------------------------------------------- */
/* Flex/grid children must be allowed to shrink below content size */
.hero-grid > *, .footer-grid > *, .cta-inner > *, .mv-row > *,
.about-grid > *, .mvv-grid > *, .showcase-grid > *, .header-inner > *,
[class*="-grid"] > *, [class*="-list"] > * { min-inline-size: 0; }

/* Long unbroken strings (URLs, IDs) never push layout wider */
p, li, a, dd, dt, h1, h2, h3, h4, h5, .news-title, .service-tagline {
  overflow-wrap: anywhere;
}

/* Intentionally-wide, animated components clip locally (component-level, not root) */
.marquee, .image-marquee, .big-scroll, .hero, .page-hero { overflow-x: clip; }

/* ----------------------------------------------------------
   5) Hero — body copy width (fluid) + viewport-correct height
   ---------------------------------------------------------- */
.hero-statement,
.hero-sub { max-inline-size: clamp(420px, 38vw, 760px); }

/* Full-bleed page heroes: lvh as max guard, svh stable floor, dvh when supported */
.image-hero,
.cinematic-stage,
[data-fullbleed-hero] {
  min-block-size: 100svh;
}
@supports (height: 100dvh) {
  .image-hero,
  .cinematic-stage,
  [data-fullbleed-hero] { min-block-size: 100dvh; }
}

/* ----------------------------------------------------------
   6) Container Queries — components adapt to THEIR width, not the page
   ---------------------------------------------------------- */
.member-grid,
.service-list,
.stat-block,
.footer-grid,
.news-list,
.portfolio-grid,
.cta-inner { container-type: inline-size; }

.member { container-type: inline-size; }
/* Stack the member card label tighter when the card itself gets narrow */
@container (max-width: 200px) {
  .member-body { padding-inline: var(--space-2xs); }
  .member-role { font-size: clamp(10px, 5cqi, 13px); }
}

/* News rows collapse to stacked when their container is tight */
.news-list { container-type: inline-size; }
@container (max-width: 560px) {
  .news-item { grid-template-columns: 1fr; gap: var(--space-2xs); }
  .news-cat { justify-self: start; }
}

/* CTA splits to single column based on its own width */
@container (max-width: 720px) {
  .cta-inner { grid-template-columns: 1fr; gap: var(--space-lg); }
}

/* ----------------------------------------------------------
   7) Touch targets & input-aware hover isolation
   ---------------------------------------------------------- */
/* Every interactive control meets the 44px minimum target */
.btn,
.menu-toggle,
.nav a,
.mobile-nav a,
.faq-q,
button,
input[type="submit"],
.news-item,
.service-item {
  min-block-size: 44px;
}
.btn { padding: clamp(12px, 1.4vw, 16px) clamp(20px, 2.4vw, 30px); }
.menu-toggle { min-inline-size: 44px; min-block-size: 44px; }

/* Hover effects only where a real hover pointer exists (no sticky hover on touch) */
@media (hover: hover) and (pointer: fine) {
  .btn-ghost:hover::after { transform: translateX(4px); }
}
/* Touch devices get press feedback instead of hover (augments style.css block) */
@media (hover: none) {
  a:hover, .btn:hover, .nav a:hover { transform: none; }
}

/* ----------------------------------------------------------
   8) Focus visibility & reduced motion
   ---------------------------------------------------------- */
:focus-visible {
  outline: 3px solid var(--c-primary-dark);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Suppress the legacy mouse-focus ring, keep keyboard ring */
:focus:not(:focus-visible) { outline: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
}

/* ----------------------------------------------------------
   9) Media: WebP delivery is layout-neutral.
   <picture> wrappers must not create a box (keeps img as the
   real flex/grid child so object-fit / 100% sizing still works).
   ---------------------------------------------------------- */
picture { display: contents; }
img { height: auto; }                 /* honor width/height attrs → no distortion */
.member-photo--img img,
.mv-photo img, .mv-photo-single img,
.portfolio-card-img img, .showcase-thumb img,
.image-marquee-item img, .ceo-card img {
  inline-size: 100%; block-size: 100%; height: 100%; object-fit: cover;
}

/* ----------------------------------------------------------
   10) Mobile drawer — safe-area, scroll-lock, accessible sizing
   ---------------------------------------------------------- */
@media (max-width: 1024px) {
  .mobile-nav {
    padding-block: max(32px, env(safe-area-inset-top));
    padding-inline: max(24px, env(safe-area-inset-left), env(safe-area-inset-right));
    padding-bottom: max(32px, env(safe-area-inset-bottom));
    inset: 0;
    padding-top: calc(72px + env(safe-area-inset-top));
  }
  .mobile-nav a { min-block-size: 48px; display: flex; align-items: center; }
}
/* Scroll-lock when drawer open (JS also pins scroll position for iOS) */
body.menu-open { overflow: hidden; touch-action: none; }

/* Header respects the notch */
.site-header { padding-top: max(18px, env(safe-area-inset-top)); }
.site-header.is-scrolled { padding-top: max(12px, env(safe-area-inset-top)); }