/* event.css — page-only rules for /event (page spec event.md). Every selector is prefixed .event- or scoped
   under body.page-event; shared classes/tokens come from main.css / responsive.css.
   Breakpoints: 1366 · 1200 · 1024 · 880 · 767 (design-system.md §0). */

/* ---------- §2 hero: text left / Round Room image right ---------- */
.event-intro{padding:42px 14px}
.event-intro__inner{display:flex;gap:20px;max-width:var(--container-max);margin:0 auto}
.event-intro__text,.event-intro__media{flex:1 1 0;min-width:0;padding:10px}
.event-intro__text{display:flex;flex-direction:column;align-items:flex-start;gap:var(--widget-gap)}
.event-intro__text p{margin:0}
.event-intro__title{align-self:stretch}
.event-intro__star{display:inline;width:30px;height:auto;vertical-align:baseline}
.event-intro__media img{width:100%;height:auto}

/* ---------- §3–§5 gradient panels (DECISIONS §7: pure CSS gradient, grows with its text) ----------
   The decorative block is a section ::before (--event-band-w wide, 2560/1684 aspect, vertically centred,
   clipped by the section exactly like the original background image). The text wrapper repaints the SAME
   gradient, sized to the band and shifted out by --event-bleed (the gap between the centred container and the
   section edge), so the two coincide exactly and read as one band; when the copy is taller than the block the
   gradient simply extends — white text never lands on the page background.
   Grid columns (desktop, W = section width): 20 | 35%W-20 | image part under gradient | gap | text | rest. */
.event-panel{position:relative;isolation:isolate;overflow:hidden;margin:0 0 var(--space-section-gap);
  --event-band-w:65vw;                                             /* band width, in the same unit the wrapper repaints it */
  --event-bleed:max(0px,(100vw - var(--container-max)) / 2)}       /* container edge → section edge, 0 below --container-max */
.event-panel::before{content:"";position:absolute;top:50%;right:0;width:var(--event-band-w);aspect-ratio:2560/1684;
  transform:translateY(-50%);background:var(--grad-h);z-index:-1}
.event-panel--photo-right::before{right:auto;left:0}
.event-panel__inner{display:grid;align-items:center;max-width:var(--container-max);margin:0 auto}
.event-panel--photo-left .event-panel__inner{grid-template-columns:20px calc(35% - 20px) calc(20% - 2px) 40px calc(40% - 16px) minmax(20px,1fr)}
.event-panel--photo-right .event-panel__inner{grid-template-columns:20px calc(40% - 32px) 40px calc(25% - 28px) calc(35% - 20px) 20px}
.event-panel__media{position:relative;z-index:1;grid-row:1;align-self:center}   /* explicit row: it shares a column with the gradient wrapper */
.event-panel__media img{width:100%;height:auto}
.event-panel--photo-left .event-panel__media{grid-column:2 / 4}
.event-panel--photo-right .event-panel__media{grid-column:4 / 6}
.event-panel__grad{display:grid;grid-template-columns:subgrid;grid-row:1;align-self:center;align-items:center;
  color:var(--c-text-inverse);
  background-image:var(--grad-h);background-repeat:no-repeat;background-size:var(--event-band-w) 100%}
.event-panel--photo-left .event-panel__grad{grid-column:3 / -1;
  background-position:right calc(-1 * var(--event-bleed)) top 0}   /* band is anchored to the section's right edge */
.event-panel--photo-right .event-panel__grad{grid-column:1 / 5;
  background-position:left calc(-1 * var(--event-bleed)) top 0}
.event-panel--photo-left .event-panel__text{grid-column:3}
.event-panel--photo-right .event-panel__text{grid-column:2}
.event-panel__text{display:flex;flex-direction:column;align-items:flex-start;gap:10px;min-width:0}
.event-panel__text p,.event-panel__text h2,.event-panel__text h3{margin:0;color:inherit}
.event-panel__link{font-weight:700;color:inherit}
.event-panel__link:hover,.event-panel__link:focus-visible{text-decoration:underline}
.event-host__bio{gap:0}
.event-host__bio h2{margin-bottom:10px}
.event-host__bio p + p{margin-top:1.6em}          /* original: one <p> with <br><br> = one blank line */

