/* Kaligraf Design — Layout System
   12-column responsive grid, container, bleed rules, spacing utilities.
   Depends on: design-system.css
   Source: spec/phase-2/00-design-foundation.md §2 */

/* ══════════════════════════════════════════════════════════
   CONTAINER
   Max-width 1280px, centered, outer margin min 40px.
   At 1440px: outer margin = 80px per side.
   ══════════════════════════════════════════════════════════ */

.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: max(var(--grid-outer-margin-desktop), calc((100vw - var(--grid-max-width)) / 2));
  padding-right: max(var(--grid-outer-margin-desktop), calc((100vw - var(--grid-max-width)) / 2));
}

/* ══════════════════════════════════════════════════════════
   GRID — 12-column (desktop)
   CSS Grid with named column lines for bleed helpers.
   ══════════════════════════════════════════════════════════ */

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--grid-gutter-desktop);
}

/* Column span classes — 1 through 12 */
.col-1  { grid-column: span 1; }
.col-2  { grid-column: span 2; }
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-9  { grid-column: span 9; }
.col-10 { grid-column: span 10; }
.col-11 { grid-column: span 11; }
.col-12 { grid-column: span 12; }

/* Column start positions (for explicit grid placement) */
.col-start-1  { grid-column-start: 1; }
.col-start-2  { grid-column-start: 2; }
.col-start-3  { grid-column-start: 3; }
.col-start-4  { grid-column-start: 4; }
.col-start-5  { grid-column-start: 5; }
.col-start-6  { grid-column-start: 6; }
.col-start-7  { grid-column-start: 7; }
.col-start-8  { grid-column-start: 8; }
.col-start-9  { grid-column-start: 9; }

/* ══════════════════════════════════════════════════════════
   BLEED RULES
   Source: spec/phase-2/00-design-foundation.md §2
   ══════════════════════════════════════════════════════════ */

/* Full bleed: 100vw, ignores all margins and gutters.
   For: HOME hero reel, CASE STUDY hero, FILM & MOTION sections. */
.bleed {
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  width: 100vw;
}

/* Partial bleed right: content left, image bleeds past right margin to 100vw.
   For: split-layout sections where copy sits left, image extends right. */
.bleed-right {
  margin-right: calc(-50vw + 50%);
}

/* Partial bleed left: mirror of bleed-right. */
.bleed-left {
  margin-left: calc(-50vw + 50%);
}

/* ══════════════════════════════════════════════════════════
   SECTION PADDING
   Apply padding-top and padding-bottom to <section> blocks.
   ══════════════════════════════════════════════════════════ */

.section-sm {
  padding-top: var(--section-pad-sm);
  padding-bottom: var(--section-pad-sm);
}

.section-md {
  padding-top: var(--section-pad-md);
  padding-bottom: var(--section-pad-md);
}

.section-lg {
  padding-top: var(--section-pad-lg);
  padding-bottom: var(--section-pad-lg);
}

/* ══════════════════════════════════════════════════════════
   COMPONENT GAP UTILITIES
   ══════════════════════════════════════════════════════════ */

.gap-sm { gap: var(--component-gap-sm); }
.gap-md { gap: var(--component-gap-md); }
.gap-lg { gap: var(--component-gap-lg); }

/* ══════════════════════════════════════════════════════════
   MARGIN / PADDING UTILITIES
   ══════════════════════════════════════════════════════════ */

/* Margin-top */
.mt-xs  { margin-top: var(--space-xs); }
.mt-sm  { margin-top: var(--space-sm); }
.mt-md  { margin-top: var(--space-md); }
.mt-lg  { margin-top: var(--space-lg); }
.mt-xl  { margin-top: var(--space-xl); }
.mt-xxl { margin-top: var(--space-xxl); }

/* Margin-bottom */
.mb-xs  { margin-bottom: var(--space-xs); }
.mb-sm  { margin-bottom: var(--space-sm); }
.mb-md  { margin-bottom: var(--space-md); }
.mb-lg  { margin-bottom: var(--space-lg); }
.mb-xl  { margin-bottom: var(--space-xl); }
.mb-xxl { margin-bottom: var(--space-xxl); }

/* Margin component-gap scale */
.mt-gap-sm  { margin-top: var(--component-gap-sm); }
.mt-gap-md  { margin-top: var(--component-gap-md); }
.mt-gap-lg  { margin-top: var(--component-gap-lg); }
.mb-gap-sm  { margin-bottom: var(--component-gap-sm); }
.mb-gap-md  { margin-bottom: var(--component-gap-md); }
.mb-gap-lg  { margin-bottom: var(--component-gap-lg); }

