/* "Use It or Lose It" event page (events/use-it.html) */

.use-it {
  --ui-accent: #e0d54c;
  --ui-accent-light: #f0e99e;
  --ui-accent-ink: #7b7529;
  --ui-ink: #0a0a0a;
}

/* --- Header + countdown ------------------------------------------------- */

.cd {
  --accent: var(--ui-accent); --ink: #fafafa; --muted: #8a8a86;
  width: 100%; color: var(--ink);
  background:
    radial-gradient(ellipse 80% 60% at 50% 100%, rgba(224,213,76,0.12), rgba(224,213,76,0) 70%),
    linear-gradient(180deg, #2a2a2a 0%, #0a0a0a 65%, #030303 100%);
  font-family: "cofo-peshka-variable", sans-serif;
  font-variation-settings: "slnt" 0, "wdth" 100, "wght" 700;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(28px, 5vh, 56px); padding: clamp(56px, 10vw, 144px) 16px; overflow: hidden;
}
.cd__head { display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; max-width: 900px; animation: cd-fade .7s ease both; }
.cd__bar { width: 44px; height: 4px; border-radius: 4px; background: var(--accent); }
.cd__title { margin: 0; font-family: inherit; font-size: clamp(28px, 7.4vw, 76px); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; }
.cd__sub { margin: 0; font-size: clamp(12px, 1.5vw, 15px); font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); }
.cd__actions { margin-top: 8px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.cd__btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 28px; border-radius: 8px; background: var(--accent); color: var(--ui-ink);
  font-family: Poppins, sans-serif; font-variation-settings: normal; font-size: clamp(16px, 1.3vw, 17px); font-weight: 600; letter-spacing: .01em; text-decoration: none;
}
.cd__btn:hover, .cd__btn:focus-visible { background: #eee68a; color: var(--ui-ink); }
.cd__btn--outline { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.cd__btn--outline:hover, .cd__btn--outline:focus-visible { background: rgba(224,213,76,.12); color: #eee68a; }
.cd__row { display: flex; flex-wrap: nowrap; align-items: flex-start; justify-content: center; gap: clamp(6px, 2vw, 22px);
  font-size: clamp(22px, 8vw, 104px); font-family: inherit; font-weight: 700; max-width: 100%; animation: cd-fade .9s ease both; }
.cd__group { display: flex; flex-direction: column; align-items: center; gap: .16em; }
.cd__digits { display: flex; gap: .08em; }
.cd__cell { box-sizing: border-box; height: 1.5em; padding: .15em 0; width: .78em; overflow: hidden; background: #101010;
  border: 1px solid rgba(224,213,76,.16); border-radius: .12em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 8px 24px rgba(0,0,0,.5); display: flex; justify-content: center; }
.cd__strip { display: flex; flex-direction: column; }
.cd__strip.is-anim { transition: transform .65s cubic-bezier(.22,.85,.24,1); }
.cd__num { height: 1.2em; display: flex; align-items: center; justify-content: center; }
.cd__label { font-family: inherit; font-size: clamp(10px, 1.4vw, 14px); font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.cd__sep { height: 1.5em; display: flex; align-items: center; color: var(--accent); line-height: 1; padding-bottom: .12em; }
@keyframes cd-fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .cd__strip.is-anim { transition: none; } .cd__head, .cd__row { animation: none; } }

/* Home-page banner (index.html, shown Oct–Dec): tighter than the landing-page header,
   and give the #info strip above it room so the map card doesn't butt against it (only when
   #info is the last thing in <header>; e.g. Woodland has a promo section in between). */
.use-it[data-season-banner] .cd { padding-top: clamp(40px, 6vw, 96px); padding-bottom: clamp(40px, 6vw, 96px); }
header:has(+ .use-it[data-season-banner]:not([hidden])) #info:last-child { padding-bottom: clamp(32px, 4vw, 56px); }

/* --- Body sections ------------------------------------------------------ */

.ui-container { max-width: 1232px; }

.ui-container h2, .ui-container h3 { font-family: Poppins, sans-serif; }

.ui-photo { width: 100%; height: 100%; min-height: 240px; max-height: 420px; object-fit: cover; border-radius: 12px; box-shadow: 0 8px 20px rgba(0,0,0,.14); }

.ui-card { height: 100%; padding: 28px 24px; border-radius: 12px; box-shadow: 0 8px 20px rgba(0,0,0,.14); display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.ui-card h2 { margin: 0; font-size: clamp(24px, 2.2vw, 30px); font-weight: 700; line-height: 1.2; }
.ui-card p { margin: 0; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.7; }
.ui-card--accent { background: linear-gradient(135deg, var(--ui-accent) 0%, var(--ui-accent-light) 100%); color: var(--ui-ink); }

.ui-heading { margin: 0 0 24px; font-size: clamp(26px, 2.5vw, 34px); font-weight: 700; line-height: 1.2; }

.ui-tip { height: 100%; padding: 24px; border-radius: 12px; background: #F8F9FA; border-top: 5px solid var(--ui-accent); display: flex; flex-direction: column; gap: 10px; color: var(--ui-accent-ink); }
.ui-tip h3 { margin: 0; font-size: 19px; font-weight: 600; color: #212529; }
.ui-tip p { margin: 0; font-size: 15px; line-height: 1.7; color: #495057; }

.ui-fsa { background: #FFFFFF; border: 1px solid #E9ECEF; box-shadow: 0 8px 20px rgba(0,0,0,.06); justify-content: flex-start; gap: 16px; }
.ui-fsa > div:last-child { display: flex; flex-direction: column; gap: 10px; }
.ui-fsa p { color: #495057; font-size: clamp(15px, 1.2vw, 17px); }
.ui-fsa__icon { width: 64px; height: 64px; flex-shrink: 0; border-radius: 999px; background: var(--ui-accent); display: flex; align-items: center; justify-content: center; }
.ui-fsa__icon svg { width: 30px; height: 30px; }

.ui-cta { padding: 32px 24px; border-radius: 12px; background: linear-gradient(113deg, #212529 21%, #6c757d); box-shadow: 0 8px 20px rgba(0,0,0,.14); color: #FFFFFF; display: flex; flex-direction: column; gap: 24px; }
.ui-cta__body { display: flex; flex-direction: column; gap: 10px; }
.ui-cta h2 { margin: 0; font-size: clamp(26px, 2.2vw, 30px); font-weight: 700; }
.ui-cta p { margin: 0; max-width: 640px; font-size: clamp(15px, 1.2vw, 17px); line-height: 1.7; color: #E9ECEF; }
.ui-cta__actions { display: flex; flex-direction: column; gap: 12px; }
.ui-pill { align-self: flex-start; display: flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; border-radius: 999px; background: rgba(255,255,255,.12); color: var(--ui-accent); font-size: 13px; font-weight: 600; }
.ui-pill[hidden] { display: none; }

.ui-btn { display: flex; align-items: center; justify-content: center; gap: 10px; height: 56px; padding: 0 24px; border-radius: 8px; font-size: 19px; font-weight: 600; text-decoration: none; }
.ui-btn--accent { background: var(--ui-accent); color: var(--ui-ink); }
.ui-btn--accent:hover, .ui-btn--accent:focus-visible { background: #eee68a; color: var(--ui-ink); }
.ui-btn--light { background: #FFFFFF; color: #212529; }
.ui-btn--light:hover, .ui-btn--light:focus-visible { background: #E9ECEF; color: #212529; }

@media (min-width: 768px) {
  .ui-fsa { flex-direction: row; align-items: center; gap: 36px; padding: 44px 48px; }
  .ui-fsa__icon { width: 88px; height: 88px; }
  .ui-fsa__icon svg { width: 40px; height: 40px; }
}

@media (min-width: 992px) {
  .ui-card--accent { padding: 44px 48px; }
  .ui-tip { padding: 28px; }
  .ui-tip h3 { font-size: 20px; }
  .ui-tip p { font-size: 16px; }
  .ui-cta { flex-direction: row; align-items: center; gap: 48px; padding: 48px 56px; }
  .ui-cta__body { flex-grow: 1; }
  .ui-cta__actions { width: 280px; flex-shrink: 0; }
}