/* Startsidan */
.hero { min-height: 100svh; display: grid; align-items: center; padding: calc(var(--header-h) + 3rem) 0 5rem; position: relative; }
.hero__grid { display: grid; grid-template-columns: 1.25fr .9fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.hero__title { font-size: var(--fs-hero); font-style: italic; line-height: .88; margin-bottom: 1.6rem; }
.hero__title .line-up { display: block; overflow: hidden; padding: 0 .08em .06em 0; }
.hero__cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; }

.hero__card { display: block; padding: clamp(1.4rem, 3vw, 2.2rem); color: var(--text); text-decoration: none; border-radius: var(--radius-lg); }
.hero__card h2 { font-size: clamp(2rem, 3.6vw, 3rem); margin: .8rem 0 .3rem; }
.hero__go { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1.2rem; font-weight: 700; color: var(--accent-text); text-transform: uppercase; font-size: .8rem; letter-spacing: .12em; }
.hero__go svg { width: 18px; transition: transform .3s var(--ease-out); }
.hero__card:hover .hero__go svg { transform: translateX(6px); }
.hero__classes { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 1rem; }

.tag { display: inline-flex; align-items: center; gap: .5em; padding: .3rem .75rem; border-radius: 999px; font-size: .72rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; background: rgb(255 255 255 / .07); box-shadow: inset 0 0 0 1px var(--glass-border); }
.tag::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--text-dim); }
.tag.live::before { background: var(--ok); }
.chip { display: inline-flex; gap: .4em; align-items: baseline; padding: .3rem .7rem; border-radius: 8px; font: 800 1rem/1.2 var(--font-display); background: color-mix(in srgb, var(--accent) 12%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent); }
.chip em { font: 500 .75rem var(--font-body); font-style: normal; color: var(--text-muted); }

.countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin: 1.2rem 0 .4rem; }
.countdown div { display: grid; place-items: center; padding: .7rem 0 .5rem; border-radius: var(--radius-sm); background: rgb(0 0 0 / .18); box-shadow: inset 0 0 0 1px var(--glass-border); }
:root[data-theme="light"] .countdown div { background: rgb(255 255 255 / .55); }
.countdown b { font: 800 clamp(1.8rem, 3vw, 2.5rem)/1 var(--font-display); font-variant-numeric: tabular-nums; }
.countdown span { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }

.scroll-cue { position: absolute; left: 50%; bottom: 1.6rem; width: 26px; height: 42px; border-radius: 14px; box-shadow: inset 0 0 0 2px var(--line-strong); transform: translateX(-50%); opacity: calc(1 - var(--scroll-p, 0) * 3); }
.scroll-cue i { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--accent); animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(14px); opacity: 0; } 100% { opacity: 0; } }

.stats { padding: 0 0 2rem; }
.stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); padding: clamp(1.2rem, 3vw, 2rem); }
.stat { display: grid; justify-items: center; text-align: center; padding: .4rem; }
.stat + .stat { border-left: 1px solid var(--line); }
.stat b { font: 800 clamp(2.6rem, 6vw, 4.6rem)/1 var(--font-display); font-style: italic; background: var(--gradient); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.stat span { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: var(--text-muted); }

.cups { display: grid; gap: var(--gap); margin-top: 2rem; }
.cup-card { display: grid; grid-template-columns: auto 1fr auto; gap: clamp(1rem, 3vw, 2.2rem); align-items: start; padding: clamp(1.2rem, 3vw, 2rem); color: var(--text); text-decoration: none; }
.cup-card__date { display: grid; place-items: center; width: 92px; padding: .8rem 0; border-radius: var(--radius-sm); background: var(--gradient); color: var(--on-accent); }
:root[data-theme="dark"] .cup-card__date { color: #0a1400; }
.cup-card__date b { font: 800 3rem/1 var(--font-display); }
.cup-card__date span { font: 800 1rem/1 var(--font-display); text-transform: uppercase; letter-spacing: .1em; }
.cup-card h3 { font-size: clamp(1.8rem, 3vw, 2.6rem); margin: .7rem 0 .3rem; }
.facts { list-style: none; padding: 0; margin: .6rem 0 1rem; display: flex; flex-wrap: wrap; gap: .4rem 1.4rem; color: var(--text-muted); font-size: .92rem; }
.facts li { display: flex; align-items: center; gap: .45rem; }
.facts svg { width: 17px; height: 17px; color: var(--accent-text); }
.cup-card__classes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem 1.2rem; }
.mini-class { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .6rem; }
.mini-class span { font: 800 1.05rem/1 var(--font-display); }
.mini-class small { color: var(--text-dim); font-size: .74rem; white-space: nowrap; }
.meter { height: 6px; border-radius: 6px; background: var(--line-strong); overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: inherit; background: var(--gradient); transform-origin: left; }
.cup-card__go { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--glass-border); align-self: center; transition: background .3s, color .3s, transform .4s var(--ease-spring); }
.cup-card__go svg { width: 22px; }
.cup-card:hover .cup-card__go { background: var(--accent); color: var(--on-accent); transform: rotate(-45deg); }

