/* Events Listing Page Styles */

/* ========================================
   Page shell — positioning context for the full-height decorative
   left-edge pipe (per Figma node 21359:48732). The pipe is 72px wide
   and spans the entire page content below the header, so the shell
   wraps every events section and acts as the pipe's containing block.
   ======================================== */
.events-page {
  position: relative;
}

/* Coral neon pipe running the full left edge of the events page.
   Per Figma the pipe is a thin vertical line with a J-hook at the top,
   positioned at left:0, top:14px on the events frame. Asset is 72×1700
   (natural size). Notes:
   - z-index: 1 is required so the pipe paints OVER the opaque white
     backgrounds of `.events-expect` and `.events-cards` (otherwise a
     static section with a solid background occludes it even though
     CSS stacking rules would normally favor the positioned pipe).
   - transform: scaleX(-1) mirrors the asset so the J-hook faces
     inward (into the content column) instead of off-screen left.
   - Hidden on mobile to avoid clutter. */
.events-page__piping {
  position: absolute;
  top: 14px;
  left: 0;
  width: 72px;
  height: auto;
  pointer-events: none;
  user-select: none;
  z-index: 1;
  transform: scaleX(-1);
}

@media (max-width: 767px) {
  .events-page__piping {
    display: none;
  }
}

/* ========================================
   Hero — Coral + Circles + Patient Education Lockup
   ======================================== */
.hero.hero--events {
  background-color: var(--color-coral);
  overflow: hidden;
  position: relative;
  padding-top: 0;
  padding-bottom: 0;
  gap: 0;
  min-height: auto;
}

.hero--events__inner {
  position: relative;
  max-width: 1440px;
  padding: var(--space-5xl) 7.5rem var(--space-5xl) 7.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl);
  overflow: hidden;
}

/* Decorative circles — natural-width ring arc (1123×356).
   The image's ring arcs sit in its left portion; the right half is solid
   coral that blends with the hero background. We anchor the image by its
   right edge so the arcs stay a fixed distance from the lockup — as the
   viewport narrows, the image slides left alongside the lockup, keeping
   the arcs safely in the gap between copy and lockup.
   The container stretches to fill the inner's full height (top:0,
   bottom:0). The image inside uses object-fit:cover so its center band
   is shown — this way there's never an orange gap between the ring and
   the top/bottom of the hero, regardless of how tall the hero becomes. */
.hero--events__circles {
  position: absolute;
  top: 0;
  bottom: 0;
  left: auto;
  right: 0;
  width: 1123px;
  transform: none;
  pointer-events: none;
  z-index: 0;
}

.hero--events__circles picture {
  display: block;
  width: 100%;
  height: 100%;
}

.hero--events__circles img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
}

/* Copy block on the left */
.hero--events__copy {
  position: relative;
  z-index: 2;
  flex: 1 1 540px;
  max-width: 540px;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  color: var(--color-white);
}

.hero--events__title {
  font-family: var(--font-tilt-neon);
  font-size: 40px;
  font-weight: 400;
  line-height: 1.1;
  color: var(--color-white);
  margin: 0;
}

.hero--events__subtitle {
  font-family: var(--font-agenda);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-white);
  margin: 0;
}

.hero--events__cta {
  display: inline-block;
  width: fit-content;
  font-family: var(--font-agenda);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-white);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.hero--events__cta:hover,
.hero--events__cta:focus-visible {
  opacity: 0.85;
  color: var(--color-white);
  transition: opacity 0.2s ease;
}

/* Patient Education Event lockup on the right */
.hero--events__lockup {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  box-sizing: content-box;
  max-width: 350px;
  align-self: center;
  text-align: right;
}

.hero--events__lockup img {
  display: inline-block;
  max-width: 100%;
  height: auto;
}

/* ========================================
   Silver Gradient Band — Sits directly below the hero.
   Figma: 1440×30 desktop / 375×16 mobile, full-bleed.
   Uses the shared --silver-gradient token from variables.css.
   ======================================== */
.events-gradient-band {
  width: 100%;
  height: 30px;
  background: var(--silver-gradient);
}

/* ========================================
   What to Expect — Coral callout card with ring-arc backdrop
   Figma desktop: 1440-wide outer (white), 1200-wide coral card with
   title on the left and a white bullet panel on the right.
   Mobile: title on top, bullet panel below (stacked).
   The decorative ring image is anchored to the bottom of the coral
   card so the top-arc curl rises into view just above the card's
   bottom edge, matching the Figma mockup for both viewports.
   ======================================== */
.events-expect {
  background-color: var(--color-white);
  padding: 60px 120px 30px;
}

