/* ==========================================================================
   KR — front page

   Depends on tokens.css.

   Sections 8–11 are the new design; 12–15 are the theme's existing sections
   retinted to the same palette, structurally unchanged.

   Contents:
     8.  Home — shell
     9.  Home — hero
     10. Home — deildir
     11. Home — fréttir band and the news card
     12. Home — CTA banner
     13. Home — fixtures strip
     14. Home — featured player
     15. Home — honours
     16. Home / page — facility split
   ========================================================================== */

/* ==========================================================================
   8. Home — shell

   The design is authored on a 1280px frame with a clamp(20px,4vw,48px)
   gutter, narrower than the site-wide .kr-container (1400px). The home page
   uses the design's measure throughout, including for the four carried-over
   sections below, so every band lines up on one edge.
   ========================================================================== */

.kr-home-wrap {
	width: 100%;
	max-width: 1280px;
	margin-inline: auto;
	padding-inline: clamp(20px, 4vw, 48px);
}

.kr-fixstrip .kr-container,
.kr-honours .kr-container {
	max-width: 1280px;
	padding-inline: clamp(20px, 4vw, 48px);
}

/* The design's section head: display h2 on the left, arrow link on the right. */
.kr-home-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
	margin-block-end: 32px;
}

.kr-home-head h2 {
	font-family: var(--kr-font-display);
	font-weight: 800;
	font-size: 32px;
	line-height: 1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	margin: 0;
	color: var(--kr-ink);
}

.kr-home-head .kr-arrow-link {
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.12em;
}

/* ==========================================================================
   9. Home — hero

   Four layers, bottom to top: the section's own dark gradient (what shows if
   no photo is set), the venue photograph, the design's stripe texture and the
   scrim.

   Two deviations from the reference, both forced by there being a real
   photograph where the reference had flat charcoal:

   1. The texture is opacity .3, not .6. At .6 the aerial is gone entirely.
      .3 keeps the woven grain the design is after and still lets the venue
      read across the right two thirds of the band.

   2. The scrim carries the reference's 180deg .2 → .92 unchanged, plus a
      100deg wash over it. The reference's scrim is vertical because its
      copy sits at the bottom of the band, in the .92 end; ours sits top
      left, which in a photograph-backed hero is the brightest corner. The
      wash puts the type on near-solid ink while the knatthús, the pitch and
      the car park stay legible on the right and carry the section.

   Both numbers were set by eye against assets/images/aerial.jpg. A very
   different photograph may want them moved again.
   ========================================================================== */

.kr-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(180deg, #1c1c1c, #0c0c0c);
	color: #fff;
}

.kr-hero__media,
.kr-hero__texture,
.kr-hero__scrim {
	position: absolute;
	inset: 0;
}

.kr-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kr-hero__texture {
	background-image: repeating-linear-gradient(
		115deg,
		#242424 0 14px,
		#161616 14px 28px
	);
	opacity: 0.3;
}

.kr-hero__scrim {
	background:
		linear-gradient(
			100deg,
			rgb(10 10 10 / 88%) 0%,
			rgb(10 10 10 / 52%) 42%,
			rgb(10 10 10 / 6%) 74%
		),
		linear-gradient(180deg, rgb(10 10 10 / 20%), rgb(10 10 10 / 92%));
}

/* Narrow: there is no "right-hand side" left to give the photo, so the wash
   goes vertical and the copy keeps its footing. */
@media (max-width: 800px) {
	.kr-hero__scrim {
		background:
			linear-gradient(
				180deg,
				rgb(10 10 10 / 18%) 0%,
				rgb(10 10 10 / 70%) 45%,
				rgb(10 10 10 / 86%) 100%
			),
			linear-gradient(180deg, rgb(10 10 10 / 20%), rgb(10 10 10 / 92%));
	}
}

.kr-hero__inner {
	position: relative;
	width: 100%;
	max-width: 1280px;
	margin-inline: auto;
	padding: 120px clamp(20px, 4vw, 48px) 140px;
}

.kr-hero__rule {
	width: 30px;
	height: 3px;
	background: var(--kr-copper);
	margin-block-end: 14px;
}

