/* ---------------------------------------------------------------------------
   52-calendar-skin.css — the Calendar page's colour and picture layer.

   Why 52 and not 44: every overhaul stylesheet is enqueued in filename order
   with no dependencies between them, so file order IS cascade order. This file
   has to win against 40-classes.css (the calendar's base) AND against
   50-disciplines.css (whose hero rules the Calendar header now borrows), so it
   has to load after both of them.

   Two surfaces are styled here:

     1. The server-rendered day list (.rhcl-list). Every visitor sees this first,
        before any script runs, and every visitor sees it for good if scripts
        never run. It gets the studio colour and the studio's painting.
     2. The week feed (.rhcl-feed) that 40-classes.js draws in its place. Same
        colours, same pictures, laid out as the approved design: one week of
        days, with an identical week changer above them and below them.

   2026-09-18: the left-hand "Pick a week" rail is gone at the owner's request,
   and every rule that dressed it went with it - .rhcl-rail, .rhcl-railhead,
   .rhcl-weeknav, .rhcl-weeks and the week pills. Nothing draws that markup any
   more, so nothing here should still be styling it.

   Colours come from the four studio paintings. They are used as rules, dots and
   washes — never as a button fill, because rust stays the one colour on this
   site that means "this is the thing to press".
   --------------------------------------------------------------------------- */

.rhc-classes {
  --cal-painting: #2F5E8F;
  --cal-pottery: #8A4227;
  --cal-needlework: #8C2F2F;
  --cal-drama-dance: #9A6520;
  --cal-event: #2C463A;

  --cal-tint-painting: #F1F5F9;
  --cal-tint-pottery: #FAF4EF;
  --cal-tint-needlework: #FBF2F1;
  --cal-tint-drama-dance: #FAF5E9;

  --cal-line: #E3DACB;
  --cal-rule: #D6CBB6;
  --cal-card: #FBF9F4;
}

/* Each studio's own colour and wash, set once and read by both surfaces. */
/* The slug in the class name is the schedule's own filter slug, not the
   discipline page's filename: "painting-drawing" and "performing-arts". Both
   spellings are matched so a future rename of either cannot silently drop a
   studio back to the event green. */
.rhc-classes .rhcl-occ--painting,
.rhc-classes .rhcl-occ--painting-drawing,
.rhc-classes .rhcl-card--painting,
.rhc-classes .rhcl-card--painting-drawing {
  --studio: var(--cal-painting);
  --studio-tint: var(--cal-tint-painting);
}

.rhc-classes .rhcl-occ--pottery,
.rhc-classes .rhcl-card--pottery {
  --studio: var(--cal-pottery);
  --studio-tint: var(--cal-tint-pottery);
}

.rhc-classes .rhcl-occ--needlework,
.rhc-classes .rhcl-card--needlework {
  --studio: var(--cal-needlework);
  --studio-tint: var(--cal-tint-needlework);
}

.rhc-classes .rhcl-occ--drama-dance,
.rhc-classes .rhcl-occ--performing-arts,
.rhc-classes .rhcl-card--drama-dance,
.rhc-classes .rhcl-card--performing-arts {
  --studio: var(--cal-drama-dance);
  --studio-tint: var(--cal-tint-drama-dance);
}

/* ===========================================================================
   1. The server-rendered list — coloured, and carrying its painting
   =========================================================================== */

.rhc-classes .rhcl-day-h {
  font-family: var(--d);
  font-size: 22px;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--cal-rule);
}