.events-expect__container {
  max-width: 1200px;
  margin: 0 auto;
}

.events-expect__card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-2xl);
  background-color: var(--color-coral);
  padding: 40px;
}

/* Ring-arc decoration — bottom-anchored so arcs always peek just below
   the white bullet panel, regardless of card height. The exported asset
   is pre-cropped: transparent top ~300px, arcs concentrated in the
   bottom ~60px. Anchoring to the card's bottom keeps the visible arc
   band against the card edge even when footnote copy makes the card
   taller than Figma's 417px spec. */
.events-expect__decor {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1200px;
  max-width: none;
  height: auto;
  pointer-events: none;
  z-index: 0;
}

.events-expect__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
}

.events-expect__title {
  font-family: var(--font-tilt-neon);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.1;
  color: var(--color-white);
  text-align: center;
  flex: 1 1 auto;
  margin: 0;
}

/* White bullet panel — fixed 750px on desktop per Figma */
.events-expect__panel {
  flex: 0 0 750px;
  background-color: var(--color-white);
  border: 2px solid #f6f4f2;
  border-radius: var(--radius-2xl);
  padding: 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.events-expect__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.events-expect__item {
  position: relative;
  padding-left: 19px; /* 7px bullet glyph + 12px gap */
  font-family: var(--font-agenda);
  font-size: 20px;
  line-height: 1.3;
  color: var(--color-charcol);
}

.events-expect__item::before {
  content: "\2022"; /* • */
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-agenda);
  font-weight: 700;
  color: var(--color-coral);
  line-height: 1.3;
}

.events-expect__footnote {
  font-family: var(--font-agenda);
  font-size: 16px;
  line-height: 1.3;
  color: var(--color-charcol);
  margin: 0;
}

/* ========================================
   Events Cards Section — Figma "Cards - Option 2"
   White section with a large ring-pattern backdrop. Contains a unified
   pill toggle (In-Person / Virtual) centered above a 2-column grid of
   cards on desktop; cards stack into a single column below 1250px.
   ======================================== */
.events-cards {
  position: relative;
  overflow: hidden;
  background-color: var(--color-white);
  padding: 30px 120px 60px;
  /* Leave clearance for the sticky site header when this section is the
     anchor target (#events-tabs). Without this, the "Register here" hero
     link on mobile lands the user with the toggle hidden behind the
     header (DONI-413). On desktop the same offset keeps the toggle and
     the first row of cards comfortably in view (DONI-412 partial). */
  scroll-margin-top: 80px;
}

/* Decorative ring pattern — spans the section width, pinned to the
   BOTTOM of the section per Figma (on every viewport). The asset has
   its visible arcs near the bottom, so bottom-anchoring makes the ring
   hug the section's bottom edge regardless of how tall the card grid
   grows. overflow:hidden on .events-cards clips any excess height. */
.events-cards__backdrop {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  pointer-events: none;
  z-index: 0;
}

/* Empty-state variant — the dedicated no-events ring art is anchored
   to the section's bottom-right corner at its natural 1023×339 size
   rather than stretched full-width, so the arcs feel like a decorative
   accent rather than a backdrop. */
.events-cards__backdrop--empty {
  left: auto;
  right: 0;
  bottom: 0;
  width: auto;
  max-width: 100%;
}

.events-cards__container {
  position: relative;
  z-index: 1;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
}

/* ========================================
   Toggle (unified pill)
   Container carries the coral border; inner segments are seamless.
   ======================================== */
.events-tabs {
  display: inline-flex;
  align-items: center;
  border: 2px solid var(--color-coral);
  border-radius: 999px;
  background-color: var(--color-white);
  padding: 0;
  overflow: hidden;
}

