/* =============================================================
   Block: Hero
   block-hero.css
   Prefix: blk-hero
   ============================================================= */

/* ── Scoped tokens ─────────────────────────────────────────── */
.blk-hero {
    --blk-hero-min-height:     520px;
    --blk-hero-padding-y:      clamp(5rem, 12vw, 9rem);
    --blk-hero-padding-x:      clamp(1.25rem, 5vw, 3.5rem);
    --blk-hero-max:            var(--sd-container-max, 1440px);
    --blk-hero-content-max:    920px;
    --blk-hero-overlay-color:  rgba(22, 28, 18, 0.55);
    --blk-hero-overlay-grad:   linear-gradient(to top, rgba(22, 28, 18, 0.72) 0%, rgba(22, 28, 18, 0.30) 55%, transparent 100%);
    --blk-hero-bg:             none;
    --ease-out:                cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Base layout ────────────────────────────────────────────── */
.blk-hero {
    position: relative;
    display: flex;
    align-items: center;
    min-height: var(--blk-hero-min-height);
    overflow: hidden;
    background-color: var(--sd-color-primary, #36452f);
}

/* ── Background image (CSS background fallback) ─────────────── */
.blk-hero--has-image {
    background-image: var(--blk-hero-bg);
    background-size: cover;
    background-position: center;
}

/* ── Background image (img element, preferred for LCP) ──────── */
.blk-hero__bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

/* ── Overlay ────────────────────────────────────────────────── */
.blk-hero__overlay {
    position: absolute;
    inset: 0;
    background: var(--blk-hero-overlay-grad);
    z-index: 1;
    pointer-events: none;
}

/* Always apply a subtle base gradient so text is legible */
.blk-hero--has-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(22, 28, 18, 0.60) 0%, rgba(22, 28, 18, 0.10) 70%, transparent 100%);
    z-index: 1;
    pointer-events: none;
}

/* Suppress the ::after when explicit overlay is present */
.blk-hero--overlay::after {
    display: none;
}

/* ── Content body ────────────────────────────────────────────── */
.blk-hero__body {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: var(--blk-hero-padding-y) var(--blk-hero-padding-x);
}

.blk-hero__inner {
    max-width: var(--blk-hero-max);
    margin-inline: auto;
}

/* ── Overline ────────────────────────────────────────────────── */
.blk-hero__overline {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--sd-font-family-primary, 'Outfit', sans-serif);
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--sd-color-cta, #5f7d3a);
    margin-bottom: 1.25rem;
    animation: blk-hero-fadeUp 0.7s var(--ease-out) 0.1s both;
}

/* ── Heading ─────────────────────────────────────────────────── */
.blk-hero__heading {
    font-family: var(--sd-font-family-heading, 'Outfit', sans-serif);
    font-size: clamp(2.25rem, 5vw, 4rem);
    font-weight: var(--sd-font-weight-light, 300);
    line-height: var(--sd-line-height-tight, 1.15);
    letter-spacing: -0.025em;
    color: var(--sd-color-white, #fff);
    max-width: var(--blk-hero-content-max);
    margin: 0 0 1.25rem;
    animation: blk-hero-fadeUp 0.7s var(--ease-out) 0.2s both;
}

/* ── Subheading ──────────────────────────────────────────────── */
.blk-hero__subheading {
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    font-weight: var(--sd-font-weight-normal, 400);
    line-height: var(--sd-line-height-relaxed, 1.75);
    color: rgba(255, 255, 255, 0.82);
    max-width: 600px;
    margin: 0 0 2.25rem;
    animation: blk-hero-fadeUp 0.7s var(--ease-out) 0.3s both;
}

/* ── CTAs ────────────────────────────────────────────────────── */
.blk-hero__ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.875rem;
    animation: blk-hero-fadeUp 0.7s var(--ease-out) 0.4s both;
}

