/* ============================================================
   ipm/wp-home-hero block
   The hero image is a <picture>/<img> absolutely positioned
   behind the text overlay (not a CSS background), so the markup
   survives the Magento port. A <source media="(max-width:768px)">
   supplies an optional art-directed mobile image.
   ============================================================ */

:root {
    --wp--preset--spacing--20: 10px;
    --wp--preset--spacing--30: 20px;
    --wp--preset--spacing--40: 30px;
    --wp--preset--spacing--50: clamp(30px, 5vw, 50px);
    --wp--preset--spacing--60: clamp(30px, 7vw, 70px);
    --wp--preset--spacing--70: clamp(50px, 7vw, 90px);
    --wp--preset--spacing--80: clamp(70px, 10vw, 140px);
}

.ipm-home-container {
    margin: 0;
	padding: 0 1rem;
}

@media (min-width: 768px) {
	.ipm-home-container {
        margin: 1rem 0 0 0;
	}
}


@media (min-width: 1200px) {
	.ipm-home-container {
        margin: 1rem 0 0 0;
		padding: 0;
	}
}
/*
 * home-page.php renders the_content() directly instead of through the
 * wp:post-content block, so the per-instance flex gap WordPress generates
 * for this columns block (hero + subhero) never gets output — it silently
 * falls back to the site-wide 1.2rem default instead of the value set on
 * the block. Reinstate the intended core/columns default from theme.json
 * (var:preset|spacing|50) here.
 */
.ipm-home-container .wp-block-columns.is-layout-flex {
	gap: 1rem;
}



.ipm-home-hero {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 1rem;
    overflow: hidden;
    background-color: #1a1a1a; /* shown while image loads or when none is set */
}

/* Hero image — fills the block, sits behind the overlay */
.ipm-home-hero__picture,
.ipm-home-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.ipm-home-hero__img {
    display: block;
    object-fit: cover;
    object-position: center;
}

/* Semi-transparent text panel, anchored to the bottom-left */
.ipm-home-hero__overlay {
    position: absolute;
    z-index: 1;
    bottom: 2rem;
    left: 2rem;
    width: 75%;
    background-color: rgba(0, 0, 0, 0.8);
    border: 1px solid #6d6d6d;
    border-radius: 1rem;
    padding: 1rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.ipm-home-hero__title {
    font-family: 'The Seasons', the-seasons, serif;
    font-size: 2.5rem;
    font-weight: normal;
    font-style: normal;
    color: #fff;
    text-align: center;
    margin: 0;
    line-height: 1.2;
}

.ipm-home-hero__tagline {
    font-family: 'Source Sans 3', source-sans-3, sans-serif;
    font-weight: 500;
    font-size: 1.5rem;
    color: #fff;
    text-align: center;
    text-transform: uppercase;
    margin: 0;
    letter-spacing: 0.06em;
}

/* Dots between tagline items — CSS only, no visible character in markup */
.ipm-home-hero__tagline span + span::before {
    content: " \00B7 "; /* middle dot (·) with surrounding spaces */
    font-weight: bold;
    padding: 0 1rem 0 0.5rem;
}

.ipm-home-hero__description {
    font-family: 'Source Sans 3', sans-serif;
    font-weight: 100;
    font-size: 1.5rem;
    color: #fff;
    text-align: center;
    margin: 0 auto;
    line-height: 1.75;
    max-width: 40rem;
}

.ipm-home-hero__cta {
    display: inline-block;
    align-self: center;
    margin-top: 0.25rem;
    padding: 0.75rem 2rem;
    background-color: transparent;
    border: 1px solid #fff;
    border-radius: 0.5rem;
    color: #fff;
    font-family: 'Source Sans 3', source-sans-3, sans-serif;
    font-size: 1.6rem;
    font-weight: 400;
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.ipm-home-hero__cta:hover,
.ipm-home-hero__cta:focus {
    background-color: #fff;
    color: #000;
    text-decoration: none;
}

@media (max-width: 1023px) {
    .ipm-home-hero__title {
        margin: 0 auto;
        max-width: 30rem;
    }
}

@media (max-width: 769px) {
    .ipm-home-hero {
        border-radius: 1rem;
        height: 40rem;
        margin: 1rem 0 0 0;
    }

    .ipm-home-hero__overlay {
        left: 0.75rem;
        bottom: 1rem;
        width: calc(100% - 1.5rem);
        padding: 0.75rem;
    }

    .ipm-home-hero__title {
        margin: 0 auto;
        max-width: 26rem;
    }

    .ipm-home-hero__tagline {
        font-size: 1.5rem;
    }

    .ipm-home-hero__tagline span + span::before {
        font-size: 1.25rem;
        padding: 0 0.15rem 0 0;
    }

    .ipm-home-hero__description {
        font-size: 1.33333rem;
        max-width: 100%;
    }
}

@media (max-width: 480px) {
    .ipm-home-hero {
        height: 40rem;
    }
}

/* ============================================================
   Caption layout variants
   Picked per banner (or on the block) in the dashboard and added to
   the overlay as --desktop-* / --mobile-* modifiers. Desktop and
   mobile are chosen independently; "classic" adds no modifier and
   keeps the styles above.

   Measurements come straight from the Figma designs, in px. The
   description is not part of these designs, so it is hidden.
   Mobile breakpoint matches the 768px used for the mobile image
   <source> in the block's render.php.
   ============================================================ */

.ipm-home-hero {
    --ipm-hero-caption-inset: 16px;
    --ipm-hero-caption-inset-mobile: 12px;
    --ipm-hero-caption-radius: 12px;
    --ipm-hero-cta-border: #f8f3ec;
    --ipm-hero-cta-radius: 10px;
    --ipm-hero-gradient-desktop: linear-gradient(to bottom, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.8) 75%);
    --ipm-hero-gradient-mobile: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.33) 20%, rgba(0, 0, 0, 0.85) 100%);
}

