/* Hero variants. Two families, one per reference (H2 and the TrendBible family, H4–H6, were cut on 26 Oct;
   they live on in rounds/r1):
   ev — evosoft: a giant left-set title, a five-column fact row, photo tiles closing the frame.
   dc — dc-dev: the theme line cascading word by word, one square card laid over it, meta in the corners. */

/* ================= ev ================= */
.ev {
  display: flex;
  flex-direction: column;
}

.ev__title {
  padding: var(--sp-stack-md) var(--lay-gutter) 0;
  color: var(--loud);
  font-size: var(--type-poster);
}

.ev__title > span {
  display: block;
}

.ev__facts {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--sp-stack-md);
  padding: var(--sp-stack-lg) var(--lay-gutter);
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
}

.ev__facts dt {
  color: var(--quiet);
}

.ev__facts dd {
  color: var(--ink);
}

.ev__facts div:last-child {
  text-align: right;
}

.ev__tiles {
  display: grid;
  grid-template-columns: 1.75fr 1fr;
  min-height: 34svh;
  margin-top: auto;
}

.ev__tiles--three {
  grid-template-columns: 1.3fr 1fr 1.3fr;
}

.ev-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-stack-md);
  padding: var(--sp-inset-lg);
  overflow: clip;
  color: var(--inverse-foreground);
}

.ev-tile img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ev-tile > :not(img) {
  position: relative;
}

.ev-tile__title {
  font-family: var(--font-display);
  font-size: var(--type-title);
  line-height: var(--text-h1--line-height);
}

.ev-tile__note {
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
}

.ev-tile--right img {
  object-position: right center;
}

.ev-tile .btn {
  align-self: flex-end;
}

.ev-tile--crimson {
  background: var(--primary);
  color: var(--primary-foreground);
}

@media (max-width: 899px) {
  .ev__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .ev__facts div:last-child {
    text-align: left;
  }

  .ev__tiles,
  .ev__tiles--three {
    grid-template-columns: 1fr;
  }

  .ev-tile {
    min-height: calc(var(--sp-section) * 2.4);
  }
}

/* Phones: a hero, not a fact sheet. The facts keep When and Where (the tracks, the numbers and who comes each
   have their own band further down), and the theme tile grows to fill the rest of the first screen, so the
   title, the date and place, and a photograph carrying the theme and the programme link read as one frame. */
@media (max-width: 599px) {
  .ev__facts {
    padding-block: var(--sp-stack-md);
  }

  .ev__facts div:nth-child(n + 3) {
    display: none;
  }

  .ev__tiles {
    flex: 1 0 auto;
    grid-template-rows: minmax(calc(var(--sp-section) * 2.6), 1fr);
    min-height: 0;
  }

  /* "1000+ attendees last year" has its own band (Audience); the hero keeps one photograph. */
  .ev-tile.ev-tile--right {
    display: none;
  }

  /* The theme sits on the crimson above the photograph, never on it (a busy photo cannot carry type);
     the button sits on the photograph's foot, where it covers no text. */
  .ev-tile {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 0;
    min-height: 0;
    padding: 0;
    color: var(--ink);
  }

  .ev-tile__title {
    padding: var(--sp-stack-sm) var(--lay-gutter) var(--sp-stack-md);
    font-size: var(--type-heading);
    line-height: var(--text-h2--line-height);
  }

  .ev-tile img {
    position: relative;
    grid-row: 2;
    grid-column: 1;
  }

  .ev-tile .btn {
    grid-row: 2;
    grid-column: 1;
    align-self: end;
    margin: var(--sp-inset-md) var(--lay-gutter);
  }
}

/* ================= dc ================= */
.dc {
  display: grid;
  place-items: center;
  padding: var(--sp-section) var(--lay-gutter);
}

.dc__corner {
  position: absolute;
  z-index: 2;
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
}

.dc__corner--tl {
  top: var(--sp-inset-lg);
  font-size: var(--text-lead);
  left: var(--lay-gutter);
}

.dc__corner--tr {
  top: var(--sp-inset-lg);
  right: var(--lay-gutter);
  max-width: var(--ms-xs);
  text-align: right;
  color: var(--quiet);
}

.dc__corner--bl {
  bottom: var(--sp-inset-lg);
  left: var(--lay-gutter);
  display: flex;
  align-items: end;
  gap: var(--sp-inset-xl);
}

.dc__est {
  display: grid;
  color: var(--quiet);
}

.dc__est b {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  line-height: 1;
  color: var(--ink);
}

.dc__corner--br {
  bottom: var(--sp-inset-lg);
  right: var(--lay-gutter);
}

.dc__stage {
  position: relative;
  width: min(100%, var(--lay-wide));
}

.dc__words {
  color: var(--loud);
  font-size: clamp(var(--text-h2), 6.9vw, var(--text-display));
  line-height: 0.98;
}

.dc__words > span {
  display: block;
  width: fit-content;
  white-space: nowrap;
}

.dc__words > span:nth-child(1) { margin-inline-start: 16%; }
.dc__words > span:nth-child(2) { margin-inline-start: 30%; }
.dc__words > span:nth-child(3) { margin-inline-start: 4%; }
.dc__words > span:nth-child(4) { margin-inline-start: 50%; }
.dc__words > span:nth-child(5) { margin-inline-start: 60%; }

.dc__card {
  position: absolute;
  top: 38%;
  left: 26%;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-stack-md);
  width: calc(var(--sp-section) * 3.1);
  aspect-ratio: 1;
  padding: var(--sp-inset-lg);
  transform: none;
  background: var(--card-ground);
  color: var(--card-ink);
  font-size: var(--text-small);
  line-height: var(--text-small--line-height);
}

.dc__card-title {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  line-height: var(--text-h3--line-height);
}

.dc__card a {
  margin-top: auto;
  width: fit-content;
  text-decoration-color: currentColor;
}

.dc.ground-paper {
  --card-ground: var(--palette-lapis-blue);
  --card-ink: var(--inverse-foreground);
}

.dc.ground-crimson {
  --card-ground: var(--accent);
  --card-ink: var(--accent-foreground);
}

/* The ticket block beside the card, the reference's round "Build with us" badge made square. */
.dc__ticket {
  position: absolute;
  top: 62%;
  left: calc(26% + var(--sp-section) * 3.1 + var(--sp-stack-md));
  z-index: 1;
  display: flex;
  align-items: center;
  gap: var(--sp-inset-sm);
  transform: translateY(-50%);
}

.dc__ticket .btn {
  background: var(--ink);
  color: var(--ticket-ink);
}

.dc.ground-paper {
  --ticket-ink: var(--background);
}

.dc.ground-crimson {
  --ticket-ink: var(--primary);
}

@media (max-width: 899px) {
  .dc {
    place-items: start;
    padding-block: calc(var(--sp-section) * 1.2) calc(var(--sp-section) * 1.6);
  }

  .dc__words {
    font-size: 12vw;
  }

  .dc__words > span:nth-child(n) {
    margin-inline-start: 0;
    white-space: normal;
  }

  .dc__words > span:nth-child(2n) {
    margin-inline-start: 18%;
  }

  .dc__card {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    aspect-ratio: auto;
    margin-top: var(--sp-stack-lg);
    transform: none;
  }

  .dc__ticket {
    position: static;
    margin-top: var(--sp-stack-md);
    transform: none;
  }

  .dc__corner--tr,
  .dc__corner--br {
    display: none;
  }
}