/* ==========================================================================
   The interior page head — an Aubergine band with a title, a lead line and a
   photograph that hangs below the band's bottom edge.

   Proportions measured off Assets/About Us - Home.png at its 1920 canvas:

     band          y 151..702   552px tall  -> 371px at a 1290 container
     photo         794 x 452    16:9        -> 533 x 304
     photo top     162px below the band top -> 109px
     overhang      62px below the band      ->  42px
     title         ~105px type              ->  ~70px

   The title is set with --gsjc-fs-display (40-64px) rather than the measured
   70px: it is within about 10% and it keeps this page on the type scale the
   rest of the site uses, which matters more than matching a figure the
   designer almost certainly eyeballed.
   ========================================================================== */

.gsjc-pagehead {
  --gsjc-pagehead-overhang: 2.625rem;   /* 42px, the measured overhang */
  --gsjc-pagehead-pad-b:    var(--gsjc-space-2xl);

  /* No inset: the title and lead start at the page's content edge, the same
     line "Our History" starts on below the band. The mockup had them about
     100px to the right of it and the first build followed that; the designer's
     feedback of 2026-09-16 drew a rule down the content margin and asked for
     the copy left-aligned to it. */

  position: relative;
  color: var(--gsjc-white);
  padding-block: var(--gsjc-space-2xl) var(--gsjc-pagehead-pad-b);

  /* Dark ground: the focus ring flips or it disappears into the Aubergine. */
  --gsjc-focus-ring: var(--gsjc-ochre);
  --gsjc-focus-halo: var(--gsjc-umber);
}

/* THE COLOUR STOPS EARLY; THE PHOTO DOES NOT ESCAPE.

   The obvious way to make a picture hang below a band is a negative bottom
   margin on the picture. That was tried and it does not work here: the band's
   own bottom padding still sits underneath, so the photo finished 22px ABOVE
   the band's edge instead of 42px below it. Making the margin large enough to
   overcome the padding then makes the effect depend on the photo being the
   taller of the two columns — a longer lead sentence would silently break it.

   So the band's Aubergine is painted by this pseudo-element instead, and simply
   stops short of the box's bottom edge. The photo sits inside the band as
   normal; the colour ends above it. The overhang is then exactly
   (colour inset - bottom padding), independent of how tall either column is. */
.gsjc-pagehead::before {
  content: "";
  position: absolute;
  inset: 0 0 calc(var(--gsjc-pagehead-pad-b) + var(--gsjc-pagehead-overhang)) 0;
  background: var(--gsjc-primary);
}

/* Kadence's container formula, the same pair every other section aligns to. */
.gsjc-pagehead__inner {
  position: relative;   /* above the painted band */
  z-index: 1;
  max-width: var(--global-content-width, var(--gsjc-container));
  margin-inline: auto;
  padding-inline: var(--global-content-edge-padding, 1.5rem);
}

/* Ochre on Aubergine is 5.59:1 — past AA for large text, which this always is.
   Two classes: Kadence sets heading margins inside content with a two-part
   selector and a single class loses to it silently. */
/* Left, not centred, on the same line as the lead beneath it and the body
   copy below the band. */
.gsjc-pagehead .gsjc-pagehead__title {
  margin: 0 0 var(--gsjc-space-lg);
  text-align: left;
  font-size: var(--gsjc-fs-display);
  line-height: var(--gsjc-lh-tight);
  color: var(--gsjc-accent);
}

.gsjc-pagehead__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: var(--gsjc-space-xl);
}

/* White on Aubergine is 10.93:1. Besley, because the mockup sets this as a
   display line rather than body copy — it is the page's one-sentence answer to
   "who are you", not a paragraph. */
.gsjc-pagehead .gsjc-pagehead__lead {
  margin: 0;
  font-family: var(--gsjc-font-head);
  font-weight: var(--gsjc-weight-head);
  font-size: var(--gsjc-fs-h3);
  line-height: var(--gsjc-lh-head);
  color: var(--gsjc-white);
}

/* Bottom-aligned so the photo's lower edge IS the row's lower edge, whatever
   the lead sentence's length. That is what makes the overhang above exact
   rather than coincidental. */
.gsjc-pagehead__media {
  align-self: end;
}

.gsjc-pagehead__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;         /* the mockup's 794x452 is 1.757 */
  object-fit: cover;
  background: var(--gsjc-umber);  /* while it decodes */
}

/* --- The split variant: title beside the picture ---------------------------
   Used by the concert page and the Person pages. The title moves INTO the
   grid's first column with its own lines above or below it — ensemble and
   conductor for a concert, the role for a person. Nothing about the band
   itself changes: the colour still stops short and the picture still hangs
   42px below it.

   The picture is the page's featured image in the SAME 3:2 slot the season
   card uses on the home page — same ratio, same cover crop — so one image
   serves both places without a second crop being made. A 4:5 poster set as
   a concert's featured image is centre-cropped here exactly as it is on the
   card; a 3:2 asset shows uncropped in both. */

