/* ============================================================================
 * Countdown themes — shared by the event page and the events list.
 * Engine: js/countdown.js. The host element carries ONE theme class:
 *   .cd-theme-elegant   (default — matches the cinematic event aesthetic)
 *   .cd-theme-treasure  (decorative pirate board, art in images/countdown/)
 * Structure is theme-agnostic; only colors/fonts/textures change per theme.
 * ========================================================================== */

/* ---- shared shell ---- */
.cd-block{--cd-gap:clamp(.5rem,2vw,1.1rem);max-width:660px;margin-left:auto;margin-right:auto;
  display:flex;flex-direction:column;align-items:center;text-align:center;}
.cd-lead{min-width:0;}
.cd-eyebrow{text-transform:uppercase;letter-spacing:.24em;font-size:12.5px;font-weight:700;margin:0 0 12px;}
.cd-headline{margin:0 0 24px;line-height:1.05;}
.cd-foot{margin-top:18px;font-size:13px;letter-spacing:.14em;text-transform:uppercase;}

.cd-hud{display:flex;gap:var(--cd-gap);align-items:stretch;justify-content:center;flex-wrap:wrap;}
.cd-seg{position:relative;min-width:clamp(64px,17vw,118px);padding:clamp(.7rem,2.2vw,1.15rem) clamp(.5rem,1.6vw,1rem);text-align:center;border-radius:14px;}
.cd-value{position:relative;display:block;font-size:clamp(2rem,8.5vw,3.7rem);line-height:1;font-variant-numeric:tabular-nums;}
.cd-label{position:relative;display:block;margin-top:.5rem;font-size:clamp(.6rem,1.7vw,.8rem);letter-spacing:.2em;text-transform:uppercase;}
.cd-value.is-tick{animation:cd-tick .5s cubic-bezier(.34,1.56,.64,1);}
@keyframes cd-tick{0%{transform:translateY(-26%) rotate(-4deg);opacity:.2;}60%{transform:translateY(5%) rotate(2deg);}100%{transform:translateY(0) rotate(0);opacity:1;}}

/* ============================================================
   ELEGANT — default. Uses the event page's own palette tokens
   (--coral/--teal/--panel/--ink2/--line) with graceful fallbacks.
   ============================================================ */
.cd-theme-elegant .cd-eyebrow{color:var(--teal,var(--ce-aqua));}
.cd-theme-elegant .cd-headline{font-family:var(--ce-font-display);font-weight:800;color:#fff;font-size:clamp(26px,3.4vw,40px);}
.cd-theme-elegant .cd-foot{color:var(--muted,var(--ce-mist-3));}
.cd-theme-elegant .cd-seg{
  background:linear-gradient(160deg,var(--panel,var(--ce-navy-hero-2)),var(--ink2,var(--ce-navy-hero)));
  border:1px solid var(--line,rgba(255,255,255,.12));
  box-shadow:0 4px 10px rgba(2,8,20,.4);
}
.cd-theme-elegant .cd-value{font-family:var(--ce-font-display);font-weight:900;color:#fff;}
.cd-theme-elegant .cd-label{color:var(--coral, var(--ce-coral-hot));font-weight:700;}
.cd-theme-elegant.cd-hud.is-complete .cd-value,
.cd-theme-elegant .cd-hud.is-complete .cd-value{color:var(--coral, var(--ce-coral-hot));text-shadow:0 0 16px color-mix(in srgb, var(--ce-coral-hot) 60%, transparent);}

/* ============================================================
   TREASURE — decorative pirate board (opt-in for signature events).
   Aged wood + gold + rope frame + iron corners, hand-authored SVGs.
   ============================================================ */
/* Palette + assets come from the shared token block in event-themes.css
   ([data-theme="treasure"], .cd-theme-treasure). One source of truth. */
.cd-theme-treasure{
  position:relative;padding:clamp(1.6rem,4vw,2.8rem);border-radius:16px;
  background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.42)),var(--thm-board);
  background-size:cover,320px 320px;
  border:24px solid transparent;border-image:var(--thm-frame) 30 round;
  box-shadow:0 18px 50px rgba(0,0,0,.6),inset 0 0 60px rgba(0,0,0,.5);
}
.cd-theme-treasure .cd-iron{position:absolute;width:clamp(38px,8vw,56px);height:clamp(38px,8vw,56px);
  background:var(--thm-corner) center/contain no-repeat;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.7));z-index:3;}
.cd-theme-treasure .cd-iron.tl{top:-13px;left:-13px;}
.cd-theme-treasure .cd-iron.tr{top:-13px;right:-13px;transform:rotate(90deg);}
.cd-theme-treasure .cd-iron.br{bottom:-13px;right:-13px;transform:rotate(180deg);}
.cd-theme-treasure .cd-iron.bl{bottom:-13px;left:-13px;transform:rotate(270deg);}
.cd-theme-treasure .cd-emblem{width:clamp(50px,11vw,74px);height:clamp(50px,11vw,74px);margin:0 auto .4rem;
  background:var(--thm-motif) center/contain no-repeat;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.7));animation:pir-sway 5s ease-in-out infinite;}
@keyframes pir-sway{0%,100%{transform:rotate(-3deg);}50%{transform:rotate(3deg);}}
.cd-theme-treasure .cd-eyebrow{color:var(--thm-text-dim);}
.cd-theme-treasure .cd-headline{font-family:var(--thm-head-font);font-weight:400;
  color:var(--thm-accent);letter-spacing:.03em;font-size:clamp(2rem,6vw,3.4rem);
  text-shadow:2px 2px 0 var(--thm-wood-dark),0 0 10px rgba(230,196,134,.5);}
