/* ==========================================================================
   blocks.css — the block layout system
   A block is a full-bleed horizontal band with its own surface colour and
   vertical padding. Its `.content` is centred and capped at --grid-width.
   ========================================================================== */

.block {
  position: relative;
  display: block;
  color: var(--color);
  background: var(--surface-color);
  padding-top: var(--padding-top, 80px);
  padding-bottom: var(--padding-bottom, 80px);
  word-break: break-word;
}

.block > .content {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  max-width: var(--container-width);
  padding-left: var(--site-margin);
  padding-right: var(--site-margin);
}

.block > .background {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* --- surfaces ----------------------------------------------------------- */

.surface-page {
  --surface-color: var(--s-page);
}

.surface-raised {
  --surface-color: var(--s-raised);
}

.surface-sunken {
  --surface-color: var(--s-sunken);
}

.surface-accent {
  --surface-color: var(--s-accent);
}

.surface-cover {
  --surface-color: var(--s-cover);
}

/*
 * Sandwiches the scroll line into the band: fill, then line, then copy. The
 * band keeps whatever surface it already had — this is not a surface, it is a
 * paint-order change, and it is `position: static` that does all of it.
 *
 * An unpositioned block's background paints in step 3 of the root stacking
 * context, before any positioned sibling. scroll-line.js's canvas is positioned
 * at `z-index: 0` (step 6), and `.block > .content` is positioned at `z-index:
 * 1` (step 7). So dropping `position: relative` here is the difference between
 * the band hiding the line and the band sitting under it, with the copy still
 * on top of both. Every other block stays positioned and keeps hiding it.
 *
 * Only safe on a band with no absolutely-positioned children of its own —
 * `.block > .background` needs the containing block, so `.cover` cannot use it.
 */
.block.under-line {
  position: static;
}

/* Full-bleed variant: no max-width, no side padding. */
.block.fluid > .content {
  max-width: 100%;
  padding: 0;
}

/* Alignment modifiers. */
.block.align-x-start > .content {
  text-align: left;
}

.block.align-x-center > .content {
  text-align: center;
}

.block.align-x-end > .content {
  text-align: right;
}

.block.align-y-start > .content {
  align-items: start;
}

.block.align-y-center > .content {
  align-items: center;
}

.block.align-y-end > .content {
  align-items: end;
}

/* --- media primitives -------------------------------------------------- */
/*
 * .media reserves the image's aspect ratio up front so nothing reflows as
 * images decode (the original used a <carbon-image> element for this).
 */

.media {
  position: relative;
  display: block;
  margin: 0 auto;
  width: 100%;
}

.media > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.media.zoomable {
  cursor: zoom-in;
}

/* --- cover ------------------------------------------------------------- */

.block.cover {
  width: 100%;
  height: var(--cover-height);
  padding: 0;
  overflow: hidden;
}

.block.cover > .content {
  display: grid;
  grid-template-columns: 1fr;
  height: 100%;
}

/* --- logo band --------------------------------------------------------- */

.block.logo-block {
  --color: var(--accent-color);
}

/* "OTHER CLIENTS" — the label some logo bands carry above the grid. */
.block.logo-block .band-title {
  margin-bottom: 20px;
  color: var(--band-title-color, var(--label-color));
  font-size: 1.81em;
  /* Stated rather than left to `normal`, which lands differently in Plus
     Jakarta Sans than in the original's Inter and costs 3px of band height. */
  line-height: 1.1;
  font-weight: 600;
  letter-spacing: 0.34em;
  text-align: center;
}

.block.logo-block .logo-grid {
  display: grid;
  grid-template-columns: repeat(var(--columns, 4), 1fr);
  gap: var(--gap-y, 100px) var(--gap-x, 100px);
  width: 100%;
  margin-top: 20px;
}

/*
 * The 20px above the grid is the title's bottom margin when there is a title,
 * and the grid's own top margin when there isn't — never both. Bands with no
 * title of their own (the case pages) keep the margin so they sit where the
 * original's whitespace-only heading left them.
 */
.block.logo-block .band-title + .logo-grid {
  margin-top: 0;
}

.block.logo-block .logo-grid .media {
  aspect-ratio: 1 / 1;
}

/* --- intro: narrow label column + wide body column --------------------- */

.block.intro > .content {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.block.intro .col-label {
  grid-column: 1 / 2;
  padding-right: 20px;
  color: var(--accent-color);
  font-size: var(--label-size, 3.5em);
  line-height: var(--label-leading, 1.2);
  font-weight: var(--label-weight, var(--title-weight));
}

.block.intro .col-body {
  grid-column: 2 / 5;
  font-size: var(--body-size, 1.7em);
  line-height: var(--body-leading, 1.61);
}

/* --- columns: two stacked image + caption pairs ------------------------ */

/*
 * Two real rows, images above captions, the way the original had it — the
 * images and the captions are direct children of the same grid, not two
 * self-contained columns.
 *
 * That distinction is load-bearing whenever the two images have different
 * aspect ratios: row 1 is as tall as the *taller* image, so both captions
 * start on the same line. Wrap each column in its own element instead and the
 * shorter image's caption rides up to meet it — 7px out on the VLI case, where
 * the pair is 120/167 against 960/1349.
 */
.block.columns > .content {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto auto;
  gap: 0 34px;
  align-items: start;
}

.block.columns .col-a {
  grid-column: 1;
}

.block.columns .col-b {
  grid-column: 2;
}

.block.columns > .content > .media {
  grid-row: 1;
}

.block.columns .caption-group {
  grid-row: 2;
  margin-top: 20px;
  font-size: 1.7em;
}

/*
 * The leading gaps use padding, not margin, so they can't collapse through
 * .caption-group and swallow its 20px offset from the image.
 *
 * Each default is a count of the blank paragraphs the original left there:
 * 3.6em is three blank 1.2 line boxes, 1.5em is one blank 1.5 line box. Cases
 * whose editor left a different number override the count — see basf/case.css.
 */
.block.columns .kicker,
.block.standard .kicker {
  padding-top: var(--kicker-lead, 3.6em);
  color: var(--label-color);
  font-weight: 600;
  line-height: var(--kicker-leading, 1.2);
}

/*
 * In a standard block the label is not a heading over its own column — it sits
 * inside the caption's paragraph flow, so it keeps the caption's leading rather
 * than tightening to 1.2. Without this the label's line box is 5px short and
 * everything below the image rides up.
 */
.block.standard .kicker {
  --kicker-leading: 1.5em;
}

.block.columns .caption,
.block.standard .caption {
  padding-top: var(--caption-lead, 1.5em);
  line-height: 1.5em;
}

/* Captions that ended on a blank line in the original. */
.block.columns .caption.trailing-space,
.block.standard .caption.trailing-space {
  padding-bottom: var(--caption-trail, 1.5em);
}

.block.columns .caption p + p,
.block.standard .caption p + p {
  margin-top: 0;
}

/* --- standard: one full-width image with its caption below ------------- */
/*
 * Used by the BASF and VLI cases. The original ran the caption to half the
 * text measure on desktop (`padding-right: 50%`) so it reads as a note beside
 * the image rather than as a full-width paragraph.
 */

.block.standard > .content {
  display: grid;
  grid-template-columns: 1fr;
}

.block.standard .caption-wrapper {
  padding: 10px 0;
  font-size: var(--caption-size, 1.7em);
  line-height: 1.5;
}

.block.standard.align-x-start .caption-wrapper {
  text-align: left;
  padding-right: 50%;
}

/* --- gallery: an even grid of captioned, zoomable images ---------------- */
/*
 * The Highlights page. Full-bleed, and its side padding is the gap itself, so
 * the tiles sit the same distance from the screen edge as they do from each
 * other.
 */

.block.gallery .gallery-grid {
  display: grid;
  grid-template-columns: repeat(var(--columns, 3), 1fr);
  gap: var(--gap-y, 26px) var(--gap-x, 26px);
  width: 100%;
}

.block.gallery.fluid .gallery-grid {
  padding: 0 var(--gap-x, 26px);
}

/* --- header / call to action ------------------------------------------- */

.block.header .headline {
  font-size: 5.9em;
  line-height: 1.2;
  font-weight: var(--title-weight);
}

.block.header .subheadline {
  font-size: 3.4em;
  line-height: 2;
}

/* --- responsive -------------------------------------------------------- */

@media (max-width: 768px) {
  .block {
    padding-top: min(40px, var(--padding-top, 40px));
    padding-bottom: min(40px, var(--padding-bottom, 40px));
  }

  .block.fluid {
    padding: var(--padding-top, 0) 0 var(--padding-bottom, 0);
  }

  .block.frame-continuation {
    padding-top: 0;
  }

  /* Single column everywhere; label sits above body. */
  .block.intro > .content,
  .block.columns > .content {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }

  .block.intro .col-label,
  .block.intro .col-body,
  .block.columns .col-a,
  .block.columns .col-b {
    grid-column: 1;
    padding-right: 0;
  }

  /* One stack, in document order: image, its caption, next image. */
  .block.columns > .content > .media,
  .block.columns .caption-group {
    grid-row: auto;
  }

  .block.intro .col-label {
    font-size: clamp(1em, var(--label-size, 3.5em), 7vw);
    margin-bottom: 20px;
  }

  .block.intro .col-body {
    font-size: clamp(1em, var(--body-size, 1.7em), 4vw);
  }

  .block.columns .col-b {
    margin-top: 40px;
  }

  .block.columns .caption-group {
    font-size: clamp(1em, 1.7em, 4vw);
  }

  .block.columns .kicker {
    padding-top: 20px;
  }

  .block.logo-block .logo-grid {
    --columns: 2;
    --gap-x: 40px;
    --gap-y: 40px;
  }

  /* A half-measure caption has nowhere to go on a phone. */
  .block.standard.align-x-start .caption-wrapper {
    padding-right: 0;
  }

  .block.standard .caption-wrapper {
    font-size: clamp(1em, var(--caption-size, 1.7em), 3.5vw);
  }

  .block.header .headline {
    font-size: clamp(1em, 5.9em, 7vw);
  }

  .block.header .subheadline {
    font-size: clamp(1em, 3.4em, 5vw);
  }
}