.rhc-classes .rhcl-occs {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.rhc-classes .rhcl-occ {
  background: var(--cal-card);
  border: 1px solid var(--cal-line);
  border-top: 3px solid var(--studio, var(--cal-event));
}

.rhc-classes .rhcl-occ .rhcl-detail {
  display: grid;
  grid-template-columns: 178px minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  background: var(--studio-tint, transparent);
}

/* The painting. It is the same picture for every date in a studio, which is
   the point — it reads as that studio's signature rather than as a photograph
   of this particular Tuesday. */
.rhc-classes .rhcl-occ-art {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 150px;
  object-fit: cover;
  object-position: center 38%;
  align-self: stretch;
}

.rhc-classes .rhcl-occ .rhcl-detail > *:not(.rhcl-occ-art):not(picture):not(.rhcl-art-link) {
  grid-column: 2;
}

/* The picture is wrapped in a link to the class page; the wrapper takes the
   picture's place in the grid and adds nothing of its own. */
.rhc-classes .rhcl-occ .rhcl-art-link {
  display: block;
  height: 100%;
  min-width: 0;
  border: 0;
  text-decoration: none;
}

.rhc-classes .rhcl-occ picture {
  display: block;
  height: 100%;
}

/* Everything that is not the picture sits in a padded column beside it. */
.rhc-classes .rhcl-occ .rhcl-detail {
  padding: 0;
}

.rhc-classes .rhcl-occ .rhcl-detail > :not(picture):not(.rhcl-occ-art):not(.rhcl-art-link):first-of-type {
  padding-top: 15px;
}

/* A special event is the wide, dark, picture-led tile: the design's one break
   in rhythm, because an event is not a Tuesday. */
.rhc-classes .rhcl-occ--event {
  border: 0;
  border-top: 0;
  background: var(--cal-event);
  color: var(--on-ink);
}

.rhc-classes .rhcl-occ--event .rhcl-detail {
  grid-template-columns: minmax(0, 1fr);
  background: transparent;
}

.rhc-classes .rhcl-occ--event .rhcl-occ-art {
  grid-column: 1;
  height: 172px;
  min-height: 0;
  object-position: center 45%;
}

.rhc-classes .rhcl-occ--event .rhcl-detail > *:not(.rhcl-occ-art):not(picture):not(.rhcl-art-link) {
  grid-column: 1;
}

.rhc-classes .rhcl-occ--event .rhcl-art-link {
  grid-column: 1;
  height: 172px;
}

/* A called-off date keeps its colour but loses its confidence. */
.rhc-classes .rhcl-occ--off .rhcl-occ-art {
  filter: grayscale(0.7);
  opacity: 0.75;
}

/* ===========================================================================
   2. The week feed
   =========================================================================== */

.rhc-classes .rhcl-feed {
  display: flex;
  flex-direction: column;
  min-width: 0;
  scroll-margin-top: 20px;
}

/* ---- the week changer ---- */

/* The same control twice: once above the week's days and once below them, so
   a reader who has read to the foot of a week does not have to climb back up
   to reach the next one. */
/* A grid with two equal outside columns, not a flex row with space-between:
   "Previous week" is a wider button than "Next week", so space-between pushed
   the week's name 12px off the middle of the page. Equal side columns put it
   dead centre whatever the buttons say. */
.rhc-classes .rhcl-wknav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  padding: 12px 0 14px;
}

.rhc-classes .rhcl-wkstep--prev {
  justify-self: start;
}

.rhc-classes .rhcl-wkstep--next {
  justify-self: end;
}

/* One rule each, on the side facing the days, so the two of them frame the
   week rather than boxing it in on four sides. */
.rhc-classes .rhcl-wknav--top {
  border-bottom: 1px solid var(--cal-rule);
}

.rhc-classes .rhcl-wknav--bottom {
  padding: 14px 0 12px;
  border-top: 1px solid var(--cal-rule);
}