.cd-theme-treasure .cd-foot{color:var(--thm-text-dim);}
.cd-theme-treasure .cd-foot .cd-compass{display:inline-block;vertical-align:-8px;width:30px;height:30px;margin-right:8px;
  background:var(--thm-compass) center/contain no-repeat;animation:pir-spin 30s linear infinite;}
@keyframes pir-spin{to{transform:rotate(360deg);}}
.cd-theme-treasure .cd-seg{
  background:linear-gradient(180deg,rgba(255,230,180,.06),rgba(0,0,0,.4)),var(--thm-board);
  background-size:cover,200px 200px;border:2px solid var(--thm-wood-dark);border-radius:12px;
  box-shadow:inset 0 2px 6px rgba(255,230,180,.12),inset 0 -6px 14px rgba(0,0,0,.6),0 4px 10px rgba(0,0,0,.5);
}
.cd-theme-treasure .cd-seg::before{content:"";position:absolute;left:-2px;right:-2px;top:50%;height:6px;
  transform:translateY(-50%);background:linear-gradient(180deg,#4a4f55,#15181b);opacity:.35;pointer-events:none;}
.cd-theme-treasure .cd-value{font-family:var(--thm-head-font);color:var(--thm-parch);
  text-shadow:2px 2px 0 var(--thm-ink),0 1px 0 rgba(255,236,190,.25);}
.cd-theme-treasure .cd-label{color:var(--thm-accent-deep);font-family:var(--thm-body-font);}
.cd-theme-treasure.cd-hud.is-complete .cd-value,
.cd-theme-treasure .cd-hud.is-complete .cd-value{color:var(--thm-accent);text-shadow:0 0 14px var(--thm-accent),2px 2px 0 var(--thm-ink);}

/* ---- accessibility: calm everything for reduced-motion users ---- */
@media (prefers-reduced-motion: reduce){
  .cd-value.is-tick,.cd-theme-treasure .cd-emblem,.cd-theme-treasure .cd-foot .cd-compass{animation:none !important;}
}

/* ---- compact: the events-list teaser variant ---- */
.cd-block.cd-compact .cd-headline{font-size:clamp(18px,2.4vw,24px);margin-bottom:14px;}
.cd-block.cd-compact .cd-seg{min-width:clamp(52px,14vw,76px);padding:.55rem .4rem;}
.cd-block.cd-compact .cd-value{font-size:clamp(1.5rem,6vw,2.2rem);}
.cd-block.cd-compact .cd-eyebrow{margin-bottom:8px;}
/* ---- desktop: a wide, short BANNER — title on the left, the countdown row on
   the right, dates underneath. Keeps the board from eating vertical space and
   lets it flow straight into the next section. (Not the compact list teaser.) ---- */
@media(min-width:561px){
  .cd-block:not(.cd-compact){
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-areas:"lead timer" "foot timer";
    align-items:center;align-content:center;
    column-gap:clamp(24px,4vw,60px);row-gap:4px;
    text-align:left;max-width:none;
  }
  .cd-block:not(.cd-compact) .cd-lead{grid-area:lead;align-self:end;}
  .cd-block:not(.cd-compact) .cd-foot{grid-area:foot;align-self:start;text-align:left;margin:0;}
  .cd-block:not(.cd-compact) #cd-timer{grid-area:timer;}
  .cd-block:not(.cd-compact) .cd-hud{flex-wrap:nowrap;}
  .cd-block:not(.cd-compact) .cd-eyebrow{margin-bottom:4px;}
  .cd-block:not(.cd-compact) .cd-headline{margin:0;}
  .cd-theme-treasure:not(.cd-compact) .cd-headline{font-size:clamp(1.9rem,3.4vw,2.7rem);}
  .cd-theme-elegant:not(.cd-compact) .cd-headline{font-size:clamp(24px,3vw,34px);}
  /* left-align + shrink the emblem, thin the rope, tighten padding: short banner */
  .cd-theme-treasure:not(.cd-compact) .cd-emblem{margin:0 0 .25rem;width:clamp(42px,4.2vw,52px);height:clamp(42px,4.2vw,52px);}
  .cd-theme-treasure:not(.cd-compact){border-width:18px;padding:clamp(.9rem,1.8vw,1.35rem) clamp(1.6rem,3vw,2.4rem);}
  .cd-block:not(.cd-compact) .cd-seg{padding-top:.7rem;padding-bottom:.7rem;}
}

/* ---- mobile: collapse to one tight row of 4 (a timer strip) and slim the
   decorative chrome so the board is a banner, not a full-screen takeover ---- */
@media(max-width:560px){
  .cd-block{--cd-gap:7px;}
  .cd-hud{gap:7px;flex-wrap:nowrap;}
  .cd-seg{min-width:0;flex:1 1 0;padding:.55rem .2rem;border-radius:10px;}
  .cd-value{font-size:clamp(1.35rem,7.6vw,2rem);}
  .cd-label{font-size:clamp(.46rem,2.4vw,.62rem);letter-spacing:.05em;margin-top:.38rem;}
  .cd-eyebrow{letter-spacing:.14em;margin-bottom:8px;}
  .cd-foot{font-size:12px;letter-spacing:.1em;}
  .cd-theme-elegant .cd-headline{font-size:clamp(22px,6.4vw,30px);}
  .cd-theme-treasure{border-width:13px;padding:15px 12px;}
  .cd-theme-treasure .cd-headline{font-size:clamp(1.7rem,7.6vw,2.2rem);}
  .cd-theme-treasure .cd-emblem{width:42px;height:42px;margin-bottom:.2rem;}
  .cd-theme-treasure .cd-iron{width:30px;height:30px;}
  .cd-theme-treasure .cd-seg::before{height:4px;}
}