.draw-explain { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.rules { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: .8rem; }
.rules li { display: grid; grid-template-columns: auto 1fr; gap: 1rem; padding: 1.1rem 1.3rem; }
.rules svg { width: 30px; height: 30px; color: var(--accent-text); }
.rules h3 { margin: 0 0 .3rem; }
.rules p { margin: 0; }

/* Liten lottningsdemo: lappar hoppar ur skålen ned i grupperna (home.js) */
.bowl-demo { padding: 2rem 1.5rem; border-radius: var(--radius-lg); min-height: 420px; display: grid; gap: 2rem; align-content: center; }
.bowl-demo__bowl { position: relative; height: 130px; margin: 0 auto; width: 230px; border-radius: 0 0 120px 120px; background: radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%); box-shadow: inset 0 -3px 0 var(--line-strong), inset 0 0 0 1px var(--glass-border); overflow: visible; }
.bowl-demo__bowl i { position: absolute; width: 44px; height: 28px; border-radius: 6px; background: var(--surface-2); box-shadow: 0 0 0 1px var(--line-strong); left: calc(20px + (var(--n) * 23px)); top: calc(50px + var(--y, 0px)); transform: rotate(var(--r, 0deg)); }
.fx .bowl-demo__bowl i { animation: jiggle 1.4s ease-in-out infinite alternate; animation-delay: calc(var(--n) * -.2s); }
@keyframes jiggle { to { transform: rotate(calc(var(--r, 0deg) * -1)) translateY(-6px); } }
.bowl-demo__groups { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; }
.bowl-demo__groups div { display: grid; gap: .4rem; padding: .6rem; border-radius: var(--radius-sm); box-shadow: inset 0 0 0 1px var(--glass-border); }
.bowl-demo__groups b { font: 800 .95rem/1 var(--font-display); text-transform: uppercase; color: var(--accent-text); text-align: center; }
.bowl-demo__groups span { height: 26px; border-radius: 6px; background: rgb(255 255 255 / .04); box-shadow: inset 0 0 0 1px var(--line); transition: background .4s, box-shadow .4s; }
.bowl-demo__groups span.is-filled { background: color-mix(in srgb, var(--c) 30%, transparent); box-shadow: inset 0 0 0 1px var(--c), 0 0 18px -4px var(--c); }
.flying-slip { position: fixed; z-index: 5; width: 44px; height: 26px; border-radius: 6px; pointer-events: none; background: var(--c); box-shadow: 0 10px 30px -6px var(--c); transition: transform .9s var(--ease-out), opacity .3s; }

.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); margin-top: 2rem; }
.step { padding: 1.6rem 1.4rem; position: relative; overflow: hidden; }
.step__n { position: absolute; right: .6rem; top: -.4rem; font: 800 italic 6rem/1 var(--font-display); color: color-mix(in srgb, var(--accent) 12%, transparent); }
.step > svg { width: 34px; height: 34px; color: var(--accent-text); margin-bottom: 1.2rem; }
.step h3 { margin-bottom: .4rem; }
.step p { margin: 0; font-size: .95rem; }

.cta-band__inner { padding: clamp(2rem, 6vw, 4.5rem); text-align: center; border-radius: var(--radius-lg); display: grid; justify-items: center; }
.cta-band__inner .lead { margin-inline: auto; }

@media (max-width: 960px) {
  .hero__grid, .draw-explain { grid-template-columns: 1fr; }
  .steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .hero { padding-top: calc(var(--header-h) + 2rem); min-height: auto; }
  .stats__grid { grid-template-columns: 1fr 1fr; row-gap: 1rem; }
  .stat:nth-child(3) { border-left: 0; }
  .cup-card { grid-template-columns: 1fr; }
  .cup-card__date { width: auto; grid-auto-flow: column; gap: .5rem; justify-content: start; padding: .5rem .9rem; }
  .cup-card__date b { font-size: 1.6rem; }
  .cup-card__go { display: none; }
  .steps { grid-template-columns: 1fr; }
  .bowl-demo { min-height: 0; }
  .scroll-cue { display: none; }
}