.rhc-classes .rhcl-wkstep {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid #C9BCA4;
  background: var(--cal-card);
  color: var(--tx-2, #4A5B52);
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
}

.rhc-classes .rhcl-wkstep:hover:not([disabled]) {
  border-color: var(--ink);
  color: var(--ink);
}

/* The end of the term is a plainly dead button, never a live-looking one that
   does nothing when it is pressed. */
.rhc-classes .rhcl-wkstep[disabled] {
  opacity: 0.4;
  cursor: default;
}

.rhc-classes .rhcl-wkname {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  margin: 0;
  text-align: center;
}

.rhc-classes .rhcl-wkname-t {
  font-family: var(--d);
  font-weight: 600;
  font-size: 25px;
  line-height: 1.15;
  color: var(--ink);
}

.rhc-classes .rhcl-wkname-n {
  font-size: 14.5px;
  line-height: 1.2;
  color: var(--tx-3, #5C6860);
}

/* ---- the stream ---- */

.rhc-classes .rhcl-stream {
  display: flex;
  flex-direction: column;
  gap: 30px;
  min-width: 0;
  padding: 26px 0;
}

.rhc-classes .rhcl-wk {
  display: flex;
  flex-direction: column;
  gap: 14px;
  scroll-margin-top: 20px;
}

/* .rhcl-wk-h - the week's name with a rule through it - is gone with the rail.
   The changer above the days names the week now, and printing the same words
   again a finger's width below read as a mistake. */

.rhc-classes .rhcl-dayrow {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 14px;
}

.rhc-classes .rhcl-datebox {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 1px;
  padding: 10px 0 12px;
}

/* 40-classes.css still gives .rhcl-dow the retired month grid's seven-column
   header layout (`grid-template-columns: repeat(7, minmax(0, 1fr))`). That grid
   is gone - 40-classes.js only ever creates .rhcl-dow as the day-of-week SPAN
   inside a list datebox - so the label was being laid out as a grid item in a
   ~10px track and sat 25px left of the date number it is meant to sit above.
   Unscoped and in a later file, so it outranks the stale rule wherever the span
   appears. */
.rhcl-dow {
  display: block;
}

.rhc-classes .rhcl-dow {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--studio, var(--cal-event));
}

.rhc-classes .rhcl-dnum {
  font-family: var(--d);
  font-weight: 700;
  font-size: 32px;
  line-height: 1;
  color: var(--ink);
}

.rhc-classes .rhcl-dmon {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tx-3, #5C6860);
}

.rhc-classes .rhcl-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

/* ---- a card ---- */

.rhc-classes .rhcl-card {
  display: grid;
  grid-template-columns: 178px minmax(0, 1fr) auto;
  align-items: stretch;
  background: var(--cal-card);
  border: 1px solid var(--cal-line);
  border-top: 3px solid var(--studio, var(--cal-event));
}

.rhc-classes .rhcl-card-art {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 150px;
  object-fit: cover;
  object-position: center 38%;
}

/* Block layout, deliberately, not a flex column. Chrome blockifies
   display:-webkit-box on a flex item, which silently kills -webkit-line-clamp
   on every child - the text then gets hard-cut through the middle of a letter
   instead of ending in an ellipsis. Spacing is done with margins so the
   children stay ordinary blocks and the clamps keep working. */
.rhc-classes .rhcl-card-body {
  display: block;
  padding: 15px 18px 16px;
  background: var(--studio-tint, transparent);
  min-width: 0;
}

.rhc-classes .rhcl-card-body > * + * {
  margin-top: 5px;
}

.rhc-classes .rhcl-card-kicker {
  font-size: 12px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--studio, var(--cal-event));
}

.rhc-classes .rhcl-card-title {
  font-family: var(--d);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.15;
  color: var(--ink);
  margin: 0;
}

.rhc-classes .rhcl-card-title a:hover {
  text-decoration: underline;
  text-decoration-color: var(--clay);
  text-underline-offset: 4px;
}

