/* ══════════════════════════════════════════════════════
   TNS Hero Block
   Port van lomero-animated-hero plugin
   Hind Bold ALL CAPS voor titels (algemene regel)
   Helvetica Now Display voor subtitel
   ══════════════════════════════════════════════════════ */

.tns-hero {
    --tns-hero-text:       #ffffff;
    --tns-hero-overlay:    rgba(16,47,73,0.55);
    --tns-hero-min-height: 100vh;
    --tns-hero-margin:     60px;
    --tns-hero-radius:     24px;
    --tns-hero-scroll:     150px;

    position: relative;
    width: 100%;
    overflow-x: clip;
}

.tns-hero.alignfull {
    max-width: none !important;
    width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
}

body:has(.tns-hero) { overflow-x: clip; }

/* ── Wrapper (sticky tijdens scroll-animatie) ── */
.tns-hero__wrapper {
    position: relative;
    width: 100%;
    min-height: var(--tns-hero-min-height);
    display: flex;
    align-items: center;
}
/* scroll-lock-ready verwijderd — animatie is trigger-based, geen sticky nodig */

/* ── Image container (animeert van ingeklapt naar full) ── */
.tns-hero__image-container {
    position: absolute;
    inset: 0;
    overflow: hidden;
    margin: var(--tns-hero-margin);
    border-radius: var(--tns-hero-radius);
    will-change: margin, border-radius;
    display: flex;
    align-items: center;
}

/* ── Achtergrond afbeelding ── */
.tns-hero__image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
}

/* Als geen afbeelding: navy achtergrond ── */
.tns-hero__image-container:not(:has(.tns-hero__image)) {
    background: #102F49;
}
.tns-hero:not(:has(.tns-hero__image)) .tns-hero__image-container {
    background: #102F49;
}

/* ── Overlay ── */
.tns-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--tns-hero-overlay) 0%, transparent 65%);
    pointer-events: none;
}
/* Cover variant: volledige overlay */
.tns-hero--cover .tns-hero__overlay {
    background: var(--tns-hero-overlay);
}

/* ── Content ── */
.tns-hero__content {
    position: relative;
    z-index: 10;
    width: 100%;
    max-width: 1000px;
    padding: clamp(40px, 6vw, 80px) clamp(32px, 7vw, 80px);
    color: var(--tns-hero-text) !important;
}

/* Gecentreerde variant */
.tns-hero--center .tns-hero__content {
    max-width: 1000px;
    text-align: center;
    margin: 0 auto;
}
.tns-hero--center .tns-hero__titles { align-items: center; }

/* ── Cover variant: staggered titels ── */
.tns-hero__titles {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 28px;
}

.tns-hero__cover-line {
    display: block;
    /* Hind Bold ALL CAPS — algemene regel */
    font-family: 'Hind', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: clamp(calc(2.5rem * var(--tns-title-scale, 1)), calc(6.5vw * var(--tns-title-scale, 1)), calc(4.75rem * var(--tns-title-scale, 1)));
    font-weight: 700;
    line-height: 1.0;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
    color: var(--tns-hero-text) !important;

    /* Start verborgen, animeer naar zichtbaar */
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.tns-hero.hero-loaded .tns-hero__cover-line {
    opacity: 1;
    transform: translateY(0);
}

/* ── Goud woord ── */
.tns-hero__gold {
    font-style: normal;
    color: #BFA46A !important;
}

/* ── Animated variant: rotating words ── */
.tns-hero__animated-title {
    font-family: 'Hind', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: clamp(calc(2rem * var(--tns-title-scale, 1)), calc(4.5vw * var(--tns-title-scale, 1)), calc(3.5rem * var(--tns-title-scale, 1)));
    font-weight: 700;
    line-height: 1.2;
    text-transform: uppercase;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.20);
    color: var(--tns-hero-text) !important;
    margin: 0 0 22px;
}
.tns-hero__static {
    display: block;
    color: var(--tns-hero-text) !important;
}
.tns-hero__rotating-wrapper {
    display: block;
    position: relative;
    height: 1.2em;
    overflow: hidden;
}
.tns-hero__rotating-word {
    display: block;
    position: absolute;
    top: 0; left: 0;
    white-space: nowrap;
    width: 100%;
    color: var(--tns-hero-text) !important;
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}
.tns-hero__rotating-word.active {
    transform: translateY(0%);
    opacity: 1;
    transition: transform 0.4s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.3s ease;
}
.tns-hero__rotating-word.exit {
    transform: translateY(-100%);
    opacity: 0;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease;
}
.tns-hero__rotating-word.enter {
    transform: translateY(100%);
    opacity: 0;
    transition: none;
}

