/* Events page. Tokens, nav, buttons, .panel, .card, .med, .band and the footer come from ../style.css. */

/* Screen-reader-only text (for "opens in a new tab" cues). */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ---------- Empty state: honest, calm, on the glass panel ----------
   A large surface, so it takes the thicker material (the same --glass-thick the floating nav uses).
   data-materialize: page.js adds a small scale spring as the panel arrives, on top of the reveal fade. */
.events-empty-wrap { padding-top: clamp(16px, 3vw, 40px); }
.events-empty { max-width: 60rem; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 48px);
  background: var(--glass-thick); padding: clamp(28px, 5vw, 56px); }
@media (min-width: 900px) {
  .events-empty { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; }
}
.events-empty__icon { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; color: var(--white);
  background: rgba(255, 255, 255, 0.14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.26); }
/* Display size (32 to 52px): tight tracking, tighter leading. */
.events-empty__title { margin: 24px 0 0; font-size: clamp(2rem, 4.2vw, 3.25rem); font-weight: 500; line-height: 1.02; letter-spacing: var(--track-display); text-wrap: balance; }
.events-empty__body { margin: 20px 0 0; max-width: 34rem; font-family: var(--font-body); font-size: clamp(1rem, 1.5vw, 1.125rem); line-height: 1.65; color: rgba(255, 255, 255, 0.92); }
.events-empty__actions { display: flex; flex-direction: column; gap: 10px; }
.events-empty__actions .btn { width: 100%; min-height: 48px; text-align: center; }
.band .btn { min-height: 48px; }

/* ---------- Meditate: heading offset left, two guided videos right ---------- */
.events-meditate { display: grid; gap: clamp(32px, 5vw, 56px); }
@media (min-width: 900px) {
  .events-meditate { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); align-items: start; }
}
.events-meditate__lead { margin: 28px 0 0; max-width: 24ch; font-size: clamp(1.25rem, 2.4vw, 1.75rem); font-weight: 500; line-height: 1.3; letter-spacing: var(--track-title); color: rgba(255, 255, 255, 0.92); }
.events-med { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; list-style: none; margin: 0; padding: 0; }
/* The hover lift is page.js (data-lift) on a spring; the stylesheet's own hover transform is dropped once JS runs. */
.events-med .med { min-height: 128px; transition: box-shadow var(--dur-hover) var(--ease); }
html.js-press .events-med .med:hover { transform: none; }
.events-med .med:focus-visible { border-radius: 16px; outline-offset: 4px; }
.events-med .med__title { font-size: clamp(1.1rem, 2vw, 1.3rem); }
.events-med .med__thumb { width: clamp(110px, 34%, 150px); overflow: hidden; border-radius: 16px; }
/* Hover hint: the still thumbnail eases in slightly, on the compositor (transform only). */
.events-med .med__thumb img { transition: transform var(--dur-slow) var(--ease-spring); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .events-med .med:hover .med__thumb img { transform: scale(1.04); }
}
@media (min-width: 900px) {
  /* Staggered: the second video steps in, so the pair does not read as a flat stack. */
  .events-med li:nth-child(2) { margin-left: clamp(24px, 5vw, 64px); }
}

/* ---------- Follow: three large tiles, YouTube spans two cells ---------- */
.follow-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(14px, 2vw, 22px); list-style: none; margin: 0; padding: 0; }
@media (min-width: 640px) {
  .follow-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: dense; }
  .follow-grid__wide { grid-column: span 2; }
}
@media (min-width: 960px) {
  .follow-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .follow-grid__wide { grid-column: span 2; }
}
.follow-tile { position: relative; height: 100%; min-height: 176px; display: flex; flex-direction: column; justify-content: space-between; gap: 28px;
  padding: clamp(22px, 3vw, 32px); border-radius: var(--radius-card); background: var(--card); color: var(--card-ink);
  box-shadow: 0 24px 48px -32px rgba(var(--tint-rgb), 0.9); isolation: isolate; }
/* Hover depth is a second, deeper shadow. --hover (0 to 1) is set by page.js on the same spring as the lift, so only
   opacity animates. The lift itself is translate, set from JS, so press (scale) and lift compose without fighting. */
.follow-tile::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  box-shadow: 0 34px 60px -28px rgba(var(--tint-rgb), 1); opacity: var(--hover, 0); }
.follow-tile:focus-visible { outline: 2px solid var(--white); outline-offset: 4px; border-radius: var(--radius-card); }
.follow-tile__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.follow-tile__icon { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--card-ink); color: var(--white); }
.follow-tile__icon svg { width: 22px; height: 22px; }
.follow-tile__go { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--item-ink);
  box-shadow: inset 0 0 0 1px rgba(var(--tint-rgb), 0.18); transition: background-color var(--dur-hover) var(--ease), color var(--dur-hover) var(--ease); }
@media (hover: hover) { .follow-tile:hover .follow-tile__go { background: var(--card-ink); color: var(--white); } }
.follow-tile:focus-visible .follow-tile__go { background: var(--card-ink); color: var(--white); }
.follow-tile__text { display: block; }
/* Size-specific tracking: the names sit in the title band (22 to 36px), the handles are running text (16px). */
.follow-tile__name { display: block; font-size: clamp(1.6rem, 3vw, 2.25rem); font-weight: 500; line-height: 1; letter-spacing: var(--track-title); }
.follow-tile__handle { display: block; margin-top: 10px; font-family: var(--font-body); font-size: 1rem; letter-spacing: var(--track-body); color: var(--item-ink); }

/* No-JS fallback: the same hover lift and shadow in CSS. Once main.js has run (html.js-press), page.js owns them. */
html:not(.js-press) .follow-tile:hover { transform: translateY(var(--lift-m)); }
html:not(.js-press) .follow-tile:hover::after { opacity: 1; }

/* ---------- Accessibility: transparency and contrast ----------
   The empty-state panel sets its own background, so it needs its own overrides (style.css only covers .panel). */
@media (prefers-reduced-transparency: reduce) {
  .events-empty { background: rgb(var(--tint-rgb)); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  .events-empty { background: rgb(var(--tint-rgb)); backdrop-filter: none; -webkit-backdrop-filter: none; }
}

/* ---------- Reduced motion ----------
   No lift, no thumbnail zoom, no materialize scale. What remains is the reveal cross-fade from main.js and a
   static shadow change on hover. Transitions are already cut to near-zero by style.css. */
@media (prefers-reduced-motion: reduce) {
  .follow-tile__go, .events-med .med__thumb img { transition: none; }
  .events-med .med__thumb img { transform: none; }
  html.js-press .follow-tile:hover { transform: none; }
}