/* Padding horizontal */
.px-sm  { padding-left: var(--space-sm);  padding-right: var(--space-sm); }
.px-md  { padding-left: var(--space-md);  padding-right: var(--space-md); }
.px-lg  { padding-left: var(--space-lg);  padding-right: var(--space-lg); }
.px-xl  { padding-left: var(--space-xl);  padding-right: var(--space-xl); }

/* Padding vertical */
.py-sm  { padding-top: var(--space-sm);   padding-bottom: var(--space-sm); }
.py-md  { padding-top: var(--space-md);   padding-bottom: var(--space-md); }
.py-lg  { padding-top: var(--space-lg);   padding-bottom: var(--space-lg); }
.py-xl  { padding-top: var(--space-xl);   padding-bottom: var(--space-xl); }

/* ══════════════════════════════════════════════════════════
   FLEXBOX UTILITIES
   ══════════════════════════════════════════════════════════ */

.flex         { display: flex; }
.flex-col     { flex-direction: column; }
.flex-center  { align-items: center; justify-content: center; }
.flex-between { align-items: center; justify-content: space-between; }
.flex-start   { align-items: flex-start; }
.flex-end     { align-items: flex-end; }
.flex-wrap    { flex-wrap: wrap; }
.flex-nowrap  { flex-wrap: nowrap; }
.flex-1       { flex: 1; }
.flex-shrink-0 { flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════
   HERO SECTION
   100svh, relative positioning for overlaid nav and text.
   ══════════════════════════════════════════════════════════ */

.hero {
  position: relative;
  height: 100svh;
  overflow: hidden;
  display: flex;
  align-items: flex-end;  /* text cluster anchored lower-left by default */
}

/* Text cluster within hero */
.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
}

/* Background media (video or image) */
.hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Deep Indigo scrim over hero media */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: var(--scrim-gradient);
  pointer-events: none;
}

/* Solid scrim variant (for high text-density heroes) */
.hero__scrim--solid {
  background: var(--scrim-solid);
}

/* ══════════════════════════════════════════════════════════
   ASPECT RATIO CONTAINERS
   ══════════════════════════════════════════════════════════ */

.ar-hero-wide { aspect-ratio: 16 / 9; }
.ar-editorial { aspect-ratio: 4 / 3; }
.ar-square    { aspect-ratio: 1 / 1; }
.ar-portrait  { aspect-ratio: 2 / 3; }
.ar-cinematic { aspect-ratio: 21 / 9; }

/* 9:16 vertical — letterboxed container for ZH market */
.ar-vertical {
  aspect-ratio: 9 / 16;
  max-width: 450px;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
}

/* Deep Indigo letterbox sides for 9:16 on desktop */
.letterbox-vertical {
  max-width: 450px;
  aspect-ratio: 9 / 16;
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  background: linear-gradient(
    to right,
    #2D1B4E 0%,
    transparent 35%,
    transparent 65%,
    #2D1B4E 100%
  );
}

/* Images and videos fill their containers */
.media-fill {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ══════════════════════════════════════════════════════════
   SCRIM UTILITY
   ══════════════════════════════════════════════════════════ */

.scrim {
  position: relative;
}

.scrim::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--scrim-gradient);
  pointer-events: none;
}

.scrim--solid::after {
  background: var(--scrim-solid);
}

/* ══════════════════════════════════════════════════════════
   VIDEO COMPONENT
   Autoplay rules: muted, playsinline, poster required.
   ══════════════════════════════════════════════════════════ */

/* reel-fade token: opacity 0→1, 600ms, 1000ms delay */
.hero__reel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  opacity: 0;
  animation: fade-in-enter var(--motion-reel-fade) var(--ease-out)
             var(--motion-reel-fade-delay) forwards;
}

/* Video in text flow: max-width 1024px, centred, aspect-ratio locked */
.video-inline {
  max-width: 1024px;
  margin-left: auto;
  margin-right: auto;
  aspect-ratio: 16 / 9;
  width: 100%;
  display: block;
  overflow: hidden;
}

.video-inline video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ══════════════════════════════════════════════════════════
   DISPLAY UTILITIES
   ══════════════════════════════════════════════════════════ */

.hidden        { display: none !important; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Background color utilities */
.bg-primary   { background-color: var(--color-bg-primary); }
.bg-secondary { background-color: var(--color-bg-secondary); }
.bg-charcoal  { background-color: var(--color-bg-charcoal); }

/* Text color utilities */
.text-on-dark        { color: var(--color-text-on-dark); }
.text-on-dark-muted  { color: var(--color-text-on-dark-muted); }
.text-on-light       { color: var(--color-text-on-light); }
.text-on-light-muted { color: var(--color-text-on-light-muted); }
.text-accent         { color: var(--color-accent); }