/* GRT Hero block styles */

/* ============================================================
 * Section shell
 * ============================================================ */

.grt-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ── Min-height variants ── */
.grt-hero--height-full   { min-height: 90vh; }
.grt-hero--height-large  { min-height: 70vh; }
.grt-hero--height-medium { min-height: 55vh; }

/* ============================================================
 * Background image
 * ============================================================ */

.grt-hero__bg,
.grt-hero__bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ============================================================
 * Overlay (dark gradient by default; opacity set inline)
 * ============================================================ */

.grt-hero__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.70) 0%,
        rgba(0, 0, 0, 0.20) 60%,
        rgba(0, 0, 0, 0.00) 100%
    );
    /* inline opacity from overlay_opacity field multiplies with this */
}

/* ============================================================
 * Inner / container
 * ============================================================ */

.grt-hero__inner {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
}

/* ── Nav offset — clears the absolute-positioned header ── */
.grt-hero__nav-offset {
    padding-top: 10rem;
}

/* ── Content position variants ── */
.grt-hero--pos-bottom-left   .grt-hero__inner { align-items: flex-end; justify-content: flex-start; }
.grt-hero--pos-bottom-center .grt-hero__inner { align-items: flex-end; justify-content: center; }
.grt-hero--pos-center-left   .grt-hero__inner { align-items: center;   justify-content: flex-start; }
.grt-hero--pos-center        .grt-hero__inner { align-items: center;   justify-content: center; }

/* ============================================================
 * Content block
 * ============================================================ */

.grt-hero__content {
    /* No top padding — flex-end on the inner pushes content to the bottom.
       Bottom padding = gap from buttons to hero edge (Figma: ~58px ≈ space-dkt-60). */
    padding-bottom: var(--space-dkt-32, 2rem);
    width: 100%;
}

/* Center-aligned variants */
.grt-hero--pos-bottom-center .grt-hero__content,
.grt-hero--pos-center        .grt-hero__content {
    text-align: center;
}

/* ── Title ── */
.grt-hero__title {
    font-family: var(--h1-font-family, 'Campora', serif);
    font-weight: var(--h1-font-weight, 600);
    font-size: var(--h1-font-size, 7.5rem);           /* 120px — Figma: DKT/Headline_H1 */
    line-height: var(--h1-line-height, 1.1085);
    letter-spacing: var(--h1-letter-spacing, -0.02em);
    color: var(--color-white, #fff);
    margin: 0 0 var(--space-dkt-60, 3.75rem);  /* Figma: gap-[60px] between heading and buttons */
    text-decoration: underline;
    text-decoration-color: var(--color-white, #fff);
    text-decoration-thickness: 12px;                   /* Figma: decoration-[12px] */
    text-underline-offset: 0.15em;
    text-shadow: 0 0 40px rgba(0, 0, 0, 0.6);         /* Figma: text-shadow for legibility */
}

/* ── Actions ── */
.grt-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.grt-hero--pos-bottom-center .grt-hero__actions,
.grt-hero--pos-center        .grt-hero__actions {
    justify-content: center;
}

/* ============================================================
 * Split layout  (Text panel left | Image right)
 * Figma: node 100:21765 — 1728px frame, left 738px / right 989px
 * ============================================================ */

.grt-hero--layout-split {
    display: grid;
    grid-template-columns: calc(41.67% + 18px) 1fr; /* Figma exact split ratio */
}

/* ── Left panel (red) ── */
.grt-hero__panel-left {
    background: var(--color-brand-red, #E40521);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: var(--space-dkt-60, 3.75rem);               /* Figma: gap-[60px] */
    padding-inline: var(--space-dkt-60, 3.75rem);
    padding-top: 10rem;
    padding-bottom: 4rem;
}

/* ── Right panel (image) ── */
.grt-hero__panel-right {
    position: relative;
    overflow: hidden;
}

.grt-hero--layout-split .grt-hero__bg,
.grt-hero--layout-split .grt-hero__bg-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* ── Colour variants ── */

/* Red (default): red panel, white text */
.grt-hero--color-red .grt-hero__panel-left {
    background: var(--color-brand-red, #E40521);
}
.grt-hero--color-red .grt-hero__title {
    color: var(--color-white, #fff);
    text-decoration-color: var(--color-white, #fff);
}

/* White: white panel, red text */
.grt-hero--color-white .grt-hero__panel-left {
    background: var(--color-white, #fff);
}
.grt-hero--color-white .grt-hero__title {
    color: var(--color-brand-red, #E40521);
    text-decoration-color: var(--color-brand-red, #E40521);
}


/* ── Title max-width for fullscreen layout ── */
.grt-hero--layout-fullscreen .grt-hero__title {
    max-width: 70%;
}

/* ── Title overrides for split layout ── */
.grt-hero--layout-split .grt-hero__title {
    font-size: var(--h2-font-size, 4.6875rem);       /* 75px — Figma: text-[75px] */
    line-height: var(--h2-line-height, 1.2);
    letter-spacing: var(--h2-letter-spacing, 0);
    text-decoration-thickness: 6%;                    /* Figma: decoration-[6%] */
    text-shadow: none;                                /* no shadow needed on solid bg */
    margin-bottom: 0;                                 /* gap handled by flex gap on panel */
}

/* ── Actions in split layout ── */
.grt-hero--layout-split .grt-hero__actions {
    gap: 1.125rem;                                    /* Figma: gap-[18px] */
}

/* ============================================================
 * Responsive
 * ============================================================ */

@media (max-width: 1200px) {
    .grt-hero--layout-split {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 1024px) {
    .grt-hero__title {
        font-size: clamp(3.125rem, 9vw, var(--h1-font-size, 7.5rem));
    }
}

@media (max-width: 1000px) {
    /* Split collapses to stacked: image on top, red panel below */
    .grt-hero--layout-split {
        grid-template-columns: 1fr;
        grid-template-rows: 40vh auto;
    }
    .grt-hero__panel-right { order: -1; }
    .grt-hero__panel-left  {
        min-height: unset;
        padding-inline: var(--space-mbl-24, 1.5rem);
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .grt-hero--layout-split .grt-hero__title {
        font-size: var(--mbl-h2-font-size, 2rem);
        line-height: var(--mbl-h2-line-height, 1.2);
    }
}

@media (max-width: 768px) {
    .grt-hero--height-full  { min-height: 85vh; }
    .grt-hero--height-large { min-height: 65vh; }

    .grt-hero__nav-offset  { padding-top: 5rem; }
    .grt-hero--layout-fullscreen .grt-hero__title { max-width: none; }

    .grt-hero__content {
        padding-bottom: var(--space-mbl-32, 2rem);
    }

    .grt-hero__title {
        font-family: var(--mbl-h1-small-font-family, 'Campora', serif);
        font-weight: var(--mbl-h1-small-font-weight, 600);
        font-size: var(--mbl-h1-small-font-size, 2.5rem);
        line-height: var(--mbl-h1-small-line-height, 1.2);
        letter-spacing: var(--mbl-h1-small-letter-spacing, 0.02em);
        text-decoration-thickness: 4px;                  /* scale: 12px × 40/120 */
    }

    .grt-hero--layout-split .grt-hero__title {
        font-size: var(--mbl-h1-small-font-size, 2.5rem);
        letter-spacing: var(--mbl-h1-small-letter-spacing, 0.02em);
        text-decoration-thickness: 4px;
    }

    .grt-hero__actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .grt-hero--pos-bottom-center .grt-hero__actions,
    .grt-hero--pos-center        .grt-hero__actions {
        align-items: center;
    }

    .grt-btn {
        width: 100%;
        justify-content: center;
    }
}