/*****************************************
***  Live Production — page layout      ***
***  Loads after cards.css and reuses   ***
***  .gear-card / .gear-photo from it.  ***
*****************************************/

/* Halves rather than thirds: this page pairs a text card with a partner
   across its whole length, which is the shape it already had.
   Widths and gaps match the original .center-container (75vw / 30px) so the
   page occupies the same footprint it did before. */
.live-grid {
  width: 90vw;
  margin: 0 auto 4rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  text-align: left;
  /* cards stretch to their partner's height so each row reads as one band */
  align-items: stretch;
}

.live-full {
  grid-column: 1 / -1;
}

/* The photo cluster beside the "We offer" card: a wide tile with a narrow
   one alongside, over a shorter pair — the old w-2/w-1 over w-2/w-1 split. */
.live-cluster {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.live-cluster .gear-photo {
  margin: 0;
}

/* the FreeSpeak tile links through to the About page */
.gear-photo a {
  display: block;
  height: 100%;
}

/* The undimmed photo treatment now lives in cards.css under `.bright-cards`,
   which this page's <main> carries. */

/*** the oversized statement list — MEETINGS / CONCERTS / PARTIES ***
   Selector carries `.gear-card ul` weight so it beats the generic list
   styling in cards.css, which would otherwise force IBM Plex at body size. */
.gear-card ul.live-headline {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: 'anton', Impact, sans-serif;
  text-transform: uppercase;
  letter-spacing: .03em;
  /* tops out at the original 4em of a 25px box = 100px */
  font-size: clamp(2.25rem, 1rem + 5.4vw, 6.25rem);
  line-height: 2;
  color: #fff;
}

.gear-card ul.live-headline li {
  margin: 0;
  list-style: none;
}

@media (min-width: 700px) {
  .live-grid {
    gap: 30px;
  }

  .live-cluster {
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
  }

  .lc-wide {
    grid-column: span 2;
  }

  /* Heights live here rather than in cards.css so the phone rule there
     (110px) still wins below this breakpoint. */
  .lc-tall img {
    height: 280px;
  }

  .lc-short img {
    height: 130px;
  }

  .live-full img {
    height: 200px;
  }
}

@media (min-width: 1080px) {
  .live-grid {
    width: 75vw;
    grid-template-columns: repeat(2, 1fr);
  }

  /* 3 rows of 200px + 2 gaps of 30px — the h-3 blocks of the old grid.
     min-height, not height, so long copy can still push a card taller
     rather than spilling out of it. */
  .live-grid .gear-card {
    min-height: 660px;
  }

  /* 430 + 30 + 200 = 660, matching the card beside it */
  .lc-tall img {
    height: 430px;
  }

  .lc-short img {
    height: 200px;
  }
}