/*
 * Fortico Starter — layout.css
 *
 * Layout utilities: containers, full-bleed, section wrappers.
 * These are the classes blocks use. No visual design here — only structure.
 */

/* ── Containers ─────────────────────────────────────────────────────────────── */

/*
 * .container
 * Standard page-width container, centred with fluid gutter.
 * Use for the majority of block content.
 */
.container {
  width: min(
    var(--container-max),
    100% - (var(--container-gutter) * 2)
  );
  margin-inline: auto;
}

/*
 * .container--wide
 * Wider container for hero sections or edge-to-edge layouts.
 */
.container--wide {
  width: min(
    var(--container-wide),
    100% - (var(--container-gutter) * 2)
  );
  margin-inline: auto;
}

/*
 * .container--narrow
 * Constrained container for prose, editorial content.
 */
.container--narrow {
  width: min(
    var(--container-narrow),
    100% - (var(--container-gutter) * 2)
  );
  margin-inline: auto;
}

/* ── Full-width breakout ────────────────────────────────────────────────────── */
/*
 * .full-width
 * Breaks out of any container to span 100vw.
 * Use on elements nested inside a container that need to be full bleed.
 */
.full-width {
  width:         100vw;
  margin-inline: calc(50% - 50vw);
}

/* ── Section wrapper ────────────────────────────────────────────────────────── */
/*
 * .section
 * Vertical rhythm for block sections.
 * Applied automatically in block templates — not usually needed directly.
 */
.section {
  padding-block: var(--section-padding);
}

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

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

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

/* ── Surface variants ───────────────────────────────────────────────────────── */
/*
 * Background surface classes for sections.
 * Blocks set these via a 'background' ACF field → data-surface attribute.
 */
[data-surface="light"] {
  background-color: var(--color-bg);
  color:            var(--color-text);
}

[data-surface="alt"] {
  background-color: var(--color-bg-alt);
  color:            var(--color-text);
}

[data-surface="dark"] {
  background-color: var(--color-bg-dark);
  color:            var(--color-text-inverse);
  --color-heading:  var(--color-heading-inverse);
}

[data-surface="darker"] {
  background-color: var(--color-bg-darker);
  color:            var(--color-text-inverse);
  --color-heading:  var(--color-heading-inverse);
}

/* ── Grid system ────────────────────────────────────────────────────────────── */
.grid {
  display:               grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
  gap:                   var(--grid-gap);
}

/* Shorthand column spans */
.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-6  { grid-column: span 6; }
.col-8  { grid-column: span 8; }
.col-12 { grid-column: span 12; }

/* ── Flex utilities ─────────────────────────────────────────────────────────── */
.flex          { display: flex; }
.flex-col      { flex-direction: column; }
.items-centre  { align-items: center; }
.items-start   { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-centre  { justify-content: center; }
.flex-wrap     { flex-wrap: wrap; }
.gap-sm        { gap: var(--space-sm); }
.gap-md        { gap: var(--space-md); }
.gap-lg        { gap: var(--space-lg); }

/* ── Text alignment ─────────────────────────────────────────────────────────── */
.text-left    { text-align: left; }
.text-centre  { text-align: center; }
.text-right   { text-align: right; }

/* ── Visibility ─────────────────────────────────────────────────────────────── */
.hide-mobile {
  display: none;
}
@media (min-width: 48rem) {
  .hide-mobile {
    display: revert;
  }
}

.hide-desktop {
  display: revert;
}
@media (min-width: 48rem) {
  .hide-desktop {
    display: none;
  }
}

/* ── Skip link ──────────────────────────────────────────────────────────────── */
.skip-link {
  position:   absolute;
  top:        var(--space-sm);
  left:       var(--space-sm);
  z-index:    var(--z-max);
  padding:    var(--space-xs) var(--space-sm);
  background: var(--color-primary);
  color:      var(--color-text-inverse);
  border-radius: var(--radius-sm);
  font-weight:   var(--font-weight-semibold);
  transform:  translateY(-200%);
  transition: transform var(--transition-fast);
}

.skip-link:focus {
  transform: translateY(0);
}