.blk-hero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.8125rem 1.75rem;
    font-family: var(--sd-font-family-primary, 'Outfit', sans-serif);
    font-size: var(--sd-font-size-sm, 0.875rem);
    font-weight: var(--sd-font-weight-semibold, 600);
    letter-spacing: 0.02em;
    border-radius: var(--sd-radius-base, 0.25rem);
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--sd-transition-base, 250ms ease-in-out),
                border-color     var(--sd-transition-base, 250ms ease-in-out),
                color            var(--sd-transition-base, 250ms ease-in-out),
                transform        var(--sd-transition-fast, 150ms ease-in-out);
    white-space: nowrap;
}

.blk-hero__btn:hover {
    transform: translateY(-1px);
}

.blk-hero__btn--primary {
    background-color: var(--sd-color-cta, #5f7d3a);
    color: var(--sd-color-white, #fff);
    border: 2px solid var(--sd-color-cta, #5f7d3a);
}

.blk-hero__btn--primary:hover {
    background-color: var(--sd-color-cta-strong, #4f6b30);
    border-color: var(--sd-color-cta-strong, #4f6b30);
}

.blk-hero__btn--outline {
    background-color: transparent;
    color: var(--sd-color-white, #fff);
    border: 2px solid rgba(255, 255, 255, 0.65);
}

.blk-hero__btn--outline:hover {
    background-color: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.9);
}

/* ── Feefo rating badge ─────────────────────────────────────── */
.blk-hero__feefo {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.75rem;
    text-decoration: none;
    font-family: var(--sd-font-family-primary, 'Outfit', sans-serif);
    animation: blk-hero-fadeUp 0.7s var(--ease-out) 0.5s both;
    transition: opacity 0.2s ease;
}

.blk-hero__feefo:hover {
    opacity: 0.75;
}

.blk-hero__feefo-stars {
    display: flex;
    gap: 1px;
    color: #f0b429;
}

.blk-hero__feefo-score {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}

.blk-hero__feefo-meta {
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1;
}

.blk-hero__feefo-logo {
    height: 18px;
    width: auto;
    padding-left: 0.5rem;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    /* The hero background is always dark green (gradient or overlaid photo):
       flatten the colour Feefo mark to white like the other heroes. */
    filter: brightness(0) invert(1);
    opacity: 0.7;
}

/* ── Split layout (content left / image right) ──────────────── */
.blk-hero--split {
    align-items: stretch;
}

.blk-hero__content-panel {
    flex: 0 0 48%;
    display: flex;
    align-items: center;
    padding: var(--blk-hero-padding-y) var(--blk-hero-padding-x);
    background-color: var(--sd-color-primary, #36452f); /* flat, matches nav */
}

.blk-hero__image-panel {
    flex: 1;
    position: relative;
    overflow: hidden;
    min-height: var(--blk-hero-min-height);
}

/* Subtle shadow at the seam between panels */
.blk-hero__image-panel::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 100px;
    background: linear-gradient(to right, rgba(42, 54, 36, 0.4) 0%, transparent 100%);
    z-index: 1;
    pointer-events: none;
}

/* ── Keyframes ───────────────────────────────────────────────── */
@keyframes blk-hero-fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ── Responsive ──────────────────────────────────────────────── */
@media (max-width: 767px) {
    .blk-hero {
        --blk-hero-min-height: 480px;
        --blk-hero-padding-y:  clamp(3.5rem, 10vw, 5rem);
    }

    .blk-hero__heading {
        font-size: clamp(2rem, 8vw, 2.5rem);
    }

    .blk-hero__ctas {
        flex-direction: column;
        align-items: flex-start;
    }

    .blk-hero__btn {
        width: 100%;
        justify-content: center;
    }

    /* Split: stack vertically, image on top */
    .blk-hero--split {
        flex-direction: column;
    }

    .blk-hero__image-panel {
        flex: none;
        width: 100%;
        height: 260px;
        min-height: 0;
        order: -1;
    }

    .blk-hero__content-panel {
        flex: none;
        width: 100%;
    }
}