/* Company occasion pages at /foretag/<slug> (2026-10-19), generated by
   scripts/build-occasions.mjs. Everything else comes from vin.css (the tasting
   pages); this file only adds what a quote page needs, from the same tokens. */

/* Links inside the intro: burgundy, underlined, like the
   site's other text links. */
.oc-about .tp-p a{color:var(--primary);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.oc-about .tp-p a:hover{color:var(--primary-hover)}

/* Hero (2026-10-26): cream like /foretag's, the title left and the card's
   illustration right, in the card's shape, so the page reads as the card it
   was opened from. */
/* The nav sits on top of the page (position:absolute, 80px tall), so the
   hero starts below it. */
.oc-hero-in{max-width:var(--frame-max);margin:0 auto;padding:calc(80px + clamp(16px,4vh,48px)) var(--frame-pad) clamp(40px,7vh,80px);
  display:grid;gap:clamp(24px,4vw,56px);align-items:center}
@media(min-width:900px){.oc-hero-in{grid-template-columns:1fr 1fr;column-gap:64px}}
.oc-hero .crumbs{color:var(--text-secondary)}
.oc-hero .crumbs a{color:var(--primary);text-decoration:none}
.oc-hero .crumbs a:hover{text-decoration:underline;text-underline-offset:3px}
.oc-hero h1{margin-top:18px;max-width:16ch;color:#2D0C18;font-size:clamp(40px,5vw,64px);line-height:1.08;text-wrap:balance}
.oc-hero-art{border-radius:24px;overflow:hidden;aspect-ratio:9/8;max-width:560px;width:100%;justify-self:end}
.oc-hero-art img{display:block;width:100%;height:100%;object-fit:cover}

/* The other occasions, as the /foretag cards, and a link to /foretag. */
.oc-more .occ-row{margin-top:clamp(20px,3vw,32px)}
.oc-all{display:inline-flex;align-items:center;gap:8px;margin-top:24px;font-size:var(--fs-base);font-weight:700;color:var(--primary);text-decoration:none}
.oc-all:hover{text-decoration:underline;text-underline-offset:3px}
.oc-all svg{width:13px;height:13px;transition:transform .3s ease}
.oc-all:hover svg{transform:translateX(3px)}
@media(prefers-reduced-motion:reduce){.oc-all svg{transition:none}}

/* The quote request under the title: three facts and the button. */
.oc-facts{margin:28px 0 0;padding:0;list-style:none;display:grid;gap:10px;font-size:var(--fs-base);color:#44403c}
.oc-facts li{display:flex;align-items:center;gap:10px}
.oc-facts svg{flex:none;width:18px;height:18px;color:var(--primary)}
.oc-quote-btn{margin-top:28px}

/* The description: two paragraphs side by side, one per column, on the
   hero's centre line. The content file keeps them about the same length. */
.oc-cols{display:grid;grid-template-columns:1fr;gap:18px;margin-top:clamp(18px,2.5vw,28px)}
@media(min-width:900px){.oc-cols{grid-template-columns:1fr 1fr;column-gap:64px}}
.oc-cols .tp-p{margin:0;max-width:none}

/* The questions: heading in the left half, answers in the right, the same
   centre line as the hero and the description. */
@media(min-width:900px){.oc-split{grid-template-columns:1fr 1fr;gap:64px}}