/* ──────────────────────────────────────────────────────────────
   Case study template — editorial header

   Overrides the Webflow-generated rules rather than editing
   terry-mota.webflow.css, which is a generated file and would lose
   these changes on the next export.

   The old header was a bordered box holding a bordered box: an outer
   0.5px frame around a tinted panel, with the metadata set in bold
   monospace at body size, competing with the title. This removes both
   frames and rebuilds the block as type on the page — eyebrow, title,
   standfirst, quiet metadata — with the rhythm doing the work the
   borders were doing.
   ────────────────────────────────────────────────────────────── */

/* ── strip the frames ── */
.cases_layout-2 {
  border: 0;
}

.block-header-2 {
  background-color: transparent;
  border: 0;
  padding: 5rem 0 3.5rem;
  gap: 0;
}

/* Every content section below the header is the same construction as the
   header was: a tinted panel with a hairline rule on top. Leaving those
   in place would have made the page minimal for one screen and boxed for
   the rest. Space carries the separation instead. */
.cases_inner-header,
.cases_inner-header-fit,
.cases_inner-2,
.cases_inner-2-two-columns,
.cases_inner-3 {
  border: 0;
  background-color: transparent;
}

/* Give the prose a measure. With the tinted panels gone, body copy was
   running the full container — around 135 characters a line on a wide
   screen, which is roughly double what is comfortable to read. Editorial
   layout is as much about where the line stops as about what is removed.
   Only applied from tablet up; below that the column is already narrow. */
@media (min-width: 768px) {
  .cases_right .text-size-large,
  .cases_right .text-weight-light,
  .cases_item .text-size-large,
  .cases_item .text-weight-light {
    max-width: 68ch;
  }
}

/* ── eyebrow: the client, not the project ── */
/* Same treatment as .pfc__eyebrow on the case cards, so the two
   surfaces speak the same language. */
.case-eyebrow {
  margin: 0 0 1.25rem;
  font-size: 0.625rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--text-color--text-primary);
  opacity: 0.7;
  line-height: 1.4;
}

/* ── title ── */
.block-header-2 .ascii-hero-title {
  margin: 0;
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-weight: 300;
  font-size: clamp(2.4rem, 5.2vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--text-color--text-primary);
  /* Long titles break better when they are allowed to wrap early,
     rather than running the full width of a wide viewport. */
  max-width: 20ch;
  text-wrap: balance;
}

/* The old markup wrapped parts of the title in <strong>. Nothing here
   should suddenly jump to 700 against a 300 face. */
.block-header-2 .ascii-hero-title strong {
  font-weight: inherit;
}

/* ── standfirst: what the project was ── */
.case-standfirst {
  margin: 1.75rem 0 0;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  font-weight: 300;
  line-height: 1.55;
  letter-spacing: -0.01em;
  color: var(--text-color--text-secondary);
  /* Roughly 60 characters: the measure prose is comfortable at. */
  max-width: 46ch;
}

/* ── metadata: present, not loud ── */
.case-meta {
  margin: 2.5rem 0 0;
  font-size: 0.75rem;
  font-weight: 300;
  letter-spacing: 0.04em;
  line-height: 1.6;
  color: var(--text-color--text-secondary);
}

.case-meta span + span::before {
  content: "·";
  margin: 0 0.6em;
  opacity: 0.5;
}

/* ── images ── */
/* Rounded, but not uniformly. The hero carries the largest radius
   because it is the biggest surface and the curve reads as intentional
   at that scale; inline figures take a smaller one so they sit quietly
   in the reading column. Anything running edge to edge stays square —
   a radius on a full-bleed element only looks like a mistake. */
/* The hero wrapper is not named consistently across the six pages —
   .cases_inner-header-fit on two, .cases_inner-header on the rest — so
   both are matched. Missing one would have left three heroes square
   while the others curved. */
.cases_inner-header-fit img,
.cases_inner-header img {
  border-radius: 1.75rem;
  overflow: hidden;
}

.cases_image,
.cases_image-2,
.cases_image-3,
.cases_image-4,
.image-2,
.image-4 {
  border-radius: 1rem;
  overflow: hidden;
}

/* Lightbox anchors wrap the images; without this the anchor's own square
   box clips the corners back off. */
.cases_inner-header-fit .lightbox-link,
.cases_inner-header .lightbox-link {
  border-radius: 1.75rem;
  overflow: hidden;
  display: block;
}

.lightbox-link:has(.cases_image),
.lightbox-link:has(.cases_image-2),
.lightbox-link:has(.cases_image-3),
.lightbox-link:has(.cases_image-4),
.lightbox-link:has(.image-2),
.lightbox-link:has(.image-4) {
  border-radius: 1rem;
  overflow: hidden;
  display: block;
}

/* ── responsive ── */
@media (max-width: 767px) {
  .block-header-2 {
    padding: 3rem 0 2.25rem;
  }
  .block-header-2 .ascii-hero-title {
    font-size: clamp(2rem, 9vw, 2.75rem);
    max-width: none;
  }
  .case-standfirst { margin-top: 1.25rem; }
  .case-meta { margin-top: 1.75rem; }
  .cases_inner-header-fit img { border-radius: 1.25rem; }
}