/* ==========================================================================
   KGK Academy — the one page (front-page.php, inc/enside.php, inc/sett.php)

   Carried over from the concept, docs/elbil-konsept.html (21 October 2026). The garments
   are navy with reflective tape; the page takes both: a navy hero, the tape as one strip
   under it, KGK's yellow for the one action that matters. Measured values as the portal:
   pill buttons, fields 9px, surfaces 12px on --stage.
   ========================================================================== */

.kgk-side {
	--k-navy: #0c1c3f;
	--k-navy-2: #13285a;
	--k-blue: var(--wc-org-primary-color, #0032a0);
	--k-hv: var(--wc-org-accent-color, #f8c623);
	--k-ink: var(--ink, #111);
	--k-soft: var(--ink-soft, #6E6E6E);
	--k-line: var(--rule, #E5E5E5);
	--k-stage: var(--stage, #F4F4F5);
}

.kgk-side h1,
.kgk-side h2,
.kgk-side h3 {
	text-wrap: balance;
	letter-spacing: -.02em;
	font-weight: 800;
}

/* Every block after the hero stands in the portal's front-page column: 1200px wide, at least
   24px (16px on a phone) from the screen's edge — css/forside.css, --opsis-forside-*. */
.kgk-side > section { margin: 0 0 var(--opsis-forside-luft, 64px); }
.kgk-side > .kgk-grunn,
.kgk-side > .kgk-plagg,
.kgk-side > .kgk-sporsmal {
	box-sizing: content-box;
	max-width: var(--opsis-forside-bredde, 1200px);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--opsis-forside-kant, 24px);
	padding-right: var(--opsis-forside-kant, 24px);
}
/* The set is a grey surface; its own padding sits inside the same column. */
.kgk-side > .kgk-sett {
	box-sizing: border-box;
	width: min(calc(100% - 2 * var(--opsis-forside-kant, 24px)), calc(var(--opsis-forside-bredde, 1200px) + 72px));
	margin-left: auto;
	margin-right: auto;
}
.kgk-side > .kgk-hero { margin-bottom: var(--opsis-forside-luft, 64px); }

/* --- Buttons ------------------------------------------------------------- */

.kgk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 52px;
	padding: 0 26px;
	border-radius: 999px;
	border: 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: filter .15s, background .15s;
}
.kgk-btn:hover { filter: brightness(1.06); text-decoration: none; }
.kgk-btn:focus-visible { outline: 3px solid var(--k-hv); outline-offset: 2px; }
.kgk-btn--hv,
.kgk-btn--hv:hover { background: var(--k-hv); color: var(--k-navy); }
.kgk-btn--ghost,
.kgk-btn--ghost:hover { background: transparent; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .55); }
.kgk-btn--blue,
.kgk-btn--blue:hover { background: var(--k-blue); color: #fff; }
.kgk-btn--blue:disabled { background: var(--k-line); color: var(--k-soft); cursor: default; filter: none; }
.kgk-btn--line,
.kgk-btn--line:hover { background: transparent; color: var(--k-blue); box-shadow: inset 0 0 0 1.5px var(--k-blue); }

/* --- 1. Hero ------------------------------------------------------------- */

.kgk-side .kgk-hero {
	padding-top: 0;
	padding-bottom: 0;
	background: radial-gradient(120% 140% at 80% 10%, var(--k-navy-2), var(--k-navy) 60%);
	color: #fff;
}
.kgk-hero-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 40px;
	align-items: center;
	padding: 64px 0 56px;
}
.kgk-hv {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 16px;
	font: 500 12px/1 ui-monospace, Menlo, monospace;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--k-hv);
}
.kgk-hv svg { width: 16px; height: 16px; }
.kgk-hero h1 {
	margin: 0 0 16px;
	font-size: clamp(36px, 5vw, 58px);
	line-height: 1;
	color: #fff;
}
.kgk-ingress { margin: 0; max-width: 44ch; font-size: 17px; line-height: 1.55; color: rgba(255, 255, 255, .78); }
.kgk-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.kgk-hero-bilde { position: relative; aspect-ratio: 5 / 4; min-width: 0; }
.kgk-hero-bilde img { width: 100%; height: 100%; object-fit: cover; object-position: 80% 50%; border-radius: 16px; } /* the set stands right of centre in the picture */

/* The place for a picture, until there is one (user, 21 October 2026). */
.kgk-plass {
	position: absolute;
	inset: 0;
	display: grid;
	place-content: center;
	gap: 6px;
	text-align: center;
	border-radius: 16px;
	border: 2px dashed rgba(255, 255, 255, .35);
	background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .04) 0 12px, transparent 12px 24px);
}
.kgk-plass span { font-size: 26px; font-weight: 800; color: rgba(255, 255, 255, .8); }
.kgk-plass small { font: 500 12px/1.4 ui-monospace, Menlo, monospace; color: rgba(255, 255, 255, .6); }
.kgk-plass--lys { border-color: var(--k-line); background: repeating-linear-gradient(135deg, rgba(12, 28, 63, .04) 0 12px, transparent 12px 24px); }
.kgk-plass--lys span { color: var(--k-soft); }

