/* =================================================
   HOME PAGE (index.njk)
   Hero section, Up-Next cards, Start-with-a-jam paths,
   Who We Are blog card & testimonial quotes.
   ================================================= */

/* -------------------------------------------------
   HOME HERO
------------------------------------------------- */

/* Identity block (who we are / what improv is) plus a fast path into events,
   with a compact "up next" card alongside. */
.home-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin: 0 0 2.5rem;
}

.home-hero-eyebrow {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 0.5rem;
}

.home-hero-heading {
  font-size: 2.1rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--ink);
  margin: 0;
}

@media (min-width: 900px) {
  .home-hero-heading { font-size: 2.8rem; }
}

@media (min-width: 1200px) {
  .home-hero-heading { font-size: 3rem; }
}

.home-hero-lede {
  font-size: 1.02rem;
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 34rem;
  margin: 0.8rem 0 0;
}

@media (min-width: 900px) {
  .home-hero-lede { font-size: 1.15rem; }
}

@media (min-width: 1200px) {
  .home-hero-lede { font-size: 1.25rem; }
}

.home-hero-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin: 1.4rem 0 0;
}

/* Holds the (up to two) stacked "up next" cards in the hero's right column.
   On desktop it's the flex child of .home-hero (see the 760px block); the
   cards stack inside it. The cards are deliberately more compact than the
   single-card hero so two fit without towering over the intro. */
.home-hero-cards {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Smaller stacked cards: trimmer poster share, tighter body, smaller title. */
.home-hero-cards .home-hero-next-media {
  flex-basis: 42%;
}

.home-hero-cards .home-hero-next-body {
  padding: 0.9rem 1rem;
  gap: 0.3rem;
}

.home-hero-cards .home-hero-next-title {
  font-size: 1.15rem;
}

/* Compact "up next" card. Square, flat aesthetic to match the event cards. */
.home-hero-next {
  position: relative;
  display: flex;
  align-items: stretch;
  background: var(--card-bg-vert);
  border: 3px solid var(--ink);
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: 6px 6px 0 var(--accent, var(--ink));
}

.home-hero-next:hover {
  transform: translate(-2px, -2px);
  box-shadow: 9px 9px 0 var(--accent, var(--ink));
}

/* Poster wrapper: takes the larger share of the card width and is the
   positioning context for the keyword pills overlaid on the artwork. The info
   column gets the smaller remainder. */
.home-hero-next-media {
  position: relative;
  flex: 1 1 60%;
  min-width: 0;
  align-self: stretch;
  background: var(--ink);
  line-height: 0;
  /* Ink divider between poster and body, matching the poster/body split on the
     /events and per-event cards. */
  border-right: 3px solid var(--ink);
}

/* Poster fills its wrapper (cover, no letterbox by default). */
.home-hero-next-poster {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  background: var(--ink);
}

/* Desktop side-by-side: the body content (title, pills, date, button) makes the
   card fairly tall, and a narrow `cover` slot crops the portrait poster to a
   thin strip. Show the whole poster instead (contain on the ink backing) so it
   reads as a real poster and scales cleanly when the root font size grows.
   Centred so the ink framing sits evenly around it. */
@media (min-width: 760px) {
  .home-hero-next-poster {
    object-fit: contain;
    object-position: center;
  }
}

.home-hero-next-body {
  display: flex;
  flex: 1 1 40%;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  gap: 0.4rem;
  padding: 1.2rem 1.3rem;
}

.home-hero-next-kicker {
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* The hero body is a flex column, which stretches its children full width by
   default. Keep the type badge hugging its content so the JAM/SHOW pill doesn't
   balloon into a full-width bar. */
.home-hero-next-body .event-type-badge {
  align-self: flex-start;
}

/* Type badge + keyword pills on one wrapping row (homepage only). The pills sit
   next to SHOW/JAM/WORKSHOP instead of overlaying the poster. */
.home-hero-next-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.home-hero-next-tags .event-type-badge {
  margin-bottom: 0;
}

/* Flatten the pills for the card body: drop the poster-overlay shadow and use a
   hairline border, matching the inline-pill treatment used elsewhere. */
.home-hero-next-tags .pill {
  box-shadow: none;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

.home-hero-next-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.15;
  text-decoration: none;
}

.home-hero-next-title::after {
  content: " →";
  color: var(--text-faint);
}

/* The title is a "stretched link": its ::before covers the whole card so a
   click anywhere (except interactive children) goes to the event page. The
   card itself is no longer an <a>, leaving room for the Buy Ticket button. */
.home-hero-next-stretch::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* Buy Ticket sits on its own row just under the date, lifted above the
   stretched-link title so it keeps its own click. When the live ticket check
   swaps in "Sold Out" + an injected "Get in touch", the two share this row:
   nowrap keeps them side by side on one line instead of stacking, and the
   buttons shrink to fit rather than wrapping. */
.home-hero-next-cta {
  position: relative;
  z-index: 2;
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
}

/* Trim the buttons so "Sold Out" + "Get in touch" both fit the narrow card
   without wrapping. Smaller padding/font than the default .btn. */
.home-hero-next-cta .btn {
  padding: 0.45rem 0.7rem;
  font-size: 0.82rem;
}

/* Prominent date + time on the hero card, reusing the events-page .event-when
   tile and time chip (components.css) so the two never drift. Tuned a touch
   tighter for the smaller hero card. */
.home-hero-when {
  margin-top: 0.2rem;
  margin-bottom: 0;
}

.home-hero-when .event-when-detail {
  gap: 0.35rem;
}

.home-hero-when .event-when-time {
  align-self: flex-start;
}

/* Fallback hero card shown when nothing is on the live feed. No poster, so the
   body fills the card and the blurb carries it. */
.home-hero-next-empty .home-hero-next-body {
  padding: 1.6rem 1.5rem;
}

.home-hero-next-blurb {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text-muted);
}

@media (min-width: 760px) {
  .home-hero-next-empty .home-hero-next-blurb { font-size: 1.08rem; }
}

/* Same "+N more dates" flag on the home hero card. Plain text (whole card is
   a link), so no hover state. */
.home-hero-next-tag {
  display: inline-block;
  margin-left: 0.35rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--blue);
  background: #eaf0fe;
  border: 1px solid #cfddfb;
  border-radius: 999px;
  padding: 0.05rem 0.45rem;
  white-space: nowrap;
}

