/* KaddieIQ Golf Calendar — hero, winners ticker, filters and the month carousel.
 *
 * Tokens come from kiq-tokens.css, shared by every page. The seven tour
 * colours below are the one thing the two-accent brand palette can't cover
 * on its own — a dark value per category, overridden for light mode, same
 * pattern kiq-tokens.css itself uses for --gold/--wm/--pro.
 */

:root{
  --cc-gap:16px; --cc-card:min(360px,88vw);
  --bp-land:url("../images/holes/calamity-land.svg");
  --bp-port:url("../images/holes/calamity-port.svg");
  --cat-major:#E2C877;  --cat-wmajor:#E896BC;  --cat-pga:#5FD46E;  --cat-dpw:#6FB8E8;
  --cat-lpga:#B99BE8;   --cat-liv:#4FD4CC;      --cat-team:#F0A868;
}
:root[data-theme="light"]{
  --cat-major:#7E6218;  --cat-wmajor:#A03A6E;  --cat-pga:#1B7A2E;  --cat-dpw:#1F5C8F;
  --cat-lpga:#6B3FA8;   --cat-liv:#0E7D77;      --cat-team:#B45A1C;
}
@media (prefers-color-scheme:light){
  :root[data-theme="system"]{
    --cat-major:#7E6218;  --cat-wmajor:#A03A6E;  --cat-pga:#1B7A2E;  --cat-dpw:#1F5C8F;
    --cat-lpga:#6B3FA8;   --cat-liv:#0E7D77;      --cat-team:#B45A1C;
  }
}

*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:400 17px/1.65 var(--body)}

/* ---------- hero ---------- */
.cc-hero{position:relative;z-index:1;width:min(1180px,92vw);margin:0 auto;padding:clamp(16px,2.5vw,28px) 0 clamp(20px,3vw,32px);text-align:center}
.cc-kicker{margin:0 0 .5em;font:var(--fw-label) 12px/1.4 var(--head);letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
.cc-hero h1{margin:0 0 .3em;font:var(--fw-display) clamp(34px,6vw,58px)/1.05 var(--head);letter-spacing:-.02em}
.cc-hero h1 .g{color:var(--gold)}
.cc-hero p{margin:0 auto;max-width:62ch;color:var(--soft);font-size:15px}

/* ---------- winners / this-week ticker ---------- */
.cc-chyron{position:relative;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  background:var(--bg-2);overflow:hidden;--cc-speed:70s;margin-top:clamp(20px,3vw,32px)}
.cc-chyron-track{display:flex;width:max-content;animation:cc-scroll var(--cc-speed) linear infinite}
.cc-chyron:hover .cc-chyron-track,.cc-chyron:focus-within .cc-chyron-track{animation-play-state:paused}
.cc-chyron-group{display:flex;flex:0 0 auto}
.cc-chyron span.item{display:inline-flex;align-items:center;gap:.7em;padding:clamp(5px,.72vw,9px) clamp(16px,2vw,28px);
  white-space:nowrap;font:var(--fw-title) clamp(11px,1.5vw,20px)/1.15 var(--head);letter-spacing:-.01em;color:var(--ink)}
.cc-chyron span.item::after{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold);opacity:.75}
.cc-chyron .cc-tag{font:var(--fw-label) 11px/1 var(--head);letter-spacing:.08em;text-transform:uppercase;color:var(--gold-hi);margin-right:.2em}
@keyframes cc-scroll{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

/* ---------- section shell (reused for filters+carousel and note) ---------- */
.cc-wrap{position:relative;isolation:isolate;width:min(1180px,92vw);margin:clamp(30px,5vw,54px) auto 0;padding:0 0 clamp(10px,2vw,18px)}
.cc-wrap::before{content:"";position:absolute;inset:-8% -6% 4%;z-index:-1;pointer-events:none;
  background:radial-gradient(480px 300px at 10% 0%,color-mix(in srgb,var(--gold) 22%,transparent),transparent 72%),
             radial-gradient(440px 320px at 92% 90%,color-mix(in srgb,var(--wm) 20%,transparent),transparent 72%);
  filter:blur(8px);opacity:.55}

/* ---------- controls ---------- */
.cc-controls{display:flex;flex-direction:column;gap:16px;margin-bottom:18px}
.cc-ctrl-label{font:var(--fw-label) 11px/1 var(--head);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}

.cc-years{display:flex;gap:6px;flex-wrap:wrap;min-height:34px}
.cc-year{padding:7px 17px;border-radius:999px;cursor:pointer;
  border:1px solid var(--hair);background:var(--panel);color:var(--muted);
  font:var(--fw-title) 13px/1 var(--head);
  transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .2s ease}
.cc-year:hover{border-color:var(--gold);color:var(--ink);transform:translateY(-1px)}
.cc-year[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--on-gold)}

