/* Team EVENTS overhaul (prefix 30): special-events strip, /events/ grid, single event page. */

/* ---------- shared card ---------- */
.rhx-ev-item{list-style:none;margin:0;padding:0;min-width:0}
.rhx-ev-card{display:flex;flex-direction:column;background:var(--white);
  border:1px solid rgba(95,122,99,.24);height:100%;color:inherit;text-decoration:none;
  transition:border-color .18s cubic-bezier(.2,0,.2,1), transform .18s cubic-bezier(.2,0,.2,1)}
.rhx-ev-card:hover{border-color:var(--river);transform:translateY(-2px)}
.rhx-ev-card:focus-visible{outline:3px solid var(--river);outline-offset:3px}
.rhx-ev-card__media{display:block;aspect-ratio:3/2;overflow:hidden;background:var(--ground)}
/* No object-position here on purpose: riverhouse_overhaul_event_media_focus()
   in inc/overhaul/30-events.php emits a per-event inline value, so one photo
   crops the same way on the card, in the homepage strip and on the hero. */
.rhx-ev-card__media img{width:100%;height:100%;object-fit:cover;display:block}
.rhx-ev-card__body{display:flex;flex-direction:column;flex:1 1 auto;gap:7px;padding:20px 22px 24px}
.rhx-ev-card__date{font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--clay-tx)}
.rhx-ev-card__title{font-family:var(--d);font-size:1.24rem;line-height:1.22;font-weight:600;color:var(--pine)}
.rhx-ev-card__sum{font-size:.95rem;line-height:1.5;color:var(--tx-2);max-width:40ch}
.rhx-ev-card__meta{font-size:.88rem;color:var(--tx-2);font-weight:600;margin-top:2px}
.rhx-ev-card__cta{margin-top:auto;padding-top:14px;font-weight:600;font-size:.92rem;color:var(--rust-tx)}
.rhx-ev-card:hover .rhx-ev-card__cta{text-decoration:underline;text-underline-offset:4px}
.rhx-ev-card--nomedia .rhx-ev-card__body{padding-top:26px;border-top:3px solid var(--clay)}

/* ---------- homepage strip ---------- */
.rhx-ev-strip{position:relative}
.rhx-ev-strip__viewport{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;overflow-anchor:none;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:4px}
.rhx-ev-strip__viewport::-webkit-scrollbar{display:none}
.rhx-ev-strip__viewport:focus-visible{outline:3px solid var(--river);outline-offset:6px}
.rhx-ev-strip__track{display:flex;gap:22px;margin:0;padding:0;list-style:none}
.rhx-ev-strip .rhx-ev-item{flex:0 0 calc((100% - 44px) / 3);scroll-snap-align:start}
/* 901px+: card = one third of the row minus its share of the two 22px gaps, so three
   sit edge to edge with no partial fourth. Below 1000px this can pinch under ~300px;
   see the min-width:901/max-width:1000 band below, which drops to two per row instead. */
@media (min-width:901px){
  /* The strip's own viewport padding (below, kept as-is) sits inside the scroll
     container's visible scrollport, not a hard clip, so anything landing in that
     inset stays partly visible. Widen the track into its own right inset by the
     same amount (mirrored/negated) so the flex-basis math above actually resolves
     against the full bleed-to-edge width and three cards land truly edge to edge. */
  .rhx-ev-strip .rhx-ev-card__title{font-size:1.4rem}
  .rhx-ev-strip .rhx-ev-card__sum{font-size:1rem}
  .rhx-ev-strip .rhx-ev-card__body{padding:24px 26px 28px}
}
@media (min-width:901px) and (max-width:1000px){
  .rhx-ev-strip .rhx-ev-item{flex:0 0 calc((100% - 22px) / 2)}
}
.rhx-ev-strip__nav{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}
.rhx-ev-strip__btn{display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;min-height:46px;padding:0;border:1.5px solid var(--river);
  background:transparent;color:var(--river);font-size:1.1rem;line-height:1;cursor:pointer;
  border-radius:0;transition:.18s cubic-bezier(.2,0,.2,1)}
.rhx-ev-strip__btn:hover{background:var(--river);color:var(--paper)}
.rhx-ev-strip__btn:focus-visible{outline:3px solid var(--river);outline-offset:3px}
/* On a dark band, Team HOME can add .rhx-on-ink to any ancestor of the strip. */
.rh-band-ink .rhx-ev-strip__btn,.band--pine .rhx-ev-strip__btn,.rh-section--ink .rhx-ev-strip__btn,.rhx-on-ink .rhx-ev-strip__btn{border-color:var(--on-ink-2);color:var(--on-ink)}
.rh-band-ink .rhx-ev-strip__btn:hover,.band--pine .rhx-ev-strip__btn:hover,.rh-section--ink .rhx-ev-strip__btn:hover,.rhx-on-ink .rhx-ev-strip__btn:hover{background:var(--on-ink);color:var(--ink)}

/* ---------- /events/ page ---------- */
.rhx-events-hero h1{max-width:14ch}
.rhx-events-hero .lede{max-width:56ch;color:var(--tx-2)}
.rhx-events-list{padding:8px 0 96px}
.rhx-ev-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;
  margin:0;padding:0;list-style:none;align-items:stretch}

