.wb-hero-section {
    position: relative;
    padding-left: clamp(20px, 5vw, 64px);
    padding-right: clamp(20px, 5vw, 64px);
    overflow: hidden;
    color: var(--wb-hero-heading, #0f172a);
}

.wb-hero-section__inner {
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(400px, 1fr) auto;
    gap: clamp(32px, 6vw, 80px);
    align-items: center;
}

.wb-hero-section__content {
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 2.4vw, 26px);
    justify-content: center;
}

.wb-hero-section__kicker {
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: var(--wb-hero-kicker-text-transform, uppercase);
    color: var(--wb-hero-accent, #16a34a);
}

.wb-hero-section__heading {
    margin: 0;
    font-size: clamp(2.6rem, 2.2rem + 1.5vw, 3.8rem);
    line-height: 1.08;
    font-weight: 700;
    color: var(--wb-hero-heading, #0f172a);
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
}

.wb-hero-section__heading mark {
    color: var(--wb-hero-accent, #16a34a);
    background: none;
}

.wb-hero-section__description {
    margin: 0;
    max-width: 48ch;
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--wb-hero-description, #475569);
}

.wb-hero-section__ctas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--wb-hero-cta-gap, 16px);
    margin-top: clamp(8px, 1.8vw, 20px);
}

.wb-hero-section__cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 0.9em 1.9em;
    border-radius: 999px;
    font-weight: 600;
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

.wb-hero-section__cta.is-primary {
    background: var(--wb-hero-primary-bg, #16a34a);
    color: var(--wb-hero-primary-text, #ffffff);
}

.wb-hero-section__cta.is-primary:hover,
.wb-hero-section__cta.is-primary:focus-visible {
    background: var(--wb-hero-primary-bg-hover, #15803d);
    transform: translateY(-1px);
    box-shadow: 0 18px 36px rgba(16, 185, 129, 0.26);
}

.wb-hero-section__cta.is-secondary {
    background: var(--wb-hero-secondary-bg, #d1fae5);
    color: var(--wb-hero-secondary-text, #0f172a);
    border: 1px solid var(--wb-hero-secondary-border, #bbf7d0);
}

.wb-hero-section__cta.is-secondary:hover,
.wb-hero-section__cta.is-secondary:focus-visible {
    background: var(--wb-hero-secondary-bg-hover, #a7f3d0);
    transform: translateY(-1px);
}

.wb-hero-section__cta-icon {
    font-size: 1.15em;
    line-height: 1;
}

.wb-hero-section__media {
    padding: var(--wb-hero-media-padding, 12px);
    border-radius: calc(var(--wb-hero-media-radius, 28px) + var(--wb-hero-media-padding, 12px));
    background: var(--wb-hero-media-bg, transparent);
    display: inline-flex;
    align-items: stretch;
    max-width: 100%;
    align-self: center;
    justify-self: center;
    transform: translate(calc(var(--wb-hero-media-shift-x, -5%)), calc(var(--wb-hero-media-shift-y, -5%)));
}

.wb-hero-section__media.is-single {
    justify-self: start;
}

.wb-hero-section__media.has-shadow {
    box-shadow: 0 26px 64px rgba(15, 23, 42, 0.16);
}

.wb-hero-section__media-track {
    display: inline-flex;
    flex-wrap: nowrap;
    gap: var(--wb-hero-media-gap, 24px);
    justify-content: flex-start;
}

.wb-hero-section__media-track.is-single {
    justify-content: flex-start;
}

.wb-hero-section__media-card {
    position: relative;
    overflow: hidden;
    border-radius: var(--wb-hero-media-radius, 28px);
    background: #ffffff;
    width: min( max( 160px, var(--wb-hero-media-width, 230px) ), 320px );
    aspect-ratio: 3 / 4;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wb-hero-section__media.is-packed .wb-hero-section__media-card {
    width: min( max( 140px, calc(var(--wb-hero-media-width, 230px) * 0.9) ), 280px );
}

.wb-hero-section__media-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.wb-hero-section__media-card.is-empty {
    border: 1px dashed rgba(148, 163, 184, 0.4);
    color: rgba(15, 23, 42, 0.48);
    font-size: 0.92rem;
    text-align: center;
    padding: 12px;
}

.wb-hero-section__media-placeholder {
    padding: 12px;
}

.wb-hero-section__features-wrap {
    margin: clamp(36px, 6vw, 72px) auto 0;
    max-width: min(1200px, 100%);
}

.wb-hero-section__features {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--wb-hero-feature-gap, 24px);
}

.wb-hero-section__feature {
    display: flex;
    align-items: center;
    gap: 12px;
}

.wb-hero-section__feature-icon {
    font-size: var(--wb-hero-feature-icon-size, 24px);
    color: var(--wb-hero-feature-icon-color, #16a34a);
    line-height: 1;
    min-width: var(--wb-hero-feature-icon-size, 24px);
    text-align: center;
    flex-shrink: 0;
}

.wb-hero-section__feature-icon.is-image {
    width: var(--wb-hero-feature-icon-size, 24px);
    height: var(--wb-hero-feature-icon-size, 24px);
    object-fit: contain;
    display: block;
}

.wb-hero-section__feature-text {
    font-size: var(--wb-hero-feature-text-size, 16px);
    color: var(--wb-hero-feature-text-color, #0f172a);
    line-height: 1.5;
}

@media (max-width: 1023px) {
    .wb-hero-section__inner {
        grid-template-columns: minmax(320px, 1fr) auto;
        gap: clamp(24px, 5vw, 60px);
    }

    .wb-hero-section__media-card {
        width: clamp(160px, var(--wb-hero-media-width-tablet, var(--wb-hero-media-width, 230px)), 220px);
    }
}

@media (max-width: 760px) {
    /* MOBILE FIXES - Updated */
    .wb-hero-section {
        padding-left: clamp(16px, 4vw, 24px);
        padding-right: clamp(16px, 4vw, 24px);
        padding-top: clamp(32px, 6vw, 48px) !important;
        padding-bottom: clamp(32px, 6vw, 48px) !important;
        /* Make section a flex container for all children */
        display: flex;
        flex-direction: column;
    }

    /* Override theme padding on mobile - flatten hierarchy */
    .wb-hero-section__inner {
        padding-left: 0 !important;
        padding-right: 0 !important;
        gap: clamp(20px, 4vw, 32px) !important;
        /* Change from grid to flex - contains sections now */
        display: contents;
    }

    /* Mobile font sizes - custom overrides */
    .wb-hero-section__heading {
        font-size: var(--wb-hero-heading-font-mobile, clamp(2rem, 1.8rem + 1vw, 2.8rem));
    }

    .wb-hero-section__description {
        font-size: var(--wb-hero-description-font-mobile, 0.95rem);
    }

    /* Mobile section order - using CSS variables */
    .wb-hero-section__section {
        width: 100%;
        margin-bottom: clamp(20px, 4vw, 32px);
    }

    .wb-hero-section__content-wrapper {
        order: var(--wb-hero-content-order, 1);
    }

    .wb-hero-section__ctas-wrapper {
        order: var(--wb-hero-ctas-order, 2);
    }

    .wb-hero-section__media-wrapper {
        order: var(--wb-hero-media-order, 3);
    }

    .wb-hero-section__features-wrap-outer {
        order: var(--wb-hero-features-order, 4);
        width: 100%;
        margin-bottom: 0;
    }

    .wb-hero-section__ctas {
        flex-direction: column;
        align-items: stretch;
    }

    .wb-hero-section__cta {
        justify-content: center;
    }

    /* Side-by-side layout option for mobile */
    .wb-hero-section.has-side-by-side-mobile .wb-hero-section__ctas {
        flex-direction: row;
        align-items: center;
    }

    .wb-hero-section.has-side-by-side-mobile .wb-hero-section__cta {
        flex: 1;
        min-width: 0;
    }

    .wb-hero-section__media {
        display: block;
        width: 100vw;
        max-width: none;
        margin-left: calc(-1 * clamp(16px, 4vw, 24px));
        margin-right: calc(-1 * clamp(16px, 4vw, 24px));
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        transform: none;
        padding: 0;
        background: transparent;
        border-radius: 0;
        box-shadow: none !important;
        overflow-y: visible;
        scroll-snap-type: x mandatory;
        scroll-padding: 0 clamp(16px, 4vw, 24px);
    }

    .wb-hero-section__media-track {
        padding: 0 clamp(16px, 4vw, 24px);
        padding-bottom: 6px;
        gap: clamp(10px, 2.5vw, 14px);
        display: flex;
        align-items: flex-start;
    }

    /* Default: 1-2 billeder */
    .wb-hero-section__media-card {
        flex-shrink: 0;
        width: auto !important;
        height: 160px !important;
        scroll-snap-align: center;
        object-fit: cover;
        aspect-ratio: 3 / 4;
    }

    /* 3 billeder - lidt mindre */
    .wb-hero-section__media.is-packed .wb-hero-section__media-card {
        height: 130px !important;
    }

    .wb-hero-section__media-card img {
        object-position: center top;
        width: 100%;
        height: 100%;
    }

    .wb-hero-section__stats {
        flex-direction: column;
        gap: 18px;
    }

    .wb-hero-section__stats.has-dividers .wb-hero-section__stat + .wb-hero-section__stat {
        border-left: none;
        padding-left: 0;
        margin-left: 0;
    }

    .wb-hero-section__stat {
        position: relative;
        padding-left: 18px;
        min-width: 0;
    }

    .wb-hero-section__stat::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0.75em;
        width: 8px;
        height: 8px;
        border-radius: 999px;
        background: var(--wb-hero-accent, #16a34a);
    }

    /* Features list - mobile specific */
    .wb-hero-section__features-wrap-outer {
        order: var(--wb-hero-features-order, 2);
        width: 100%;
        margin: 0;
        padding: 0;
    }

    .wb-hero-section__features-wrap {
        padding-left: 0;
        padding-right: 0;
        margin-top: clamp(20px, 4vw, 32px);
        margin-bottom: 0;
        max-width: 100%;
    }

    .wb-hero-section__features {
        flex-direction: column;
        gap: clamp(16px, 3vw, 20px);
    }

    .wb-hero-section__feature {
        gap: 10px;
    }
}