/**
 * Hero Block Styles
 *
 * These styles are loaded conditionally when the Hero block is used
 *
 * @package TMW_Blocks
 */

/* Hero Section - Light and airy aesthetic with strategic bold elements */
.hero {
    position: relative;
    overflow: clip;
}

/* Responsive image wrapper - replaces background-image approach */
.hero__image-wrapper {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Optional overlay for gradient/color effects on mobile hero background */
.hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;

    /* Allow clicks to pass through to content below */
}

/* Mobile text overlay - improves readability over background images on mobile */

/* Only applies when ACF toggle is enabled (adds has-mobile-overlay class) */
@media (width <= 768px) {
    /* Default: light overlay (for light background images) */
    .has-mobile-overlay .hero__overlay {
        background: linear-gradient(
            to bottom,
            rgb(255 255 255 / 65%) 0%,
            rgb(255 255 255 / 50%) 60%,
            rgb(255 255 255 / 0%) 100%
        );
    }

    /* Dark overlay when white text is set — confirms a dark background image */
    .has-mobile-overlay.has-dark-bg .hero__overlay {
        background: linear-gradient(
            to bottom,
            rgb(0 0 0 / 65%) 0%,
            rgb(0 0 0 / 55%) 60%,
            rgb(0 0 0 / 0%) 100%
        );
    }
}

/* Ensure content stays above image and overlay */
.hero>.container {
    position: relative;
    z-index: 2;
    padding-top: var(--space-xl);
    padding-bottom: var(--space-xl);
}

/* Support for WordPress color/gradient classes (handled via theme.json) */

.hero-content h1 {
    margin-bottom: var(--space-md);
    text-wrap: balance;
    line-height: var(--h1-line-height, var(--line-height-heading, 1.2));
}


/* Hero CTAs */
.hero-ctas {
    display: flex;
    align-items: center; /* Prevent flex stretch - buttons maintain their natural height */
    gap: var(--space-md);
    margin-top: var(--space-lg);
}

/* Homepage Hero Layout Variations */

/* Content Left - responsive max-width on left side */
.hero.hero-content-left .container {
    display: flex;
    justify-content: flex-start;
}

.hero.hero-content-left .hero-content {
    max-width: 600px;
    flex: 0 1 auto;
}

/* Content Right - responsive max-width on right side */
.home .hero.hero-content-left,
.home .hero.hero-content-right {
    min-height: clamp(600px, 80vh, 1000px);
    align-content: center;
}

.hero.hero-content-right .container {
    display: flex;
    justify-content: flex-end;
}

.hero.hero-content-right .hero-content {
    max-width: 500px;
    flex: 0 1 auto;
    text-align: right;
}

/* Hero description - styled as subtitle for visual hierarchy */
.hero .hero-description {
    font-size: var(--font-size-h6);
    line-height: var(--line-height-body);
    margin-bottom: var(--space-md);
}

.hero.hero-content-right .hero-description {
    max-width: 100%;
}

/* Right-align images in content-right layout */
.hero.hero-content-right .hero-description img {
    display: block;
    margin-left: auto;
    margin-right: 0;
}

.hero.hero-content-right .hero-ctas {
    justify-content: flex-end;
}

/* Tablet: reduce max-width to prevent overlap */
@media (width <=1350px) {
    .hero.hero-content-left .hero-content .hero-description,
    .hero.hero-content-right .hero-content .hero-description {
        max-width: 600px;
    }
}

@media (width <=1150px) {
    .hero.hero-content-left .hero-content .hero-description,
    .hero.hero-content-right .hero-content .hero-description {
        max-width: 500px;
    }
}

/* Smaller tablets: further reduce width */
@media (width <=1024px) {
    .hero.hero-content-left .hero-content .hero-description,
    .hero.hero-content-right .hero-content .hero-description {
        max-width: 400px;
    }
}

/* Content Full - centered full-width content */

/* Padding handled by Gutenberg spacing controls or default padding class */

.hero.hero-content-full .hero-content {
    text-align: center;
    max-width: var(--max-width-content-xl);
    margin-left: auto;
    margin-right: auto;
}

.hero.hero-content-full .hero-content h1 {
    margin-bottom: 0;
}

