/* ==========================================================================
   The concert page.

   The head is the interior page band (page-head.css) with the poster hung in
   it; the band's own geometry is defined there and only the concert-specific
   text is styled here. Below it, the performances are a three-column grid and
   the body copy is Kadence's own prose.

   Still ahead of a designer mockup for this page. What should survive one is
   inc/concert.php's two states and the performance rows, not these
   measurements.
   ========================================================================== */

/* No top padding: the band is the first thing in the article and meets the
   header. The bottom keeps the page's ending clear of the footer. */
.gsjc-concert {
  padding-block: 0 var(--gsjc-space-3xl);
}

/* --- Head: title, then the ensemble, then the conductor ---------------------
   The designer's sample for this page sets the ensemble in Besley Italic —
   the brand's Highlight face, "used exclusively with the Primary Typeface to
   highlight key words", which is exactly this: one line naming who performs,
   under the title it belongs to. The conductor line is the body face, small.
   The season card keeps the same wording in its own order.
   On the band's Sandstone: Umber 14.85:1, the muted ink 5.90:1. */
.gsjc-concert .gsjc-concert__ensemble {
  margin: var(--gsjc-space-sm) 0 0;
  font-family: var(--gsjc-font-head);
  font-style: italic;
  font-weight: var(--gsjc-weight-head);
  font-size: var(--gsjc-fs-h4);
  line-height: var(--gsjc-lh-head);
  color: var(--gsjc-ink);
}

.gsjc-concert .gsjc-concert__conductor {
  margin: var(--gsjc-space-2xs) 0 0;
  font-size: var(--gsjc-fs-small);
  color: var(--gsjc-ink-muted);
}

/* --- Performances ---------------------------------------------------------
   Sits under the poster's overhang; the band has already reserved that space,
   so this margin is from the poster's lower edge, not the Aubergine's. */
.gsjc-concert__performances {
  margin-block: var(--gsjc-space-xl) var(--gsjc-space-2xl);
}

/* The same size as an h2 the editor writes in the body — "Soloists" and
   "Performances" are peers and the designer asked that they match. Only the
   margin is set here; the size is the page's h2 size from base.css. */
.gsjc-concert .gsjc-concert__section-title {
  margin: 0 0 var(--gsjc-space-md);
  color: var(--gsjc-ink);
}

.gsjc-concert ul.gsjc-concert__perfs {
  margin: 0;
  padding-left: 0;              /* Kadence indents lists inside content */
  list-style: none;
}

/* A GRID WITH A FIXED FIRST TRACK, not a wrapping flex row.

   As a flex row the venue column began wherever the date happened to end, so
   two rows' venues sat 11px apart ("Friday, October 30" and "Sunday,
   November 1" do not measure the same) and the gap after the date was
   whatever wrapping left. A fixed track starts every venue on the same line,
   and the gap after the date is one declared value. 19rem holds the longest
   date this format produces: "Wednesday, September 30, 2026" measured 288px
   at the 18px meta size (17rem was sized for 17px and it wrapped). */
.gsjc-concert__perf {
  display: grid;
  grid-template-columns: 19rem 1fr auto;
  column-gap: var(--gsjc-space-lg);
  align-items: start;
  padding-block: var(--gsjc-space-md);
  border-top: 1px solid var(--gsjc-line);
}

.gsjc-concert__perf:last-child {
  border-bottom: 1px solid var(--gsjc-line);
}

.gsjc-concert .gsjc-concert__when {
  margin: 0;
  font-size: var(--gsjc-fs-meta);
  font-weight: var(--gsjc-weight-caption);
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--gsjc-ink);
}

/* The time on its own line under the date, in the body weight so the date is
   what the eye lands on. */
.gsjc-concert__time {
  display: block;
  font-weight: var(--gsjc-weight-body);
  letter-spacing: 0;
  color: var(--gsjc-ink-muted);
}

.gsjc-concert .gsjc-concert__where {
  margin: 0;
  font-size: var(--gsjc-fs-small);
  line-height: 1.5;
  color: var(--gsjc-ink-muted);
}

.gsjc-concert__venue {
  display: block;
  font-size: var(--gsjc-fs-body);
  font-weight: var(--gsjc-weight-caption);
  color: var(--gsjc-ink);
}

.gsjc-concert__address { display: block; }

/* --- Tickets --------------------------------------------------------------
   Appearance is defined once in base.css, with the hero call to action and
   core Button blocks. Only the placement is local. */
.gsjc-concert__tickets {
  justify-self: end;
}

/* Stacked: date, venue, then the button, each on its own line. */
@media (max-width: 767px) {
  .gsjc-concert__perf {
    grid-template-columns: 1fr;
    row-gap: var(--gsjc-space-xs);
  }

  .gsjc-concert__tickets {
    justify-self: start;
    margin-top: var(--gsjc-space-xs);
  }
}

/* --- Body copy at reading width ---------------------------------------------
   A concert is not a Page and has no Content Width dropdown, so the template
   honours the same Customizer number the narrow pages use rather than carry
   one of its own: change it there and this follows. Left-aligned, like them.
   The performances above stay full width; they are a table, not prose. */
.gsjc-concert__body {
  max-width: var(--global-content-narrow-width, 47.5rem);
}

/* The ticket form beside the description is the shared .gsjc-with-form
   layout in base.css, which the Pages use for theirs. Nothing local. */

/* --- Past ----------------------------------------------------------------- */
.gsjc-concert .gsjc-concert__note {
  margin: var(--gsjc-space-md) 0 0;
  font-size: var(--gsjc-fs-small);
  color: var(--gsjc-ink-muted);
}

/* A past concert is a record, not an offer. The title gives up its Aubergine
   and sits in the same ink as the lines beneath it. Three parts: the band's
   own title rule is two and loads later. */
.gsjc-concert[data-state="past"] .gsjc-pagehead--split .gsjc-pagehead__title {
  color: var(--gsjc-ink);
}