/* ── Subtitel — Helvetica Now Display ── */
.tns-hero__subtitle {
    font-family: 'Helvetica Now Display', 'Helvetica Neue', Arial, sans-serif;
    font-size: clamp(18px, 2vw, 26px);
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 28px;
    max-width: 540px;
    opacity: 0.85;
    color: var(--tns-hero-text) !important;
}
.tns-hero--cover .tns-hero__subtitle {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    transition-delay: 0.35s;
}
.tns-hero--cover.hero-loaded .tns-hero__subtitle {
    opacity: 0.85;
    transform: translateY(0);
}

/* ── Subtitel 2 (extra tekst onder subtitel) ── */
.tns-hero__subtitle2 {
    font-family: 'Helvetica Now Display', 'Helvetica Neue', Arial, sans-serif;
    font-size: clamp(15px, 1.5vw, 18px);
    font-weight: 400;
    line-height: 1.7;
    margin: -16px 0 28px;
    max-width: 440px;
    opacity: 0.75;
    color: var(--tns-hero-text) !important;
}
.tns-hero--cover .tns-hero__subtitle2 {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    transition-delay: 0.40s;
}
.tns-hero--cover.hero-loaded .tns-hero__subtitle2 {
    opacity: 0.75;
    transform: translateY(0);
}

/* ── Knoppen (CTA hiërarchie) ── */
.tns-hero__buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.tns-hero--cover .tns-hero__buttons {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    transition-delay: 0.45s;
}
.tns-hero--cover.hero-loaded .tns-hero__buttons {
    opacity: 1;
    transform: translateY(0);
}

