/* ═══════════════════════════════════════════════════════════
   Hunt Page Hero Block — style.css
   All values driven by CSS custom properties set inline
   by render.php, so each block instance is independent.
   ═══════════════════════════════════════════════════════════ */

.hunt-page-hero {
    -webkit-font-smoothing: antialiased;
    overflow: visible !important;
    box-sizing: border-box;
}
.hunt-page-hero::after {
    content: "";
    display: table;
    clear: both;
}
.hunt-page-hero *,
.hunt-page-hero *::before,
.hunt-page-hero *::after {
    box-sizing: border-box;
}

/* ── Layout grid ───────────────────────────────────────── */
.hph-layout {
    display: flex;
    width: 100%;
    max-width: var(--hph-max-w);
    margin: 0 auto;
    padding: var(--hph-pad-top) 0 var(--hph-pad-bot);
    overflow: visible !important;
}

/* Desktop layouts */
.hph-layout.hph-desktop-content-first {
    flex-direction: row;
}
.hph-layout.hph-desktop-image-first {
    flex-direction: row-reverse;
}
.hph-layout.hph-desktop-content-above,
.hph-layout.hph-desktop-image-above {
    flex-direction: column;
}
.hph-layout.hph-desktop-image-above {
    flex-direction: column-reverse;
}

/* Desktop columns custom widths and alignment */
@media (min-width: 901px) {
    /* Full Bleed Layout: spans full width and uses dynamic page paddings */
    .hph-layout.hph-full-bleed.hph-desktop-content-first,
    .hph-layout.hph-full-bleed.hph-desktop-image-first {
        max-width: 100%;
        justify-content: space-between;
    }
    .hph-layout.hph-full-bleed.hph-desktop-content-first .hph-content {
        padding-left: max(60px, calc((100vw - var(--hph-max-w, 1400px)) / 2));
        padding-right: 60px;
    }
    .hph-layout.hph-full-bleed.hph-desktop-image-first .hph-content {
        padding-right: max(60px, calc((100vw - var(--hph-max-w, 1400px)) / 2));
        padding-left: 60px;
    }

    /* Boxed Layout: contained in main container width, uses static paddings */
    .hph-layout.hph-boxed.hph-desktop-content-first,
    .hph-layout.hph-boxed.hph-desktop-image-first {
        max-width: var(--hph-max-w, 1400px);
        margin: 0 auto;
        justify-content: space-between;
    }
    .hph-layout.hph-boxed.hph-desktop-content-first .hph-content {
        padding-left: 60px;
        padding-right: 60px;
    }
    .hph-layout.hph-boxed.hph-desktop-image-first .hph-content {
        padding-right: 60px;
        padding-left: 60px;
    }

    /* Common desktop styles for columns */
    .hph-layout.hph-desktop-content-first .hph-content,
    .hph-layout.hph-desktop-image-first .hph-content {
        flex: 0 0 calc(100% - var(--hph-img-width-d, 50%));
        width: calc(100% - var(--hph-img-width-d, 50%));
        max-width: none;
    }
    .hph-layout.hph-desktop-content-first .hph-image-col,
    .hph-layout.hph-desktop-image-first .hph-image-col {
        flex: 0 0 var(--hph-img-width-d, 50%);
        width: var(--hph-img-width-d, 50%);
        max-width: var(--hph-image-max-w, 1200px);
    }
    .hph-layout.hph-desktop-content-above .hph-content,
    .hph-layout.hph-desktop-image-above .hph-content {
        flex: none;
        width: 100%;
        max-width: 100%;
        padding: 60px 0;
    }
    .hph-layout.hph-desktop-content-above .hph-content-inner,
    .hph-layout.hph-desktop-image-above .hph-content-inner {
        max-width: var(--hph-content-max-w, 800px);
        margin-left: auto;
        margin-right: auto;
    }
    .hph-layout.hph-desktop-content-above .hph-image-col,
    .hph-layout.hph-desktop-image-above .hph-image-col {
        flex: none;
        width: 100%;
        max-width: var(--hph-image-max-w, 1200px);
        margin-left: auto;
        margin-right: auto;
    }
}

/* ── Columns ───────────────────────────────────────────── */
.hph-content {
    flex: 1;
    padding: 60px 70px 60px 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}
.hph-content-inner {
    width: 100%;
    max-width: var(--hph-content-max-w, 800px);
    display: flex;
    flex-direction: column;
}

.hph-image-col {
    flex: 1;
    position: relative;
    min-height: var(--hph-img-min-h);
    overflow: hidden;
    width: 100%;
    max-width: var(--hph-image-max-w, 1200px);
}

.hph-image-col img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── Header (accent bar + label) ───────────────────────── */
.hph-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 28px;
}

.hph-accent-bar {
    width: 5px;
    height: 44px;
    background-color: var(--hph-accent);
    flex-shrink: 0;
}

.hph-label {
    font-size: var(--hph-label-size);
    color: var(--hph-label-color);
    letter-spacing: 2.5px;
    text-transform: uppercase;
    font-weight: 400;
    margin: 0;
    line-height: 1;
}

/* ── Hero title ────────────────────────────────────────── */
.hph-title {
    font-size: var(--hph-title-size);
    color: var(--hph-title-color);
    font-weight: 400;
    margin: 0 0 28px;
    line-height: 1.2;
}

/* ── Description text ──────────────────────────────────── */
.hph-desc {
    font-size: var(--hph-desc-size);
    color: var(--hph-desc-color);
    margin: 0;
    line-height: 1.6;
    font-weight: 300;
}
.hph-desc p {
    font-size: inherit;
    color: inherit;
    line-height: inherit;
    font-weight: inherit;
    margin: 0 0 1.5em;
}
.hph-desc p:last-child {
    margin-bottom: 0;
}

