/* Fælles værn, indlæst efter de fire design. Ændrer ikke deres kompositioner. */
.home-design :is(.hero-grid,.hero-copy,.quick-grid,.backstage-blocks,.backstage-block,.block-copy,.content-card-grid,.content-card,.event-card-grid,.event-card,.home-theme-grid,.photo-row,.section-title),
.article :is(header,.prose),.listing :is(header,.listing-grid){min-width:0}

.home-design :is(h1,h2,h3,.quick-grid strong),
.article h1,.listing h1{word-break:normal;overflow-wrap:break-word;hyphens:auto;text-wrap:balance}

.home-design :is(.hero-copy,.block-copy,.content-card,.event-card,.home-theme-grid article) :is(p,a,small),
.article .prose,.listing .listing-grid{overflow-wrap:break-word}

main img{max-inline-size:100%}

/* Scene har en ekstra stor hero. Lange titler skal skalere ned som i de
   øvrige designs, ellers bliver prologen flere skærme høj. */
.scene .home-design-scene .hero-copy h1.hero-title-long{max-width:17ch;font-size:clamp(3.2rem,5.1vw,5.8rem);line-height:.9}
.scene .home-design-scene .hero-copy h1.hero-title-xlong{max-width:20ch;font-size:clamp(2.6rem,4vw,4.5rem);line-height:.96}

/* Accentfarven må gerne være dekorativ, men små tekster skal bruge den
   kontrastkontrollerede variant fra layoutet. */
body.backstage :is(.hero,.section-title,.content-card,.event-card,.home-theme-grid,.article,.listing) :is(.kicker,.category),
body.atelier :is(.hero,.section-title,.content-card,.event-card,.home-theme-grid,.article,.listing) :is(.kicker,.category),
body.scene :is(.hero,.section-title,.content-card,.event-card,.home-theme-grid,.article,.listing) :is(.kicker,.category),
body.design-weiglin-cms :is(.hero,.section-title,.content-card,.event-card,.home-theme-grid,.article,.listing) :is(.kicker,.category){color:var(--design-accent-text)}

body :is(.logo-mark,.form-success-mark){color:var(--design-on-accent)}
body:is(.backstage,.scene,.atelier) :is(.home-design,.public-form) > .button:not(.secondary),
body:is(.backstage,.scene,.atelier) .home-design .button:not(.secondary){color:var(--design-on-accent)}

@media(max-width:680px){
  .home-design :is(.content-card,.event-card,.backstage-block,.home-theme-grid article){transform:none}
  .scene .home-design-scene .hero-copy h1.hero-title-long{font-size:clamp(2.6rem,10vw,3.5rem)}
  .scene .home-design-scene .hero-copy h1.hero-title-xlong{font-size:clamp(2.15rem,8.5vw,3rem)}
}