/* ==========================================================================
   Layout — Page structure, containers, grid, spacing utilities
   Centred composition. Generous whitespace. Editorial register.
   ========================================================================== */

/* ==========================================================================
   Page wrapper — root structural element
   ========================================================================== */
.page-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}

.page-main {
  flex: 1;
}

/* ==========================================================================
   Containers — width-restricted content blocks
   ========================================================================== */

/* Page container — outer maximum, always centred */
.container {
  width: 100%;
  max-width: var(--width-page);
  margin-inline: auto;
  padding-inline: var(--pad-mobile);
}

@media (min-width: 768px) {
  .container {
    padding-inline: var(--pad-tablet);
  }
}

@media (min-width: 1280px) {
  .container {
    padding-inline: var(--pad-desktop);
  }
}

/* Content container — default reading column */
.container-content {
  width: 100%;
  max-width: var(--width-content);
  margin-inline: auto;
  padding-inline: var(--pad-mobile);
}

@media (min-width: 768px) {
  .container-content {
    padding-inline: var(--pad-tablet);
  }
}

/* Prose container — body-prose maximum (680px), long-form reading */
.container-prose {
  width: 100%;
  max-width: var(--width-prose);
  margin-inline: auto;
  padding-inline: var(--pad-mobile);
}

@media (min-width: 768px) {
  .container-prose {
    padding-inline: 0;
  }
}

/* Narrow container — italic reflection, intimate prose */
.container-narrow {
  width: 100%;
  max-width: var(--width-narrow);
  margin-inline: auto;
  padding-inline: var(--pad-mobile);
}

/* Wide container — image breakouts, gallery */
.container-wide {
  width: 100%;
  max-width: var(--width-wide);
  margin-inline: auto;
  padding-inline: var(--pad-mobile);
}

@media (min-width: 768px) {
  .container-wide {
    padding-inline: var(--pad-tablet);
  }
}

/* Full-bleed — edge-to-edge (used for hero imagery) */
.container-full {
  width: 100%;
  max-width: 100%;
  padding-inline: 0;
}

/* ==========================================================================
   Grid — used sparingly, for sub-page card grids and gallery layouts
   ========================================================================== */
.grid {
  display: grid;
  gap: var(--space-5);
}

.grid-2 {
  grid-template-columns: 1fr;
}

.grid-3 {
  grid-template-columns: 1fr;
}

.grid-4 {
  grid-template-columns: 1fr;
}

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

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

/* Auto-fit grid — for editorial card grids that adapt */
.grid-auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-5);
}

/* ==========================================================================
   Sections — vertical rhythm
   ========================================================================== */

.section-sm {
  padding-block: var(--space-6);
}

.section-lg {
  padding-block: var(--space-9);
}

@media (min-width: 1024px) {
  .section-lg {
    padding-block: var(--space-10);
  }
}

/* Section with top divider — small ochre mark */
.section-divided {
  position: relative;
}

.section-divided::before {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  background-color: var(--colour-ochre);
  margin-inline: auto;
  margin-block-end: var(--space-6);
  transform: rotate(45deg);
}

/* ==========================================================================
   Stack — vertical flow control, the most-used layout primitive
   Adds consistent vertical spacing between direct children.
   ========================================================================== */
.stack > * + * {
  margin-block-start: var(--space-3);
}

.stack-tight > * + * {
  margin-block-start: var(--space-2);
}

.stack-loose > * + * {
  margin-block-start: var(--space-5);
}

.stack-section > * + * {
  margin-block-start: var(--space-7);
}

/* ==========================================================================
   Cluster — horizontal flow control, for inline groups (tags, links, metadata)
   ========================================================================== */
.cluster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: center;
}

.cluster-tight {
  gap: var(--space-2);
}

.cluster-loose {
  gap: var(--space-5);
}

/* ==========================================================================
   Centre — flex utility for centred composition
   ========================================================================== */
.centre {
  display: flex;
  align-items: center;
  justify-content: center;
}

.centre-text {
  text-align: center;
}

/* ==========================================================================
   Spacing utilities — ad-hoc margin overrides
   Use sparingly. Prefer .stack and component-defined spacing.
   ========================================================================== */
.mb-0 { margin-block-end: 0; }
.mb-1 { margin-block-end: var(--space-1); }
.mb-2 { margin-block-end: var(--space-2); }
.mb-3 { margin-block-end: var(--space-3); }
.mb-4 { margin-block-end: var(--space-4); }
.mb-5 { margin-block-end: var(--space-5); }
.mb-6 { margin-block-end: var(--space-6); }
.mb-7 { margin-block-end: var(--space-7); }

.mt-0 { margin-block-start: 0; }
.mt-1 { margin-block-start: var(--space-1); }
.mt-2 { margin-block-start: var(--space-2); }
.mt-3 { margin-block-start: var(--space-3); }
.mt-4 { margin-block-start: var(--space-4); }
.mt-5 { margin-block-start: var(--space-5); }
.mt-6 { margin-block-start: var(--space-6); }
.mt-7 { margin-block-start: var(--space-7); }

/* ==========================================================================
   Aspect ratios — for image placeholders and embedded media
   ========================================================================== */
.aspect-square {
  aspect-ratio: 1 / 1;
}

.aspect-portrait {
  aspect-ratio: 3 / 4;
}

.aspect-landscape {
  aspect-ratio: 4 / 3;
}

.aspect-cinema {
  aspect-ratio: 21 / 9;
}

.aspect-video {
  aspect-ratio: 16 / 9;
}

.aspect-wide {
  aspect-ratio: 3 / 2;
}

/* ==========================================================================
   Image breakout — escapes prose container width
   Used inside .container-prose to break to .container-wide width.
   ========================================================================== */
.breakout-wide {
  width: 100vw;
  max-width: var(--width-wide);
  margin-inline: calc(50% - 50vw);
  margin-inline: max(calc(50% - 50vw), calc((-1) * (var(--width-wide) - 100%) / 2));
}

@media (min-width: 1200px) {
  .breakout-wide {
    margin-inline: calc((var(--width-prose) - var(--width-wide)) / 2);
  }
}

.breakout-full {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* ==========================================================================
   Display utilities — show/hide at breakpoints
   ========================================================================== */
.hide-mobile {
  display: none;
}

@media (min-width: 768px) {
  .hide-mobile {
    display: initial;
  }
  .hide-tablet {
    display: none;
  }
}

@media (min-width: 1024px) {
  .hide-tablet {
    display: initial;
  }
  .hide-desktop {
    display: none;
  }
}

/* ==========================================================================
   Flow utilities — text alignment
   ========================================================================== */
.text-left { text-align: left; }
.text-centre { text-align: center; }
.text-right { text-align: right; }
.text-balance { text-wrap: balance; }
.text-pretty { text-wrap: pretty; }