.rhc-classes .rhcl-card-meta {
  font-size: 14.5px;
  color: var(--tx-3, #5C6860);
}

.rhc-classes .rhcl-card-lede {
  font-size: 15px;
  line-height: 1.5;
  color: var(--tx-2, #4A5B52);
}

.rhc-classes .rhcl-card-act {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 9px;
  padding: 15px 18px;
  background: var(--studio-tint, transparent);
  text-align: right;
  white-space: nowrap;
}

/* A card with no picture simply closes the gap rather than leaving a hole. */
.rhc-classes .rhcl-card:not(:has(.rhcl-card-art)) {
  grid-template-columns: minmax(0, 1fr) auto;
}

/* ---- an event card ---- */

.rhc-classes .rhcl-card--event {
  grid-template-columns: minmax(0, 1fr);
  background: var(--cal-event);
  border: 0;
  color: var(--on-ink);
}

/* The event photograph is shown WHOLE - never cropped.

   These are group photographs in a 4:3 frame. Any wide strip cut out of one
   loses most of its height, and the heads go with it: at 172px the Immersion
   photo was decapitating two of its three people. No fixed crop position
   fixes that, because every photograph puts its faces somewhere different,
   and the owner uploads new ones from wp-admin without ever seeing this file.

   So the image keeps its own shape and the card grows to fit it. One picture
   per event, composed by whoever writes the event in wp-admin: what they
   upload is exactly what appears, which is the only behaviour that is
   predictable from the admin screen. Design events to 1600x900 (16:9) and
   every card matches.

   The max-height is a guard rail, not a crop: a portrait picture uploaded by
   mistake is fitted inside it rather than being allowed to run to 900px and
   wreck the feed. object-fit stays 'contain', so even then nothing is cut. */
.rhc-classes .rhcl-card--event .rhcl-card-art {
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: 620px;
  object-fit: contain;
  object-position: center;
}

.rhc-classes .rhcl-card--event .rhcl-card-body,
.rhc-classes .rhcl-card--event .rhcl-card-act {
  background: transparent;
}

.rhc-classes .rhcl-card--event .rhcl-card-body {
  padding: 16px 20px 18px;
}

.rhc-classes .rhcl-card--event .rhcl-card-kicker {
  color: #C9A97A;
}

.rhc-classes .rhcl-card--event .rhcl-card-title {
  color: var(--paper);
  font-size: 23px;
}

.rhc-classes .rhcl-card--event .rhcl-card-meta,
.rhc-classes .rhcl-card--event .rhcl-card-lede {
  color: #C7CFC6;
}

/* The price inherited the muted grey used for body text elsewhere, which
   against the dark green measured 1.76:1 - effectively invisible, on the one
   number a paying customer needs. Full-strength cream takes it to about 9:1. */
/* "See this event" is the same kind of action as "Book this class", so it
   wears the same button rather than a 25px text link. It takes the dark
   card's cream treatment: the site's rust on this dark green measures about
   2:1, which is not readable. */
.rhc-classes .rhcl-card--event .rhcl-go,
.rhc-classes .rhcl-occ--event .rhcl-go {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 24px;
  border: 1.5px solid var(--on-ink);
  background: transparent;
  color: var(--on-ink);
  font-weight: 600;
  text-decoration: none;
}

.rhc-classes .rhcl-card--event .rhcl-go:hover,
.rhc-classes .rhcl-card--event .rhcl-go:focus-visible,
.rhc-classes .rhcl-occ--event .rhcl-go:hover,
.rhc-classes .rhcl-occ--event .rhcl-go:focus-visible {
  background: var(--on-ink);
  border-color: var(--on-ink);
  color: var(--ink);
}

/* The price sat at 11.5px, which looked like a footnote beside a 47px
   button. It is set to the same size as the button's own label. */
.rhc-classes .rhcl-card--event .rhcl-price {
  font-size: 15.5px;
}

.rhc-classes .rhcl-card--event .rhcl-price {
  color: var(--on-ink);
  font-weight: 600;
}

.rhc-classes .rhcl-card--event .rhcl-card-act {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px 18px;
  text-align: left;
}

.rhc-classes .rhcl-card--off .rhcl-card-art {
  filter: grayscale(0.7);
  opacity: 0.75;
}

/* ===========================================================================
   3. On a phone
   =========================================================================== */

@media (max-width: 899px) {
  /* Both changers become full-width bands in the rail's old colour, so the
     week is framed top and bottom exactly the way it is on a desktop. */
  .rhc-classes .rhcl-wknav {
    gap: 10px;
    margin: 0 -20px;
    padding: 11px 20px 12px;
    background: #E8E0D0;
  }

  /* The one above the days stays put at the top of the screen - the way the
     week rail's band used to - so a reader is never more than a thumb away
     from the week they are in or the way out of it. */
  .rhc-classes .rhcl-wknav--top {
    position: sticky;
    top: 0;
    z-index: 20;
    border-bottom: 1px solid #C9BCA4;
  }

  .rhc-classes .rhcl-wknav--bottom {
    padding: 12px 20px;
    border-top: 1px solid #C9BCA4;
  }

  /* Two words either side of the week's name will not fit across a phone, so
     the buttons are the chevron on its own. Their aria-label already says
     "Previous week" and "Next week", so nothing is lost by hiding the words. */
  .rhc-classes .rhcl-wkstep-t {
    display: none;
  }

  .rhc-classes .rhcl-wkstep {
    width: 44px;
    padding: 0;
    background: #FFFFFF;
  }

  .rhc-classes .rhcl-wkname {
    min-width: 0;
  }

  .rhc-classes .rhcl-wkname-t {
    font-size: clamp(17px, 4.8vw, 21px);
    overflow-wrap: normal;
    word-break: normal;
    hyphens: none;
  }

  .rhc-classes .rhcl-wkname-n {
    font-size: 13px;
  }

  .rhc-classes .rhcl-stream {
    gap: 22px;
    padding: 22px 0;
  }

  /* The date stops being a column and becomes a line above the day's cards. */
  .rhc-classes .rhcl-dayrow {
    display: flex;
    flex-direction: column;
    gap: 11px;
  }

  .rhc-classes .rhcl-datebox {
    flex-direction: row;
    align-items: baseline;
    justify-content: flex-start;
    gap: 9px;
    padding: 0;
  }

  .rhc-classes .rhcl-dnum {
    font-size: 26px;
  }

  /* Cards turn portrait: picture, then the class, then the button. */
  .rhc-classes .rhcl-card,
  .rhc-classes .rhcl-card:not(:has(.rhcl-card-art)) {
    display: flex;
    flex-direction: column;
  }

  /* flex-shrink must be 0: in a fixed-height column the picture is a flex
     item like any other, and it was being squeezed below its stated height
     whenever the words beneath it ran long. */
  .rhc-classes .rhcl-card-art {
    flex: 0 0 142px;
    height: 142px;
    min-height: 0;
    object-position: center 30%;
  }

  .rhc-classes .rhcl-card-act {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    padding: 0 18px 15px;
  }

  .rhc-classes .rhcl-card--event .rhcl-card-art {
    flex: 0 0 auto;
    height: auto;
  }

  /* One card, one size on the phone too. The portrait card stacks picture,
     words and action, so the action is pushed to the bottom with an auto top
     margin and the words take what is left. The height is the picture plus
     the tallest the clamped words can be plus the action row, so nothing is
     ever sliced - the text ends at its own ellipsis. */
  .rhc-classes .rhcl-card {
    height: 416px;
    overflow: hidden;
  }

  .rhc-classes .rhcl-card-body {
    flex: 0 0 auto;
    min-height: 0;
  }

  .rhc-classes .rhcl-card-act {
    margin-top: auto;
  }

  .rhc-classes .rhcl-card--event:has(.rhcl-card-art) {
    height: auto;
  }

  .rhc-classes .rhcl-card--event:not(:has(.rhcl-card-art)) {
    height: 190px;
  }

  /* The same treatment for the no-script list. */
  .rhc-classes .rhcl-occ .rhcl-detail {
    grid-template-columns: minmax(0, 1fr);
  }

  .rhc-classes .rhcl-occ-art {
    height: 142px;
    min-height: 0;
    object-position: center 30%;
  }

  .rhc-classes .rhcl-occ .rhcl-detail > *:not(.rhcl-occ-art):not(picture):not(.rhcl-art-link) {
    grid-column: 1;
  }

  .rhc-classes .rhcl-occ .rhcl-art-link {
    height: 142px;
  }
}

/* The special-event tile is the one dark card in the feed, and the site's rust
   outline button is far too faint on that dark green. Inside the tile only, the
   action wears the same cream the rest of the tile's text wears. The fill state
   inverts rather than going rust, for the same reason. */
.rhc-classes .rhcl-card--event .rhcl-book {
  color: var(--on-ink);
  border-color: var(--on-ink);
}

.rhc-classes .rhcl-card--event .rhcl-book:hover,
.rhc-classes .rhcl-card--event .rhcl-book:focus-visible {
  background: var(--on-ink);
  border-color: var(--on-ink);
  color: var(--ink);
}

/* Two classes from the same studio on the same day carry the same watercolor.
   Cropping the second one lower shows a different part of the painting, so the
   pair reads as two classes rather than as the same card printed twice. */
.rhc-classes .rhcl-cards .rhcl-card:nth-child(even) .rhcl-card-art {
  object-position: center 62%;
}

/* ---------------------------------------------------------------------------
   Opting the calendar's controls out of the site's mobile form-field rule.

   style.css carries, below 600px:

     main#riverhouse-public-main :where(input…, select, textarea, button, …)
       { inline-size: 100% }

   That is meant for form fields, but a <button> is a <button>: the week
   changer's two arrows are caught by it and stretch to the full width of the
   band, which pushes the "next" arrow clean off the right of the screen. The
   rule carries an ID, so a class-only selector cannot outrank it — these are
   matched at the same ID specificity to opt out, and only for this page's own
   controls. Nothing else on the page is affected.
   ------------------------------------------------------------------------- */
@media (max-width: 599px) {
  main#riverhouse-public-main.rhc-classes .rhcl-wkstep {
    inline-size: 44px;
    width: 44px;
    flex: 0 0 44px;
  }

  /* The card's action keeps its own shape rather than becoming a full-width
     bar, so the seats line and the button stay on one row as designed. */
  main#riverhouse-public-main.rhc-classes .rhcl-card-act .rhcl-book {
    inline-size: auto;
    width: auto;
  }
}

