/* Meditation player — Midnight Iris. Two themes: geometry (standard) and heart (featured). */

.med-player {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background:
    radial-gradient(120% 90% at 50% 0%, var(--iris-veil) 0%, var(--ink-raised) 55%, var(--midnight) 100%);
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 3rem);
  text-align: center;
}
.med-player::before {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(60% 45% at 50% 42%, rgba(107, 63, 160, 0.28), transparent 70%);
  pointer-events: none;
}

/* ---- the geometry stage ---- */
.med-stage {
  position: relative;
  width: min(340px, 72vw);
  margin: 0 auto 1.75rem;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}
.med-stage svg { width: 100%; height: 100%; overflow: visible; }
.med-stage .geo-stroke { fill: none; stroke: var(--gold); stroke-width: 1.1; opacity: 0.85; }
.med-stage .geo-faint  { fill: none; stroke: var(--gold); stroke-width: 0.7; opacity: 0.28; }
.med-stage .geo-bright { fill: none; stroke: var(--gold-bright); stroke-width: 1.3; opacity: 0.95; }

/* motion: slow drift + breath. Runs only while .playing. */
.geo-spin      { transform-origin: 50% 50%; animation: geo-spin 90s linear infinite paused; }
.geo-spin-rev  { transform-origin: 50% 50%; animation: geo-spin 140s linear infinite reverse paused; }
.geo-breathe   { transform-origin: 50% 50%; animation: geo-breathe 9s ease-in-out infinite paused; }
.med-player.playing .geo-spin,
.med-player.playing .geo-spin-rev,
.med-player.playing .geo-breathe { animation-play-state: running; }

@keyframes geo-spin { to { transform: rotate(360deg); } }
@keyframes geo-breathe {
  0%, 100% { transform: scale(1);     opacity: 1; }
  50%      { transform: scale(1.035); opacity: 0.92; }
}

/* soft glow that swells with the breath while playing */
.med-halo {
  position: absolute; inset: 8%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(214, 164, 82, 0.14), transparent 72%);
  opacity: 0;
  transition: opacity 1.2s ease;
  pointer-events: none;
}
.med-player.playing .med-halo { opacity: 1; animation: geo-breathe 9s ease-in-out infinite; }

/* ---- text ---- */
.med-kicker { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-pale); opacity: 0.8; margin: 0 0 0.5rem; }
.med-title  { font-family: var(--serif); font-size: clamp(1.5rem, 3.4vw, 2.1rem); color: var(--lavender); margin: 0 0 0.35rem; }
.med-sub    { font-family: var(--sans); font-size: 0.95rem; color: var(--lavender-dim); margin: 0 0 1.6rem; }

/* ---- controls ---- */
.med-controls { position: relative; display: flex; align-items: center; gap: 1rem; max-width: 34rem; margin: 0 auto; }
.med-play {
  flex: none;
  width: 3.4rem; height: 3.4rem;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: linear-gradient(160deg, var(--iris-veil), var(--ink-raised));
  color: var(--gold-bright);
  display: grid; place-items: center;
  cursor: pointer;
  transition: box-shadow 0.4s ease, transform 0.2s ease;
}
.med-play:hover { box-shadow: 0 0 22px rgba(214, 164, 82, 0.35); transform: scale(1.04); }
.med-play svg { width: 1.15rem; height: 1.15rem; fill: currentColor; }
.med-play .icon-pause { display: none; }
.med-player.playing .med-play .icon-play { display: none; }
.med-player.playing .med-play .icon-pause { display: block; }

.med-track { flex: 1; display: flex; align-items: center; gap: 0.8rem; }
.med-bar {
  -webkit-appearance: none; appearance: none;
  flex: 1; height: 4px; border-radius: 2px;
  background: linear-gradient(to right, var(--gold) var(--med-progress, 0%), rgba(188, 138, 59, 0.22) var(--med-progress, 0%));
  cursor: pointer;
}
.med-bar::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--gold-bright);
  border: 2px solid var(--gold-ink);
  box-shadow: 0 0 8px rgba(214, 164, 82, 0.6);
}
.med-bar::-moz-range-thumb {
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--gold-bright); border: 2px solid var(--gold-ink);
}
.med-time { font-family: var(--sans); font-size: 0.8rem; color: var(--lavender-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* JS removes [controls]; if JS never runs, the native player remains usable. */
.med-player audio[controls] { width: 100%; max-width: 34rem; margin-top: 1rem; }
.med-player.js audio { display: none; }

/* honor reduced motion: geometry becomes a still emblem */
@media (prefers-reduced-motion: reduce) {
  .geo-spin, .geo-spin-rev, .geo-breathe, .med-player.playing .med-halo { animation: none !important; }
}

/* ---- library page bits ---- */
.med-featured { margin: 0 0 3.5rem; }
.med-featured .med-player { border-color: rgba(214, 164, 82, 0.55); box-shadow: 0 0 60px rgba(107, 63, 160, 0.25); }
.med-groups h3 { font-family: var(--serif); color: var(--gold-pale); font-size: 1.15rem; letter-spacing: 0.04em; margin: 2.5rem 0 1rem; }
.med-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1.1rem; }
.med-card {
  display: block;
  border: 1px solid var(--hairline-soft);
  border-radius: 10px;
  background: var(--ink-raised);
  padding: 1.15rem 1.25rem;
  text-decoration: none;
  transition: border-color 0.3s ease, transform 0.2s ease;
}
.med-card:hover { border-color: var(--gold); transform: translateY(-2px); }
.med-card .t { font-family: var(--serif); color: var(--lavender); font-size: 1.05rem; margin: 0 0 0.3rem; }
.med-card .m { font-family: var(--sans); color: var(--lavender-dim); font-size: 0.8rem; margin: 0; }
.med-len {
  display: inline-block; margin-top: 0.6rem;
  font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold-pale); border: 1px solid var(--hairline-soft); border-radius: 99px; padding: 0.15rem 0.6rem;
}