/* ---------- Desktop ---------- */
@media (min-width: 769px) {
    /* Typography shared by every desktop variant. Selectors are doubled-up
       so they win over the base rules and any theme `.text-3xl` utility. */
    .ipm-home-hero__overlay--desktop-basic .ipm-home-hero__title,
    .ipm-home-hero__overlay--desktop-gradient .ipm-home-hero__title,
    .ipm-home-hero__overlay--desktop-reduced .ipm-home-hero__title {
        font-size: 2rem;
        line-height: 1.15;
        text-align: left;
        margin: 0;
        max-width: none;
    }

    .ipm-home-hero__overlay--desktop-basic .ipm-home-hero__tagline,
    .ipm-home-hero__overlay--desktop-gradient .ipm-home-hero__tagline,
    .ipm-home-hero__overlay--desktop-reduced .ipm-home-hero__tagline {
        font-size: 1.75rem;
        font-weight: 300;
        letter-spacing: 0;
        text-align: left;
        white-space: nowrap;
    }

    .ipm-home-hero__overlay--desktop-basic .ipm-home-hero__tagline span + span::before,
    .ipm-home-hero__overlay--desktop-gradient .ipm-home-hero__tagline span + span::before,
    .ipm-home-hero__overlay--desktop-reduced .ipm-home-hero__tagline span + span::before {
        content: "\00B7";
        font-weight: 300;
        font-size: inherit;
        padding: 0 0.6em;
    }

    .ipm-home-hero__overlay--desktop-basic .ipm-home-hero__description,
    .ipm-home-hero__overlay--desktop-gradient .ipm-home-hero__description,
    .ipm-home-hero__overlay--desktop-reduced .ipm-home-hero__description {
        display: none;
    }

    .ipm-home-hero__overlay--desktop-basic .ipm-home-hero__cta,
    .ipm-home-hero__overlay--desktop-gradient .ipm-home-hero__cta,
    .ipm-home-hero__overlay--desktop-reduced .ipm-home-hero__cta {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        align-self: auto;
        width: 20rem;
        height: 4rem;
        margin: 0;
        padding: 0 1rem;
        border-color: var(--ipm-hero-cta-border);
        border-radius: var(--ipm-hero-cta-radius);
        font-size: 1.6rem;
        line-height: normal;
    }

    /* Basic: full-width translucent bar — title | tagline | button, on one
       row, wrapping only when there is genuinely no room */
    .ipm-home-hero__overlay--desktop-basic,
    .ipm-home-hero__overlay--desktop-gradient {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
        gap: 1rem 3rem;
        width: auto;
        left: var(--ipm-hero-caption-inset);
        right: var(--ipm-hero-caption-inset);
        bottom: var(--ipm-hero-caption-inset);
        padding: 3rem 2rem 2rem 2rem;
        border-radius: var(--ipm-hero-caption-radius);
    }

    /* Gradient: same row, but no box — fades up from the bottom edge.
       The hero's own overflow/radius rounds the bottom corners. */
    .ipm-home-hero__overlay--desktop-gradient {
        left: 0;
        right: 0;
        bottom: 0;
        padding: 1.5rem 2rem;
        border: 0;
        border-radius: 0;
        background: var(--ipm-hero-gradient-desktop);
    }

    /* The title takes the leftover width and shrinks onto two lines before
       anything wraps; the button always sits at the right-hand end. */
    .ipm-home-hero__overlay--desktop-basic .ipm-home-hero__title,
    .ipm-home-hero__overlay--desktop-gradient .ipm-home-hero__title {
        flex: 1 1 300px;
        min-width: 0;
    }

    .ipm-home-hero__overlay--desktop-basic .ipm-home-hero__cta,
    .ipm-home-hero__overlay--desktop-gradient .ipm-home-hero__cta {
        flex: none;
        margin-left: auto;
    }

    /* Reduced: small box, bottom left — title above tagline + button */
    .ipm-home-hero__overlay--desktop-reduced {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 6px 16px;
        width: min(524px, calc(100% - 2 * var(--ipm-hero-caption-inset)));
        left: var(--ipm-hero-caption-inset);
        bottom: var(--ipm-hero-caption-inset);
        padding: 1.6rem 2rem 1.3rem;
        border-radius: var(--ipm-hero-caption-radius);
    }

    .ipm-home-hero__overlay--desktop-reduced .ipm-home-hero__title {
        grid-column: 1 / -1;
    }

    .ipm-home-hero__overlay--desktop-reduced .ipm-home-hero__cta {
        width: 19rem;
    }
}