/* Inside the column the title has neighbours, so the standalone rule's
   bottom margin goes. */
.gsjc-pagehead--split .gsjc-pagehead__title {
  margin: 0;
}

.gsjc-pagehead--split .gsjc-pagehead__img {
  aspect-ratio: 3 / 2;          /* season.css .gsjc-card__art — keep in step */
}

/* --- Neutral: the band in Sandstone -------------------------------------------
   The concert page. Its picture is the season artwork — dark, saturated,
   different every time — and on Aubergine the two fought; on the header's
   own Sandstone the art sits on neutral ground (the designer's concert-page
   note, taken up 2026-09-17). Because band and header are then one colour,
   a hairline marks the edge between them, in the same rule ink the header
   uses between its nav items, so it reads as the header's edge rather than
   a new device. Aubergine on Sandstone is 8.39:1; the title keeps the
   page's heading colour rather than the Ochre it wears on a dark band. The
   focus ring goes back to the light-ground default. */
.gsjc-pagehead--neutral {
  color: var(--gsjc-ink);
  border-top: 1px solid var(--gsjc-rule);
  --gsjc-focus-ring: initial;
  --gsjc-focus-halo: initial;
}

.gsjc-pagehead--neutral::before {
  background: var(--gsjc-surface-alt);
}

.gsjc-pagehead--neutral .gsjc-pagehead__title {
  color: var(--gsjc-primary);
}

/* --- Person: name and role, centred on the photograph ----------------------
   From Feeback - About Us subpages.pdf, measured on its 1000px-wide canvas
   and scaled to 1440: the name spans 404px there, about 580px here, which
   is the h1 size rather than the display size — at display size
   "Christopher B. Thomas" wrapped to two lines in a 597px column. The role
   is about 23px, the h4 size, in the body face. Both centre on the
   photograph: the grid cell is the photo's height, so centring in the cell
   centres on the photo, exactly as the mockup has it.

   The role is on a <p> with a margin, hence two classes — Kadence's content
   rules are (0,1,1). */
.gsjc-pagehead--person .gsjc-pagehead__text {
  align-self: center;
}

/* 55/45, not the band's 50/50: the mockup's photograph is 418 of a 894px
   content box and its text column the rest. At 50/50 the name wrapped to two
   lines at 1440 ("Christopher B." / "Thomas", 590px needed in 597); at 55%
   the column is 651px and it holds. */
.gsjc-pagehead--person .gsjc-pagehead__body {
  grid-template-columns: 1.2fr 1fr;
}

.gsjc-pagehead--person .gsjc-pagehead__title {
  font-size: var(--gsjc-fs-h1);
}

.gsjc-pagehead .gsjc-pagehead__role {
  margin: var(--gsjc-space-sm) 0 0;
  font-family: var(--gsjc-font-body);
  font-weight: var(--gsjc-weight-body);
  font-size: var(--gsjc-fs-h4);
  line-height: var(--gsjc-lh-head);
  color: var(--gsjc-white);       /* 10.93:1 on Aubergine */
}

/* A band with no picture: the lead has the width to itself and there is
   nothing to hang below the edge. */
.gsjc-pagehead--textonly .gsjc-pagehead__body { grid-template-columns: 1fr; }
/* Nothing to reserve: with no photo there is nothing to hang. */
.gsjc-pagehead--textonly::before { inset-block-end: 0; }

/* And nothing hanging means nothing holds the body copy off the band: with
   the photo, its 42px overhang plus the first heading's margin does that;
   without it the first paragraph started on the band's edge (measured 1px
   apart on Sing With Us). The same 64px the band gives its own top. */
.gsjc-pagehead--textonly { margin-bottom: var(--gsjc-space-2xl); }

/* --- Narrow screens -------------------------------------------------------
   Stacked, and the overhang goes to zero. The effect reads as deliberate only
   when there is room either side of the picture; at 375px there is none, and
   a 42px offset under a stacked image looks like a spacing bug rather than a
   flourish. Setting the custom property to 0 switches off the negative margin
   and the band's reserved space in one move. */
@media (max-width: 767px) {
  .gsjc-pagehead {
    --gsjc-pagehead-overhang: 0px;
    --gsjc-pagehead-pad-b: var(--gsjc-space-xl);
    padding-block: var(--gsjc-space-xl) var(--gsjc-pagehead-pad-b);
  }

  /* Stacked, the colour fills the band completely: with no overhang, stopping
     it short of the bottom padding would leave a white strip under the photo. */
  .gsjc-pagehead::before {
    inset-block-end: 0;
  }

  .gsjc-pagehead__body {
    grid-template-columns: 1fr;
    gap: var(--gsjc-space-lg);
  }

  /* The person split above is two classes and would outlive this breakpoint
     against the one-class rule — the concert band did exactly that once. */
  .gsjc-pagehead--person .gsjc-pagehead__body {
    grid-template-columns: 1fr;
  }
}