/* Brand layout grid — 6 equal-width columns, no gutter (cells sit
   flush, separated by borders where needed — see the brand guide's
   cover and business card layouts).

   Row template defaults to 3 rows: fixed top / fluid middle / fixed
   bottom (12rem / 1fr / 12rem), matching the cover layout. Override
   per-section via custom properties instead of hardcoding rows:

     <div class="brand-grid" style="--theme-grid-rows: 8rem 1fr;">

   or scope it in CSS:

     .hero__frame { --theme-grid-rows: 8rem 1fr; }

     .brand-grid            → 6-column grid, no gap
     .brand-grid--padded    → adds --theme-section-padding on all sides
     .col-1 .. .col-6       → span N columns (of 6)

   Dev-only overlay lives in grid-debug.css. */

:root {
  --theme-grid-columns: 6;
  --theme-grid-gutter: 0px;
  /* Half of the original clamp(5rem, 20svh, 10rem) — the size the
     header used to shrink to on scroll; it's now always this size. */
  --theme-grid-row-top: clamp(2.5rem, 10svh, 5rem);
  --theme-grid-row-bottom: var(--theme-grid-row-top);
  --theme-grid-rows: var(--theme-grid-row-top) 1fr var(--theme-grid-row-bottom);

  /* .site-header's rendered height (row-top + hairline) — and the
     sticky CTA bars', which match it. Reference this anywhere else needs
     to know how tall the fixed header actually is, instead of repeating
     the calc. */
  --theme-header-height: calc(var(--theme-grid-row-top) + var(--theme-line-width));

  /* Colour of the vertical brand-grid lines (.grid-lines below) — also
     for anything that should read as one of those lines (e.g. a single
     object's section nav edge). */
  --theme-grid-line-color: color-mix(in srgb, var(--brand-color-primary) 15%, transparent);
}

.brand-grid {
  display: grid;
  grid-template-columns: repeat(var(--theme-grid-columns), 1fr);
  grid-template-rows: var(--theme-grid-rows);
  gap: var(--theme-grid-gutter);
}

.brand-grid--padded {
  padding: var(--theme-section-padding);
}

.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;
}

.object-grid,
.news-grid {
  display: grid;
  grid-template-columns: repeat(var(--theme-grid-columns), 1fr);
  gap: 2rem;
  margin-top: var(--theme-space-sm);
  padding: var(--theme-line-width) 1rem 0 1rem;
}

@media (width <= 768px) {
  .object-grid,
  .news-grid {
    grid-template-columns: 1fr;
    padding-left: 0;
    padding-right: 0;
  }
}

/* Permanent, subtle version of grid-debug.css's column-line overlay —
   same 6-column boundary lines, brand-light at low opacity instead of
   debug red, always on (not gated behind .show-grid).

   .grid-lines is a standalone fixed element (markup in header.php),
   not a pseudo-element on <body> — that way its z-index can be set per
   page/section to sit above whichever background it should show
   through, instead of always being buried at the bottom of the stack. */
.grid-lines {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  mix-blend-mode: exclusion;
  opacity: .8;
  margin: var(--theme-section-padding);
  background-image: linear-gradient(
    to right,
    var(--theme-grid-line-color) 0, var(--theme-grid-line-color) 1px, transparent 1px,
    transparent calc((100% / 6) * 1 - 1px), var(--theme-grid-line-color) calc((100% / 6) * 1 - 1px), var(--theme-grid-line-color) calc((100% / 6) * 1), transparent calc((100% / 6) * 1),
    transparent calc((100% / 6) * 2 - 1px), var(--theme-grid-line-color) calc((100% / 6) * 2 - 1px), var(--theme-grid-line-color) calc((100% / 6) * 2), transparent calc((100% / 6) * 2),
    transparent calc((100% / 6) * 3 - 1px), var(--theme-grid-line-color) calc((100% / 6) * 3 - 1px), var(--theme-grid-line-color) calc((100% / 6) * 3), transparent calc((100% / 6) * 3),
    transparent calc((100% / 6) * 4 - 1px), var(--theme-grid-line-color) calc((100% / 6) * 4 - 1px), var(--theme-grid-line-color) calc((100% / 6) * 4), transparent calc((100% / 6) * 4),
    transparent calc((100% / 6) * 5 - 1px), var(--theme-grid-line-color) calc((100% / 6) * 5 - 1px), var(--theme-grid-line-color) calc((100% / 6) * 5), transparent calc((100% / 6) * 5),
    transparent calc(100% - 1px), var(--theme-grid-line-color) calc(100% - 1px), var(--theme-grid-line-color) 100%
  );
}