/* Konferens + Bröllop: två bildrutor på lövbakgrunden (startsidan, #conference). */
.section-duo{background-color:transparent}
/* Ingen luft under rutorna, så att de hänger ihop med bildkarusellen nedanför. */
.section-duo .padding-section-large{padding-bottom:0}
/* Rutorna ser ut som fotona i karusellen nedanför: smala, stående, raka hörn, fritt på lövbakgrunden. Bröllop börjar lägre än Konferens. */
.duo{display:flex;justify-content:center;align-items:flex-start;gap:clamp(2rem,8vw,9rem);width:100%}
.duo_box{position:relative;overflow:hidden;width:min(38rem,48vw);aspect-ratio:6/5;display:flex;isolation:isolate}
/* Konferens är bred och liggande, Bröllop smal och stående – som de olika formaten i karusellen. */
.duo_box--brollop{width:min(26rem,32vw);aspect-ratio:2/3;margin-top:clamp(4rem,14vw,12rem)}
.duo_bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.duo_bg--brollop{object-position:50% 30%}
.duo .duo_box--brollop::before{background:linear-gradient(to bottom,rgba(20,16,22,.35) 0%,rgba(20,16,22,0) 20%,rgba(20,16,22,.1) 38%,rgba(20,16,22,.88) 68%,rgba(20,16,22,.92) 100%)}
/* Ikonen uppe till vänster, rubrik/text/knapp nere till vänster. Mörkt bara längst ner så att fotot syns. */
.duo_box::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to bottom,rgba(20,16,22,.35) 0%,rgba(20,16,22,0) 22%,rgba(20,16,22,.25) 40%,rgba(20,16,22,.85) 72%,rgba(20,16,22,.9) 100%)}
.duo_content{display:flex;flex-direction:column;justify-content:space-between;align-items:flex-start;width:100%;padding:1.75rem;text-align:left}
.duo_bottom{display:flex;flex-direction:column;align-items:flex-start;gap:1rem;max-width:26rem}
.duo_illustration{width:4rem}
/* Rubrikerna i samma storlek som veckodagarna under ÖPPET (h5), så att länken blir det stora. */
.duo_bottom h2{font-size:var(--_typography---heading-style-h5);line-height:1.3}
.duo .rich-80{width:100%;text-align:left;text-shadow:0 1px 3px rgba(0,0,0,.5)}
/* Länkarna ser ut som textlänkarna i restaurangdelen (utan pil). Hela rutan är klickbar via länkens ::after. */
.duo_link{color:var(--_colors---color-brand-yellow);font-size:28px;line-height:1.1;text-transform:uppercase;text-decoration:none;padding-bottom:4px;background:linear-gradient(currentColor,currentColor) left bottom/100% 2px no-repeat}
.duo_link::after{content:"";position:absolute;inset:0;z-index:1}
.duo_link:focus-visible{outline:none}
.duo_box:has(.duo_link:focus-visible){outline:3px solid var(--_colors---color-brand-yellow);outline-offset:4px}
.duo_bg{transition:transform 3s cubic-bezier(.2,.7,.2,1)}
.duo_box::before{transition:opacity .6s ease}
.duo_box:hover .duo_bg,.duo_box:has(.duo_link:focus-visible) .duo_bg{transform:scale(1.06)}
.duo_box:hover .duo_link{animation:duo-wipe .7s cubic-bezier(.6,0,.2,1)}
@keyframes duo-wipe{0%{background-size:100% 2px;background-position:right bottom}45%{background-size:0 2px;background-position:right bottom}55%{background-size:0 2px;background-position:left bottom}100%{background-size:100% 2px;background-position:left bottom}}
.duo_fillout button{display:none!important}
@media (prefers-reduced-motion:reduce){.duo_bg{transition:none}.duo_box:hover .duo_bg{transform:none}.duo_box:hover .duo_link{animation:none}}
@media (max-width:767px){.duo{flex-direction:column;gap:3rem}.duo_box{width:90%;aspect-ratio:auto;min-height:28rem}.duo_box--brollop{min-height:34rem}.duo_box--brollop{width:80%;margin-top:0;align-self:flex-end}.duo_content{padding:1.25rem}.duo_link{font-size:22px}}