.events-tabs__btn {
  height: 48px;
  padding: 13px 24px 11px;
  border: 0;
  background-color: transparent;
  color: var(--color-charcol);
  font-family: var(--font-agenda);
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  cursor: pointer;
  border-radius: 999px;
  white-space: nowrap;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.events-tabs__btn--active,
.events-tabs__btn[aria-selected="true"] {
  background-color: var(--color-coral);
  color: var(--color-white);
  font-weight: 700;
}

.events-tabs__btn:focus-visible {
  outline: 2px solid var(--color-coral);
  outline-offset: 2px;
}

/* ========================================
   Card Grid
   ======================================== */
.events-cards__grid {
  display: grid;
  /* minmax(0, 1fr) — not plain 1fr — so columns split the container
     strictly 50/50 regardless of card content. Plain `1fr` expands to
     min-content when a card's copy is wider than its fair share,
     which makes sibling cards in the same row narrower and breaks
     parity with other panels (e.g. virtual vs in-person). */
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
  width: 100%;
}

/* The container uses align-items:center to keep the toggle pill centered,
   but the panel needs to fill the full 1200px width so the 2-col grid
   splits evenly at 580px per card. align-self:stretch opts back in to
   the full cross-axis width without affecting the tabs. */
.events-cards__panel {
  align-self: stretch;
  width: 100%;
}

.events-cards__panel--hidden {
  display: none;
}

/* Empty-state "callout" card shown when no events are scheduled.
   Figma: white rounded card with an 8px light-silver border, H4-sized
   charcoal bold copy, centered. Uses the same silver-border treatment
   as the event cards so the two states read as the same family. */
.events-cards__empty {
  width: 100%;
  margin: 0;
  padding: 40px;
  background-color: var(--color-white);
  border: 8px solid #dee1e3;
  border-radius: 24px;
  font-family: var(--font-agenda);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--color-charcol);
  text-align: center;
  grid-column: 1 / -1;
}

/* ========================================
   Event Card — icon on the left, copy + CTA stacked on the right
   The 8px border is Figma's silver-gradient, rendered via the dual
   background-clip technique: a white padding-box layer sits atop a
   silver-gradient border-box layer, and the card's transparent border
   reveals the gradient only in the border ring. Uses the same
   --silver-gradient token as the hero band and callout card.
   ======================================== */
.event-card {
  /* width:100% + max-width:none to override an upstream rule (parent
     theme or Drupal core) that sets article { max-width: 800px } and
     collapses cards to content width inside the grid track. Without
     this, cards don't fill their grid columns and sibling cards end
     up at inconsistent widths driven by content. */
  width: 100%;
  max-width: none;
  background:
    linear-gradient(var(--color-white), var(--color-white)) padding-box,
    var(--silver-gradient) border-box;
  border: 8px solid transparent;
  border-radius: var(--radius-2xl);
  padding: 40px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 40px;
  box-shadow: none;
}

.event-card__icon {
  flex: 0 0 100px;
  width: 100px;
  height: 100px;
  display: block;
}

.event-card__body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.event-card__copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.event-card__heading {
  font-family: var(--font-agenda);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--color-charcol);
  margin: 0;
}

.event-card__meta,
.event-card__ambassador {
  font-family: var(--font-agenda);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--color-charcol);
  margin: 0;
}

/* Coral pill CTA with right-arrow.
   Padding-right matches padding-left (24px) so the chevron sits with
   balanced whitespace inside the pill — the Figma button frames its
   chevron in a 24px icon container which pushes the visible glyph ~7.5px
   off the right wall, the same effect we get here via symmetric padding
   (DONI-419). */
.event-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  height: 48px;
  padding: 13px 24px 11px 24px;
  background-color: var(--color-coral);
  color: var(--color-white);
  border-radius: 999px;
  font-family: var(--font-agenda);
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  transition: background-color var(--transition-fast);
}

