/*
 * Víkingur 26: front page layout.
 *
 * Section layout from ui_kits/web/HomePage.jsx and the grid rules in the kit's
 * index.html (.w-hrail, .w-news, .w-shop, .w-disc and their breakpoints).
 * Component internals are in components.css.
 */

/* ── Hero: photo fading to black, fixtures rail on black ── */
.vik-hero{position:relative;background:var(--black);color:#fff;overflow:hidden}
.vik-hero__media{position:absolute;left:0;right:0;top:0;height:clamp(560px,82vh,860px);overflow:hidden}
.vik-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vik-hero__scrim{position:absolute;inset:-2px 0;background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,.15) 25%,rgba(0,0,0,.55) 60%,#000 98%)}
.vik-hero__inner{position:relative;padding-top:clamp(120px,22vh,220px)}
.vik-hero__story{display:grid;gap:22px;justify-items:start;max-width:1000px}
.vik-hero__tag{font-family:var(--font-condensed);font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase}
.vik-hero__title{margin:0;font-family:var(--font-display);font-weight:900;font-size:clamp(60px,8.4vw,136px);line-height:.84;text-transform:uppercase;text-wrap:balance}
.vik-hero__title a{color:inherit;text-decoration:none}
.vik-hero__title a:hover{color:inherit}
.vik-hero__sub{margin:0;max-width:520px;font-size:18px;line-height:1.45;color:rgba(255,255,255,.88)}
.vik-hero__fixtures-title{margin-top:clamp(72px,12vh,128px)}
.vik-hrail{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(300px,26vw,380px);gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 max(40px,calc((100vw - 1440px)/2 + 40px));scroll-padding:0 max(40px,calc((100vw - 1440px)/2 + 40px))}
.vik-hrail::-webkit-scrollbar{display:none}
.vik-hrail:focus-visible{outline-offset:-2px}
.vik-hero__progress{display:flex;justify-content:center;padding:36px 0 56px}
.vik-hero__progress span{position:relative;display:block;width:180px;height:3px;background:rgba(255,255,255,.2)}
.vik-hero__progress span::after{content:"";position:absolute;top:0;bottom:0;width:36px;left:calc(var(--p,0) * (100% - 36px));background:#fff;transition:left 120ms linear}

/* ── Split hero (SplitHero): story card + match panel ── */
.vik-split{background:var(--white);padding:24px 0}
.vik-split__grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(360px,1fr);gap:24px}
.vik-split__grid.is-single{grid-template-columns:1fr}
/* Text sits at the bottom but in normal flow, so a long headline grows the card
   instead of running out of its top edge (it did at 375px). */
.vik-story{position:relative;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;min-height:560px;border-radius:var(--radius-card);clip-path:polygon(0 0,100% 0,100% calc(100% - 36px),calc(100% - 36px) 100%,0 100%) /* fallback; cut-corners.js rounds the joints */;background:var(--black);color:#fff;text-decoration:none}
.vik-story:hover{color:#fff}
.vik-story__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 900ms var(--ease-strike)}
.vik-story:hover .vik-story__img{transform:scale(1.04)}
.vik-story__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.82) 100%)}
.vik-story__body{position:relative;padding:clamp(24px,3vw,48px);padding-top:120px;display:grid;gap:18px;justify-items:start}
.vik-story__tag{font-family:var(--font-condensed);font-weight:700;font-size:14px;letter-spacing:.08em;text-transform:uppercase}
.vik-story__title{margin:0;font-family:var(--font-display);font-weight:900;font-size:clamp(40px,4.6vw,76px);line-height:.9;text-transform:uppercase;text-wrap:balance}
.vik-story__sub{max-width:520px;font-size:18px;line-height:1.45;color:rgba(255,255,255,.88)}
.vik-story .w-btn{pointer-events:none}
.vik-story:hover .w-btn--inverse{background:var(--gray-100)}

