/* ==========================================================================
   THEATRUM ANIMI — layout: container, grid, bands, the visible grid
   Ported verbatim from mockup/assets/css/layout.css. The hero section and
   the .hero__inner part of the breakpoint rules belong to the ta/hero block,
   the timeline to the ta/timeline block; stats are not ported (no page uses
   them). WordPress-only rules for this file's classes follow at the end.
   ========================================================================== */

.container {
  width: 100%;
  max-width: calc(var(--content-max) + var(--page-margin) * 2);
  margin-inline: auto;
  padding-inline: var(--page-margin);
}

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

/* repeat() will not accept a custom property for its count, so the column
   count is written literally and stepped down at each breakpoint. */
@media (max-width: 63.99em) {
  .grid, .split { grid-template-columns: repeat(8, minmax(0, 1fr)); }
}
@media (max-width: 47.99em) {
  .grid, .split { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid--2 { grid-template-columns: 1fr; }
}

/* column spans — collapse to full width below 768 */
.col-3  { grid-column: span 3; }
.col-4  { grid-column: span 4; }
.col-5  { grid-column: span 5; }
.col-6  { grid-column: span 6; }
.col-7  { grid-column: span 7; }
.col-8  { grid-column: span 8; }
.col-12 { grid-column: span 12; }
.col-start-7 { grid-column: 7 / span 6; }
.col-start-8 { grid-column: 8 / span 5; }
.col-start-9 { grid-column: 9 / span 4; }

@media (max-width: 63.99em) {
  .col-3, .col-4  { grid-column: span 4; }
  .col-5, .col-6, .col-7, .col-8, .col-12 { grid-column: span 8; }
  .col-start-7, .col-start-8, .col-start-9 { grid-column: span 8; }
}
@media (max-width: 47.99em) {
  .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-12,
  .col-start-7, .col-start-8, .col-start-9 { grid-column: span 4; }
}

/* --- bands ---------------------------------------------------------------- */

.band { padding-block: clamp(3rem, 1.5rem + 6vw, 6rem); }
.band--tight { padding-block: clamp(2rem, 1rem + 4vw, 3.5rem); }
.band--sunken { background: var(--color-surface-sunken); }
.band--raised { background: var(--color-surface-raised); }
.band--inverse { background: var(--color-surface-inverse); color: var(--color-ink-inverse); }
.band--deep { background: var(--color-surface-deep); color: var(--color-ink-inverse); }
.band--rule { border-top: var(--border-hairline) solid var(--color-border-default); }

.band__header { margin-bottom: var(--space-2xl); }
.band__header .lead { margin-top: var(--space-md); }

/* a heading row with an action pinned to the right */
.band__head-row {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-2xl);
}

/* --- the visible grid device ---------------------------------------------- */
/* Decorative only: hidden from assistive technology, drawn under type,
   never used as the sole means of understanding a layout. */

.gridlines { position: relative; isolation: isolate; }
.gridlines > * { position: relative; z-index: 1; }
.gridlines::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  inset-inline: var(--page-margin);
  background-image: repeating-linear-gradient(
    to right,
    var(--grid-rule-light) 0 1px,
    transparent 1px calc((100% + var(--grid-gutter)) / 12)
  );
}
.gridlines--dark::before { background-image: repeating-linear-gradient(
    to right,
    var(--grid-rule-dark) 0 1px,
    transparent 1px calc((100% + var(--grid-gutter)) / 12)
  ); }
@media (max-width: 63.99em) {
  .gridlines::before { background-size: auto; background-image: repeating-linear-gradient(
    to right,
    var(--grid-rule-light) 0 1px,
    transparent 1px calc((100% + var(--grid-gutter)) / 8)
  ); }
  .gridlines--dark::before { background-size: auto; background-image: repeating-linear-gradient(
    to right,
    var(--grid-rule-dark) 0 1px,
    transparent 1px calc((100% + var(--grid-gutter)) / 8)
  ); }
}
@media (max-width: 47.99em) {
  .gridlines::before { background-size: auto; background-image: repeating-linear-gradient(
    to right,
    var(--grid-rule-light) 0 1px,
    transparent 1px calc((100% + var(--grid-gutter)) / 4)
  ); }
  .gridlines--dark::before { background-size: auto; background-image: repeating-linear-gradient(
    to right,
    var(--grid-rule-dark) 0 1px,
    transparent 1px calc((100% + var(--grid-gutter)) / 4)
  ); }
}

/* --- editorial split ------------------------------------------------------ */

.split {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--grid-gutter);
  align-items: start;
}
.split__text { grid-column: span 5; }
.split__media { grid-column: 7 / span 6; }
.split--reverse .split__text { grid-column: 8 / span 5; }
.split--reverse .split__media { grid-column: span 6; }
@media (max-width: 63.99em) {
  .split__text, .split__media,
  .split--reverse .split__text, .split--reverse .split__media { grid-column: 1 / -1; }
}

