/**
 * Hero Block Styles - Child Theme Override
 *
 * Extends parent theme hero styles with:
 * - Optional color overlay toggle (default: on)
 * - Automatic text color based on overlay setting:
 *   - Overlay ON: light text + light buttons (for dark backgrounds)
 *   - Overlay OFF: dark text + dark buttons (for light backgrounds)
 * - Users can override text color via Gutenberg's native text color picker
 *
 * @package TMW_Core_Child
 * @version 1.2.0
 */

/* ========================================
 * BASE HERO STYLES (from parent theme)
 * ========================================
 */

/* 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 hero background */
.hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

/* Gradient overlay (default) - dark background with gradient */
.hero.has-background-image.has-overlay--gradient .hero__overlay {
    background: var(--wp--preset--gradient--gradient-primary);
    opacity: 0.85;
}

/* Light overlay - light gray to white gradient */
.hero.has-background-image.has-overlay--light .hero__overlay {
    background: var(--wp--preset--gradient--gradient-grey-white);
    opacity: 0.85;
}

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

.hero-content h1 {
    margin-bottom: var(--space-md);
    text-wrap: balance;
}

/* Hero CTAs */
.hero-ctas {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-top: var(--space-lg);
}

/* ========================================
 * CHILD THEME: BACKGROUND IMAGE STYLING
 * ========================================
 * Text and button colors are derived from overlay setting:
 * - Overlay ON (.has-overlay): light text + light buttons
 * - Overlay OFF (no .has-overlay): dark text + standard buttons
 * Users can override with Gutenberg's native text color picker.
 * ========================================
 */

/* Light text style on background images (default for dark backgrounds) */
.hero.has-background-image.hero-text-light h1,
.hero.has-background-image.hero-text-light .hero-description,
.hero.has-background-image.hero-text-light .hero-description p {
    color: var(--color-white);
}

/* ========================================
 * 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;
}

/* XL Breakpoint: Scale hero content width with wider container */
body.has-xl-breakpoint .hero.hero-content-left .hero-content {
    max-width: 700px;
}

/* 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;
}

/* XL Breakpoint: Scale hero content width with wider container */
body.has-xl-breakpoint .hero.hero-content-right .hero-content {
    max-width: 600px;
}

/* 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 */
.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);
}

/* ========================================
 * SIDE-BY-SIDE LAYOUT WITH SUBJECT IMAGE
 * ========================================
 */

.hero-wrapper {
    align-items: center;
    min-height: clamp(400px, 60vh, 600px);
}

.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;
}

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

/* Content right layout - image on left */
.hero.hero-content-right .hero-wrapper .hero-content {
    max-width: 100%;
    text-align: right;
    align-items: flex-end;
}

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

/* Tablet: Adjust image sizing */
@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);
    }

    .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 */
    }

    /* 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;
    }

    /* Reset flex alignment for all layouts on mobile - text only, not buttons */
    .hero .hero-description,
    .hero .hero-ctas {
        text-align: left;
    }

    .hero .hero-ctas {
        display: flex;
        align-items: flex-start;
    }

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

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

/* ========================================
 * BLOCK EDITOR STYLES
 * ========================================
 * Ensure hero block appears consistently in the editor
 * ========================================
 */

/* Editor: Light text on background images with light text style */
.hero.has-background-image.hero-text-light h1,
.hero.has-background-image.hero-text-light .hero-content h1,
.editor-styles-wrapper .hero.has-background-image.hero-text-light h1,
.editor-styles-wrapper .hero.has-background-image.hero-text-light .hero-content h1 {
    color: var(--color-white);
}

/* Editor: Background image should cover the entire hero area */
.editor-styles-wrapper .hero__image-wrapper,
.block-editor-block-list__block .hero__image-wrapper {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.editor-styles-wrapper .hero__image,
.block-editor-block-list__block .hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* Ensure hero has minimum height in editor to show background */
.editor-styles-wrapper .hero.has-background-image,
.block-editor-block-list__block .hero.has-background-image {
    position: relative;
    min-height: 400px;
}

/* Editor: Overlay positioning and styling */
.editor-styles-wrapper .hero__overlay,
.block-editor-block-list__block .hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

/* Editor: Gradient overlay (default) */
.editor-styles-wrapper .hero.has-background-image.has-overlay--gradient .hero__overlay,
.block-editor-block-list__block .hero.has-background-image.has-overlay--gradient .hero__overlay {
    background: var(--wp--preset--gradient--gradient-primary);
    opacity: 0.85 !important;
}

/* Editor: Light overlay */
.editor-styles-wrapper .hero.has-background-image.has-overlay--light .hero__overlay,
.block-editor-block-list__block .hero.has-background-image.has-overlay--light .hero__overlay {
    background: var(--wp--preset--gradient--gradient-grey-white);
    opacity: 0.9;
}

/* Editor: Ensure content stays above overlay */
.editor-styles-wrapper .hero > .container,
.block-editor-block-list__block .hero > .container {
    position: relative;
    z-index: 2;
}