/* A library card whose recording has not arrived, and the player for one that has. Both sit
   under the duration pill so the card keeps its shape either way. */
.med-audio { display: block; width: 100%; margin-top: 0.7rem; }
.med-soon {
  font-family: var(--sans); font-size: 0.8rem; font-style: italic;
  color: var(--lavender-dim); margin: 0.7rem 0 0;
}

/* featured player gets a larger stage */
.med-featured .med-stage { width: min(430px, 82vw); }

/* ---- 2026-08-27 revision: compact featured + card descriptions ---- */
.med-featured--compact .med-player { padding: clamp(1.2rem, 3vw, 1.9rem) clamp(1rem, 3vw, 2rem); }
.med-featured--compact .med-stage { width: min(215px, 55vw); margin-bottom: 1.1rem; }
.med-featured--compact .med-title { font-size: clamp(1.25rem, 2.6vw, 1.6rem); }
.med-featured--compact .med-sub { margin-bottom: 1.1rem; max-width: 30rem; margin-left: auto; margin-right: auto; }
.med-featured--compact { margin-bottom: 2.5rem; }

.med-desc { font-family: var(--sans); color: var(--lavender-dim); font-size: 0.85rem; line-height: 1.55; margin: 0.55rem 0 0; }
.med-desc p { margin: 0; }
.med-more {
  background: none; border: none; padding: 0; margin-top: 0.35rem;
  font-family: var(--sans); font-size: 0.76rem; letter-spacing: 0.06em;
  color: var(--gold-pale); cursor: pointer;
}
.med-more:hover { color: var(--gold-bright); }

/* lecture archive cards (video) */
/* The id on each lecture card is the landing point for five redirect rows from the old
   site (/whispers-of-the-goddess-winter-solstice-meditation/ and friends). The nav bar is
   sticky, so without an offset the card title parks underneath it and the reader thinks the
   link went nowhere. 6.5rem is what theme.css already gives the Sessions anchors. */
.lec-card { position: relative; scroll-margin-top: 6.5rem; }
.lec-month { font-family: var(--sans); color: var(--lavender-dim); font-size: 0.8rem; margin: 0; }
.lec-badge {
  display: inline-flex; align-items: center; gap: 0.35rem; margin-top: 0.6rem; margin-right: 0.5rem;
  font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold-pale); border: 1px solid var(--hairline-soft); border-radius: 99px; padding: 0.15rem 0.6rem;
}
.lec-badge svg { width: 0.7rem; height: 0.7rem; fill: currentColor; }
.lec-link { font-family: var(--sans); font-size: 0.8rem; color: var(--gold-pale); text-decoration: none; display: inline-block; margin-top: 0.7rem; }
.lec-link:hover { color: var(--gold-bright); }

/* The lecture cards carry the longest text on the site, so they get wider columns than the
   meditation grid. The approved page set this inline; it is a class here because the
   template renders the grid in a loop. */
/* Cards take their own height rather than the row's. A lecture with a player stands about
   700px tall and July, which has no recording, holds three lines; stretched to match it was
   mostly empty box. */
.med-grid--lectures { grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); align-items: start; }
.lec-intro { font-size: 0.9rem; color: var(--lavender-dim); margin-top: 0.8rem; max-width: var(--measure); }
/* CJ films these on a phone, held upright, so every one is 9:16. This frame was 16/9 while no
   file existed to contradict it, which would have letterboxed each talk into a thin strip with
   black bars down both sides. The max-height is what keeps a card from becoming a column: at a
   19rem card the picture would otherwise stand 540px tall before the title and description are
   added, so it is capped and centred, which also gives the shorter July card something to sit
   beside without the row looking broken. */
.lec-video {
  display: block;
  width: 100%;
  max-width: 100%;
  aspect-ratio: 9 / 16;
  max-height: 30rem;
  margin: 0.7rem auto 0;
  border-radius: 8px;
  background: #000;
  object-fit: contain;
}
/* What a card says while its recording is still on CJ's drive. Deliberately quiet: it replaces
   the play badge rather than sitting beside it, so no card advertises a video it cannot play. */
.lec-soon {
  font-family: var(--sans); font-size: 0.8rem; font-style: italic;
  color: var(--lavender-dim); margin: 0.7rem 0 0;
}