/*
 * Víkingur 26: the crest page (page-merki-vikings.php), after the design's
 * CrestPage (ui_kits/web/InfoPages.jsx). The page head, contact strip and
 * lightbox are shared components.
 */

/* ── Hero photo ── */
.vik-crest-hero{margin:0;background:var(--black)}
.vik-crest-hero__img{display:block;width:100%;height:clamp(240px,44vw,560px);object-fit:cover}

.vik-crest__title{margin:0;font-family:var(--font-display);font-weight:900;font-size:min(clamp(40px,4.6vw,68px),calc((100vw - 32px) / (var(--len,8) * .56)));line-height:.88;text-transform:uppercase;hyphens:manual}

/* ── Intro ── */
.vik-crest-intro{padding-bottom:0}
.vik-crest-intro__in{display:grid;gap:16px;max-width:860px}
.vik-crest-intro p{margin:0;font-size:var(--body-lg);line-height:1.6;color:var(--text-secondary)}

/* ── Saga merkisins: a tab per era ── */
.vik-crest-eras .w-wrap{display:grid;gap:32px}
.vik-crest-eras__tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin;overscroll-behavior-x:contain}
.vik-crest-eras__tabs[hidden]{display:none}
.vik-crest-eras__tab{display:grid;justify-items:center;gap:8px;flex:none;min-width:96px;padding:12px 12px 10px;border:1px solid var(--border-hairline);border-radius:var(--radius-card);background:var(--white);color:var(--text-secondary);font-family:var(--font-condensed);font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;cursor:pointer;transition:border-color var(--dur-fast),color var(--dur-fast)}
.vik-crest-eras__tab img{width:56px;height:56px;object-fit:contain}
.vik-crest-eras__tab:hover{color:var(--ink);border-color:var(--border-strong)}
.vik-crest-eras__tab[aria-selected="true"]{border-color:var(--black);color:var(--ink)}
.vik-crest-eras__tab:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.vik-crest-eras__panels{display:grid;gap:48px}
.vik-crest-era{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:56px;align-items:center}
.vik-crest-era[hidden]{display:none}
.vik-crest-era__mark{display:flex;align-items:center;justify-content:center;aspect-ratio:1;padding:clamp(24px,4vw,56px);border-radius:var(--radius-card);background:var(--canvas)}
.vik-crest-era__mark img{width:100%;height:100%;object-fit:contain}
.vik-crest-era__text{display:grid;gap:16px;align-content:center;max-width:620px}
.vik-crest-era__year{margin:0;font-family:var(--font-display);font-weight:900;font-size:clamp(56px,7vw,112px);line-height:.86;text-transform:uppercase;color:var(--vik-astrida)}
.vik-crest-era__note{margin:0;font-family:var(--font-condensed);font-weight:700;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-secondary)}
.vik-crest-era__text p:not(.vik-crest-era__note){margin:0;font-size:var(--body-lg);line-height:1.6}

/* ── Tímamót ── */
.vik-crest-text{background:var(--canvas)}
.vik-crest-text__grid{display:grid;gap:56px}
.vik-crest-text.has-media .vik-crest-text__grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
.vik-crest-text__body{display:grid;gap:16px;align-content:start;max-width:760px}
.vik-crest-text__body p{margin:0;font-size:var(--body-lg);line-height:1.6;color:var(--text-secondary)}
.vik-crest-text__media{display:grid;gap:16px}
.vik-crest-text__video{display:block;width:100%;height:auto;border-radius:var(--radius-card);background:var(--white);object-fit:cover}

/* ── The crests ── */
.vik-crest-marks__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.vik-crest-mark{display:flex;align-items:center;justify-content:center;aspect-ratio:1;margin:0;padding:clamp(20px,4vw,56px);border:1px solid var(--border-hairline);border-radius:var(--radius-card);background:var(--white)}
.vik-crest-mark img{width:100%;height:100%;object-fit:contain}

