/* Explore-websider — bygger på styles.css' CSS-vars (--terra, --cream, --serif ...). */
.xp-body { background: var(--cream); color: var(--ink); }
.xp-body .h-serif { font-family: var(--serif); }
.xp-body main { padding-top: calc(var(--nav-h) + 8px); }

/* Eyebrow + hero */
.xp-eyebrow { text-transform: uppercase; letter-spacing: .14em; font-size: .8rem; font-weight: 600; color: var(--terra); margin: 0 0 .6rem; }
.xp-explore-hero { max-width: 760px; margin: 2.4rem auto 2rem; padding: 0 1.25rem; text-align: center; }
.xp-explore-hero h1 { font-size: clamp(2rem, 5vw, 3.2rem); line-height: 1.08; margin: 0 0 1rem; color: var(--deep); }
.xp-explore-hero h1 em { font-style: italic; color: var(--terra); }
.xp-explore-lead { font-size: 1.1rem; line-height: 1.55; color: var(--muted); margin: 0 auto; max-width: 580px; }

/* Grid — image-led fliser (feed-følelse, ikke liste) */
.xp-grid { max-width: var(--container); margin: 0 auto; padding: 1rem 1.25rem 2rem; display: grid; gap: 1rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 620px) { .xp-grid { grid-template-columns: repeat(3, 1fr); gap: 1.2rem; } }
@media (min-width: 960px) { .xp-grid { grid-template-columns: repeat(4, 1fr); gap: 1.4rem; } }
.xp-tile { position: relative; display: block; aspect-ratio: 1/1; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-md); text-decoration: none; color: #fff; cursor: pointer; background: var(--cream-warm); transition: transform .28s ease, box-shadow .28s ease; }
.xp-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.xp-tile img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; }
.xp-tile:hover img { transform: scale(1.05); }

/* Entrance: fliserne simrer ind (IO + WAAPI-stagger i explore.js — WAAPI så
   hover-transitionen på .xp-tile ikke arver entrance-timingen). Billedet fader
   selvstændigt ind når det er loadet, så intet blinker på plads på én gang.
   Gated bag html.js: uden JS er alt synligt med det samme. */
html.js .xp-tile:not(.is-in) { opacity: 0; }
html.js .xp-tile img { opacity: 0; transition: opacity .45s ease, transform .5s ease; }
html.js .xp-tile img.is-loaded { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  html.js .xp-tile, html.js .xp-tile img { opacity: 1 !important; transition: none !important; }
}
.xp-tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(42,26,12,.74) 0%, rgba(42,26,12,.12) 44%, transparent 70%); }
.xp-tile-title { position: absolute; left: .9rem; right: .9rem; bottom: .8rem; z-index: 1; font-size: 1.05rem; line-height: 1.18; color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.4); }