@media (min-width: 760px) {
  .home-hero {
    flex-direction: row;
    align-items: center;
    gap: 2.5rem;
  }
  .home-hero-intro { flex: 1 1 48%; }
  /* The cards wrapper is the flex child when events exist; the bare
     .home-hero-next is the flex child in the empty-state fallback (no
     wrapper). Both take the column and stretch full height. */
  .home-hero-cards,
  .home-hero > .home-hero-next {
    flex: 1 1 52%;
    align-self: stretch;
  }
  .home-hero-heading { font-size: 2.5rem; }
  .home-hero-lede { font-size: 1.1rem; }
  .home-hero-next-title { font-size: 1.6rem; }
}

/* Mobile: stack poster over body. Show the whole poster (contain, its own
   portrait ratio) so the artwork is never cropped; the ink backing frames any
   letterboxing. Capped height keeps the stacked cards from running long. */
@media (max-width: 759px) {
  .home-hero-next { flex-direction: column; }
  .home-hero-next-media { align-self: stretch; }
  .home-hero-next-poster {
    width: 100%;
    height: auto;
    max-height: 60vh;
    object-fit: contain;
    object-position: center;
  }
  .home-hero-next-body { padding: 1rem 1.2rem 1.2rem; }
}

/* -------------------------------------------------
   START WITH A JAM / THREE PATHS (Home page)
------------------------------------------------- */

/* Start-anywhere paths — whole-card links. The <li> keeps the border/padding;
   the <a> fills it and carries the hover state. */
.about-paths {
  margin-bottom: 1.2rem;
}

