/* Video hero spike: the home page hero with the showreel loop instead of the portrait. */
.elementor-element.antoni-video-hero {
    position: relative; overflow: hidden; display: flex; align-items: center;
    /* One screen: the site header is 143px tall and the hero starts 50px under it (margin-top: -50px). */
    min-height: calc(100svh - 93px); background: #320821 url('hero-loop-poster.jpg') center / cover !important;
}
.antoni-video-hero > .elementor-container { position: relative; z-index: 2; width: 100%; }
/* The live hero column has 120px top padding for the portrait; the video hero fits in one screen. */
@media (min-width: 768px) {
    .antoni-video-hero .avh-text > .elementor-element-populated { padding-top: 40px; }
}
.antoni-video-hero .antoni-hero-video {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0;
    /* Anchor to the top: several shots have his head within the top 5-25% of the frame, and a box wider
       than 16:9 crops height. Cropping the bottom instead keeps the head in view. */
    object-position: center top;
}
/* Plum gradient from the text side, so the white headline stays readable over any frame. */
.elementor-element.antoni-video-hero > .elementor-background-overlay {
    z-index: 1;
    background-image: linear-gradient(90deg, rgba(50, 8, 33, .96) 0%, rgba(50, 8, 33, .86) 32%, rgba(50, 8, 33, .3) 52%, rgba(50, 8, 33, .05) 75%, rgba(50, 8, 33, .25) 100%) !important;
}
/* Desktop: text on the left, Antoni on the right. The shots have him centred and a 16:9 video has almost
   no horizontal crop on a wide screen, so the video is made 20% wider and anchored left: he moves right. */
@media (min-width: 768px) {
    .antoni-video-hero .antoni-hero-video { width: 120%; left: 0; right: auto; }
    .antoni-video-hero .avh-row > .elementor-container { flex-direction: row-reverse; }
    .antoni-video-hero .avh-text { width: 52%; }
    .antoni-video-hero .avh-empty { width: 48%; }
    /* Clear of the 34px fixed social bar on the left edge. */
    .antoni-video-hero .avh-text > .elementor-element-populated { padding-left: max(4vw, 56px); padding-right: 0; }
}
.antoni-hero-controls {
    position: absolute; z-index: 3; left: 24px; bottom: 24px; display: flex; gap: 10px; align-items: center;
}
.antoni-hero-controls button, .antoni-hero-controls a {
    display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
    border-radius: 22px; border: 1px solid rgba(255, 255, 255, .55); background: rgba(50, 8, 33, .55);
    color: #fff; font: 500 14px/1 "Work Sans", sans-serif; text-decoration: none; cursor: pointer;
    backdrop-filter: blur(4px);
}
.antoni-hero-controls button { width: 44px; padding: 0; justify-content: center; }
.antoni-hero-controls button:focus-visible, .antoni-hero-controls a:focus-visible { outline: 2px solid #E0C06C; outline-offset: 2px; }
.antoni-hero-controls svg { width: 16px; height: 16px; fill: currentColor; }
@media (max-width: 767px) {
    .elementor-element.antoni-video-hero { min-height: calc(100svh - 15px); align-items: flex-end; }
    .antoni-video-hero .antoni-hero-video { object-position: center; }
    .elementor-element.antoni-video-hero > .elementor-background-overlay {
        background-image: linear-gradient(180deg, rgba(50, 8, 33, .25) 0%, rgba(50, 8, 33, .55) 40%, rgba(50, 8, 33, .95) 100%) !important;
    }
    /* Top right under the 65px header: the bottom holds the primary button, the left the social bar. */
    .antoni-hero-controls { left: auto; right: 16px; top: 66px; bottom: auto; }
}

/* Desktop and tablet: controls bottom right, over the video rather than under the button. */
@media (min-width: 768px) {
    .antoni-hero-controls { left: auto; right: 24px; }
}
/* Tablet has the 65px mobile header, so one screen is taller than on desktop. */
@media (min-width: 768px) and (max-width: 1024px) {
    .elementor-element.antoni-video-hero { min-height: calc(100svh - 15px); }
}

.antoni-video-hero .avh-media-widget { display: none; }
.antoni-video-hero > .avh-media { position: absolute; inset: 0; pointer-events: none; }
.antoni-video-hero .antoni-hero-controls { pointer-events: auto; }
.antoni-video-hero .antoni-hero-toggle { width: auto; min-width: 70px; }
.antoni-video-hero .antoni-hero-toggle[hidden] { display: none; }
.antoni-video-hero .antoni-hero-video { opacity: 0; transition: opacity .2s; }
.antoni-video-hero.avh-playing .antoni-hero-video { opacity: 1; }
@media(prefers-reduced-motion: reduce) { .antoni-video-hero .antoni-hero-video { transition: none; } }
/* Match native Elementor's generated selector specificity without page IDs. */
section.antoni-video-hero .avh-row > .elementor-container { max-width: none; width: 100%; }
@media (min-width: 768px) {
    section.antoni-video-hero .elementor-column.avh-text { width: 52%; }
    section.antoni-video-hero .elementor-column.avh-empty { width: 48%; }
    section.antoni-video-hero .elementor-column.avh-text > .elementor-element-populated { padding: 40px 24px 80px max(4vw, 56px); }
}