.hero.hero-content-full .hero-content .hero-description {
    margin-top: var(--space-md);
}

.hero.hero-content-full .hero-ctas {
    justify-content: center;
}

/* Fullwidth Image - displays below centered content when layout is full */
.hero-fullwidth-image {
    margin-top: var(--space-2xl);
    width: 100%;
}

.hero-fullwidth-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-card);
}

/* Extended Subject Image - breaks out of container for dramatic effect */
.hero.hero-subject-extended .hero-fullwidth-image {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
}

.hero.hero-subject-extended .hero-fullwidth-image img {
    border-radius: 0;
}

/* ========================================
 * BOXED CONTAINER LAYOUT
 * ========================================
 * Text-only layout with contained width and gradient background
 * Default: Dark blue gradient with white text
 * Override in child theme to customize colors
 * ========================================
 */

/* Boxed Container - nested wrapper receives background styling
 * .container provides width control (inherits from global .container)
 * .hero-boxed-container provides background, padding, border-radius
 * This separation supports XL breakpoint (1920px) with fluid max-width */

.hero-boxed-container {
    /* Background styling on nested wrapper */
    padding: var(--space-2xl) var(--space-lg);
    background: var(--wp--preset--color--gray-light);
    border-radius: var(--radius-card);
}

.hero.hero-content-container h2,
.hero.hero-content-container h3,
.hero.hero-content-container h4,
.hero.hero-content-container h5 {
    color: inherit;
}

.hero.hero-content-container .hero-content {
    text-align: center;
    max-width: var(--max-width-content-lg);
    margin-left: auto;
    margin-right: auto;
}

.hero.hero-content-container .hero-ctas {
    justify-content: center;
}

/* Hide background image wrapper for container layout (text-only) */
.hero.hero-content-container .hero__image-wrapper {
    display: none;
}

/**
 * Button styling for container layout
 * ONLY apply light buttons when section has dark background.
 * Without dark bg, buttons use their default primary/secondary styles.
 */
.hero.hero-content-container[data-section-dark-bg="true"] .hero-ctas .btn-primary,
.hero.hero-content-container.has-dark-fse-bg .hero-ctas .btn-primary {
    /* Use light button variant on dark background */
    background-color: var(--color-white);
    color: var(--color-primary);
    border-color: var(--color-white);
}

.hero.hero-content-container[data-section-dark-bg="true"] .hero-ctas .btn-primary:hover,
.hero.hero-content-container.has-dark-fse-bg .hero-ctas .btn-primary:hover {
    background-color: transparent;
    color: var(--color-white);
    border-color: var(--color-white);
}

.hero.hero-content-container[data-section-dark-bg="true"] .hero-ctas .btn-secondary,
.hero.hero-content-container.has-dark-fse-bg .hero-ctas .btn-secondary {
    /* Outline button on dark background */
    background-color: transparent;
    color: var(--color-white);
    border-color: var(--color-white);
}

.hero.hero-content-container[data-section-dark-bg="true"] .hero-ctas .btn-secondary:hover,
.hero.hero-content-container.has-dark-fse-bg .hero-ctas .btn-secondary:hover {
    background-color: var(--color-white);
    color: var(--color-primary);
    border-color: var(--color-white);
}

/* Tablet adjustments - match global container padding for alignment */
@media (width <=1200px) {
    .hero-boxed-container {
        margin-left: var(--space-md);
        margin-right: var(--space-md);
    }
}

/* Mobile adjustments for container layout - match global container padding */
@media (width <=768px) {
    .hero-boxed-container {
        padding: var(--space-2xl) var(--space-md);
    }

    .hero.hero-content-container .hero-content {
        max-width: 100%;
    }
}

/* Small mobile - no horizontal padding to match global container */
@media (width <=480px) {
    .hero-boxed-container {
        padding-left: 0;
        padding-right: 0;
    }
}

/* Side-by-Side Layout with Subject Image */

/* When content_layout is 'left' or 'right' AND subject_image exists */

/* Hero wrapper - grid system (.row class) provides layout */
.hero-wrapper {
    /* Grid system (.row) provides display: grid, grid-template-columns, gap */
    --row-gap: var(--space-3xl); /* ~80px gap between columns */

    gap: var(--row-gap);
    align-items: center;
    min-height: clamp(400px, 60vh, 600px);
}