/* ── Flex ordering for content items ──────────────────────── */
.hph-header {
    order: var(--hph-order-header, 1);
}
.hph-title {
    order: var(--hph-order-title, 2);
}
.hph-desc {
    order: var(--hph-order-desc, 3);
}

/* ═══════════════════════════════════════════════════════════
   MOBILE  ( ≤ 900 px )
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 900px) {

    /* Always stack vertically on mobile */
    .hph-layout {
        flex-direction: column !important;
        padding: var(--hph-pad-top) 0 var(--hph-pad-bot);
    }

    /* Mobile: content-first (content on top, image on bottom) */
    .hph-layout.hph-mobile-content-first {
        flex-direction: column !important;
    }

    /* Mobile: image-first (image on top, content on bottom) */
    .hph-layout.hph-mobile-image-first {
        flex-direction: column-reverse !important;
    }

    .hph-content {
        padding: 40px 24px;
    }
    .hph-content-inner {
        width: 100%;
        max-width: var(--hph-content-max-w, 800px);
        margin-left: auto;
        margin-right: auto;
        display: flex;
        flex-direction: column;
    }

    .hph-image-col {
        min-height: var(--hph-img-min-h);
        position: relative;
        margin-left: auto;
        margin-right: auto;
    }

    .hph-image-col img {
        position: absolute;
        inset: 0;
    }

    .hph-accent-bar {
        height: 36px;
    }

    /* Mobile: override float layout styles and ordering when wrapText is active */
    .hph-layout.hph-wrap-layout .hph-image-col {
        float: none !important;
        width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
        margin-bottom: 24px !important;
        min-height: var(--hph-img-min-h) !important;
        display: block !important;
    }
    .hph-layout.hph-wrap-layout .hph-image-col img {
        position: absolute !important;
        width: 100% !important;
        height: 100% !important;
        inset: 0 !important;
    }
    .hph-layout.hph-wrap-layout.hph-mobile-image-first .hph-image-col {
        order: -1 !important;
    }
    .hph-layout.hph-wrap-layout.hph-mobile-content-first .hph-image-col {
        order: 4 !important;
    }
}

/* ── Sticky Image Column ───────────────────────────────── */
@media (min-width: 901px) {
    .hph-image-col.hph-image-sticky {
        position: -webkit-sticky !important;
        position: sticky !important;
        top: calc(80px + var(--wp-admin-bar-height, 0px)) !important;
        align-self: flex-start !important;
        z-index: 10;
    }
}

/* ── Floated Wrap Layout (Text wraps around image) ────── */
@media (min-width: 901px) {
    .hph-layout.hph-wrap-layout {
        display: block !important;
        overflow: visible !important;
    }
    .hph-layout.hph-wrap-layout::after {
        content: "";
        display: table;
        clear: both;
    }
    .hph-layout.hph-wrap-layout .hph-content {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    .hph-layout.hph-wrap-layout .hph-content-inner {
        display: block !important;
        max-width: 100% !important;
    }
    .hph-layout.hph-wrap-layout .hph-content-inner::after {
        content: "";
        display: table;
        clear: both;
    }
    .hph-layout.hph-wrap-layout .hph-image-col {
        position: relative !important;
        display: block !important;
        width: var(--hph-img-width-d, 50%) !important;
        max-width: var(--hph-image-max-w, 1200px) !important;
        min-height: 0 !important;
        height: auto !important;
        flex: none !important;
    }
    .hph-layout.hph-wrap-layout.hph-desktop-content-first .hph-image-col {
        float: right !important;
        margin-left: 40px !important;
        margin-bottom: 24px !important;
    }
    .hph-layout.hph-wrap-layout.hph-desktop-image-first .hph-image-col {
        float: left !important;
        margin-right: 40px !important;
        margin-bottom: 24px !important;
    }
    /* Float Layout: image styling when aspect ratio is auto */
    .hph-layout.hph-wrap-layout .hph-image-col.hph-aspect-auto img {
        position: relative !important;
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }
    /* Float Layout: image styling when aspect ratio is defined (e.g. 16:9, 1:1) */
    .hph-layout.hph-wrap-layout .hph-image-col.hph-aspect-defined img {
        position: absolute !important;
        width: 100% !important;
        height: 100% !important;
        inset: 0 !important;
        display: block !important;
    }
}

/* ── No Image Layout (Spans full width) ─────────────────── */
@media (min-width: 901px) {
    .hph-layout.hph-no-image .hph-content {
        flex: 0 0 100% !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    .hph-layout.hph-no-image .hph-content-inner {
        max-width: 100% !important;
    }
    .hph-layout.hph-no-image.hph-full-bleed .hph-content {
        padding-left: max(60px, calc((100vw - var(--hph-max-w, 1400px)) / 2)) !important;
        padding-right: max(60px, calc((100vw - var(--hph-max-w, 1400px)) / 2)) !important;
    }
    .hph-layout.hph-no-image.hph-boxed .hph-content {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }
}

/* ── Image Placeholder in Editor ────────────────────────── */
.hph-image-placeholder {
    width: 100%;
    height: 100%;
    min-height: inherit;
    background: #f8fafc;
    border: 2px dashed #cbd5e1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #64748b;
    padding: 24px;
    text-align: center;
    border-radius: inherit;
    box-sizing: border-box;
}
.hph-aspect-defined .hph-image-placeholder {
    position: absolute;
    inset: 0;
}
.hph-aspect-auto .hph-image-placeholder {
    min-height: var(--hph-img-min-h, 480px);
}