.cc-filters{display:flex;gap:6px;flex-wrap:wrap;min-height:30px}
.cc-filter{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;cursor:pointer;
  border:1px solid var(--hair);background:var(--panel);color:var(--muted);
  font:var(--fw-label) 12px/1 var(--body);font-weight:600;
  transition:opacity .2s ease,border-color .2s ease,color .2s ease}
.cc-filter:hover{border-color:var(--gold)}
.cc-filter .swatch{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.cc-filter[aria-pressed="false"]{opacity:.38}
.cc-filter[aria-pressed="true"]{border-color:currentColor;color:var(--ink)}
.cc-filter .fcount{font-size:11px;color:var(--muted)}
.cc-filter-all{font-weight:800;color:var(--muted)}
.cc-filter-all[aria-pressed="false"]{opacity:1}
.cc-filter-all[aria-pressed="true"]{background:var(--gold);border-color:var(--gold);color:var(--on-gold)}
.cc-filter-all[aria-pressed="true"] .fcount{color:var(--on-gold);opacity:.75}

.cc-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.cc-count{font-size:12.5px;color:var(--muted)}
.cc-nav-group{display:flex;gap:8px}
.cc-nav{width:38px;height:38px;border-radius:50%;flex:none;cursor:pointer;background:var(--surface);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid var(--rule);color:var(--ink);display:grid;place-items:center;
  transition:border-color .2s ease,color .2s ease,background-color .2s ease}
.cc-nav:hover:not(:disabled){border-color:var(--gold);color:var(--gold)}
.cc-nav:disabled{opacity:.32;cursor:default}
.cc-nav svg{width:15px;height:15px}

/* ---------- month carousel ---------- */
/* Three cards visible on desktop; scroll-snap carries swipe/trackpad/keyboard
   on its own. A scroll listener (kiq-calendar.js) sets --cd (0, 1, 2…) on
   every card — its distance from the card nearest the viewport centre — and
   opacity/scale below read that one variable. Whichever month is centred
   reads as "now": solid, full size, lifted; its neighbours fade and shrink
   by how far off-centre they are, in both directions, continuously as you
   scroll rather than just once on load. */
.cc-track{display:flex;gap:var(--cc-gap);overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;scrollbar-width:none;padding:6px 4px 16px;
  min-height:380px}
.cc-track::-webkit-scrollbar{display:none}

.cc-month{
  --cd:0;
  scroll-snap-align:center;flex:0 0 var(--cc-card);
  background:var(--panel);border:1px solid var(--hair);border-radius:var(--r,14px);
  padding:18px 16px 14px;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:clamp(.32,calc(1 - var(--cd) * .34),1);
  transform:scale(clamp(.88,calc(1 - var(--cd) * .06),1));
  filter:saturate(clamp(.55,calc(1 - var(--cd) * .25),1));
  transition:opacity .25s ease,transform .25s ease,filter .25s ease,border-color .25s ease;
}
.cc-month[data-cd="0"]{border-color:var(--gold);box-shadow:var(--medal-shadow)}
.cc-month.is-empty{opacity:calc(clamp(.32,calc(1 - var(--cd) * .34),1) * .6)}
.cc-month-name{font:var(--fw-title) 15px/1 var(--head);letter-spacing:.05em;text-transform:uppercase;color:var(--gold-hi);margin-bottom:14px}
.cc-month[data-cd="0"] .cc-month-name{color:var(--gold)}
.cc-dow,.cc-days{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.cc-dow{margin-bottom:5px}
.cc-dow span{font:var(--fw-label) 10px/1 var(--head);text-align:center;color:var(--muted);text-transform:uppercase}

.cc-day{aspect-ratio:1/1;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  font:600 13px/1 var(--body);color:var(--soft);border-radius:6px;border:1px solid transparent;padding:0;background:none}
.cc-day.blank{visibility:hidden}
.cc-day .dnum{line-height:1}
.cc-day .dots{display:flex;align-items:center;justify-content:center;gap:2.5px;height:5px}
.cc-day .dots i{width:5px;height:5px;border-radius:50%;display:block}
.cc-day.today{border-color:var(--gold);font-weight:700;color:var(--ink)}
.cc-day.has-ev{cursor:pointer;font-weight:700;color:var(--ink);transition:transform .18s ease,background-color .18s ease}
.cc-day.has-ev:hover{transform:scale(1.14);z-index:2}
.cc-day.has-ev:focus-visible{outline:2px solid var(--focus);outline-offset:1px}

@media (max-width:1180px){ .cc-month{flex-basis:min(320px,80vw)} }
@media (max-width:760px){ .cc-month{flex-basis:min(340px,84vw)} .cc-track{min-height:360px} }
@media (max-width:460px){ .cc-month{flex-basis:calc(100% - 8px)} }
@media (max-width:1180px){ .cc-filters{min-height:56px} }
@media (max-width:760px){ .cc-filters{min-height:84px} }
@media (max-width:460px){ .cc-filters{min-height:112px} }

/* ---------- floating event tile ---------- */
.cc-backdrop{position:fixed;inset:0;z-index:90;display:none;background:rgba(0,0,0,.42);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.cc-backdrop.open{display:block}
.cc-pop{position:absolute;z-index:95;display:none;width:min(330px,calc(100vw - 32px));
  background:var(--panel);border:1px solid var(--hair);border-radius:var(--r,14px);box-shadow:var(--tile-shadow);
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);padding:18px 20px 16px;
  animation:cc-pop-in .18s cubic-bezier(.4,0,.2,1)}
.cc-pop.open{display:block}
@keyframes cc-pop-in{from{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}
.cc-pop-close{position:absolute;top:10px;right:12px;background:none;border:0;cursor:pointer;font-size:1.15rem;line-height:1;color:var(--muted);padding:4px}
.cc-pop-close:hover{color:var(--ink)}
.cc-pop-date{font:var(--fw-label) 11px/1 var(--head);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:13px}
.cc-ev{padding-top:13px;margin-top:13px;border-top:1px solid var(--rule)}
.cc-ev:first-of-type{padding-top:0;margin-top:0;border-top:none}
.cc-ev-tag{display:inline-flex;align-items:center;gap:6px;padding:3px 10px;border-radius:999px;margin-bottom:8px;
  font:700 10px/1 var(--head);letter-spacing:.08em;text-transform:uppercase}
.cc-ev-tag .swatch{width:6px;height:6px;border-radius:50%}
.cc-ev-name{font:var(--fw-title) 17px/1.25 var(--head);letter-spacing:-.02em;color:var(--ink);margin-bottom:9px}
.cc-ev-row{display:flex;gap:8px;font-size:13px;line-height:1.5;margin-bottom:4px}
.cc-ev-k{font-weight:700;color:var(--muted);flex-shrink:0;min-width:58px}
.cc-ev-v{color:var(--soft)}
.cc-ev-note{font-size:12.5px;color:var(--muted);font-style:italic;line-height:1.5;margin-top:9px}
.cc-ev-result{display:inline-flex;align-items:center;gap:6px;margin-top:11px;padding:5px 12px;border-radius:999px;
  background:color-mix(in srgb,var(--wm) 16%,transparent);border:1px solid color-mix(in srgb,var(--wm) 45%,transparent);
  font:700 12px/1 var(--head);color:var(--wm)}
.cc-ev-upcoming{display:inline-flex;align-items:center;gap:6px;margin-top:11px;padding:5px 12px;border-radius:999px;
  background:color-mix(in srgb,var(--gold) 16%,transparent);border:1px solid var(--hair);
  font:700 12px/1 var(--head);color:var(--gold-hi)}

@media (max-width:520px){
  .cc-pop{position:fixed !important;left:16px !important;right:16px !important;top:50% !important;transform:translateY(-50%);
    width:auto;max-height:78vh;overflow-y:auto}
}

.cc-note{margin-top:18px;padding:12px 16px;border-radius:var(--r,14px);background:var(--panel);border:1px solid var(--hair);
  font-size:12.5px;color:var(--muted);line-height:1.6}

main{padding-bottom:clamp(40px,6vw,72px)}

@media (prefers-reduced-motion:reduce){
  .cc-chyron-track{animation:none;transform:none}
  .cc-track{scroll-behavior:auto}
  .cc-month{transition:none}
  .cc-day.has-ev:hover{transform:none}
}