.tns-hero__btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Helvetica Now Display', 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    text-decoration: none;
    padding: 12px 26px;
    border-radius: 999px;
    transition: all 0.25s ease;
    cursor: pointer;
}
/* Primair — navy (op lichte bg) / goud (op donkere bg) */
.tns-hero__btn--primary {
    background: #102F49;
    color: #ffffff;
    border: 2px solid transparent;
}
.tns-hero__btn--primary:hover {
    filter: brightness(1.3);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.tns-hero__btn-icon {
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    margin-left: -6px;
    transition: transform 0.3s ease;
}
.tns-hero__btn-icon svg { width: 15px; height: 15px; stroke: #ffffff; }
.tns-hero__btn--primary:hover .tns-hero__btn-icon { transform: rotate(45deg); }
/* Secundair / Ghost — wit outline op donkere achtergrond */
.tns-hero__btn--secondary {
    background: transparent;
    color: rgba(255,255,255,0.85);
    border: 2px solid rgba(255,255,255,0.35);
}
.tns-hero__btn--secondary:hover {
    border-color: rgba(255,255,255,0.75);
    color: #ffffff;
}
/* Outline — identiek aan primair maar transparant met witte border */
.tns-hero__btn--outline {
    background: transparent;
    color: #ffffff;
    border: 2px solid #ffffff;
}
.tns-hero__btn--outline:hover {
    background: rgba(255,255,255,0.15);
    transform: translateY(-1px);
}
/* Icon binnen outline knop */
.tns-hero__btn--outline .tns-hero__btn-icon {
    background: rgba(255,255,255,0.20);
    border: 1.5px solid rgba(255,255,255,0.60);
}

/* ── Scroll indicator ── */
.tns-hero__scroll-indicator {
    position: absolute;
    bottom: 32px;
    left: 0; right: 0;
    display: flex;
    justify-content: center;
    z-index: 20;
}
.tns-hero__scroll-arrow {
    display: flex; align-items: center; justify-content: center;
    width: 48px; height: 48px;
    border: 2px solid rgba(255,255,255,0.6);
    border-radius: 50%;
    background: rgba(255,255,255,0.10);
    backdrop-filter: blur(8px);
    cursor: pointer;
    animation: tns-hero-bounce 2s ease-in-out infinite;
    transition: background 0.2s;
}
.tns-hero__scroll-arrow:hover { background: rgba(255,255,255,0.22); }
.tns-hero__scroll-arrow svg { width: 22px; height: 22px; stroke: #ffffff; fill: none; stroke-width: 2; }

@keyframes tns-hero-bounce {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(10px); }
}

/* ── Speech bubble hoek ── */
.tns-hero--speech-bubble .tns-hero__image-container { overflow: visible; }
.tns-hero--speech-bubble .tns-hero__image-container::after {
    content: '';
    position: absolute;
    bottom: -64px; left: 0;
    width: 72px; height: 64px;
    background-color: var(--tns-hero-overlay-color, #102f49);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 64'%3E%3Cpath d='M0 0 L0 64 Q0 0 72 0 Z'/%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 64'%3E%3Cpath d='M0 0 L0 64 Q0 0 72 0 Z'/%3E%3C/svg%3E");
    mask-size: contain;
    -webkit-mask-size: contain;
    z-index: 5;
    transition: opacity 0.4s, transform 0.4s;
}
.tns-hero--speech-bubble.bubble-collapsed .tns-hero__image-container::after {
    opacity: 0; transform: scale(0);
}

/* ── Content row: niet meer nodig, verwijderd ── */

/* ── Brand bar: absolute binnen content, hoogte via JS gezet ── */
.tns-hero__brand-bar {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 25px;
    padding-left: clamp(24px, 3vw, 44px);
}

.tns-hero__brand-text {
    font-family: 'Hind', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: clamp(20px, 2vw, 30px);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #ffffff;
    line-height: 1.15;
    text-align: left;
}

.tns-hero__brand-line {
    display: block;
    width: 2px;
    align-self: stretch;
    background: #BFA46A;
    border-radius: 2px;
    flex-shrink: 0;
}

/* Content padding-left wordt via JS verfijnd op basis van de gemeten brand-bar
   breedte. Deze CSS-waarde is de vangnetstand: staat de tekst er al ruim genoeg
   naast voordat het script draait, en blijft de opmaak heel als JS uitvalt. */
@media (min-width: 769px) {
    .tns-hero:has(.tns-hero__brand-bar) .tns-hero__content {
        padding-left: clamp(150px, 16vw, 240px);
    }
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .tns-hero__brand-bar {
        gap: 10px;
        padding-left: 14px;
    }
    .tns-hero__brand-text { font-size: 14px; }
}
@media (max-width: 768px) {
    .tns-hero__brand-bar { display: none; }
}

/* ── Responsive ── */
@media (max-width: 768px) {
    .tns-hero { --tns-hero-margin: 28px; --tns-hero-radius: 20px; }
    .tns-hero__cover-line { font-size: clamp(calc(2rem * var(--tns-title-scale, 1)), calc(8vw * var(--tns-title-scale, 1)), calc(3rem * var(--tns-title-scale, 1))); }
}
@media (max-width: 480px) {
    .tns-hero { --tns-hero-margin: 16px; --tns-hero-radius: 16px; }
    .tns-hero__cover-line { font-size: clamp(calc(1.75rem * var(--tns-title-scale, 1)), calc(9vw * var(--tns-title-scale, 1)), calc(2.5rem * var(--tns-title-scale, 1))); }
    .tns-hero__animated-title { font-size: clamp(calc(1.5rem * var(--tns-title-scale, 1)), calc(7vw * var(--tns-title-scale, 1)), calc(2.5rem * var(--tns-title-scale, 1))); }
}

/* ── Mobiel: lagere hoogte + smallere tekstbreedte ── */
@media (max-width: 767px) {
    /* ── Hoogte volgt de inhoud ──
       De image-container stond op position:absolute met inset:0, waardoor de
       inhoud de hero nooit hoger kon maken en lange koppen onder het logo
       schoven. Op mobiel loopt hij nu mee in de flow; de afbeeldingen
       binnenin blijven absoluut en vullen dus alsnog het hele vlak. */
    .tns-hero__wrapper {
        min-height: 70vh;
        align-items: stretch;
    }
    .tns-hero__image-container {
        position: relative;
        inset: auto;
        width: 100%;
        min-height: inherit;
    }

    /* ── Eén marge voor logo, menuknop en herotekst ──
       --tns-gutter staat op mobiel in style.css en wordt ook door de header
       gebruikt, dus de linkerlijn klopt op elk schermformaat. Bovenin komt de
       hoogte van het logo erbij zodat de tekst er nooit onder valt. */
    .tns-hero__content {
        max-width: min(60vw, 460px);
        padding: calc(65px + var(--tns-gutter, 1.5rem) * 2) var(--tns-gutter, 1.5rem) clamp(32px, 7vw, 56px);
    }
    /* Knoppen mogen breder dan de tekstkolom: uniforme breedte o.b.v. de langste
       label, geen afbreken. De tekst eromheen blijft op 60vw (weg van de foto). */
    .tns-hero__buttons {
        flex-direction: column;
        align-items: stretch;
        width: max-content;
        max-width: 85vw;
        gap: 16px;
    }
    /* De mobiel-only knoppen-div krijgt van .tns-show-mobile-only een
       display:block !important; forceer flex zodat de gelijke breedte werkt. */
    .tns-hero__buttons.tns-show-mobile-only {
        display: flex !important;
    }
    /* Gelijke hoogte: de knop met het ronde icoontje was hoger dan die zonder */
    .tns-hero__btn {
        white-space: nowrap;
        justify-content: flex-start;
        min-height: 58px;
        padding-top: 8px;
        padding-bottom: 8px;
        align-items: center;
    }
}
@media (prefers-reduced-motion: reduce) {
    .tns-hero__cover-line { transition: none; }
    .tns-hero__scroll-arrow { animation: none; }
    .tns-hero__rotating-word { transition: opacity 0.3s; transform: translateY(0) !important; }
    .tns-hero__rotating-word:not(.active) { opacity: 0; }
}