/* ==========================================================================
   Dubbelbluf — hero.css
   Split-hero layout (50/50 columns), mobile stacking.
   No overlay, no gradient. Image stands alone beside text.
   ========================================================================== */

.hero--split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 85vh;
    align-items: center;
    background: var(--c-bg);
}

.hero__content {
    padding: var(--s-64) var(--s-48);
}

.hero__kicker {
    font-family: var(--f-body);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--c-accent);
    margin-bottom: var(--s-16);
}

.hero__title {
    font-family: var(--f-heading);
    font-weight: 600;
    font-size: clamp(2rem, 4vw + 0.5rem, 3rem);
    line-height: 1.15;
    color: var(--c-white);
    margin-bottom: var(--s-16);
}

.hero__desc {
    font-size: 1.0625rem;
    color: var(--c-text-dim);
    line-height: 1.7;
    margin-bottom: var(--s-24);
    max-width: 480px;
}

.hero__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-16);
    margin-bottom: var(--s-24);
}

.hero__anchors {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-24);
    margin-top: var(--s-8);
}

.hero__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-8);
    margin-bottom: var(--s-24);
}

.hero__image-wrap {
    height: 100%;
    min-height: 400px;
    max-height: 85vh;
    overflow: hidden;
    border-radius: var(--r-md);
}

.hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--r-md);
}

/* Compact hero variant (reservation, contact) */
.hero--compact {
    min-height: 50vh;
}