/* Stage + back-knap */
.xp-stage { position: relative; }
.xp-back { position: absolute; left: 1.25rem; top: .2rem; z-index: 5; display: inline-flex; align-items: center; gap: .25rem; background: #fff; border: 1px solid var(--hairline); color: var(--terra-deep); font-weight: 600; font-size: .92rem; padding: .45rem 1rem; border-radius: var(--radius-pill); box-shadow: var(--shadow-sm); cursor: pointer; }
.xp-back[hidden], .xp-focus[hidden], .xp-grid[hidden] { display: none; }

/* Focus: kvadratisk hero (viser så meget af retten som muligt) + lodrette pile-kolonner + tray */
.xp-focus { max-width: 540px; margin: 0 auto; padding: 3rem 1.25rem 1rem; }
.xp-hero-row { display: flex; align-items: stretch; gap: .5rem; }
.xp-arrow { flex: 0 0 auto; width: clamp(2.2rem, 9vw, 3rem); border: none; padding: 0; background: var(--cream-warm); color: var(--terra-deep); border-radius: var(--radius-md); font-size: 1.8rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); transition: background .2s ease; }
.xp-arrow:hover { background: var(--peach); }
.xp-hero { position: relative; flex: 1 1 auto; min-width: 0; aspect-ratio: 1 / 1; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); display: block; text-decoration: none; color: #fff; }
.xp-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.xp-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(42,26,12,.6) 0%, rgba(42,26,12,.04) 38%, transparent 56%); }
.xp-hero-cap { position: absolute; left: 1.1rem; right: 1.1rem; bottom: 1rem; z-index: 1; }
.xp-hero-cap h2 { font-size: clamp(1.25rem, 4.2vw, 1.75rem); line-height: 1.1; margin: 0 0 .3rem; color: #fff; text-shadow: 0 1px 12px rgba(0,0,0,.55); }
.xp-hero-cap p { font-size: .88rem; line-height: 1.38; margin: 0; color: rgba(255,255,255,.92); text-shadow: 0 1px 10px rgba(0,0,0,.55); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.xp-tray { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin-top: .7rem; }
.xp-tray-card { position: relative; aspect-ratio: 1/1; border: none; padding: 0; border-radius: var(--radius-sm); overflow: hidden; cursor: pointer; box-shadow: var(--shadow-sm); background: var(--cream-warm); }
.xp-tray-card img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.xp-tray-card:hover img { transform: scale(1.08); }
.xp-tray-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(42,26,12,.55) 0%, rgba(42,26,12,.06) 42%, transparent 58%); pointer-events: none; }
.xp-tray-title { position: absolute; left: .45rem; right: .45rem; bottom: .4rem; z-index: 1; font-family: var(--serif); font-weight: 700; font-size: .72rem; line-height: 1.15; color: #fff; text-align: left; text-shadow: 0 1px 6px rgba(0,0,0,.45); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Under FLIP-morph'en fader alle captions/overlays ud og ind med de nye retter */
.xp-hero-cap, .xp-hero::after, .xp-tray-title, .xp-tray-card::after { transition: opacity .18s ease; }
.xp-focus.is-swapping .xp-hero-cap, .xp-focus.is-swapping .xp-hero::after,
.xp-focus.is-swapping .xp-tray-title, .xp-focus.is-swapping .xp-tray-card::after { opacity: 0; }

/* Desktop: skalér hele focus-modulet op (stort kvadratisk hero) */
@media (min-width: 768px) {
  .xp-focus { max-width: 760px; padding-top: 3.4rem; }
  .xp-hero-row { gap: .8rem; }
  .xp-arrow { width: 3.4rem; font-size: 2.2rem; }
  .xp-hero-cap { left: 1.6rem; right: 1.6rem; bottom: 1.4rem; }
  .xp-hero-cap h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
  .xp-hero-cap p { font-size: 1rem; }
  .xp-tray { gap: .7rem; margin-top: .9rem; }
}

@media (prefers-reduced-motion: reduce) {
  .xp-tile, .xp-tile img, .xp-hero img, .xp-tray-card img { transition: none !important; }
}

/* Detail */
.xp-detail { max-width: 880px; margin: 0 auto; padding: 1rem 1.25rem 2rem; }
.xp-breadcrumb { font-size: .85rem; color: var(--muted); margin: 1rem 0 1.4rem; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.xp-breadcrumb a { color: var(--terra-deep); text-decoration: none; }
.xp-breadcrumb a:hover { text-decoration: underline; }
.xp-hero { margin: 0 0 1.6rem; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); }
.xp-hero img { width: 100%; height: auto; display: block; aspect-ratio: 1/1; object-fit: cover; }
.xp-head h1 { font-size: clamp(1.9rem, 5vw, 3rem); line-height: 1.1; margin: 0 0 .8rem; color: var(--deep); }
.xp-lead { font-size: 1.12rem; line-height: 1.55; color: var(--muted); margin: 0 0 1rem; }
.xp-meta { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 0 2rem; }
.xp-chip { font-size: .88rem; font-weight: 600; color: var(--deep-soft); background: #fff; border: 1px solid var(--hairline); padding: .4rem .8rem; border-radius: var(--radius-pill); box-shadow: var(--shadow-sm); }
.xp-chip-cuisine { color: var(--terra-deep); text-transform: capitalize; }
.xp-cols { display: grid; gap: 2.4rem; grid-template-columns: 1fr; }
@media (min-width: 760px) { .xp-cols { grid-template-columns: 0.85fr 1.15fr; } }
.xp-cols h2 { font-size: 1.5rem; margin: 0 0 1rem; color: var(--terra-deep); }
.xp-ingredients ul { list-style: none; padding: 0; margin: 0; }
.xp-ingredients li { padding: .55rem 0 .55rem 1.5rem; border-bottom: 1px solid var(--hairline); position: relative; line-height: 1.4; }
.xp-ingredients li::before { content: ""; position: absolute; left: 0; top: 1.05rem; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
.xp-steps ol { padding-left: 0; margin: 0; counter-reset: step; list-style: none; }
.xp-steps li { position: relative; padding: 0 0 1.4rem 2.6rem; line-height: 1.6; counter-increment: step; }
.xp-steps li::before { content: counter(step); position: absolute; left: 0; top: -.1rem; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--terra); color: #fff; font-weight: 700; font-size: .95rem; display: grid; place-items: center; }

/* CTA */
.xp-cta { max-width: 720px; margin: 3rem auto 1rem; padding: 2.4rem 1.5rem; text-align: center; background: linear-gradient(160deg, var(--cream-warm), var(--peach)); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.xp-cta-mascot { width: 84px; height: auto; margin: 0 auto .6rem; display: block; }
.xp-cta-headline { font-size: clamp(1.5rem, 4vw, 2.1rem); margin: 0 0 .6rem; color: var(--deep); }
.xp-cta-headline em { font-style: italic; color: var(--terra); }
.xp-cta-sub { font-size: 1rem; line-height: 1.55; color: var(--deep-soft); margin: 0 auto 1.4rem; max-width: 440px; }