.event-card__cta:hover,
.event-card__cta:focus-visible {
  background-color: var(--color-primary-dark, #c94808);
  color: var(--color-white);
}

.event-card__arrow {
  display: block;
  width: 10px;
  height: 16px;
  flex-shrink: 0;
}

/* ========================================
   Responsive — Narrow desktop / tablet (768–1350px)
   Keep the wide ring image (doni-circles.webp) all the way down to 768px.
   The arc band is ~228px wide (image x 391–619) inside the 1123px image.
   To keep it cleanly between copy and lockup as the viewport shrinks:
     1. Padding shrinks fluidly (48px → 16px) to free up content width.
     2. Copy and lockup narrow so there's always ≥228px between their
        inner edges (copy uses two sub-bands — see below).
     3. The image shifts rightward (negative `right`) proportionally so
        the arc band tracks the inward-moving lockup.
   ======================================== */
@media (min-width: 768px) and (max-width: 1350px) {
  .hero--events__inner {
    padding-left: clamp(16px, 4vw, 48px);
    padding-right: clamp(16px, 4vw, 48px);
    gap: var(--space-md);
  }

  .hero--events__copy {
    flex: 1 1 auto;
  }

  .hero--events__lockup {
    max-width: clamp(280px, 22vw, 340px);
  }

  .hero--events__circles {
    /* Factor 0.48 empirically tuned: at 768px right ≈ -279px, positioning
       the arc band (image_right − 732 to image_right − 504) just after the
       copy and just before the lockup at every width in this band.      */
    right: calc(0px - max(0px, (1350px - 100vw) * 0.48));
  }
}

/* Narrow desktop (992–1350px): copy sits at a fixed 350px so the arc band
   has a predictable gap to land in. */
@media (min-width: 992px) and (max-width: 1350px) {
  .hero--events__copy {
    max-width: 350px;
  }
}

/* Tablet (768–991px): copy shrinks fluidly (540px → ~220px) to keep
   clearing the arc band at the narrow end of the range. */
@media (min-width: 768px) and (max-width: 991px) {
  .hero--events__copy {
    max-width: clamp(220px, 30vw, 540px);
  }
}

/* ========================================
   Responsive — Tablet
   (Horizontal padding is handled by the 768–1350 rule above so the ring
    math stays consistent; this rule keeps only the vertical tweaks.)
   ======================================== */
@media (max-width: 991px) {
  .hero--events__inner {
    padding-top: var(--space-4xl);
    padding-bottom: var(--space-4xl);
  }

  .hero--events__title {
    font-size: 36px;
  }
}

/* ========================================
   Events-Expect — stack earlier than the hero does.
   The 1200px coral card + fixed 750px panel crams the title column
   uncomfortably between ~992px and ~1250px, so we switch to the
   stacked layout for everything up to 1249px (not just true tablet).
   ======================================== */
@media (max-width: 1249px) {
  /* Shrink outer padding so the coral card gets breathing room.
     Left padding is doubled (80px) to clear the 72px-wide left pipe
     so the coral card no longer sits flush against it. */
  .events-expect {
    padding: 60px 40px 30px 80px;
  }

  /* Coral card switches to column layout; the fixed 750px panel flips
     to full-width so it no longer forces horizontal overflow. */
  .events-expect__inner {
    flex-direction: column;
    gap: 32px;
  }

  .events-expect__panel {
    flex: 0 0 auto;
    width: 100%;
  }

  /* Cards section — same 1249 breakpoint; the 2-column grid gets too
     narrow for the icon+copy row to read comfortably, so collapse it
     to a single column and shrink outer padding. Left padding is
     doubled (80px) to match .events-expect above and clear the
     72px-wide left pipe so cards no longer sit flush against it. */
  .events-cards {
    padding: 30px 40px 60px 80px;
  }

  .events-cards__grid {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   Responsive — Mobile
   ======================================== */
@media (max-width: 767px) {
  .hero--events__inner {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-lg);
    gap: var(--space-lg);
    min-height: auto;
  }

  .hero--events__circles {
    top: 0;
    right: 0;
    left: auto;
    width: 213px;
    height: 200px;
    transform: none;
  }

  .hero--events__lockup {
    width: 218px;
    max-width: 100%;
    padding: 0;
    align-self: flex-start;
    text-align: left;
    order: 1;
  }

  .hero--events__copy {
    order: 2;
    flex: 1 1 auto;
    max-width: 100%;
    gap: var(--space-md);
  }

  .hero--events__title {
    font-size: 32px;
    line-height: 1.2;
  }

  .hero--events__subtitle,
  .hero--events__cta {
    font-size: 18px;
  }

  /* Silver gradient band — shorter on mobile per Figma (30px → 16px) */
  .events-gradient-band {
    height: 16px;
  }

  /* What to Expect — mobile callout card (stacked) */
  .events-expect {
    padding: 40px 24px 20px;
  }

  .events-expect__card {
    padding: 24px;
  }

  .events-expect__inner {
    flex-direction: column;
    gap: 24px;
  }

  .events-expect__panel {
    flex: 0 0 auto;
    width: 100%;
    padding: 24px;
  }

  .events-expect__item {
    font-size: 16px;
  }

  /* Cards — mobile per Figma: full-bleed padding, toggle spans width,
     card stacks icon above copy, CTA fills the card width. */
  .events-cards {
    padding: 20px 24px 40px;
  }

  /* Backdrop on mobile — Figma anchors a 1900px-wide ring at x=-779,
     so only a ~375px slice of a much larger circle is visible. To match
     that physical size, let the image render at its natural width and
     bleed off-canvas horizontally (clipped by .events-cards overflow).
     Centering keeps the meaningful arc band in the visible slice. */
  .events-cards__backdrop {
    width: auto;
    max-width: none;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }

  .events-cards__container {
    gap: 40px;
  }

  .events-tabs {
    display: flex;
    width: 100%;
  }

  .events-tabs__btn {
    flex: 1 1 0;
    padding: 13px 12px 11px;
    text-align: center;
    font-size: 16px;
  }

  .event-card {
    flex-direction: column;
    align-items: center;
    padding: 40px;
    gap: 24px;
  }

  .event-card__body {
    width: 100%;
    align-items: stretch;
  }

  .event-card__cta {
    align-self: stretch;
    justify-content: center;
  }
}