/* The illustrated occasion cards (2026-10-26): one card per company occasion,
   linking to its page. Used on /foretag and at the bottom of every
   /foretag/<slug> page; the markup is written by scripts/build-occasions.mjs.
   Moved here from web/foretag.html so both use the same cards. */

/* ---------- Occasions: the landing page's expanding cards ---------- */
.occ-row{display:flex;flex-direction:column;gap:16px;margin-top:clamp(28px,4vw,44px)}
@media(min-width:900px){.occ-row{flex-direction:row;height:400px;gap:18px}}
.occ{
  display:block;text-decoration:none;
  position:relative;border-radius:24px;overflow:hidden;min-height:210px;
  transition:flex .7s cubic-bezier(.16,1,.3,1);
}
@media(min-width:900px){.occ{flex:1 1 0;min-height:0}.occ.on{flex:2.6 1 0}}
/* The site's scroll-in (input.css: .reveal.reveal-wait.active) sets its own
   transition and wiped out the expand (2026-10-15). Keep both: rise in with the
   stagger, expand without delay. */
.occ.reveal.reveal-wait.active{transition-property:opacity,transform,flex;transition-duration:.6s,.6s,.7s;transition-timing-function:cubic-bezier(.16,1,.3,1);transition-delay:0s}
.occ.d1.reveal-wait.active{transition-delay:.1s,.1s,0s}.occ.d2.reveal-wait.active{transition-delay:.2s,.2s,0s}.occ.d3.reveal-wait.active{transition-delay:.3s,.3s,0s}
.occ img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
.occ.on img{transform:scale(1.04)}
.occ-scrim{position:absolute;inset:0;background:linear-gradient(to top,rgba(41,37,36,.88) 0%,rgba(41,37,36,.4) 45%,rgba(41,37,36,.06) 100%)}
.occ-body{position:absolute;inset:auto 0 0 0;padding:20px}
/* Collapsed cards are ~195px wide at 1120. The title has to fit that on one
   line, so it scales up only once the card is the active one. */
/* One size in both states. A collapsed card breaks the word with a hyphen
   instead, using soft hyphens in the markup so it does not depend on the
   browser shipping a Swedish hyphenation dictionary. */
.occ h3{
  color:#fff;font-size:24px;line-height:1.2;
  hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word;
}
.occ p{
  color:rgba(255,255,255,.88);font-size:1rem;line-height:1.6;margin-top:8px;max-width:34ch;
  opacity:0;max-height:0;overflow:hidden;transition:opacity .45s ease,max-height .6s cubic-bezier(.16,1,.3,1);
}
.occ.on p{opacity:1;max-height:180px}
@media(max-width:899px){.occ p{opacity:1;max-height:180px}}


/* ---------- Illustrated occasion cards ----------
   Collapsed: no overlay; the solid card colour carries the title.
   Expanded: an overlay fades in (opacity, since gradients cannot transition), rising from the
   bottom and leaning in from the left, because the text sits in the bottom-left corner. */
.occ-row.illus .occ-scrim{
  background:
    linear-gradient(to top,rgba(20,14,12,.82) 0%,rgba(20,14,12,.6) 30%,rgba(20,14,12,.22) 54%,rgba(20,14,12,0) 72%),
    linear-gradient(to right,rgba(20,14,12,.38) 0%,rgba(20,14,12,.12) 45%,rgba(20,14,12,0) 70%);
  opacity:0;transition:opacity .7s cubic-bezier(.16,1,.3,1);
}
.occ-row.illus .occ.on .occ-scrim{opacity:1}
/* Light card (second on every page): white text cannot sit on a light colour, so the text stays
   dark and the overlay is a wash in the card's own colour, same direction as the dark one. */
.occ-row.illus .occ.is-light .occ-scrim{
  background:
    linear-gradient(to top,rgba(243,193,203,.97) 0%,rgba(243,193,203,.86) 32%,rgba(243,193,203,.4) 56%,rgba(243,193,203,0) 74%),
    linear-gradient(to right,rgba(243,193,203,.6) 0%,rgba(243,193,203,.2) 45%,rgba(243,193,203,0) 70%);
}
.occ-row.illus .occ.is-light h3,.occ-row.illus .occ.is-light p{color:#2D0C18}
.occ-row.illus .occ.is-light:focus-visible{outline-color:#2D0C18}
@media(max-width:899px){
  .occ-row.illus .occ{min-height:340px}
  .occ-row.illus .occ .occ-scrim{opacity:1}
}

/* "Läs mer" under the description: shown with it. */
.occ-go{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:14px;font-weight:700;letter-spacing:.04em;color:#fff;
  opacity:0;transition:opacity .45s ease}
.occ-go svg{width:13px;height:13px;transition:transform .3s ease}
.occ:hover .occ-go svg{transform:translateX(4px)}
.occ.on .occ-go{opacity:1}
@media(max-width:899px){.occ-go{opacity:1}}
.occ-row.illus .occ.is-light .occ-go{color:#2D0C18}
.occ:focus-visible{outline:2px solid var(--cream-50,#fffdfb);outline-offset:3px}
@media(prefers-reduced-motion:reduce){.occ p,.occ-go{opacity:1!important;max-height:180px!important}}