/* ---------- single event ---------- */
.rhx-event{background:var(--paper);padding:40px 0 88px}
.rhx-event__inner{max-width:820px;margin:0 auto;padding:0 24px}
.rhx-event__inner .crumb{margin-bottom:22px}
.rhx-event__hero{aspect-ratio:3/2;overflow:hidden;background:var(--ground);margin-bottom:34px}
.rhx-event__hero img{width:100%;height:100%;object-fit:cover;display:block}
.rhx-event__head h1{margin:0 0 18px;max-width:18ch}
.rhx-event__facts{list-style:none;margin:0 0 34px;padding:0;display:grid;gap:5px}
.rhx-event__facts li{font-size:1rem;color:var(--tx-2)}
.rhx-event__when{font-weight:700;color:var(--pine)}
.rhx-event__price{font-family:var(--d);font-size:1.2rem;color:var(--pine);font-weight:600;font-variant-numeric:tabular-nums}
.rhx-event__prose p{max-width:64ch;margin-bottom:16px;font-size:1.06rem;line-height:1.66}
.rhx-event__dates,.rhx-event__teachers{margin-top:38px;padding-top:28px;border-top:1px solid var(--rule)}
.rhx-event__dates h2,.rhx-event__teachers h2{font-size:1.18rem;margin-bottom:14px}
.rhx-event__dates ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.rhx-event__dates li{font-size:1rem;color:var(--tx-2)}
.rhx-event__dates li.is-current{color:var(--pine);font-weight:700}
.rhx-event__dates a{color:var(--river);font-weight:600;border-bottom:0;text-decoration:underline;text-decoration-color:var(--clay);text-decoration-thickness:1.5px;text-underline-offset:4px}
.rhx-event__dates a:hover,.rhx-event__dates a:focus-visible{text-decoration-color:currentColor}
.rhx-event__teacher-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:26px;align-items:flex-end}
.rhx-event__teacher-list li{display:flex;flex-direction:column;justify-content:flex-end;gap:9px;width:132px}
.rhx-event__portrait{display:block;aspect-ratio:4/5;overflow:hidden;background:var(--ground)}
.rhx-event__portrait img{width:100%;height:100%;object-fit:cover;object-position:center 22%;display:block}
.rhx-event__teacher-name{font-family:var(--d);font-size:1rem;font-weight:600;color:var(--pine);line-height:1.25}
.rhx-event__action{margin-top:40px;padding-top:30px;border-top:1px solid var(--rule)}
.rhx-event__quiet{margin-top:12px;font-size:.92rem;color:var(--tx-3)}
.rhx-event__back{margin-top:38px}

/* one rust action */
.rhx-action{display:inline-flex;align-items:center;justify-content:center;min-height:52px;
  padding:14px 32px;background:var(--rust);color:#fff;border:1.5px solid var(--rust);
  border-radius:0;font:inherit;font-weight:600;font-size:1.02rem;cursor:pointer;
  transition:.18s cubic-bezier(.2,0,.2,1)}
.rhx-action:hover{background:#96411f;border-color:#96411f;color:#fff}
.rhx-action:focus-visible{outline:3px solid var(--river);outline-offset:3px}

/* ---------- ask about an event ---------- */
.rhx-ask-hero h1{max-width:16ch}
.rhx-ask-hero .lede{max-width:52ch;color:var(--tx-2)}
.rhx-ask-body{padding:8px 0 88px}
.rhx-form{max-width:560px}
.rhx-form .field{max-width:100%}
.rhx-form .check{margin:6px 0 26px}
.rhx-form__wide{max-width:100%}
.rhx-ask-back{margin-top:34px}

/* ---------- responsive ---------- */
@media (max-width:1000px){
  .rhx-ev-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
}
@media (max-width:900px){
  .rhx-ev-strip .rhx-ev-item{flex:0 0 82%}
  .rhx-event__inner{padding:0 20px}
}
@media (max-width:640px){
  .rhx-ev-grid{grid-template-columns:1fr;gap:20px}
  .rhx-events-list{padding-bottom:64px}
  .rhx-ev-strip__track{gap:16px}
  .rhx-ev-strip .rhx-ev-item{flex:0 0 86%}
  .rhx-ev-card__body{padding:18px 18px 22px}
  .rhx-event{padding:26px 0 64px}
  .rhx-event__hero{margin-bottom:26px}
  /* T7-021 (fix-6b): a 108px cell wrapped "Elizabeth (Betty) Poindexter" to
     three lines. 148px (2/row at 360-414 with the gap below) plus a touch
     less font-size gets every teacher name on this page to at most two
     lines, in the same 4:5 portrait width. */
  .rhx-event__teacher-list{gap:14px}
  .rhx-event__teacher-list li{width:148px}
  .rhx-event__teacher-name{font-size:.92rem;line-height:1.22}
  .rhx-action{width:100%;max-width:340px}
}

@media (prefers-reduced-motion: reduce){
  .rhx-ev-card,.rhx-ev-strip__btn,.rhx-action{transition:none}
  .rhx-ev-card:hover{transform:none}
  .rhx-ev-strip__viewport{scroll-behavior:auto}
}

/* Lead, 9 Sep: on the homepage the strip sits inside the page column like every other
   section. Three cards fill the column exactly; the strip rotates one card at a time. */
.rhcx-events__strip{max-width:var(--max,1180px);margin-inline:auto;padding-inline:var(--rhcx-gutter,24px)}