/* Salgsrettet artikellayout: ydelser under indholdsfortegnelsen, mørk ydelsesboks og "Din ydelse" i formularen.
   Prototypen står inline i /familieret/arv-og-testamente. */

/* Ydelser under indholdsfortegnelsen */
.toc-ydelse{margin-top:2rem;display:grid;gap:.9rem}
.toc-ydelse :is(.byg-toc-h,.pillar-toc-h){margin-bottom:0}
.toc-ydelse.lp-vaelg .ydelsesvalg{display:grid;gap:1.4rem}
.toc-ydelse .toc-kort .yv-valg,.toc-ydelse .toc-kort .yv-valg:hover,.toc-ydelse .toc-kort .yv-valg:has(input:checked){display:grid;grid-template-columns:16px minmax(0,1fr) auto;column-gap:.55rem;align-items:start;min-height:0;margin:0;padding:0;background:none;border:0}
.toc-ydelse .yv-valg input{width:16px;height:16px;margin-top:.1rem}
.toc-ydelse .yv-navn{grid-column:2;min-width:0;font-size:13px;line-height:1.35}
.toc-ydelse .yv-beloeb{grid-column:3;margin-left:0;font-size:12.5px;line-height:1.35;text-align:right;white-space:nowrap}
:is(.byg-toc,.pillar-toc) .toc-kort a.toc-laes,.toc-mere summary{display:inline-block;margin:.3rem 0 0 calc(16px + .55rem);font:500 10px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink,#141924);text-decoration:underline;text-decoration-color:var(--accent,#C8A24A);text-underline-offset:4px;cursor:pointer}
:is(.byg-toc,.pillar-toc) .toc-kort a.toc-laes:hover,.toc-mere summary:hover{color:var(--accent,#C8A24A)}
.toc-mere summary{list-style:none}
.toc-mere summary::-webkit-details-marker{display:none}
.toc-mere p{margin:.3rem 0 0 calc(16px + .55rem);font-size:12px;line-height:1.5;color:var(--ink-3,#5C6575)}

/* Højst tre ydelser vises; resten foldes ud med "Vis flere" (assets/ydelsesvalg.js) */
.ydelsesvalg:not(.vis-alle) .yv-ekstra{display:none}
.yv-flere{justify-self:start;align-self:start;background:none;border:0;padding:0;cursor:pointer;font:500 10.5px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink,#141924);text-decoration:underline;text-decoration-color:var(--accent,#C8A24A);text-underline-offset:4px}
.yv-flere:hover{color:var(--accent,#C8A24A)}
.yv-flere::after{content:" +";text-decoration:none}
.yv-flere[aria-expanded="true"]::after{content:" \2212"}
.toc-ydelse .yv-flere{font-size:10px;margin-left:calc(16px + .55rem)}
.cta-block--ydelse .yv-flere{color:#fff;margin:.9rem 0 .9rem calc(.6rem + 18px + .75rem)}
.cta-block--ydelse .yv-flere:hover{color:var(--gold)}
.ydelsesvalg--form .yv-flere{margin:.2rem 0 .6rem}

/* Mørk ydelsesboks: ydelsen vælges som på ydelseskortene og hopper til formularen */
:is(.byg-layout,.pillar-layout) article .cta-block.cta-block--ydelse{border-top:0}
.cta-block--ydelse .cta-valg{flex:0 0 100%;display:flex;justify-content:center;margin:.4rem 0 0}
/* Ydelseslisten flugter med trinnene: ingen maks.-bredde fra ydelsessidernes hero (.lp-hero-vaelg) */
.cta-block--ydelse .cta-valg.lp-hero-vaelg{width:100%;max-width:none}
.cta-block--ydelse .cta-valg .ydelsesvalg{width:100%;max-width:none;text-align:left;display:grid;gap:0}
:is(.byg-layout,.pillar-layout) article .cta-block--ydelse .cta-valg p{text-wrap:wrap}
.cta-block--ydelse .cta-trin{flex:0 0 100%;max-width:none;margin:0 auto .6rem;padding:0;list-style:none;counter-reset:trin;display:grid;gap:.5rem;text-align:left}
.cta-block--ydelse .cta-trin li{counter-increment:trin;position:relative;padding-left:1.4rem;font:400 13.5px/1.6 var(--sans);color:var(--fog);text-wrap:wrap}
.cta-block--ydelse .cta-trin li::before{content:counter(trin) '.';position:absolute;left:0;top:0;font:500 13.5px/1.6 var(--sans);color:var(--gold)}
.cta-block--ydelse .cta-trin strong{color:#fff;font-weight:600}
/* Artikelskabelonernes egne h3- og li-regler må ikke slå igennem i boksen */
:is(.byg-layout,.pillar-layout) article .cta-block--ydelse h3{flex:0 0 100%;font:200 clamp(1.9rem,3.4vw,2.5rem)/1.12 var(--serif);letter-spacing:-.01em;color:#fff;text-align:center;margin:0 0 .4rem}
/* Trinnenes tal flugter med tjekboksene og teksten med ydelsernes navne (samme indryk som .cta-kort .yv-valg) */
:is(.byg-layout,.pillar-layout) article .cta-block--ydelse .cta-trin li{margin:0;padding:0 0 0 calc(.6rem + 18px + .75rem)}
:is(.byg-layout,.pillar-layout) article .cta-block--ydelse .cta-trin li::before{left:.6rem}
.cta-kort{border-top:1px solid rgba(198,205,217,.2);transition:background .2s}
.cta-kort:last-of-type{border-bottom:1px solid rgba(198,205,217,.2)}
.cta-kort:has(input:checked){background:rgba(200,162,74,.08)}
.cta-block--ydelse .cta-kort .yv-valg,.cta-block--ydelse .cta-kort .yv-valg:hover,.cta-block--ydelse .cta-kort .yv-valg:has(input:checked){margin:0;padding:.9rem .6rem .3rem;background:none;border:0;min-height:0}
:is(.byg-layout,.pillar-layout) article .cta-block--ydelse .cta-kort p.cta-kort-tekst{flex:none;margin:0 .6rem .5rem calc(.6rem + 18px + .75rem);font:400 12.5px/1.5 var(--sans);color:var(--fog)}
:is(.byg-layout,.pillar-layout) article .cta-block--ydelse .cta-kort p.cta-kort-tekst:last-child{margin-bottom:.9rem}
.cta-block--ydelse .cta-kort .yv-valg{flex-wrap:nowrap;align-items:flex-start}
.cta-block--ydelse .cta-kort .yv-navn{flex:1 1 auto;min-width:0}
.cta-block--ydelse .cta-kort .yv-valg input{width:18px;height:18px;margin-top:.1rem}
.yv-beloeb:has(small.yv-moms){position:relative;text-align:right}
.yv-beloeb small.yv-moms{position:absolute;right:0;top:100%;margin-top:.15rem;font:400 11px/1.3 var(--sans);letter-spacing:0;color:var(--fog);white-space:nowrap}
.cta-block--ydelse .cta-kort:has(small.yv-moms) p.cta-kort-tekst::before{content:"";float:right;width:7.5rem;height:1.1em}
/* Kort uden tekst: plads til "Fast pris inkl. moms" under prisen */
.cta-block--ydelse .cta-kort:has(small.yv-moms):not(:has(p.cta-kort-tekst)) .yv-valg{padding-bottom:1.3rem}
@media(max-width:520px){
  .cta-block--ydelse .yv-beloeb small.yv-moms{width:4.4rem;white-space:normal;text-align:right}
  .cta-block--ydelse .cta-kort:has(small.yv-moms) p.cta-kort-tekst::before{width:4.8rem;height:2.5em}
  .cta-block--ydelse .cta-kort:has(small.yv-moms):not(:has(p.cta-kort-tekst)) .yv-valg{padding-bottom:2.4rem}
}
.ydelsesvalg--form .yv-valg:has(small.yv-moms){padding-bottom:1.4rem}
.ydelsesvalg--form .yv-beloeb small.yv-moms{color:var(--ink-3,#5C6575)}
:is(.byg-layout,.pillar-layout) article .cta-block--ydelse .cta-kort a.cta-kort-laes{display:inline-block;margin:0 0 .9rem calc(.6rem + 18px + .75rem);font:500 10.5px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:#fff;text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:4px}
:is(.byg-layout,.pillar-layout) article .cta-block--ydelse .cta-kort a.cta-kort-laes:hover{color:var(--gold)}