/* Hero POLEN2026 */
.pol-hero { position: relative; overflow: hidden; background: #000; width: 100%; }
.pol-hero-full   { height: 100vh; }
.pol-hero-large  { height: 82vh; min-height: 520px; }
.pol-hero-medium { height: 60vh; min-height: 420px; }
.pol-hero-small  { height: 42vh; min-height: 320px; }

.pol-hero .cms2-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .7s ease; pointer-events: none; }
.pol-hero .cms2-slide.active { opacity: 1; pointer-events: auto; z-index: 1; }

.pol-hero-media { position: absolute; inset: 0; background-size: cover; background-position: center; }
.pol-hero-media iframe { width: 100%; height: 100%; object-fit: cover; transform: scale(1.3); }
.pol-hero-shade { position: absolute; inset: 0; background: #000; opacity: .4; }

.pol-hero-content {
    position: relative; z-index: 2; height: 100%;
    display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
    padding-left: 10vw; padding-right: 6vw; color: #fff;
}
.pol-hero-content * { color: #fff; }
.pol-hero-line { margin: 0; font-size: clamp(16px, 1.4vw, 24px); font-weight: 400; }
.pol-hero-heading {
    margin: 0; text-transform: uppercase; font-weight: 700; line-height: 1.05;
    font-size: clamp(34px, 4.6vw, 84px); letter-spacing: .01em;
}
.pol-hero-actions { display: flex; gap: 40px; padding-top: 28px; }
.pol-hero-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 10px 40px; border: 1px solid #fff; border-radius: 50px;
    text-decoration: none; text-transform: uppercase; font-size: clamp(15px, 1.3vw, 22px);
    transition: background .25s, color .25s;
}
.pol-hero-btn:hover { background: #fff; color: #231F20; }

.pol-hero-arrow {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
    background: transparent; border: 0; color: #fff; font-size: 56px; line-height: 1;
    cursor: pointer; padding: 0 10px; opacity: .85;
}
.pol-hero-arrow:hover { opacity: 1; }
.pol-hero-arrow-prev { left: 2em; }
.pol-hero-arrow-next { right: 2em; }

.pol-hero-dots { position: absolute; bottom: 22px; left: 0; right: 0; z-index: 3; display: flex; justify-content: center; gap: 8px; }
.pol-hero-dot { width: 9px; height: 9px; border-radius: 50%; border: 1px solid #fff; background: transparent; padding: 0; cursor: pointer; }
.pol-hero-dot.active { background: #fff; }

@media (max-width: 760px) {
    .pol-hero-content { padding-left: 6vw; align-items: center; text-align: center; }
    .pol-hero-actions { flex-direction: column; gap: 18px; align-items: center; }
    .pol-hero-arrow-prev { left: .3em; }
    .pol-hero-arrow-next { right: .3em; }
}

/* Photo for this section, and the mobile one when it has been supplied.
 *
 * cms2_bg_style() emits --cms2-bg (always) and --cms2-bg-m (only when the
 * "Image (mobile)" slot is filled), and nothing else — no inline
 * `background-image`, because an inline style would outrank the media query
 * below and the swap would silently never happen.
 *
 * The swap is CSS rather than PHP because one cached HTML file serves every
 * visitor: the server must not pick a photo per device. The fallback chain means
 * a section with no mobile image keeps the desktop one.
 */
.pol-hero-media { background-image: var(--cms2-bg); }
@media (max-width: 760px) {
    .pol-hero-media { background-image: var(--cms2-bg-m, var(--cms2-bg)); }
}