/*
 * White, not copper. --kr-copper-on-dark is measured against flat #141414, and
 * the hero never shows flat ink: the eyebrow sits on the aerial photograph
 * under the .3 texture and the two scrim layers, so its backdrop is whatever
 * the picture happens to be. Composited over the glyph run that measures
 * 3.61:1 average and 3.07:1 at the brightest pixel — both fail. Solid white
 * clears AA against every pixel in the run. Same treatment, and the same
 * reason, as .kr-pagehead--media .kr-pagehead__eyebrow in pages.css.
 */
.kr-hero__eyebrow {
	margin: 0;
	font-family: var(--kr-font-body);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: #fff;
}

.kr-hero__title {
	font-family: var(--kr-font-display);
	font-weight: 800;
	font-size: clamp(48px, 8vw, 96px);
	line-height: 0.92;
	letter-spacing: 0.01em;
	text-transform: uppercase;
	margin: 14px 0 0;
}

.kr-hero__sub {
	max-width: 520px;
	margin: 20px 0 0;
	font-family: var(--kr-font-body);
	font-size: 18px;
	line-height: 1.5;
	color: rgb(255 255 255 / 75%);
}

.kr-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-block-start: 32px;
}

/*
 * The design's button metrics. Scoped to the home page's own CTAs rather than
 * applied to .kr-btn, which is shared with every other template.
 */
.kr-hero__actions .kr-btn,
.kr-cta .kr-btn {
	border-width: 1px;
	border-radius: 10px;
	padding: 16px 26px;
	font-size: 14px;
	font-weight: 800;
	letter-spacing: 0.12em;
}

.kr-hero__actions .kr-btn--ghost {
	background: transparent;
	border-color: rgb(255 255 255 / 40%);
}

.kr-hero__actions .kr-btn--ghost:hover {
	background: rgb(255 255 255 / 12%);
	border-color: #fff;
}

@media (max-width: 640px) {
	.kr-hero__inner {
		padding-block: 84px 96px;
	}
}

/* ==========================================================================
   10. Home — deildir
   ========================================================================== */

.kr-deildir {
	padding-block: 80px;
}

.kr-divgrid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 22px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.kr-divcard {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	aspect-ratio: 1 / 0.55;
	padding: 18px;
	border-radius: var(--kr-radius-lg);
	background: linear-gradient(155deg, #242424, #050505);
	color: #fff;
	box-shadow: 0 16px 32px -20px rgb(169 103 46 / 35%);
	transition: transform 0.18s var(--kr-ease), box-shadow 0.18s ease;
}

.kr-divcard:hover,
.kr-divcard:focus-visible {
	color: #fff;
	transform: translateY(-6px);
	box-shadow: 0 26px 46px -18px rgb(0 0 0 / 50%);
}

.kr-divcard__crest {
	position: absolute;
	top: 14px;
	left: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 12px;
	background: #fff;
}

.kr-divcard__crest img {
	width: 32px;
	height: 32px;
	object-fit: contain;
}

.kr-divcard__cat {
	font-family: var(--kr-font-body);
	font-weight: 600;
	font-size: 13px;
	line-height: 1.3;
	opacity: 0.85;
}

.kr-divcard__name {
	font-family: var(--kr-font-display);
	font-weight: 700;
	font-size: 27px;
	line-height: 1.02;
	margin-block-start: 2px;
}

/* ==========================================================================
   11. Home — fréttir band and the news card

   .kr-card is shared with the news archive, so everything the card needs is
   here and nothing depends on the Fréttir band around it.
   ========================================================================== */

.kr-newsband {
	background: var(--kr-sand);
	padding-block: 80px;
}

.kr-newsgrid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 26px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.kr-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.kr-card__media {
	aspect-ratio: 16 / 10;
	border-radius: var(--kr-radius-md);
	overflow: hidden;
	background-color: var(--kr-sand);
}

.kr-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* No featured image: the design's own woven placeholder, not a blank box. */
.kr-card__media--empty {
	background-image: repeating-linear-gradient(
		115deg,
		#e4ddd4 0 14px,
		#d8cfc3 14px 28px
	);
}

.kr-card__meta {
	margin: 0;
	font-family: var(--kr-font-body);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--kr-copper-text);
}

