/* ============================================================
   VIN — the server-rendered SEO pages (/vin, /vin/<slug>, /vin/omraade/<slug>),
   served by Cloudflare Pages Functions (functions/vin/**). Loaded after base.css,
   whose tokens it uses. Bump ?v= in functions/_lib/page.js when this file changes.
   ============================================================ */

:root {
    /* Wine accents — the app's canonical palette (lib/utils/wine-color.ts). */
    --wine-red: #8B0000;
    --wine-white: #E7D58A;
    --wine-rose: #F2A1B3;
    --wine-orange: #E67E22;
    --wine-sparkling: #D4AF37;
    /* Topsoil bar */
    --soil-clay: #9c6b4e;
    --soil-silt: #c9a77c;
    --soil-sand: #e6d3a3;
    --vn-line: rgba(28, 36, 32, 0.12);
    --vn-radius: 14px;
}

body.vn, .vn *, .vn *::before, .vn *::after { box-sizing: border-box; }

body.vn {
    margin: 0;
    color: var(--color-dark-text);
    background: var(--color-primary-bg);
    font-family: var(--font-body);
    line-height: 1.55;
}

.vn a { color: var(--color-brand); }
.vn h1, .vn h2, .vn h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.15; margin: 0 0 0.5rem; }
.vn h1 { font-size: clamp(2rem, 5vw, 2.9rem); }
.vn h2 { font-size: 1.55rem; }
.vn h3 { font-size: 1.05rem; font-family: var(--font-body); font-weight: 600; }

/* ── Top bar + footer ── */
.vn-top {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    max-width: 1080px; margin: 0 auto; padding: 1rem 1.25rem;
}
.vn-logo { font-family: var(--font-display); font-weight: 600; font-size: 1.4rem; letter-spacing: 0.08em; color: var(--color-brand); text-decoration: none; }
.vn-top-links { display: flex; gap: 1.1rem; align-items: center; font-size: 0.95rem; }
.vn-top-links a { text-decoration: none; color: var(--color-dark-text); }
.vn-top-links .vn-top-cta { background: var(--color-primary-button); color: var(--color-light-text); padding: 0.45rem 0.95rem; border-radius: 999px; }
.vn-main { max-width: 1080px; margin: 0 auto; padding: 0 1.25rem 3rem; }
.vn-foot { border-top: 1px solid var(--vn-line); background: var(--color-card-bg); margin-top: 2rem; }
.vn-foot-inner { max-width: 1080px; margin: 0 auto; padding: 2rem 1.25rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1.5rem; }
.vn-foot-inner p { color: var(--color-muted); margin: 0.4rem 0 0; max-width: 34ch; font-size: 0.9rem; }
.vn-foot nav { display: flex; flex-wrap: wrap; gap: 0.6rem 1.2rem; font-size: 0.9rem; }
.vn-foot nav a { color: var(--color-muted); text-decoration: none; }

/* ── Breadcrumbs ── */
.vn-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.35rem; padding: 0; margin: 0.25rem 0 1.25rem; font-size: 0.85rem; color: var(--color-muted); }
.vn-crumbs li + li::before { content: '›'; margin-right: 0.35rem; }
.vn-crumbs a { color: var(--color-muted); }

/* ── Hero ── */
.vn-hero {
    display: flex; gap: 1.5rem; align-items: center; justify-content: space-between;
    background: var(--color-card-bg); border-radius: var(--vn-radius); padding: 1.75rem;
    border-left: 6px solid var(--vn-accent, var(--wine-red));
}
.vn-accent-red { --vn-accent: var(--wine-red); }
.vn-accent-white { --vn-accent: var(--wine-white); }
.vn-accent-rose { --vn-accent: var(--wine-rose); }
.vn-accent-orange { --vn-accent: var(--wine-orange); }
.vn-accent-sparkling { --vn-accent: var(--wine-sparkling); }
.vn-eyebrow { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.78rem; color: var(--color-muted); margin: 0 0 0.4rem; }
.vn-sub { color: var(--color-muted); margin: 0.25rem 0; }
.vn-price { font-size: 1.15rem; margin: 0.75rem 0 0; }
.vn-bottle { margin: 0; text-align: center; flex: 0 0 auto; }
.vn-bottle img { width: 140px; height: auto; display: block; }
.vn-bottle figcaption { font-size: 0.72rem; color: var(--color-muted); margin-top: 0.25rem; }
.vn-lead { font-size: 1.08rem; max-width: 70ch; margin: 1.25rem 0; }

/* ── Sections ── */
.vn-section { margin: 2rem 0; }
.vn-src { font-size: 0.8rem; color: var(--color-muted); margin: 0.6rem 0 0; }
.vn-src a { color: var(--color-muted); }
.vn-for { font-family: var(--font-body); font-size: 0.85rem; font-weight: 400; color: var(--color-muted); }
.vn-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.vn-fact { background: var(--color-card-bg); border-radius: var(--vn-radius); padding: 1.1rem 1.25rem; }
.vn-fact p { margin: 0.25rem 0; }
.vn-fact-big { font-family: var(--font-display); font-size: 1.45rem; }
.vn-fact-big::first-letter { text-transform: uppercase; }
.vn-dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.4rem 1.25rem; background: var(--color-card-bg); border-radius: var(--vn-radius); padding: 1.1rem 1.25rem; margin: 0.5rem 0 0; }
.vn-dl dt { color: var(--color-muted); }
.vn-dl dd { margin: 0; }
.vn-profile p { max-width: 70ch; }

/* Topsoil bar */
.vn-soilbar { display: flex; height: 12px; border-radius: 6px; overflow: hidden; margin: 0.5rem 0; }
.vn-soil-clay { background: var(--soil-clay); }
.vn-soil-silt { background: var(--soil-silt); }
.vn-soil-sand { background: var(--soil-sand); }