.vik-match{display:grid;grid-template-rows:auto 1fr auto;background:var(--white);border:1px solid var(--border-hairline);border-radius:var(--radius-card);overflow:hidden;min-width:0}
.vik-match__main{display:grid;gap:20px;padding:24px 24px 28px;border-bottom:1px solid var(--border-hairline);color:var(--ink)}
.vik-match__head{display:flex;justify-content:space-between;align-items:center;gap:8px;min-width:0}
.vik-match__badge,.vik-match__meta,.vik-match__list-title{font-family:var(--font-condensed);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase}
.vik-match__badge{flex:none;padding:5px 7px;background:var(--vik-astrida);color:#fff;line-height:1}
.vik-match__meta{color:var(--text-secondary);text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vik-match__teams{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px}
.vik-match__side{display:grid;justify-items:center;gap:10px;min-width:0;text-align:center}
.vik-match__disc{width:88px;height:88px;display:flex;align-items:center;justify-content:center}
.vik-match__name{font-family:var(--font-condensed);font-weight:700;font-size:18px;text-transform:uppercase;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vik-match__score{display:flex;gap:10px;font-family:var(--font-display);font-weight:900;font-size:64px;line-height:.8;font-variant-numeric:tabular-nums}
.vik-match__score .is-vik{color:var(--vik-astrida)}
/* Kickoff time in the score slot: a step smaller than a score, so "14:00" leaves the crests room in a 360px panel. */
.vik-match__score--kickoff{font-size:48px;letter-spacing:-.01em}
/* The design writes var(--gray-300), which no token defines; gray-200 is the nearest real step. */
.vik-match__dash{color:var(--gray-200)}
.vik-match__foot{display:grid;justify-items:center;gap:14px}
.vik-match__when{font-size:14px;color:var(--text-secondary);text-align:center}
.vik-match__list{padding:8px 24px}
.vik-match__list-title{display:block;color:var(--text-secondary);padding:14px 0 6px}
.vik-next-row{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--border-hairline);color:var(--ink);text-decoration:none;transition:color var(--dur-fast)}
.vik-next-row:last-child{border-bottom:0}
.vik-next-row:hover{color:var(--vik-astrida)}
.vik-next-row__marks{display:flex;gap:3px;flex:none}
.vik-next-row__text{display:grid;gap:3px;min-width:0}
.vik-next-row__title{font-family:var(--font-condensed);font-weight:700;font-size:17px;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vik-next-row__meta{font-size:13px;color:var(--text-secondary)}
.vik-next-row>.vik-icon{margin-left:auto;flex:none}
.vik-match__all{padding:16px 24px 22px;border-top:1px solid var(--border-hairline)}
.vik-match__all .w-viewall{font-size:22px}
@media (max-width:1060px){.vik-split__grid{grid-template-columns:1fr}.vik-story{min-height:480px}}
@media (max-width:640px){.vik-story{min-height:420px}.vik-match__disc{width:72px;height:72px}.vik-match__score{font-size:52px}.vik-match__score--kickoff{font-size:40px}}

/* ── Quick links ── */

/* ── News: lead 2x2 overlay + four squares ── */
.vik-news{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 24px}
.vik-news__lead{grid-column:span 2;grid-row:span 2}
.vik-news__lead .vik-media,.vik-news__lead .vik-media__link{height:100%}
.vik-news__lead .vik-media__link{grid-template-rows:1fr}
.vik-news__lead .vik-media__frame{aspect-ratio:auto!important;height:100%;min-height:420px}

/* ── Víkingur TV rail ── */
.vik-tv{background:var(--canvas)}

/* ── Calendar ── */
.vik-cal__list{border-top:1px solid var(--border-hairline)}
.vik-cal__empty{margin:0;padding:24px 16px;color:var(--text-secondary)}

/* ── Shop and Rauðir & Svartir ── */
.vik-shop-sec{padding-top:0}
/* The tiles follow the quick links, and the news section's own top padding
   spaces them from what follows (design: Discover, paddingBottom 0). */
.vik-disc-sec{padding-bottom:0}
.vik-shop{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.vik-disc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,clamp(280px,26vw,390px));gap:32px}
.vik-disc .vik-promo{min-height:0}
.vik-disc__tall{grid-row:span 2}

/* ── Partners ── */
.vik-partners{border-top:1px solid var(--border-hairline);background:var(--white);padding:40px 0 72px}
.vik-partners__label{margin:0 0 28px;padding:0 16px;text-align:center;font-family:var(--font-condensed);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary)}
/* Full-width running strip (design: w-partner-track, 60s, pause on hover). */
.vik-partners__viewport{overflow:hidden;width:100%}
.vik-partners__track{display:flex;width:max-content;animation:vik-partners 60s linear infinite}
.vik-partners__track:hover,.vik-partners__track:focus-within{animation-play-state:paused}
@keyframes vik-partners{to{transform:translateX(-50%)}}
.vik-partners__group{display:flex;align-items:center;gap:96px;padding:0 96px 0 0;margin:0;flex-shrink:0;list-style:none}
.vik-partners__group li{flex-shrink:0}
.vik-partners__group a{display:block}
.vik-partners__group img{display:block;height:40px;width:auto;max-width:160px;object-fit:contain;filter:grayscale(1);opacity:.6;transition:filter var(--dur-base),opacity var(--dur-base)}
.vik-partners__group a:hover img,.vik-partners__group img:hover{filter:none;opacity:1}
.vik-partners__name{font-family:var(--font-condensed);font-weight:700;font-size:22px;text-transform:uppercase;letter-spacing:.02em;white-space:nowrap;color:var(--gray-400)}
/* Standing still, the strip scrolls by hand instead, and the copies go. */
@media (prefers-reduced-motion:reduce){.vik-partners__track{animation:none}.vik-partners__viewport{overflow-x:auto}.vik-partners__group[aria-hidden],.vik-partners__group li[aria-hidden]{display:none}.vik-partners__group{padding-left:16px}}

/* ── Breakpoints from the kit ── */
@media (max-width:900px){
	.vik-disc{grid-template-columns:1fr 1fr;grid-template-rows:none;grid-auto-rows:420px;gap:16px}
	.vik-disc__tall{grid-row:auto}
	.vik-news,.vik-shop{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
	.vik-disc{grid-template-columns:1fr;grid-auto-rows:360px}
	.vik-hrail{grid-auto-columns:84%;gap:12px;padding:0 16px;scroll-padding:0 16px}
	.vik-news__lead{grid-column:1/-1;grid-row:auto}
	.vik-news__lead .vik-media__frame{aspect-ratio:4/5!important;height:auto;min-height:0}
	.vik-news{gap:28px 12px}
	.vik-shop{gap:12px}
	.vik-fixture__name,.vik-fixture__score{font-size:28px}
}