/* ============================================================================
   Alpha Branding Studio — Layout
   assets/css/layout.css
   ----------------------------------------------------------------------------
   Structural scaffolding only: containers, sections, grids, flex helpers,
   content wrappers, media, and overflow control.
   Depends on tokens.css + base.css (enqueue in that order).

   Contract:
   - Uses ONLY variables from tokens.css. No literal design values.
   - Layout concerns only — no components, buttons, or typography.
   - Mobile-first: base rules are the small-screen state; @media adds up.
   - Logical properties throughout for writing-mode / i18n safety.
   ============================================================================ */


/* ==========================================================================
   1. CONTAINERS
   Centered, gutter-padded wrappers. `--container-*` come from tokens.css.
   ========================================================================== */

.container,
.container-wide,
.container-narrow {
  inline-size: 100%;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container {
  max-inline-size: var(--container-max);      /* 1240px — standard content   */
}

.container-wide {
  max-inline-size: var(--container-wide);      /* 1440px — hero / galleries   */
}

.container-narrow {
  max-inline-size: var(--container-narrow);    /* 760px — long-form reading   */
}

/* Full-bleed: edge to edge, no max-width, no gutter. For imagery/Ink bands. */
.container-full {
  inline-size: 100%;
  max-inline-size: none;
  margin-inline: 0;
  padding-inline: 0;
}

/* Break a child out of a constrained container to full viewport width
   without an overflow-x on the ancestor. Useful for full-bleed media
   nested inside a .container reading column. */
.container .full-bleed {
  inline-size: 100vw;
  margin-inline: calc(50% - 50vw);
}


/* ==========================================================================
   2. SECTION LAYOUT
   Vertical rhythm via block padding. `--section-*` are fluid clamp() tokens.
   ========================================================================== */

.section {
  padding-block: var(--section-md);            /* default rhythm              */
}

.section-sm {
  padding-block: var(--section-sm);            /* tight, related blocks       */
}

.section-lg {
  padding-block: var(--section-lg);            /* major breaks                */
}

.section-hero {
  padding-block-start: var(--section-lg);      /* room under the sticky header*/
  padding-block-end: var(--section-lg);
}

/* Statement / breather sections that need maximum air */
.section-xl {
  padding-block: var(--section-xl);
}

/* Collapse the seam between two same-toned sections (e.g. stacked Ink bands)
   so their combined padding doesn't double up. */
.section + .section-flush,
.section-flush {
  padding-block-start: 0;
}

/* Header offset helper for the first section on pages without a hero, so
   content clears the sticky header. */
.section-first {
  padding-block-start: calc(var(--header-height) + var(--section-md));
}


/* ==========================================================================
   3. GRID SYSTEM
   Mobile-first: everything starts single-column, expands at breakpoints.
   Gap defaults to the fluid --grid-gap token; override with gap helpers.
   ========================================================================== */

.grid {
  display: grid;
  gap: var(--grid-gap);
}

/* Fixed-count grids — single column on mobile, target count at md/lg.
   `minmax(0, 1fr)` prevents min-content blowouts (long words, media). */
.grid-2,
.grid-3,
.grid-4 {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 768px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1024px) {
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Auto-fit: responsive without media queries. Column count derives from
   available width and a sensible minimum track. */
.grid-auto {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
}

.grid-auto-sm {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
}

/* Asymmetric editorial splits (7/5) — the "framed subject" wireframe pattern.
   Stacks on mobile, splits at lg. */
.grid-split {
  display: grid;
  gap: var(--grid-gap);
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 1024px) {
  .grid-split      { grid-template-columns: 7fr 5fr; }
  .grid-split-even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-split-rev  { grid-template-columns: 5fr 7fr; }
}

/* Featured cell spans two columns where the grid has room (Portfolio grid). */
@media (min-width: 768px) {
  .grid-2 > .span-2,
  .grid-3 > .span-2,
  .grid-4 > .span-2 {
    grid-column: span 2;
  }
}

/* Masonry-ready structure. Uses native CSS masonry where supported and a
   balanced multi-column fallback everywhere else (progressive enhancement). */
.grid-masonry {
  column-gap: var(--grid-gap);
  columns: 1;
}

@media (min-width: 768px) {
  .grid-masonry { columns: 2; }
}

@media (min-width: 1024px) {
  .grid-masonry { columns: 3; }
}

.grid-masonry > * {
  break-inside: avoid;
  margin-block-end: var(--grid-gap);
}

@supports (grid-template-rows: masonry) {
  .grid-masonry {
    display: grid;
    columns: auto;
    column-gap: 0;
    gap: var(--grid-gap);
    grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
    grid-template-rows: masonry;
  }
  .grid-masonry > * {
    margin-block-end: 0;
  }
}

/* Gap helpers — token-driven, apply to any grid or flex container. */
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.gap-5 { gap: var(--space-5); }
.gap-6 { gap: var(--space-6); }
.gap-7 { gap: var(--space-7); }


/* ==========================================================================
   4. FLEX UTILITIES
   Structural flex primitives only.
   ========================================================================== */

.flex {
  display: flex;
  gap: var(--grid-gap);
}

.flex-row {
  display: flex;
  flex-direction: row;
  gap: var(--grid-gap);
}

.flex-col {
  display: flex;
  flex-direction: column;
  gap: var(--grid-gap);
}

.flex-wrap {
  flex-wrap: wrap;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-align-center {
  align-items: center;
}

.flex-align-start {
  align-items: flex-start;
}

.flex-align-end {
  align-items: flex-end;
}

.flex-justify-center {
  justify-content: center;
}

.flex-justify-end {
  justify-content: flex-end;
}

/* Let a flex child grow / hold / shrink predictably */
.flex-1 {
  flex: 1 1 0%;
  min-inline-size: 0;   /* allow shrink below content size (prevents overflow) */
}

.flex-none {
  flex: none;
}


/* ==========================================================================
   5. CONTENT WRAPPERS
   Page shell + reading-measure wrappers.
   ========================================================================== */

/* Sticky-footer page shell */
.page-wrapper {
  display: flex;
  flex-direction: column;
  min-block-size: 100vh;
  min-block-size: 100svh;
}

.site-main {
  flex: 1 0 auto;   /* main grows so the footer sits at the bottom */
}

.site-header,
.site-footer {
  flex-shrink: 0;
}

/* Constrain flowing content to an optimal reading measure. */
.content-width {
  max-inline-size: var(--measure);
  margin-inline: auto;
}

.content-narrow {
  max-inline-size: var(--measure-narrow);
  margin-inline: auto;
}

.content-wide {
  max-inline-size: var(--measure-wide);
  margin-inline: auto;
}

/* Article body: long-form prose column (Single Blog / case study).
   Media inside can opt out of the measure via .full-bleed above. */
.prose {
  max-inline-size: var(--measure);
  margin-inline: auto;
}


/* ==========================================================================
   6. RESPONSIVE LAYOUT HELPERS
   Explicit stacking / reordering that supplements the mobile-first grids.
   ========================================================================== */

/* Force any grid/flex container to a single column below md. */
@media (max-width: 767px) {
  .stack-mobile {
    display: flex;
    flex-direction: column;
    gap: var(--grid-gap);
  }

  /* Reverse stack so a primary column (e.g. Contact form) leads on mobile. */
  .stack-mobile-reverse {
    display: flex;
    flex-direction: column-reverse;
    gap: var(--grid-gap);
  }

  /* Full-width children when stacked (buttons, media). */
  .stack-mobile > .stack-fill {
    inline-size: 100%;
  }
}

/* Order helpers for split layouts that need the media/copy swapped per size. */
@media (min-width: 1024px) {
  .order-first { order: -1; }
  .order-last  { order: 1; }
}


/* ==========================================================================
   7. MEDIA HANDLING
   Responsive media + aspect-ratio frames (CLS-safe: reserve space).
   ========================================================================== */

/* Fluid media baseline (base.css sets display/max-inline-size; this adds
   object-fit for cropped fills inside fixed-ratio frames). */
img,
video {
  block-size: auto;
  max-inline-size: 100%;
}

/* Aspect-ratio frame: wrap media, reserve space, crop to fill. */
.media-frame {
  position: relative;
  overflow: hidden;
  inline-size: 100%;
  background-color: var(--bg-surface);   /* placeholder tone before load */
}

.media-frame > img,
.media-frame > video,
.media-frame > iframe {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* Ratio modifiers (WIREFRAMES: 16:9 covers, 4:5 portraits, 1:1 tiles). */
.ratio-16-9 { aspect-ratio: 16 / 9; }
.ratio-4-5  { aspect-ratio: 4 / 5; }
.ratio-3-2  { aspect-ratio: 3 / 2; }
.ratio-1-1  { aspect-ratio: 1 / 1; }
.ratio-21-9 { aspect-ratio: 21 / 9; }

/* Simple responsive image that scales in flow (no crop). */
.img-fluid {
  display: block;
  inline-size: 100%;
  block-size: auto;
}

/* Responsive iframe / embed (video, maps) without a wrapper element. */
iframe,
embed,
object {
  max-inline-size: 100%;
}

.embed {
  position: relative;
  inline-size: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.embed > iframe,
.embed > video {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  border: 0;
}

/* Legacy WordPress oEmbed wrapper support */
.wp-block-embed__wrapper {
  position: relative;
}

/* Constrain WordPress-inserted figures/galleries to flow width */
figure.wp-block-image img,
.wp-block-gallery img {
  block-size: auto;
}


/* ==========================================================================
   8. OVERFLOW HANDLING
   ========================================================================== */

/* Guard against horizontal scroll leaking from oversized descendants. */
html,
body {
  overflow-x: clip;   /* clip (not hidden) keeps position:sticky working */
}

/* Long unbroken strings (URLs, tokens) wrap instead of forcing width. */
.break-word {
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

/* Opt-in horizontal scroll region (wide tables, code, chip rows) with
   momentum scrolling and no vertical bleed. */
.scroll-x {
  inline-size: 100%;
  max-inline-size: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-inline: contain;
}

/* Wide tables become horizontally scrollable within their wrapper. */
.table-wrap {
  inline-size: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-wrap > table {
  min-inline-size: max-content;
}

/* Grid/flex children must be allowed to shrink or they overflow the track. */
.grid > *,
.flex > *,
.flex-row > * {
  min-inline-size: 0;
}