.kgk-fakta {
	display: grid;
	/* As many columns as there are facts (Butikken → «Tekster på forsiden», up to six). */
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	margin: 0 calc(-1 * max(var(--opsis-forside-kant, 20px), calc(50vw - var(--opsis-forside-bredde, 1170px) / 2)));
	padding: 0 max(var(--opsis-forside-kant, 20px), calc(50vw - var(--opsis-forside-bredde, 1170px) / 2));
	background: #fff;
	color: var(--k-ink);
}
.kgk-fakta div { display: grid; gap: 4px; padding: 18px 20px; border-right: 1px solid var(--k-line); }
.kgk-fakta div:first-child { padding-left: 0; }
.kgk-fakta div:last-child { border-right: 0; }
.kgk-fakta b { font-size: 21px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.kgk-fakta span { font-size: 13px; color: var(--k-soft); }

/* The garments' reflective tape, once, as the page's signature. */
.kgk-tape {
	height: 18px;
	margin: 0 calc(-1 * max(var(--opsis-forside-kant, 20px), calc(50vw - var(--opsis-forside-bredde, 1170px) / 2)));
	background: repeating-linear-gradient(115deg, #c9ced8 0 2px, #e9ecf1 2px 7px, #d7dbe3 7px 9px, #f4f6f9 9px 16px);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -1px 0 rgba(0, 0, 0, .08);
}

/* --- 2. Why this kind of clothing --------------------------------------- */

.kgk-grunn { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 40px; align-items: center; }
.kgk-grunn-bilde { position: relative; aspect-ratio: 1; border-radius: 16px; background: var(--k-stage); }
.kgk-grunn-bilde img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 16px; }
.kgk-grunn h2 { margin: 0 0 22px; font-size: 32px; line-height: 1.05; }
.kgk-grunner { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 28px; }
.kgk-grunner li { display: flex; gap: 12px; align-items: flex-start; margin: 0; }
.kgk-grunner svg { flex: none; width: 38px; height: 38px; padding: 9px; border-radius: 10px; background: var(--k-navy); fill: var(--k-hv); }
.kgk-grunner b { display: block; font-size: 16px; font-weight: 700; line-height: 1.25; color: var(--k-ink); }
.kgk-grunner span { display: block; margin-top: 2px; font-size: 14px; color: var(--k-soft); }

/* --- 3. The set ---------------------------------------------------------- */

.kgk-sett { display: grid; gap: 22px; padding: 36px; border-radius: 16px; background: var(--k-stage); }
.kgk-sett-topp { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 18px; }
.kgk-sett h2 { margin: 0 0 6px; font-size: 32px; line-height: 1.05; }
.kgk-sett-topp p { margin: 0; color: var(--k-soft); }
.kgk-seg { display: inline-flex; padding: 4px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--k-line); }
.kgk-seg button { height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; font-size: 14px; font-weight: 600; color: var(--k-soft); cursor: pointer; }
.kgk-seg button[aria-pressed="true"] { background: var(--k-navy); color: #fff; }
.kgk-seg button:focus-visible { outline: 3px solid var(--k-hv); outline-offset: 1px; }
.kgk-deler { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.kgk-del { display: grid; gap: 10px; align-content: start; padding: 12px; border-radius: 12px; background: #fff; }
.kgk-del[hidden] { display: none; }
.kgk-del-bilde { aspect-ratio: 1; display: grid; place-items: center; border-radius: 9px; background: #fff; overflow: hidden; }
.kgk-del-bilde img { max-height: 100%; width: auto; }
.kgk-del b { font-size: 15px; line-height: 1.25; }
.kgk-del select { width: 100%; height: 44px; padding: 0 10px; border: 1px solid var(--k-line); border-radius: 9px; background: #fff; font-size: 15px; color: var(--k-ink); }
.kgk-del select:focus-visible { outline: 2px solid var(--k-blue); outline-offset: 1px; }
.kgk-del-pris { font-size: 13px; color: var(--k-soft); }
.kgk-sett-fot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 18px; border-radius: 12px; background: #fff; }
.kgk-sum { display: grid; gap: 2px; }
.kgk-sum b { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.kgk-sum span { font-size: 13px; color: var(--k-soft); }
.kgk-sum s { font-size: 14px; color: var(--k-soft); font-variant-numeric: tabular-nums; }
.kgk-sum s[hidden] { display: none; }
.kgk-sett-topp p.kgk-sett-rabatt { margin-top: 6px; font-weight: 700; color: var(--k-blue); }
.kgk-valgt { font-size: 14px; color: var(--k-soft); }

/* --- 4. The garments, as rows ------------------------------------------- */

.kgk-plagg h2 { margin: 0 0 8px; font-size: 32px; line-height: 1.05; }
.kgk-rad { position: relative; display: grid; grid-template-columns: 240px minmax(0, 1fr) 220px; gap: 28px; align-items: center; padding: 24px 0; border-bottom: 1px solid var(--k-line); }
.kgk-rad:last-child { border-bottom: 0; }
.kgk-rad-bilde { display: grid; place-items: center; aspect-ratio: 1; border-radius: 12px; background: var(--k-stage); overflow: hidden; }
.kgk-rad-bilde img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.kgk-rad h3 { margin: 0 0 8px; font-size: 24px; line-height: 1.1; }
.kgk-rad h3 a { color: var(--k-ink); text-decoration: none; }
.kgk-rad h3 a:hover { color: var(--k-blue); }
.kgk-rad-tekst p { margin: 0; max-width: 54ch; font-size: 15px; color: var(--k-soft); }
.kgk-merker { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.kgk-merker span { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--k-stage); font: 500 12px/1 ui-monospace, Menlo, monospace; color: var(--k-ink); }
.kgk-rad-kjop { display: grid; gap: 10px; justify-items: start; }
.kgk-pris { font-size: 22px; font-weight: 800; letter-spacing: -.02em; color: var(--k-ink); }
.kgk-pris small { display: block; margin-top: 2px; font-size: 12px; font-weight: 400; letter-spacing: 0; color: var(--k-soft); }
.kgk-ingen-varer { color: var(--k-soft); }

/* --- 5. Questions -------------------------------------------------------- */

.kgk-sporsmal { display: grid; grid-template-columns: minmax(0, .6fr) minmax(0, 1.4fr); gap: 40px; }
.kgk-sporsmal h2 { margin: 0; font-size: 32px; line-height: 1.05; }
.kgk-sporsmal details { padding: 14px 0; border-bottom: 1px solid var(--k-line); }
.kgk-sporsmal summary { display: flex; justify-content: space-between; gap: 12px; font-size: 17px; font-weight: 700; color: var(--k-ink); cursor: pointer; list-style: none; }
.kgk-sporsmal summary::-webkit-details-marker { display: none; }
.kgk-sporsmal summary::after { content: "+"; font-family: ui-monospace, Menlo, monospace; color: var(--k-blue); }
.kgk-sporsmal details[open] summary::after { content: "−"; }
.kgk-sporsmal summary:focus-visible { outline: 2px solid var(--k-blue); outline-offset: 2px; }
.kgk-sporsmal details p { margin: 8px 0 0; max-width: 62ch; font-size: 15px; color: var(--k-soft); }
.kgk-sporsmal-topp p { margin: 12px 0 18px; max-width: 30ch; font-size: 15px; color: var(--k-soft); }
.kgk-dok ul { margin: 0; padding: 0; list-style: none; }
.kgk-dok li a { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--k-line); font-size: 17px; font-weight: 700; color: var(--k-ink); text-decoration: none; }
.kgk-dok li a:hover span { color: var(--k-blue); }
.kgk-dok li a:focus-visible { outline: 2px solid var(--k-blue); outline-offset: 2px; }
.kgk-dok small { flex: none; font: 500 12px/1.4 ui-monospace, Menlo, monospace; color: var(--k-soft); }

/* --- Narrow --------------------------------------------------------------- */

@media (max-width: 900px) {
	.kgk-hero-inner { grid-template-columns: minmax(0, 1fr); padding: 40px 0 32px; gap: 28px; }
	.kgk-fakta { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.kgk-fakta div { border-bottom: 1px solid var(--k-line); }
	.kgk-fakta div:nth-child(2n) { border-right: 0; }
	.kgk-fakta div:nth-child(odd) { padding-left: 0; }
	/* no line under the last row, whether it holds one fact or two */
	.kgk-fakta div:last-child,
	.kgk-fakta div:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
	.kgk-grunn { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.kgk-grunn-bilde { max-width: 260px; }
	.kgk-grunner { grid-template-columns: minmax(0, 1fr); }
	.kgk-sett { padding: 24px 18px; }
	/* One piece per line on a phone: a small picture, the name and the size beside it. */
	.kgk-deler { grid-template-columns: minmax(0, 1fr); gap: 8px; }
	.kgk-del { grid-template-columns: 64px minmax(0, 1fr); column-gap: 12px; row-gap: 6px; align-items: center; }
	.kgk-del-bilde { grid-row: span 3; width: 64px; }
	.kgk-del label.screen-reader-text + select, .kgk-del select { grid-column: 2; }
	.kgk-rad { grid-template-columns: 120px minmax(0, 1fr); gap: 16px; }
	.kgk-rad-kjop { grid-column: 1 / -1; grid-template-columns: 1fr auto; align-items: center; }
	.kgk-sporsmal { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}

/* --- A product in the portal's window ------------------------------------ */

.opsis-vindu__kropp.kgk-vindu-kropp { padding: 0; overflow: hidden; flex: 1 1 auto; display: flex; }
.kgk-vindu-ramme { display: block; flex: 1 1 auto; width: 100%; min-height: 100%; border: 0; }
@media (max-width: 640px) {
	.opsis-vindu { padding: 0; }
	.opsis-vindu--bredt .opsis-vindu__boks { height: 100%; max-height: 100%; border-radius: 0; }
}

#produkter, #sett { scroll-margin-top: 24px; }