@layer components.hero{:host{width:100%;min-height:var(--ec-hero-min-height,clamp(300px, 42vw, 460px));isolation:isolate;color:var(--ec-hero-color,#fff);display:block;position:relative;overflow:clip}:host([hidden]){display:none}:host([bleed]){width:100vw;max-width:100vw;margin-inline:calc(50% - 50vw)}:host([align=center]){--ec-hero-justify:center;--ec-hero-text-align:center;--ec-hero-content-inset:auto}:host([align=start]){--ec-hero-justify:flex-start;--ec-hero-text-align:start}:host([align=end]){--ec-hero-justify:flex-end;--ec-hero-text-align:start}e-hero-stage{z-index:0;display:block;position:absolute;inset:0;overflow:clip}::slotted([slot=background]){object-fit:cover;width:100%;height:100%;display:block;position:absolute;inset:0}canvas[data-role=hero-canvas]{z-index:0;pointer-events:none;opacity:0;width:100%;height:100%;transition:opacity .8s;display:none;position:absolute;inset:0}:host([animated]) canvas[data-role=hero-canvas]{display:block}:host([data-animated-ready]) canvas[data-role=hero-canvas]{opacity:1}e-hero-overlay{z-index:1;pointer-events:none;background:var(--ec-hero-overlay,var(--ec-hero-overlay-default,linear-gradient(to top, rgba(0,0,0,.6) 0%, rgba(0,0,0,.25) 45%, transparent 100%)));display:block;position:absolute;inset:0}e-hero-content{z-index:2;justify-content:var(--ec-hero-justify,flex-end);min-height:inherit;gap:var(--ec-hero-gap,1rem);height:100%;padding:var(--ec-hero-padding,clamp(1.5rem, 4vw, 3.5rem));max-width:var(--ec-hero-content-max,none);margin-inline:var(--ec-hero-content-inset,0);text-align:var(--ec-hero-text-align,start);flex-direction:column;display:flex;position:relative}:host([align=center]) e-hero-content{align-items:center}e-hero-actions{gap:var(--ec-hero-actions-gap,.75rem);justify-content:var(--ec-hero-actions-justify,flex-start);flex-wrap:wrap;display:flex}:host([align=center]) e-hero-actions{justify-content:center}e-hero-actions:not(:has()){display:none}::slotted(h1){color:inherit;overflow-wrap:anywhere;margin:0}::slotted(h2){color:inherit;overflow-wrap:anywhere;margin:0}::slotted(h3){color:inherit;overflow-wrap:anywhere;margin:0}@media (forced-colors:active){e-hero-overlay{opacity:.85;background:canvas}e-hero-content{forced-color-adjust:none}}}