/* KaddieIQ Golf Intelligence — the coin-and-reel hub.
 *
 * Tokens from kiq-tokens.css, header/footer/blueprint from kiq-chrome.css.
 * Clicking a coin drops it, then the matching tiles reel in column by
 * column with a blur streak, like three physical reels stopping in
 * sequence. Uses the same gold the rest of the site already spends on
 * accents — a "coin" needed no new colour language.
 */

:root{
  --ig-gap:18px;
  --bp-land:url("../images/holes/tommorris-land.svg");
  --bp-port:url("../images/holes/tommorris-port.svg");
}

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

/* ---------- masthead ---------- */
.ig-hero{width:min(1180px,92vw);margin:0 auto;padding:clamp(32px,6vw,64px) 0 clamp(20px,3vw,32px);text-align:center}
.ig-kicker{margin:0 0 .5em;font:var(--fw-label) 12px/1.4 var(--head);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.ig-hero h1{margin:0 0 .4em;font:var(--fw-display) clamp(16px,2.8vw,29px)/1.05 var(--head);letter-spacing:-.02em}
.ig-hero h1 .g{color:var(--wm)}
.ig-hero p{margin:0 auto;max-width:52ch;color:var(--soft);font-size:clamp(16px,1.8vw,19px)}

/* ---------- coin row ---------- */
.ig-coins{width:min(1180px,92vw);margin:clamp(24px,4vw,44px) auto 0;display:flex;flex-wrap:wrap;
  justify-content:center;gap:clamp(14px,2.4vw,26px)}
.ig-coin{appearance:none;background:none;border:0;padding:0;cursor:pointer;display:flex;flex-direction:column;
  align-items:center;gap:10px;width:104px;font-family:var(--head);color:var(--muted);
  transition:color .2s ease}
/* Same medallion treatment as the homepage ring: a plain circular image
   carrying its own gold/green/gold rim baked in, lifted only by shadow and
   scale — no gradient or icon layer needed once the artwork does that work. */
.ig-coin-face{position:relative;width:76px;height:76px;border-radius:50%;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.ig-coin-face img{width:100%;height:100%;border-radius:50%;display:block;pointer-events:none;
  box-shadow:var(--medal-shadow)}
.ig-coin-n{position:absolute;bottom:-2px;right:-2px;min-width:18px;height:18px;padding:0 4px;border-radius:999px;
  background:var(--bg);color:var(--gold-hi);font:var(--fw-title) 10px/18px var(--head);text-align:center;
  box-shadow:0 0 0 2px var(--gold-fill)}
.ig-coin-label{font:var(--fw-title) 13px/1.25 var(--head);letter-spacing:.01em;text-align:center;color:var(--ink)}
.ig-coin:hover .ig-coin-face,.ig-coin:focus-visible .ig-coin-face{transform:translateY(-3px) scale(1.04)}
.ig-coin[aria-pressed="true"] .ig-coin-face{transform:translateY(-2px) scale(1.08)}
.ig-coin[aria-pressed="true"] .ig-coin-face img{box-shadow:0 0 0 2px var(--tile-edge),0 0 28px rgba(200,168,75,.4),var(--medal-shadow)}
.ig-coin[aria-pressed="true"] .ig-coin-label{color:var(--wm)}

/* Coin-drop cue: a quick fall-and-settle toward the grid below, echoing
   "inserting" the coin to start the reels. */
.ig-coin[data-just-played] .ig-coin-face{animation:ig-drop .5s cubic-bezier(.4,0,.2,1)}
@keyframes ig-drop{
  0%{transform:translateY(0) scale(1)}
  35%{transform:translateY(18px) scale(.92)}
  60%{transform:translateY(-4px) scale(1.02)}
  100%{transform:translateY(0) scale(1)}
}

/* ---------- results ---------- */
.ig-results{width:min(1180px,92vw);margin:clamp(36px,6vw,60px) auto 0;min-height:120px;position:relative}
.ig-prompt{text-align:center;color:var(--muted);padding:clamp(30px,6vw,60px) 0;font-size:15px}
.ig-results-head{display:none;align-items:baseline;justify-content:space-between;gap:16px;margin:0 0 18px;
  padding-bottom:14px;border-bottom:1px solid var(--rule)}
.ig-results.active .ig-results-head{display:flex}
.ig-results-head h2{margin:0;font:var(--fw-title) clamp(19px,2.2vw,24px)/1.3 var(--head)}
.ig-results-count{color:var(--muted);font-size:13px}

/* The reel window: while results are settling, the grid's top and bottom
   fade to the page colour, like tiles arriving from off-frame rather than
   simply appearing. */
.ig-results.settling{
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 70px,#000 calc(100% - 70px),transparent 100%);
  mask-image:linear-gradient(to bottom,transparent 0,#000 70px,#000 calc(100% - 70px),transparent 100%)}

.ig-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}

/* Image-led card, matching the live /intelligence blog-card exactly: one
   16:9 frame, the photo filling it edge to edge, every piece of text sitting
   on top of the image over a scrim rather than in a panel below it. The one
   deliberate departure from the shipped page is that the scrim there is a
   fixed dark navy (rgba(6,12,24,…)) regardless of theme — here it is built
   from var(--bg), so it fades to dark in dark mode and to this theme's pale
   cream in light mode, with --ink (which itself flips) carrying the text
   rather than hardcoded white. */
.ig-tile{position:relative;display:block;overflow:hidden;aspect-ratio:16/9;border-radius:var(--r,14px);
  border:1px solid var(--hair);background:var(--bg-2);text-decoration:none;color:inherit;
  box-shadow:0 14px 28px -18px rgba(0,0,0,.5);
  transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;
  opacity:0}
.ig-tile:hover,.ig-tile:focus-visible{border-color:var(--gold);transform:translateY(-3px);
  box-shadow:0 20px 34px -16px rgba(0,0,0,.6)}
.ig-tile:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.ig-tile[hidden]{display:none}

.ig-tile-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .55s ease;
  /* A light, single consistent grade over photography shot in several
     different styles (some warm and editorial, some cooler and abstract) —
     enough that thirty-six images from different sessions read as one
     system, not so much that the photo — the actual point of using it — is
     the thing being hidden. */
  filter:saturate(.92) contrast(1.03) sepia(.06)}
.ig-tile:hover .ig-tile-img{transform:scale(1.06)}

.ig-tile-scrim{position:absolute;inset:0;
  background:linear-gradient(to top,
    color-mix(in srgb,var(--bg) 94%,transparent) 0%,
    color-mix(in srgb,var(--bg) 74%,transparent) 32%,
    color-mix(in srgb,var(--bg) 20%,transparent) 64%,
    transparent 100%)}

.ig-tile-num{position:absolute;top:10px;left:11px;z-index:2;
  font:900 11px/1 var(--head);letter-spacing:.02em;color:var(--ink);
  background:color-mix(in srgb,var(--bg) 55%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid var(--hair);padding:5px 9px;border-radius:999px}
/* Listen mirrors the number badge — same corner treatment, opposite side —
   rather than sitting in the tag row, so it reads as a property of the tile
   (this one has audio) rather than another topic tag. */
.ig-tile-listen{position:absolute;top:10px;right:11px;z-index:2;display:inline-flex;align-items:center;gap:.3em;
  font:700 9px/1 var(--head);letter-spacing:.08em;text-transform:uppercase;color:var(--gold-hi);
  background:color-mix(in srgb,var(--bg) 55%,var(--gold) 12%);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid color-mix(in srgb,var(--gold) 45%,transparent);padding:5px 9px;border-radius:999px}

.ig-tile-body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:12px 13px 13px}
.ig-tile-tagrow{display:flex;align-items:center;gap:5px;margin-bottom:6px;flex-wrap:wrap}
/* Tag pills carry their own tinted, blurred backdrop (the same trick as the
   number badge) rather than relying only on the scrim beneath — over a
   bright patch of photo, high up where the scrim has mostly faded out,
   that's the difference between legible and not, in both themes. */
.ig-tile-tag{font:700 9px/1 var(--head);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);
  background:color-mix(in srgb,var(--bg) 55%,transparent);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid var(--hair);padding:3px 7px;border-radius:999px}
.ig-tile-title{font:800 14.5px/1.28 var(--head);letter-spacing:-.02em;color:var(--ink);margin-bottom:4px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ig-tile-meta{font:500 10.5px/1 var(--body);color:var(--soft)}

/* Reel-drop entrance. Columns settle in sequence, left to right, like three
   physical reels stopping one after another — set inline by JS as
   --ig-delay from each tile's column and row. The streak of blur plus a
   vertical squash is what reads as motion rather than a plain slide-in. */
.ig-tile.reel-in{
  animation:ig-reel .62s cubic-bezier(.22,.9,.28,1) both;
  animation-delay:var(--ig-delay,0s)}
@keyframes ig-reel{
  0%{opacity:0;transform:translateY(-130px) scaleY(1.22);filter:blur(7px)}
  45%{opacity:1;filter:blur(2px)}
  72%{transform:translateY(6px) scaleY(.985);filter:blur(0)}
  100%{opacity:1;transform:translateY(0) scaleY(1);filter:blur(0)}
}

@media (prefers-reduced-motion:reduce){
  .ig-coin-face{transition:none}
  .ig-coin[data-just-played] .ig-coin-face{animation:none}
  .ig-tile.reel-in{animation:none;opacity:1;transform:none;filter:none}
  .ig-results.settling{mask-image:none;-webkit-mask-image:none}
}

/* ---------- SEO prose (What we write about / Common questions) ---------- */
/* Real crawlable copy below the interactive hub, not a design element — kept
   deliberately plain, reusing the same heading/body tokens as everywhere
   else rather than pulling in the whole article stylesheet for one section. */
.ig-prose{width:min(1180px,92vw);margin:clamp(48px,7vw,84px) auto 0;text-align:left}
.ig-prose h2{font:var(--fw-display) clamp(22px,3vw,32px)/1.25 var(--head);letter-spacing:-.01em;margin:2em 0 .5em}
.ig-prose h2:first-child{margin-top:0}
.ig-prose h3{font:var(--fw-title) clamp(17px,2vw,19px)/1.35 var(--head);margin:1.4em 0 .4em}
.ig-prose p{font:400 16px/1.65 var(--body);color:var(--soft);max-width:72ch;margin:0 0 .8em}
.ig-prose a{color:var(--gold-hi);text-underline-offset:2px}
.ig-prose a:hover{color:var(--gold)}
.ig-prose-cta{margin-top:1.4em;font:var(--fw-title) 15px/1 var(--head)}
.ig-prose-cta a{color:var(--gold-hi);text-decoration:none}
.ig-prose-cta a:hover{color:var(--gold);text-decoration:underline}

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

@media (max-width:640px){
  .ig-coin{width:84px}
  .ig-coin-face{width:64px;height:64px}
}

@media (max-width:560px){
  .ig-grid{grid-template-columns:1fr 1fr;gap:11px}
  /* Two columns leaves each tile too narrow for 16:9 to hold a wrapped
     two-tag row plus a two-line title without the body climbing high
     enough to collide with the number badge pinned at the top — taller
     tiles buy that room back. The number is a decorative index rather
     than information anyone relies on, so it's simpler to drop it here
     than to keep chasing the collision. */
  .ig-tile{aspect-ratio:4/5}
  .ig-tile-num{display:none}
  .ig-tile-title{font-size:12.5px}
  .ig-tile-body{padding:10px}
  .ig-tile-listen{font-size:9.5px;padding:4px 7px}
}
@media (max-width:380px){
  .ig-grid{grid-template-columns:1fr}
}

/* Fly-out-tab clearance fix — see the comment in kiq-page.css's
   .pg-wrap rule for the full reasoning. */
@media (min-width:641px){
  .ig-hero{width:min(1180px,calc(100vw - 192px))}
  .ig-coins{width:min(1180px,calc(100vw - 192px))}
  .ig-results{width:min(1180px,calc(100vw - 192px))}
  .ig-prose{width:min(1180px,calc(100vw - 192px))}
}