/* Only separate the two when there is a sport term to separate. */
.kr-card__tag + .kr-card__date::before {
	content: " · ";
}

.kr-card__title {
	font-family: var(--kr-font-display);
	font-weight: 700;
	font-size: 21px;
	line-height: 1.15;
	letter-spacing: 0;
	text-transform: none;
	margin: 4px 0 0;
	color: var(--kr-ink);
}

.kr-card__title a {
	color: inherit;
}

.kr-card:hover .kr-card__title a {
	color: var(--kr-copper-text);
}

.kr-card__excerpt {
	margin: 8px 0 0;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--kr-muted);
}

/*
 * Retained: the tag pill is not used by the new card, but it is a shared
 * primitive the inner templates may still reach for.
 */
.kr-tag {
	display: inline-block;
	background: var(--kr-copper);
	color: var(--kr-on-copper);
	font-family: var(--kr-font-display);
	font-size: var(--kr-fs-micro);
	letter-spacing: var(--kr-ls-label);
	text-transform: uppercase;
	padding: 4px 11px;
	border-radius: var(--kr-radius-sm);
}

/* ==========================================================================
   12. Home — CTA banner

   Copper. Every piece of text on it is solid white: the reference's
   rgba(255,255,255,.8) kicker is 2.94:1 and fails AA. See the note in
   tokens.css — nothing translucent goes on copper anywhere.
   ========================================================================== */

.kr-cta {
	position: relative;
	overflow: hidden;
	background: var(--kr-copper);
	color: var(--kr-on-copper);
	padding-block: 64px;
}

.kr-cta__circle {
	position: absolute;
	border-radius: 50%;
}

.kr-cta__circle--a {
	top: -60px;
	right: -60px;
	width: 220px;
	height: 220px;
	background: rgb(255 255 255 / 10%);
}

.kr-cta__circle--b {
	bottom: -90px;
	left: -60px;
	width: 240px;
	height: 240px;
	background: rgb(0 0 0 / 12%);
}

.kr-cta__inner {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.kr-cta__kicker {
	margin: 0;
	font-family: var(--kr-font-body);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--kr-on-copper);
}

.kr-cta__title {
	margin: 8px 0 0;
	font-family: var(--kr-font-display);
	font-weight: 800;
	font-size: 34px;
	line-height: 1.02;
	text-transform: uppercase;
	color: var(--kr-on-copper);
}

.kr-cta .kr-btn--ink {
	white-space: nowrap;
	border-color: var(--kr-ink);
}

/* ==========================================================================
   13. Home — fixtures strip
   ========================================================================== */

/*
 * The plan gives the fixtures strip a copper band, and the CTA banner above it
 * is copper too — at the same value the two read as one slab with an invisible
 * seam. The strip takes the deeper copper instead: still the brand hue, still
 * unmistakably a copper band, but a tone step the eye reads as a new section.
 * It also buys the strip's small type real headroom — white is 4.50:1 on
 * #A9672E (exactly the AA floor) and 6.28:1 on #8A5325.
 */
.kr-fixstrip {
	background: var(--kr-copper-dark);
	color: var(--kr-on-copper);
	padding-block: 1.25rem;
}

/* The tone step does the work; the hairline sharpens the edge between them. */
.kr-cta + .kr-fixstrip {
	border-top: 1px solid rgb(255 255 255 / 22%);
}

.kr-fixstrip__head {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 6px;
}

.kr-fixstrip__title {
	font-family: var(--kr-font-display);
	font-size: 13px;
	font-weight: 800;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin: 0;
}

.kr-fixstrip__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 0 24px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.kr-fixstrip__item {
	display: flex;
	flex-direction: column;
	gap: 5px;
	padding: 12px 0;
	border-top: 1px solid rgb(255 255 255 / 22%);
}

/* 600, matching .kr-fixstrip__meta. At 11px/400 this was the lightest thing on
   the band and had nothing but the AA floor under it. */
.kr-fixstrip__comp {
	font-family: var(--kr-font-display);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--kr-on-copper);
}

.kr-fixstrip__teams {
	display: flex;
	align-items: center;
	gap: 9px;
	font-family: var(--kr-font-display);
	font-weight: 700;
	font-size: 1.0625rem;
	text-transform: uppercase;
}