/* Extended mode override - higher specificity wins */
.hero.hero-subject-extended .hero-wrapper {
    min-height: clamp(200px, 60vh, 468px); /* Overrides base */
}

/* Hero image container */
.hero-image {
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-image img {
    width: auto;
    height: auto;
    max-height: 50vh;
}

.hero-image img[src$=".jpg"],
.hero-image img[src$=".webp"],
.hero-image img[src$=".png"] {
    border-radius: var(--radius-card);
}

.hero-image img[src$=".svg"] {
    max-height: 43vh;
}

/* Extended Subject Image - side-by-side layouts */
.hero.hero-subject-extended .hero-image {
    overflow: visible;
}

.hero.hero-subject-extended .hero-image img {
    max-height: 70vh;
    transform: scale(1.45);
    transform-origin: center;
    max-width: 50vw;
}

.hero.hero-subject-extended .hero-image img[src$=".svg"] {
    max-height: 60vh;
}

/* Content left layout - image on right (grid system handles layout) */
.hero.hero-content-left .hero-wrapper .hero-content {
    max-width: 100%;
}

/* Content right layout - image on left (grid system handles layout) */
.hero.hero-content-right .hero-wrapper .hero-content {
    max-width: 100%;
    text-align: right;

    /* flex-col utility class provides: display: flex; flex-direction: column */
    align-items: flex-end;
}

.hero.hero-content-right .hero-wrapper .hero-ctas {
    justify-content: flex-end;
}

/* Intermediate Breakpoint (1024px - 1400px)
   Reduces gap to prevent horizontal overflow when container constrains */
@media (width <= 1400px) {
    .hero-wrapper {
        --row-gap: var(--space-2xl); /* Reduced from --space-3xl to prevent overflow */
    }
}

/* Tablet Breakpoint (768px - 1024px) */
@media (width <= 1024px) {
    .hero-wrapper {
        --row-gap: var(--space-xl); /* Further reduced gap on tablet */
    }
}

/* Tablet: Adjust image sizing (grid system provides gap) */
@media (width <=1200px) {
    .hero-image img {
        max-height: 500px;
    }
}

/* Mobile Responsive (768px and below) */
@media (width <=768px) {
    .home .hero.hero-content-left,
    .home .hero.hero-content-right {
        min-height: 62vh;
        height: auto;
        max-height: none;
        padding-top: var(--space-lg);
    }

    /* Stack side-by-side layouts on mobile (grid system handles via .col-sm-12) */
    .hero-wrapper,
    .hero.hero-content-left .hero-wrapper,
    .hero.hero-content-right .hero-wrapper {
        min-height: auto;
    }

    /* Content always appears first on mobile (before image) */
    .hero-wrapper .hero-content {
        order: 1;
    }

    .hero-wrapper .hero-image {
        order: 2;
        max-width: 100%; /* Prevent image column from overflowing container */
    }

    .hero-image img {
        max-height: 400px;
        max-width: 100%; /* Prevent image from overflowing on mobile */
    }

    /* Extended Subject Image - mobile adjustments */
    .hero.hero-subject-extended .hero-fullwidth-image {
        width: 100vw;
        margin-left: calc(-50vw + 50%);
    }

    .hero.hero-subject-extended .hero-image img {
        transform: scale(1);
        max-height: 400px;
    }

    /* Reset layout variations on mobile - all stack vertically */
    .hero.hero-content-left .container,
    .hero.hero-content-right .container {
        display: block;
    }

    .hero.hero-content-left .hero-content,
    .hero.hero-content-right .hero-content,
    .hero.hero-content-full .hero-content,
    .hero-wrapper .hero-content {
        width: 100%;
        max-width: 100%;
        text-align: left;
    }

    .hero.hero-content-right .hero-ctas,
    .hero.hero-content-full .hero-ctas,
    .hero-wrapper .hero-ctas {
        justify-content: flex-start;
    }

    .hero-ctas {
        flex-direction: column;
        gap: var(--space-sm);
    }

    /* Hero button responsive adjustments */
    .hero-ctas .btn {
        min-height: var(--dimension-touch-target);
    }
}