/* ── Litir Víkings ── */
.vik-crest-colours{border-top:1px solid var(--border-hairline)}
.vik-crest-colours__in{display:grid;gap:56px}
.vik-crest-colours.has-media .vik-crest-colours__in{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:start}
.vik-crest-colours__media{display:grid;gap:16px;position:sticky;top:96px}
.vik-crest-colours__media img,.vik-crest-colours__video{display:block;width:100%;height:auto;border-radius:var(--radius-card);background:var(--gray-50);object-fit:cover}
.vik-crest-colours__body{display:grid;gap:40px;align-content:start}
.vik-crest-colours__group{display:grid;gap:16px}
.vik-crest-colours__label{margin:0;font-family:var(--font-condensed);font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--text-secondary)}
.vik-crest-colours__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.vik-crest-colour{display:grid;grid-template-rows:auto auto 1fr;overflow:hidden;border:1px solid var(--border-hairline);border-radius:var(--radius-card);background:var(--white)}
.vik-crest-colour__swatch{display:block;aspect-ratio:16/10;border-bottom:1px solid var(--border-hairline)}
.vik-crest-colour__head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;padding:16px 20px 0}
.vik-crest-colour__name{margin:0;font-family:var(--font-display);font-weight:900;font-size:32px;line-height:.9;text-transform:uppercase;hyphens:manual}
.vik-crest-colour__hex{font-family:var(--font-mono);font-size:13px;color:var(--text-secondary)}
.vik-crest-colour__text{margin:0;padding:12px 20px 20px;font-size:15px;line-height:1.55;color:var(--text-secondary)}
.vik-crest-colour__text b,.vik-crest-colour__text strong{color:var(--ink);font-weight:700}

/* ── The crest in use ── */
.vik-crest-use{padding-top:0}
.vik-crest-use__in{display:grid;gap:16px}
.vik-crest-row{display:grid;grid-template-columns:repeat(var(--n,1),minmax(0,1fr));gap:16px}
.vik-crest-row__item{display:block;width:100%;overflow:hidden;border-radius:var(--radius-card);background:var(--gray-50)}
.vik-crest-row[style*="--ratio"] .vik-crest-row__item{aspect-ratio:var(--ratio)}
.vik-crest-row__photo img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 900ms var(--ease-strike)}
.vik-crest-row__photo:hover img{transform:scale(1.02)}
.vik-crest-row__photo:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.vik-crest-row__video{height:auto;object-fit:cover}
.vik-crest-row[style*="--ratio"] .vik-crest-row__video{height:100%}

/* ── The page as written (when its parts are not found) ── */
.vik-crest-raw{display:grid;gap:20px;max-width:860px}
.vik-crest-raw h2,.vik-crest-raw h3,.vik-crest-raw h4{margin:16px 0 0;font-family:var(--font-display);font-weight:900;line-height:.9;text-transform:uppercase}
.vik-crest-raw h2{font-size:clamp(36px,4vw,56px)}
.vik-crest-raw h3{font-size:32px}
.vik-crest-raw p{margin:0;font-size:var(--body-lg);line-height:1.6}
.vik-crest-raw__img img,.vik-crest-raw__video{display:block;width:100%;height:auto;border-radius:var(--radius-card)}

@media (max-width:1180px){
	.vik-crest-era{gap:40px}
	.vik-crest-colours.has-media .vik-crest-colours__in{grid-template-columns:1fr;gap:40px}
	.vik-crest-colours__media{position:static;max-width:560px}
}
@media (max-width:900px){
	.vik-crest-era,.vik-crest-text.has-media .vik-crest-text__grid{grid-template-columns:1fr;gap:32px}
	.vik-crest-era__mark{max-width:420px}
	.vik-crest-marks__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
	.vik-crest-eras .w-wrap,.vik-crest-colours__body{gap:24px}
	.vik-crest-eras__tab{min-width:80px;padding:10px 8px 8px}
	.vik-crest-eras__tab img{width:44px;height:44px}
	.vik-crest-marks__grid,.vik-crest-use__in,.vik-crest-row{gap:8px}
	.vik-crest-colours__grid{grid-template-columns:1fr}
	.vik-crest-colour__name{font-size:28px}
}
@media (prefers-reduced-motion:reduce){.vik-crest-row__photo img{transition:none}}