.kr-fixstrip__pill {
	background: #fff;
	color: var(--kr-copper-text);
	padding: 1px 8px;
	border-radius: var(--kr-radius-sm);
	white-space: nowrap;
}

.kr-fixstrip__meta {
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--kr-on-copper);
}

/* ==========================================================================
   14. Home — featured player

   Sand, not copper. The plan reserves the copper band for the fixtures strip
   and asks only that this section be "restyled to the new tokens"; carried on
   copper it made a third consecutive copper band, an 877px slab from the CTA
   down to the honours. The reference alternates ink / paper / sand / copper
   and never runs two identical bands together, so the run now reads
   copper → deep copper → sand → ink → paper. The portrait keeps the copper
   in the section: its placeholder gradient is unchanged, and the CTA is a
   copper fill rather than the white-on-copper button it needed before.
   ========================================================================== */

.kr-feature {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
	background: var(--kr-sand);
	color: var(--kr-text);
}

.kr-feature__media {
	overflow: hidden;
	min-height: clamp(21.25rem, 14rem + 22vw, 32.5rem);
	background: linear-gradient(155deg, #C98244, var(--kr-copper));
}

.kr-feature__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

.kr-feature__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(2.25rem, 1.7rem + 2.8vw, 3.75rem) clamp(20px, 4vw, 48px);
}

.kr-feature__name {
	font-weight: 800;
	font-size: clamp(2.5rem, 2rem + 2.2vw, 3.375rem);
	line-height: 0.95;
	margin: 14px 0 4px;
}

.kr-feature__pos {
	font-family: var(--kr-font-display);
	font-size: 0.9375rem;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--kr-muted);
	margin-bottom: 20px;
}

.kr-feature__quote {
	font-family: var(--kr-font-display);
	font-weight: 600;
	font-size: var(--kr-fs-quote);
	line-height: 1.15;
	margin: 0 0 16px;
}

.kr-feature__text {
	max-width: 520px;
	margin: 0 0 26px;
	color: var(--kr-text-body);
	line-height: 1.55;
}

.kr-feature .kr-btn {
	align-self: flex-start;
	border-radius: 10px;
	font-weight: 800;
	font-size: 14px;
	letter-spacing: 0.12em;
}

/* ==========================================================================
   15. Home — honours
   ========================================================================== */

.kr-honours__head {
	display: flex;
	align-items: baseline;
	gap: 14px;
	flex-wrap: wrap;
	margin-bottom: 1.625rem;
}

.kr-honours__head h2 {
	font-weight: 800;
	font-size: var(--kr-fs-h3);
}

.kr-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 20px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.kr-stat {
	border-top: 3px solid var(--kr-copper);
	padding-top: 16px;
}

.kr-stat__n {
	font-family: var(--kr-font-display);
	font-weight: 800;
	font-size: var(--kr-fs-stat);
	line-height: 0.9;
}

.kr-stat__l {
	margin-top: 8px;
	font-family: var(--kr-font-display);
	font-size: 0.8125rem;
	letter-spacing: var(--kr-ls-label);
	text-transform: uppercase;
	color: var(--kr-on-dark-muted);
}

/* ==========================================================================
   16. Facility split panel
   ========================================================================== */

.kr-split {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}

.kr-split__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: var(--kr-paper);
	padding: clamp(2.25rem, 1.7rem + 2.8vw, 3.75rem) clamp(20px, 4vw, 48px);
}

.kr-split__title {
	font-weight: 800;
	font-size: var(--kr-fs-h2);
	line-height: 1;
	margin: 12px 0 14px;
}

.kr-split__text {
	max-width: 480px;
	margin: 0 0 24px;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--kr-text-body);
}

.kr-split__media {
	overflow: hidden;
	min-height: 320px;
	background: linear-gradient(155deg, var(--kr-sand), #C9C1B7);
}

.kr-split__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kr-split .kr-btn {
	align-self: flex-start;
	border-radius: 10px;
	font-weight: 800;
	font-size: 14px;
	letter-spacing: 0.12em;
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.kr-divcard:hover,
	.kr-divcard:focus-visible {
		transform: none;
	}
}