/* ---------- ≤1366 laptop ---------- */
@media (max-width:1366px){
  .event-intro{padding:48px 30px}
  .event-intro__text,.event-intro__media{padding:0}
  /* panels 1 & 5: 50/50 columns, 20px gap; panel 2 keeps 40/60 and a 40px gap */
  .event-panel--photo-left .event-panel__inner{grid-template-columns:20px calc(35% - 20px) calc(15% - 10px) 20px calc(50% - 30px) 20px}
}

/* ---------- ≤1024 tablet: image 40% / text 60% ---------- */
@media (max-width:1024px){
  .event-panel__text{gap:5px}
  .event-panel--photo-right .event-panel__text,.event-host__bio{gap:0}
  .event-host__bio h2{margin-bottom:5px}
  .event-panel--photo-left .event-panel__inner{grid-template-columns:20px calc(35% - 20px) calc(5% - 4px) 20px calc(60% - 36px) 20px}
  .event-panel--photo-right .event-panel__inner{grid-template-columns:20px calc(60% - 48px) 40px calc(5% - 12px) calc(35% - 20px) 20px}
}

/* ---------- ≤880: gradient block fixed at 570px wide ---------- */
@media (max-width:880px){
  .event-panel{--event-band-w:570px}
  .event-panel--photo-right.section{padding-block:40px}
  /* original: only the two photo-left text columns (4294a86 / 12dfa00) gain 20px block padding at ≤880;
     the photo-right text column (89ac18e) keeps 0 at every breakpoint. */
  .event-panel--photo-left .event-panel__text{padding:20px 0}
  .event-panel--photo-left .event-panel__inner{grid-template-columns:20px calc(100% - 590px) calc(566px - 60%) 20px calc(60% - 36px) 20px}
  .event-panel--photo-right .event-panel__inner{grid-template-columns:20px calc(60% - 48px) 40px calc(558px - 60%) calc(100% - 590px) 20px}
}

/* ---------- ≤767 mobile: stacked, image first, whole section gradient ---------- */
@media (max-width:767px){
  .event-intro{padding:30px 20px}
  .event-intro__inner{flex-direction:column}                                  /* column gap stays 20px (Elementor --gap) */
  .event-intro__media{order:-1;padding:0 0 30px}
  .event-intro__text .btn{margin-top:10px}                                   /* button widget padding-top 10px (≤767) */
  .event-intro__text .event-intro__title{font-size:21px;line-height:1.2}   /* beats responsive.css .t-section (loaded later) */
  /* original: background-size:cover of the 2560x1684 gradient image, still anchored right (panels 1, 5) / left (panel 2):
     the block keeps its aspect ratio, fills the section height and the section clips it, so a tall narrow section
     shows only the end of the gradient the block is anchored to (indigo-ish for panels 1 and 5, teal for panel 2). */
  .event-panel::before{top:0;bottom:0;right:0;left:auto;width:auto;min-width:100%;height:auto;transform:none}
  .event-panel--photo-right::before{right:auto;left:0}
  .event-panel--photo-left.section{padding-block:30px 0}
  .event-panel--photo-right.section{padding-block:30px}
  .event-panel--photo-left .event-panel__inner,.event-panel--photo-right .event-panel__inner{grid-template-columns:20px minmax(0,1fr) 20px;row-gap:20px}
  .event-panel--photo-left .event-panel__media,.event-panel--photo-right .event-panel__media{grid-column:2;grid-row:1}
  .event-panel--photo-left .event-panel__grad,.event-panel--photo-right .event-panel__grad{grid-column:2;grid-row:2;display:block;background:none}
  .event-panel--photo-left .event-panel__text,.event-panel--photo-right .event-panel__text{grid-column:auto}
  .event-panel--photo-right .event-panel__text{padding-top:20px}   /* 20px row-gap + 20px = the original's 40px stacked gap */
}