/* Vintage bars */
.vn-vintages { display: flex; align-items: flex-end; gap: 6px; height: 140px; background: var(--color-card-bg); border-radius: var(--vn-radius); padding: 1rem 1rem 0.5rem; overflow-x: auto; }
.vn-vintage { flex: 1 0 28px; display: flex; flex-direction: column; align-items: center; height: 100%; justify-content: flex-end; }
.vn-vbar { width: 100%; background: var(--color-brand-soft); border-radius: 4px 4px 0 0; position: relative; }
.vn-vintage.is-offered .vn-vbar { background: var(--color-brand); }
.vn-vscore { position: absolute; top: -1.2rem; left: 0; right: 0; text-align: center; font-size: 0.7rem; color: var(--color-muted); }
.vn-vyear { font-size: 0.72rem; color: var(--color-muted); margin-top: 0.25rem; }

/* Offers table */
.vn-table-wrap { overflow-x: auto; background: var(--color-card-bg); border-radius: var(--vn-radius); }
.vn-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.vn-table th, .vn-table td { padding: 0.7rem 1rem; text-align: left; border-bottom: 1px solid var(--vn-line); white-space: nowrap; }
.vn-table th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-muted); font-weight: 600; }
.vn-table tr:last-child td { border-bottom: 0; }
.vn-table s { color: var(--color-muted); font-size: 0.85rem; margin-left: 0.3rem; }
.vn-num { text-align: right !important; }

/* Buttons */
.vn-btn { display: inline-block; background: var(--color-primary-button); color: var(--color-light-text) !important; text-decoration: none; padding: 0.65rem 1.25rem; border-radius: 999px; border: 0; font: inherit; cursor: pointer; }
.vn-btn:hover { background: var(--color-primary-button-hover); }
.vn-btn-sm { padding: 0.4rem 0.85rem; font-size: 0.85rem; }
.vn-btn-ghost { background: var(--color-secondary-button); color: var(--color-dark-text) !important; }
.vn-btn-ghost:hover { background: var(--color-secondary-button-hover); }

/* Wine cards */
.vn-cards { list-style: none; padding: 0; margin: 0.5rem 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 0.75rem; }
.vn-card a { display: flex; gap: 0.8rem; align-items: center; background: var(--color-card-bg); border-radius: var(--vn-radius); padding: 0.8rem 1rem; text-decoration: none; color: var(--color-dark-text); height: 100%; box-sizing: border-box; }
.vn-card a:hover { box-shadow: 0 4px 16px rgba(16, 24, 43, 0.08); }
.vn-card-stripe { width: 6px; align-self: stretch; border-radius: 3px; background: var(--vn-accent); flex: 0 0 auto; }
.vn-card-bottle { width: 40px; height: 60px; object-fit: contain; flex: 0 0 auto; }
.vn-card-body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.vn-card-name { font-weight: 600; }
.vn-card-meta { font-size: 0.82rem; color: var(--color-muted); }
.vn-card-price { font-size: 0.88rem; }

/* Chips (region links) */
.vn-chips { list-style: none; padding: 0; margin: 0.5rem 0 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.vn-chips a { display: inline-flex; gap: 0.4rem; align-items: center; background: var(--color-card-bg); border: 1px solid var(--vn-line); border-radius: 999px; padding: 0.4rem 0.9rem; text-decoration: none; color: var(--color-dark-text); font-size: 0.92rem; }
.vn-chips a span { color: var(--color-muted); font-size: 0.8rem; }
.vn-count { font-family: var(--font-body); font-size: 0.9rem; color: var(--color-muted); font-weight: 400; }
.vn-hub-head { margin: 0.5rem 0 1.5rem; }
.vn-hub-head h2 a { text-decoration: none; }

/* Pager */
.vn-pager { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 1.25rem; }
.vn-pager a, .vn-pager span { padding: 0.35rem 0.75rem; border-radius: 8px; background: var(--color-card-bg); text-decoration: none; }
.vn-pager span[aria-current] { background: var(--color-brand); color: var(--color-light-text); }

/* CTA + empty */
.vn-cta { background: var(--color-brand); color: var(--color-light-text); border-radius: var(--vn-radius); padding: 1.75rem; margin: 2.5rem 0 0; }
.vn-cta h2 { color: var(--color-light-text); }
.vn-cta p { opacity: 0.85; max-width: 60ch; }
.vn-cta .vn-btn { background: var(--color-card-bg); color: var(--color-brand) !important; }
.vn-empty { text-align: center; padding: 4rem 1rem; }

/* Age gate (same localStorage flag as the Blazor AgeGateOverlay) */
.vn-age { position: fixed; inset: 0; z-index: 1000; background: rgba(16, 24, 43, 0.96); display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.vn-age[hidden] { display: none; }
.vn-age-card { background: var(--color-card-bg); border-radius: 16px; padding: 2rem 1.75rem; max-width: 400px; text-align: center; }
.vn-age-actions { display: flex; gap: 0.6rem; justify-content: center; flex-wrap: wrap; }

@media (max-width: 640px) {
    .vn-hero { flex-direction: column-reverse; align-items: flex-start; padding: 1.25rem; }
    .vn-bottle img { width: 110px; }
    .vn-top-links a:not(.vn-top-cta) { display: none; }
    .vn-top-links a[href="/vin"] { display: inline; }
}

/* A shop's product photo standing in for the AI bottle: crop to the bottle, melt the white. */
.vn-card-photo, .vn-bottle-photo img { object-fit: contain; object-position: center bottom; mix-blend-mode: multiply; }
.vn-bottle-photo img { height: 210px; }