.about-paths li {
  padding: 0;
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.about-paths li:hover {
  border-color: var(--ink);
  transform: translateY(-1px);
}

.about-path-link {
  display: block;
  width: 100%;
  padding: 0.7rem 0.85rem;
  text-decoration: none;
  color: inherit;
}

.about-path-link strong::after {
  content: " →";
  font-weight: 700;
  color: var(--text-faint);
}

@media (min-width: 900px) {
  .about-paths {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
  .about-paths li {
    flex-direction: column;
    gap: 0.5rem;
  }
  .about-paths .book-offer-icon {
    font-size: 1.6rem;
  }
}

/* -------------------------------------------------
   HOME "ON THE ROAD" SECTION
------------------------------------------------- */

/* Home "On the Road" section. The timeline reuses .fest-timeline / .fest-stop;
   here it goes two-up on wide screens so the four stops stay compact under the
   stat band rather than running a tall single column down the page. */
@media (min-width: 700px) {
  .home-fest-timeline { grid-template-columns: 1fr 1fr; }
}

/* -------------------------------------------------
   WHO WE ARE (Blog Card & Testimonial Quotes)
------------------------------------------------- */

/* Latest blog post card on the home page. A full vertical card in the same
   idiom as the format/event cards (cover on top, body below) so it carries
   real visual weight rather than reading as a thin banner. */
.blog-card {
  display: flex;
  flex-direction: column;
  max-width: 340px;
  margin-top: 1rem;
  border: var(--card-border);
  background: var(--card-bg);
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);
  box-shadow: var(--card-shadow);
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.blog-card:hover {
  border-color: var(--border-hover);
  transform: translateY(-2px);
  box-shadow: var(--card-shadow-lift);
}

.blog-card-media {
  position: relative;
}

.blog-card-cover {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--ink);
}

.blog-card-body {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 0.75rem 0.85rem 0.9rem;
}

/* Kicker overlays the cover top-left like the poster badges; the -inline
   variant is a fallback that sits in the body when a post has no cover. */
.blog-card-kicker {
  position: absolute;
  top: 0.7rem;
  left: 0.7rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--yellow);
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}

.blog-card-kicker-inline {
  position: static;
  align-self: flex-start;
  box-shadow: none;
}

.blog-card-title {
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}

.blog-card-excerpt {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-muted);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.blog-card-meta {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-soft);
}

/* "Who We Are": blog card (our voice) beside the top testimonials (others').
   Two columns on wide screens, stacked below. Either side may be absent, so
   the grid is fine collapsing to one populated column. */
.who-cols {
  display: grid;
  gap: 1.4rem;
  margin-top: 1rem;
  align-items: start;
  grid-template-columns: 1fr;
}

@media (min-width: 760px) {
  .who-cols {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

/* Inside the grid the blog card fills its column instead of capping at 340px. */
.who-blog {
  max-width: none;
  margin-top: 0;
}

/* Section CTA: lifted above the blog/testimonials and given room to breathe so
   it reads as the primary action of "Who We Are". */
.who-cta {
  margin: 0.25rem 0 1.5rem;
}

.who-quotes {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.who-quotes-kicker {
  align-self: flex-start;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--yellow);
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
}

.who-quotes-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

/* Each quote is now a filled, highlighted card (soft yellow wash, border, hard
   shadow, oversized quote mark) rather than a bare left-rule, so the
   testimonials hold their own next to the blog card. */
.who-quote {
  position: relative;
  background: var(--card-bg);
  border: var(--card-border);
  box-shadow: var(--card-shadow);
  padding: 1rem 1.05rem 0.95rem;
}

/* Oversized opening quote mark, top-left, as a brand flourish. */
.who-quote::before {
  content: "\201C";
  position: absolute;
  top: 0.1rem;
  left: 0.55rem;
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-size: 2.4rem;
  line-height: 1;
  color: var(--yellow);
  opacity: 0.7;
}

.who-quote-text {
  position: relative;
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.55;
  font-weight: 500;
  color: var(--ink);
}

.who-quote-by {
  margin: 0.4rem 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.45rem;
  font-size: 0.8rem;
}

.who-quote-name {
  font-weight: 700;
  color: var(--ink);
}

.who-quote-sub {
  color: var(--text-soft);
}

.who-quotes-more {
  align-self: flex-start;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--blue);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.who-quotes-more:hover,
.who-quotes-more:focus-visible {
  border-bottom-color: var(--blue);
}