/* ==========================================================================
   Season grid — three across, dropping to two then one.
   ========================================================================== */

/* Asymmetric, from the mockup: it puts 54px between the bottom of the hero and
   the heading's cap — 39px scaled to a 1290px container — and the cap sits
   about 18px below the heading element's own top, so the top padding is what is
   left. A symmetric 96px put the cap 114px down and left the section floating
   under the hero. */
.gsjc-season {
  padding-block: 1.25rem var(--gsjc-space-3xl);
}

/* Heading left, italic tagline right, sharing a baseline. Wraps to two lines on
   narrow screens rather than shrinking the heading. */
/* Two classes: Kadence sets margins on headings inside post content with a
   two-part selector, so a single class is ignored. 3rem leaves 51px between the
   cap and the first card, matching the mockup's 71px. */
.gsjc-season .gsjc-season__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gsjc-space-sm) var(--gsjc-space-xl);
  margin: 0 0 3rem;
}

.gsjc-season .gsjc-season__title { margin: 0; }

.gsjc-season__title {
  margin: 0;
  font-size: var(--gsjc-fs-h1);
  color: var(--gsjc-ink);
}

.gsjc-season .gsjc-season__tagline {
  margin: 0;
  font-size: var(--gsjc-fs-lead);
  color: var(--gsjc-ink);
}

/* Kadence indents lists inside post content — `.single-content ul` at 2em,
   which is two selector parts and beats a single class. These are layout grids
   and meta lists, not prose lists, so the indent is undone with enough
   specificity to actually win; a bare `padding: 0` lost silently and pushed
   every card 34px right of the heading above it. */
.gsjc-season ul.gsjc-season__grid,
.gsjc-card ul.gsjc-card__also {
  padding-left: 0;
}

/* No media queries. The grid's real constraint is how narrow a card may get
   before the artwork and a two-line title stop working, and auto-fit states
   that directly: fit as many 290px-or-wider columns as there is room for.
   The column count then falls out of the arithmetic rather than being asserted
   at breakpoints that have to be kept in step with the gap and the container.

   Why 290px, with a 48px gap in a 1242px content box:
     4 cols  4x290 + 144 = 1304  > 1242, so four never happens
     3 cols  3x290 +  96 =  966  -> from about 1014px
     2 cols  2x290 +  48 =  628  -> from about  676px
   which lands within a few pixels of the 640/1025 breakpoints this replaces,
   so the layout at any common width is what it was.

   min(290px, 100%) rather than a bare 290px: below about 340px the content box
   is narrower than the minimum track, and a bare minimum would overflow the
   screen instead of shrinking. */
.gsjc-season__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
  gap: var(--gsjc-space-2xl) var(--gsjc-space-xl);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* --- Card ----------------------------------------------------------------
   Equal-height cards with the when/where block pushed to the foot, so the
   dates and the rule beneath them share one line across the row however long
   the titles and credits run above them. Without this every difference in text
   length ripples down and the grid goes ragged. */
.gsjc-card {
  display: flex;
  flex-direction: column;
}

.gsjc-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;                       /* fills the card, so margin-top:auto below works */
  padding-top: var(--gsjc-space-sm);
}

/* --- Artwork -------------------------------------------------------------
   The link is aria-hidden and out of the tab order on purpose: the title
   beneath points at the same concert, so exposing both would make every card
   two identical stops for a keyboard or screen-reader user. */
.gsjc-card__art {
  display: block;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--gsjc-surface-alt);
}

.gsjc-card__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Until artwork exists, a deliberate Sandstone panel with the monogram rather
   than a broken frame. */
.gsjc-card__art[data-placeholder] {
  background:
    linear-gradient(0deg, rgba(17, 12, 8, 0.04), rgba(17, 12, 8, 0.04)),
    var(--gsjc-surface-alt);
  position: relative;
}

.gsjc-card__art[data-placeholder]::after {
  content: "";
  position: absolute;
  inset: 24%;
  background: var(--gsjc-line);
  -webkit-mask: url("../img/logo-monogram.svg") no-repeat center / contain;
          mask: url("../img/logo-monogram.svg") no-repeat center / contain;
}

/* --- Card text ------------------------------------------------------------
   Every margin here carries the card's class as well as its own, for the same
   reason the grid indent above does: Kadence styles content-area text with
   two-part selectors (`.single-content p`, and its heading margins), which
   beat a single class and lose SILENTLY — the declaration is simply ignored
   and the computed value is Kadence's.

   That is exactly what had happened. Measured on the live card: the ensemble
   line carried margin-bottom 32px and the title margin-top 45px against the
   `0` and `4px` written here, putting 77px between two lines meant to read as
   one unit and stretching each card to 532px on a phone. */
.gsjc-card .gsjc-card__ensemble {
  margin: 0;
  font-size: var(--gsjc-fs-small);
  color: var(--gsjc-ink-muted);
}

.gsjc-card .gsjc-card__title {
  margin: var(--gsjc-space-3xs) 0 0;
  font-size: var(--gsjc-fs-h2);
  line-height: var(--gsjc-lh-head);
}

.gsjc-card__title a {
  color: var(--gsjc-primary);
  text-decoration: none;
}

.gsjc-card__title a:hover,
.gsjc-card__title a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.12em;
}

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

/* --- When and where, pinned to the foot ----------------------------------- */
.gsjc-season .gsjc-card__when {
  margin: var(--gsjc-space-md) 0 0;
  padding: var(--gsjc-space-sm) 0 0;
  padding-left: 0;               /* Kadence indents lists inside post content */
  margin-top: auto;              /* the pin: takes up the slack above */
  border-top: 1px solid var(--gsjc-line);
  list-style: none;
  display: grid;
  gap: var(--gsjc-space-2xs);
}

.gsjc-card__when li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gsjc-space-2xs);
}

.gsjc-card__date {
  font-size: var(--gsjc-fs-small);
  letter-spacing: 0.04em;
  color: var(--gsjc-ink);
}

.gsjc-card__venue {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-size: var(--gsjc-fs-small);
  color: var(--gsjc-ink-muted);
}

.gsjc-card__pin {
  width: 0.9em;
  height: 0.9em;
  flex: none;
}

/* Editors only; never rendered for an anonymous visitor. */
.gsjc-card .gsjc-card__status {
  margin: var(--gsjc-space-xs) 0 0;
  font-size: var(--gsjc-fs-small);
  color: var(--gsjc-umber);
  background: var(--gsjc-accent);
  padding: 0.15rem 0.5rem;
  align-self: flex-start;
}