/* ==========================================================================
   Thermal Feature Row ([thermal_feature_row])
   Extracted from style.css (was inline). Enqueued conditionally via
   thermal_enqueue_shortcode_styles() in functions.php.
   ========================================================================== */

/* ==========================================================================
   Thermal Feature Row  ([thermal_feature_row])
   Half-text / half-image band. Mobile-first: single column, source order
   title -> image -> text -> link. Desktop (>=768px): 2-col zig-zag via CSS
   Grid, image spans the text rows. See CONTEXT.md + docs/adr/0001.
   ========================================================================== */
.thermal-feature-row {
    display: grid;
    grid-template-columns: 1fr;
    box-sizing: border-box;
    /* mobile: the theme content box sits ~40px in (its #primary padding; the
       .grid -30px margin and article +30px padding cancel). Pull out 16px each
       side to land on the design's 24px gutter. 31px top gap separates rows. */
    margin: 0 -16px;
    padding: 31px 0 0;
}

.thermal-feature-row__title {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
    font-weight: 500;
    font-size: 24px; /* mobile */
    line-height: 1.2;
    letter-spacing: -1.04px;
    color: #ffffff;
}


#content .thermal-feature-row__title a,
#content .thermal-feature-row__title a:hover,
#content .thermal-feature-row__title a:focus {
    color: inherit;
    transition: opacity 0.2s ease;
}

#content .thermal-feature-row__title a:hover,
#content .thermal-feature-row__title a:focus-visible {
    opacity: 0.7;
}


.thermal-feature-row__media {
    position: relative;
    margin: 20px 0 0; /* mobile: gap from heading to image */
    background: #0b0b0b;
    overflow: hidden;
    aspect-ratio: 608 / 360;
}

.thermal-feature-row__img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: bottom; /* matches Figma image fills (object-bottom) */
}

.thermal-feature-row__body {
    margin: 24px 0 0; /* mobile: gap from image to text */
    padding: 0;
    font-family: 'Poppins', sans-serif;
    font-weight: 300;
    font-size: 14px; /* mobile */
    line-height: 1.625;
    color: #d3d3d3;
    text-align: left;
}

.thermal-feature-row__body p {
    margin: 0 0 1em;
}

.thermal-feature-row__body p:last-child {
    margin-bottom: 0;
}

/* #content scope + ::after reset override the parent theme's
   `.entry-content a:not(...)` rule (style.css ~1117), which otherwise forces
   font-weight:700, a light color, and an animated underline on the link. */
#content .thermal-feature-row__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: max-content;
    margin: 14px 0 0;
    justify-self: end; /* mobile: Explore is right-aligned */
    font-weight: 300;
    font-size: 12px;
    line-height: 16px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    transition: color 0.2s ease;
    text-decoration: none;
}

.thermal-feature-row__cta:hover .thermal-feature-row__cta-text {
    text-decoration: underline;
    text-decoration-color: #33ffcc;
}

.thermal-feature-row__cta-arrow {
    transition: color 0.2s ease;
    text-decoration: none;
}

.thermal-feature-row__cta:hover  .thermal-feature-row__cta-arrow {
    text-decoration: none;
}



#content .thermal-feature-row__cta:hover .thermal-feature-row__cta-arrow {
    color: #ffffff;
}

/* Desktop: 2-column zig-zag. Image spans all text rows; 1fr spacer rows
   (1 and 5) vertically center the text group beside the taller image. */
@media (min-width: 768px) {
    .thermal-feature-row {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr auto auto auto 1fr;
        column-gap: 0;
        /* reset the mobile full-bleed back to the centered 1300px container */
        width: auto;
        max-width: 1300px;
        margin-left: auto;
        margin-right: auto;
        padding: 0;
        min-height: 360px;
    }

    .thermal-feature-row__title {
        grid-column: 1;
        grid-row: 2;
        margin: 0;
        padding: 0 48px 0 16px;
        font-size: 40px; /* desktop */
        line-height: 1.404;
    }

    .thermal-feature-row__body {
        grid-column: 1;
        grid-row: 3;
        margin: 0;
        padding: 8px 48px 0 16px;
        font-size: 15px; /* desktop */
        line-height: 1.517;
    }

    #content .thermal-feature-row__cta {
        grid-column: 1;
        grid-row: 4;
        margin: 14px 0 0 16px;
        justify-self: start; /* desktop: Explore left-aligned in text column */
    }

    .thermal-feature-row__media {
        grid-column: 2;
        grid-row: 1 / -1;
        margin: 0;
        aspect-ratio: auto;
        align-self: stretch;
    }

    /* image_side="left": mirror columns + padding + divider.
       #content-scoped so the CTA's grid-column wins over the #content-scoped
       base rule (which sets grid-column:1). */
    #content .thermal-feature-row--image-left .thermal-feature-row__title,
    #content .thermal-feature-row--image-left .thermal-feature-row__body,
    #content .thermal-feature-row--image-left .thermal-feature-row__cta {
        grid-column: 2;
    }

    .thermal-feature-row--image-left .thermal-feature-row__title {
        padding: 0 16px 0 48px;
    }

    .thermal-feature-row--image-left .thermal-feature-row__body {
        padding: 8px 16px 0 48px;
    }

    #content .thermal-feature-row--image-left .thermal-feature-row__cta {
        margin: 14px 16px 0 48px;
    }

    .thermal-feature-row--image-left .thermal-feature-row__media {
        grid-column: 1;
        border-left: 0;
    }
}