/*!
 * Project overrides.
 *
 * The vendor theme (assets/css/style.css) is generated from the pristine
 * original by `php artisan theme:tokenize` and must never be hand-edited —
 * anything project-specific belongs here, loaded after it.
 */

:root {
    /* Space the sticky header occupies; the hero subtracts it so the section
       fills exactly one screen rather than one screen plus the header. */
    --hero-header: 92px;

    /* Largest the hero portrait may get. Caps uploaded photos of any aspect
       ratio so a tall image can never push the section past the viewport. */
    --hero-image-max: 520px;
}

/* ==========================================================================
   Hero banner — fills the viewport on every device
   ========================================================================== */

.banner {
    display: flex;
    align-items: center;
    padding-top: 0;

    /* vh first as the fallback, then svh so mobile browsers measure against
       the *small* viewport and the hero is never cut off by a toolbar that
       slides away. */
    min-height: calc(100vh - var(--hero-header));
    min-height: calc(100svh - var(--hero-header));
}

.banner > .row {
    flex: 1 1 100%;
}

/* The theme adds 100px to the text column; with the section now vertically
   centred that only pushes the composition off-centre. */
.banner .pt-100 {
    padding-top: 0 !important;
}

/*
 * Constrain by height as well as width. `width: auto` with both maxima lets
 * the browser preserve the aspect ratio while honouring whichever limit binds
 * first, so portrait, landscape and square uploads all behave.
 */
.banner-img img {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: min(62svh, var(--hero-image-max));
    /* Invisible on the theme's transparent cut-out, but stops an uploaded
       rectangular photo from looking pasted on. */
    border-radius: var(--t-radius, 16px);
}

/* ==========================================================================
   Hero heading — survives a long name
   ========================================================================== */

/*
 * Two mechanisms working together:
 *   clamp()   scales the name with the viewport;
 *   .is-long / .is-xlong  step the ceiling down for names that would still
 *                         wrap to three lines at the full size.
 * The modifier is applied in frontend/sections/banner.blade.php from the
 * heading's own length, so it adapts to whatever the admin types.
 */
.banner h1 {
    font-size: clamp(2rem, 1.1rem + 3.4vw, 4rem);
    line-height: 1.14;
    margin-bottom: 1.25rem;
    /* Even out the line lengths instead of leaving one orphaned word. */
    text-wrap: balance;
    overflow-wrap: break-word;
}

.banner h1.is-long {
    font-size: clamp(1.85rem, 1rem + 2.7vw, 3.15rem);
}

.banner h1.is-xlong {
    font-size: clamp(1.6rem, 0.9rem + 2.2vw, 2.5rem);
    line-height: 1.18;
}

.banner .text-sm-bold {
    display: inline-block;
    margin-bottom: 0.25rem;
}

/* --------------------------------------------------------------- tablet */
@media (max-width: 1199.98px) {
    :root {
        --hero-image-max: 430px;
    }
}

/* --------------------------------------------------------------- stacked */
@media (max-width: 991.98px) {
    :root {
        --hero-image-max: 340px;
    }

    /* Stacked, the portrait must leave room for the heading, the paragraph and
       the subscribe form within the same screen. */
    .banner-img img {
        max-height: min(38svh, var(--hero-image-max));
    }

    /* Kept tight: stacked, the heading + paragraph + form + portrait have to
       share one screen, and min-height still lets the section grow rather than
       clip if a very long name needs the room. */
    .banner {
        padding-block: 1.5rem 2rem;
    }

    /* The theme bottom-aligns the two columns; once stacked that just adds a
       gap above the text. */
    .banner > .row {
        align-items: center !important;
    }

    .banner-img {
        margin-top: 1.5rem;
    }
}

@media (max-width: 575.98px) {
    :root {
        --hero-header: 78px;
    }

    /* Only down here does the field + button pair stop fitting on one line. */
    .banner .inner-subscriber form {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .banner .inner-subscriber .input-sybscriber {
        width: 100%;
    }

    .banner .inner-subscriber .btn {
        width: 100%;
        justify-content: center;
    }
}

/*
 * Short viewports (laptops at 1366x768, landscape phones, scaled displays).
 * The hero still fills the screen — what changes is that the composition is
 * tightened so it fits inside that screen rather than the section being allowed
 * to shrink. `min-height` (never `height`) means genuinely oversized content
 * still grows the section instead of being clipped.
 */
@media (max-height: 760px) and (min-width: 992px) {
    .banner-img img {
        max-height: min(52svh, 330px);
    }

    .banner h1 {
        margin-bottom: 0.75rem;
    }

    .banner .box-subscriber {
        margin-top: 1.5rem !important;
        margin-bottom: 0 !important;
    }

    .banner .row > div > .row p {
        margin-bottom: 0;
    }
}

/* Very short viewports: shrink the portrait further before anything else. */
@media (max-height: 600px) and (min-width: 992px) {
    .banner-img img {
        max-height: min(46svh, 260px);
    }
}