/* ---------------------------------------------------------------------------
   One card, one size.

   The card is a grid with align-items: stretch, so the picture grows to
   whatever height the words need. A class with a long description and four
   teachers therefore rendered nearly twice the height of a short one - on the
   live page the range was 141px to 379px - and the feed looked ragged.

   So the card gets a fixed height and the words are cut to fit, with a real
   ellipsis rather than a hard clip. A card is a summary; the full description
   lives one click away on the class page.
   ------------------------------------------------------------------------- */
@media (min-width: 900px) {
  .rhc-classes .rhcl-card {
    height: 196px;
    overflow: hidden;
  }

  /* Rows, not just a height: the picture is fixed, the words take what is
     left and are cut there, and the price and the link are pinned to the
     bottom. Without this a two-line description pushed "See this event"
     out through the bottom of the card. */
  /* Rows, not just a height: the picture is fixed, the words take what is
     left, and the price and the link are pinned to the bottom. The height is
     the picture plus the tallest the words are allowed to get (a two-line
     title, one line of dates, two lines of description), so the text is
     ended by its own ellipsis rather than sliced by the card's edge. */
  /* The PICTURE takes the leftover room, not the card's background. Sizing
     the text block for a worst-case two-line title left 57px of empty green
     under every one-line title; giving that space to the photograph instead
     keeps the cards identical in height and makes the image bigger, which is
     also what stops the crop cutting people's heads off. */
  /* The picture sets the height here - see the note on .rhcl-card-art. */
  .rhc-classes .rhcl-card--event:has(.rhcl-card-art) {
    height: auto;
    grid-template-rows: auto minmax(0, 1fr) auto;
  }

  /* Not every event has a photograph. Holding those to the picture-led
     height leaves a large empty panel of green, so they size to their
     words instead. */
  .rhc-classes .rhcl-card--event:not(:has(.rhcl-card-art)) {
    height: 168px;
    grid-template-rows: minmax(0, 1fr) auto;
  }
}

/* The time is the part of the meta line that must survive; a long teacher
   list is what gets trimmed, so this clamps to a single line. */
.rhc-classes .rhcl-card-meta {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Two lines is the most a title may take before it is ended with an
   ellipsis, so the tallest card is a known quantity. */
.rhc-classes .rhcl-card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.rhc-classes .rhcl-card-lede {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* The Thursday studio's "Life Drawing is free with this class" line is a
   reason to book, not filler, so it stays on the card - clamped to one line.
   A second description paragraph, or the credit note cloned from the list,
   is dropped: there is no way to run one ellipsis across two elements, and
   that text is read on the class page. */
.rhc-classes .rhcl-card-body .rhcl-included {
  display: -webkit-box;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14.5px;
  color: var(--tx-3, #5C6860);
}

.rhc-classes .rhcl-card-body .rhcl-card-lede ~ .rhcl-card-lede,
.rhc-classes .rhcl-card-body .rhcl-note {
  display: none;
}

/* A visitor who has asked for less motion gets no smooth scrolling. */
@media (prefers-reduced-motion: reduce) {
  .rhc-classes .rhcl-stream {
    scroll-behavior: auto;
  }
}