/* ---------- Mobile ---------- */
@media (max-width: 768px) {
    .ipm-home-hero__overlay--mobile-basic .ipm-home-hero__title,
    .ipm-home-hero__overlay--mobile-gradient .ipm-home-hero__title {
        grid-column: 1 / -1;
        font-size: 2rem;
        line-height: 1.15;
        text-align: center;
        margin: 0;
        max-width: none;
    }

    .ipm-home-hero__overlay--mobile-basic .ipm-home-hero__tagline,
    .ipm-home-hero__overlay--mobile-gradient .ipm-home-hero__tagline {
        font-size: 1.25rem;
        font-weight: 300;
        letter-spacing: 0;
        text-align: left;
    }

    .ipm-home-hero__overlay--mobile-basic .ipm-home-hero__tagline span + span::before,
    .ipm-home-hero__overlay--mobile-gradient .ipm-home-hero__tagline span + span::before {
        content: "\00B7";
        font-weight: 300;
        font-size: inherit;
        padding: 0 0.6em;
    }

    .ipm-home-hero__overlay--mobile-basic .ipm-home-hero__description,
    .ipm-home-hero__overlay--mobile-gradient .ipm-home-hero__description {
        display: none;
    }

    .ipm-home-hero__overlay--mobile-basic .ipm-home-hero__cta,
    .ipm-home-hero__overlay--mobile-gradient .ipm-home-hero__cta {
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 19rem;
        max-width: 100%;
        height: 4rem;
        margin: 0;
        padding: 0 1rem;
        border-color: var(--ipm-hero-cta-border);
        border-radius: var(--ipm-hero-cta-radius);
        font-size: 1.25rem;
        line-height: normal;
    }

    .ipm-home-hero__overlay--mobile-basic,
    .ipm-home-hero__overlay--mobile-gradient {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        gap: 1rem;
        width: auto;
    }

    /* Basic: inset translucent caption bar */
    .ipm-home-hero__overlay--mobile-basic {
        left: var(--ipm-hero-caption-inset-mobile);
        right: var(--ipm-hero-caption-inset-mobile);
        bottom: var(--ipm-hero-caption-inset-mobile);
        padding: 1rem;
        border-radius: var(--ipm-hero-caption-radius);
    }

    /* Gradient: edge-to-edge, fading up from the bottom */
    .ipm-home-hero__overlay--mobile-gradient {
        left: 0;
        right: 0;
        bottom: 0;
        min-height: 165px;
        align-content: end;
        padding: 2rem 2rem 1.5rem;
        border: 0;
        border-radius: 0;
        background: var(--ipm-hero-gradient-mobile);
    }
}