/* Editorial images are cropped to a consistent ratio so a portrait source
   never stretches the row it sits in. */
.split__media > img,
.figure > img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.figure figcaption { margin-top: var(--space-xs); }

/* --- generic card grids --------------------------------------------------- */

.cards {
  display: grid;
  gap: var(--space-lg) var(--grid-gutter);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
}
.cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 47.99em) { .cards--2 { grid-template-columns: 1fr; } }
.cards--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); }

/* --- numbered pillars ----------------------------------------------------- */

.pillars { display: grid; gap: var(--space-2xl) var(--grid-gutter); grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.pillar { border-top: var(--border-rule) solid var(--color-rasa); padding-top: var(--space-md); }
.pillar h3 { margin-top: var(--space-sm); }
.pillar p { margin-top: var(--space-xs); color: var(--color-ink-secondary); }

/* --- work-package list ---------------------------------------------------- */

.wp-list { list-style: none; margin: 0; padding: 0; }
.wp-list li {
  display: grid;
  grid-template-columns: 4rem 14rem 1fr;
  gap: var(--space-md);
  padding-block: var(--space-lg);
  border-top: var(--border-hairline) solid var(--color-border-subtle);
}
.wp-list__id { font-family: var(--font-display); font-weight: 900; font-size: 1.375rem; }
.wp-list p { color: var(--color-ink-secondary); }
@media (max-width: 63.99em) { .wp-list li { grid-template-columns: 4rem 1fr; } .wp-list li > p { grid-column: 2; } }

/* --- WordPress -------------------------------------------------------------- */

/* Card grids: core/post-template renders ul > li.wp-block-post, and the grid
   classes sit on the ul. Each li stretches its card to the row height, like
   the mockup's article elements did as direct grid items. */
.cards > .wp-block-post { display: flex; flex-direction: column; }
.cards > .wp-block-post > * { flex: 1 1 auto; }

/* Work-package rows are core groups rendered as ul > li (section-wp-list);
   the id is a paragraph there, not a span, so the description-only rules
   of the mockup leave it alone. */
.wp-list .wp-list__id { color: var(--color-ink-primary); }
@media (max-width: 63.99em) { .wp-list li > .wp-list__id { grid-column: auto; } }

/* Row, Stack, Grid and similar layouts an Editor builds keep a gap, as core
   gives them when the root block gap is set; zero specificity, so every
   mockup class and every gap an Editor picks still wins. */
:where(.is-layout-flex, .is-layout-grid) { gap: var(--wp--style--block-gap); }

/* Core spaces these two blocks with the root block gap; the mockup spaces
   its excerpts and leads with its own classes (mt-md and the like). */
:where(.wp-block-post-excerpt, .wp-block-term-description) { margin-block: 0; }

/* Post and page bodies are a flow of full-bleed sections, each holding its
   own .container (bands, heroes, campaign sections, the login split) or
   being one (the body patterns' text and figure rows). Any other block an
   Editor puts straight into a body, such as a paragraph typed under the
   title, gets that place too: inside the page margins, on the container's
   left edge, at the full container width. Sibling
   blocks of that kind are spaced like prose, and kept clear of the bands
   around them, of the site header on pages that start with one (the
   transparent header lies over the page) and of the footer. The sections
   themselves are not touched. */
.wp-block-post-content > :where(:not(.band, .container, .hero, .grid, .ctc-section)) {
  max-width: var(--measure);
  margin-inline: max(var(--page-margin), (100% - var(--content-max)) / 2) var(--page-margin);
}
.wp-block-post-content > * + :where(:not(.band, .container, .hero, .grid, .ctc-section)) { margin-top: var(--space-md); }
.wp-block-post-content > :is(.band, .hero, .grid, .ctc-section) + :where(:not(.band, .container, .hero, .grid, .ctc-section)),
.wp-block-post-content > :where(:not(.band, .container, .hero, .grid, .ctc-section)) + :is(.band, .hero, .grid, .ctc-section),
main > .wp-block-post-content > :where(:not(.band, .container, .hero, .grid, .ctc-section)):first-child { margin-top: var(--space-2xl); }
.site-header--transparent + main > .wp-block-post-content > :where(:not(.band, .container, .hero, .grid, .ctc-section)):first-child {
  margin-top: calc(var(--header-height) + var(--space-2xl));
}
main > .wp-block-post-content > :where(:not(.band, .container, .hero, .grid, .ctc-section)):last-child { margin-bottom: var(--space-2xl); }
/* Floated blocks keep the same edges; core's flow layout sets their outer
   margin to 0. */
.wp-block-post-content > .alignleft { margin-inline-start: max(var(--page-margin), (100% - var(--content-max)) / 2); }
.wp-block-post-content > .alignright { margin-inline-end: max(var(--page-margin), (100% - var(--content-max)) / 2); }