/*
 * AH Digital — Layout Foundation
 *
 * Containers, sections, grids and reusable structural primitives.
 * Component visuals belong in components.css.
 */

:root {
  --ah-layout-columns: 12;
  --ah-layout-gap: clamp(20px, 2.4vw, 32px);
  --ah-content-reading: 68ch;
}

/* Site shell */

.ah-site {
  width: 100%;
  min-height: 100vh;
  overflow: clip;
}

.ah-site-main {
  width: 100%;
}

/* Containers */

.ah-container {
  width: min(
    calc(100% - (var(--ah-gutter) * 2)),
    var(--ah-container-wide)
  );
  margin-inline: auto;
}

.ah-container--narrow {
  max-width: var(--ah-container-narrow);
}

.ah-container--standard {
  max-width: var(--ah-container-standard);
}

.ah-container--wide {
  max-width: var(--ah-container-wide);
}

.ah-container--feature {
  max-width: var(--ah-container-feature);
}

/*
 * Useful for sections that need full-bleed backgrounds while keeping
 * their actual content aligned to the normal site grid.
 */
.ah-full-bleed {
  width: 100%;
}

/* Section rhythm */

.ah-section {
  position: relative;
  width: 100%;
  padding-block: var(--ah-section-space);
}

.ah-section--compact {
  padding-block: clamp(48px, 6vw, 88px);
}

.ah-section--tight {
  padding-block: clamp(32px, 4vw, 64px);
}

.ah-section--flush {
  padding-block: 0;
}

.ah-section--surface {
  background: var(--ah-color-surface);
}

.ah-section--soft {
  background: var(--ah-color-surface-soft);
}

.ah-section__inner {
  position: relative;
  z-index: 1;
}

/* Vertical rhythm */

.ah-stack {
  display: flex;
  flex-direction: column;
  gap: var(--ah-stack-gap, var(--ah-space-5));
}

.ah-stack--sm {
  --ah-stack-gap: var(--ah-space-3);
}

.ah-stack--md {
  --ah-stack-gap: var(--ah-space-5);
}

.ah-stack--lg {
  --ah-stack-gap: var(--ah-space-7);
}

.ah-stack--xl {
  --ah-stack-gap: var(--ah-space-9);
}

/* Horizontal grouping */

.ah-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ah-cluster-gap, var(--ah-space-4));
}

.ah-cluster--between {
  justify-content: space-between;
}

.ah-cluster--center {
  justify-content: center;
}

/* Generic grid */

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

.ah-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ah-grid--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ah-grid--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ah-grid--auto {
  grid-template-columns: repeat(
    auto-fit,
    minmax(min(100%, var(--ah-grid-min, 260px)), 1fr)
  );
}

/* Twelve-column composition grid */

.ah-grid-12 {
  display: grid;
  grid-template-columns: repeat(var(--ah-layout-columns), minmax(0, 1fr));
  gap: var(--ah-layout-gap);
}

.ah-span-12 {
  grid-column: span 12;
}

.ah-span-8 {
  grid-column: span 8;
}

.ah-span-7 {
  grid-column: span 7;
}

.ah-span-6 {
  grid-column: span 6;
}

.ah-span-5 {
  grid-column: span 5;
}

.ah-span-4 {
  grid-column: span 4;
}

.ah-span-3 {
  grid-column: span 3;
}

/* Split compositions */

.ah-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(32px, 5vw, 80px);
}

.ah-split--wide-visual {
  grid-template-columns:
    minmax(0, 0.82fr)
    minmax(0, 1.18fr);
}

.ah-split--wide-copy {
  grid-template-columns:
    minmax(0, 1.12fr)
    minmax(0, 0.88fr);
}

.ah-split--top {
  align-items: start;
}

/* Readable content */

.ah-reading-width {
  max-width: var(--ah-content-reading);
}

.ah-content-narrow {
  width: min(100%, var(--ah-container-narrow));
}

.ah-content-center {
  margin-inline: auto;
}

/* Media / interface framing layout */

.ah-media-frame {
  width: 100%;
  min-width: 0;
}

.ah-media-frame > img,
.ah-media-frame > video,
.ah-media-frame > picture,
.ah-media-frame > iframe {
  width: 100%;
}

/* Sidebar composition */

.ah-with-sidebar {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(240px, 320px);
  align-items: start;
  gap: clamp(32px, 5vw, 72px);
}

.ah-with-sidebar--left {
  grid-template-columns:
    minmax(240px, 320px)
    minmax(0, 1fr);
}

/* Alignment helpers */

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

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

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

.ah-justify-start {
  justify-content: start;
}

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

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

.ah-justify-between {
  justify-content: space-between;
}

/* Safe intrinsic sizing */

.ah-grid > *,
.ah-grid-12 > *,
.ah-split > *,
.ah-with-sidebar > * {
  min-width: 0;
}

/* WordPress alignment support */

.entry-content > :where(
  :not(.alignfull):not(.alignwide)
) {
  max-width: var(--ah-container-narrow);
  margin-inline: auto;
}

.entry-content > .alignwide {
  width: min(
    calc(100% - (var(--ah-gutter) * 2)),
    var(--ah-container-wide)
  );
  max-width: none;
  margin-inline: auto;
}

.entry-content > .alignfull {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}

/*
 * Preserve vertical rhythm for native WordPress content without imposing
 * a visual card system on editorial blocks.
 */
.entry-content > * + * {
  margin-block-start: var(--ah-space-5);
}

.entry-content > h2 {
  margin-block-start: var(--ah-space-9);
}

.entry-content > h3 {
  margin-block-start: var(--ah-space-7);
}

/* Sticky primitive */

.ah-sticky {
  position: sticky;
  inset-block-start: var(--ah-sticky-offset, 96px);
}

/* Layer helpers */

.ah-layer {
  position: relative;
}

.ah-layer > * {
  position: relative;
  z-index: 1;
}

/* Prevent decorative layers from blocking interaction */

.ah-decoration {
  pointer-events: none;
  user-select: none;
}

/* Responsive structural fallback */

@media (max-width: 1023px) {
  .ah-grid--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ah-grid-12 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .ah-grid-12 > [class*="ah-span-"] {
    grid-column: span 6;
  }

  .ah-split,
  .ah-split--wide-visual,
  .ah-split--wide-copy,
  .ah-with-sidebar,
  .ah-with-sidebar--left {
    grid-template-columns: minmax(0, 1fr);
  }

  .ah-sticky {
    position: static;
  }
}

@media (max-width: 767px) {
  :root {
    --ah-layout-gap: 20px;
  }

  .ah-section {
    padding-block: clamp(56px, 16vw, 88px);
  }

  .ah-section--compact {
    padding-block: clamp(40px, 11vw, 64px);
  }

  .ah-section--tight {
    padding-block: clamp(28px, 8vw, 48px);
  }

  .ah-grid--2,
  .ah-grid--3,
  .ah-grid--4 {
    grid-template-columns: minmax(0, 1fr);
  }

  .ah-grid-12 {
    grid-template-columns: minmax(0, 1fr);
  }

  .ah-grid-12 > [class*="ah-span-"] {
    grid-column: auto;
  }

  .ah-cluster {
    align-items: stretch;
  }
}