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

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

/* Clip bottom overflow for extended heroes while allowing horizontal extension */
.hero.hero-subject-extended {
    overflow-y: clip;
    overflow-x: visible;
}

/* 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) */

/* Excludes interior heroes and container layout (text-only) */
@media (width <=768px) {
    .hero.has-mobile-overlay:not(.interior-hero, .resources-hero, .events-hero, .is-style-interior, .hero-content-container) .hero__overlay {
        background: var(--color-bg-overlay-default);
    }
}

/* Ensure content stays above image and overlay */
.hero>.container {
    position: relative;
    z-index: 2;
}

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

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

/* Hero subtitle - larger than standard subtitles for visual hierarchy */
.hero-subtitle {
    font-size: var(--font-size-h6);
    margin-bottom: var(--space-md);
    color: inherit;
}

/* Editor-specific styles - ensure subtitle previews correctly */
.editor-styles-wrapper .hero-subtitle,
.editor-styles-wrapper [data-type^="acf/"] h2.hero-subtitle,
.block-editor-block-preview__content .hero-subtitle {
    font-size: var(--font-size-h6) !important;
    font-weight: inherit !important;
    line-height: inherit !important;
}

/* 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 .hero-description {
    font-size: var(--font-size-lead);
    line-height: var(--line-height-body);
    text-wrap: balance; /* Prevent single words on last line (widows) */
}

.hero.hero-content-right .hero-description {
    /* Override any child theme max-width constraints for flush right alignment */
    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: var(--space-lg);
}

.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 - text-only centered layout with gradient background - styling in container below */

.hero.hero-content-container .container {
    /* Match CTA banner width (1280px) */
    padding: var(--space-2xl) var(--space-lg);

    /* Default gradient background - override in child theme if needed */
    background: var(--wp--preset--gradient--gradient-1);
    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 - light buttons on dark background */
.hero.hero-content-container .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 .hero-ctas .btn-primary:hover {
    background-color: transparent;
    color: var(--color-white);
    border-color: var(--color-white);
}

.hero.hero-content-container .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 .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.hero-content-container .container {
        margin-left: var(--space-md);
        margin-right: var(--space-md);
    }
}

/* Mobile adjustments for container layout - match global container padding */
@media (width <=768px) {
    .hero.hero.hero-content-container .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.hero-content-container .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 */
    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 */
    overflow-y: clip; /* Clip vertical overflow while allowing horizontal extension */
    overflow-x: visible;
}

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

.hero-image img {
    width: 100%;
    height: auto;
    max-height: 50vh;
    object-fit: contain;
}

.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: 50vh;
    transform: scale(1.45);
    transform-origin: center; /* Center scaling for automatic vertical alignment */
    max-width: 50vw;
}

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

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

.hero.hero-content-left .hero-wrapper .hero-subtitle {
    max-width: 85%;
}

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

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

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

    .hero-image img {
        max-height: 400px;
    }

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

    /* Left/right layouts and side-by-side wrappers stack to left-aligned on mobile */
    .hero.hero-content-left .hero-content,
    .hero.hero-content-right .hero-content,
    .hero-wrapper .hero-content {
        width: 100%;
        max-width: 100%;
        text-align: left;
    }

    /* Full-width centered layout stays centered on mobile */
    .hero.hero-content-full .hero-content {
        width: 100%;
        max-width: 100%;
    }

    /* Left/right layouts and wrappers align CTAs to start on mobile */
    .hero.hero-content-right .hero-ctas,
    .hero-wrapper .hero-ctas {
        justify-content: flex-start;
    }

    /* Full-width layout keeps CTAs centered on mobile */
    .hero.hero-content-full .hero-ctas {
        justify-content: center;
    }

    /* Center CTAs on mobile for extended subject layout */
    .hero.hero-subject-extended .hero-wrapper .hero-ctas {
        justify-content: center; /* Vertical centering in column layout */
        align-items: center; /* Horizontal centering in column layout */
    }

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

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

/* Interior Hero Styles */
.hero.interior-hero,
.hero.resources-hero,
.hero.events-hero,
.hero.newsroom-hero,
.hero.thought-leadership-hero,
.hero.is-style-interior {
    background: var(--wp--preset--gradient--gradient-1);
    text-align: center;

    /* Padding controlled via Gutenberg sidebar (no default padding class for interior heroes) */
}

/* Hide image wrapper for interior heroes (use gradients instead) */
.hero.interior-hero .hero__image-wrapper,
.hero.resources-hero .hero__image-wrapper,
.hero.events-hero .hero__image-wrapper,
.hero.newsroom-hero .hero__image-wrapper,
.hero.thought-leadership-hero .hero__image-wrapper,
.hero.is-style-interior .hero__image-wrapper {
    display: none;
}


.interior-hero .hero-description,
.resources-hero .hero-description,
.events-hero .hero-description,
.is-style-interior .hero-description {
    max-width: var(--max-width-content-sm);
    margin-left: auto;
    margin-right: auto;
}

/* Handle WYSIWYG paragraph tags within hero-description */
.interior-hero .hero-description p,
.resources-hero .hero-description p,
.events-hero .hero-description p,
.is-style-interior .hero-description p {
    margin: 0;
}

/* Mobile optimization for interior hero */
@media (width <=768px) {
    .interior-hero,
    .resources-hero,
    .events-hero,
    .is-style-interior {
        padding: var(--space-2xl) var(--space-lg);
    }

    .interior-hero h1,
    .resources-hero h1,
    .events-hero h1,
    .is-style-interior h1 {
        margin-bottom: var(--space-md);
    }

    .interior-hero .hero-description,
    .resources-hero .hero-description,
    .events-hero .hero-description,
    .is-style-interior .hero-description {
        font-size: var(--font-size-body);
    }
}

/* Interior Hero Layout Adjustments */

/* Remove default center alignment for left/right layouts */
.hero.interior-hero.hero-content-left .hero-content,
.hero.resources-hero.hero-content-left .hero-content,
.hero.events-hero.hero-content-left .hero-content,
.hero.is-style-interior.hero-content-left .hero-content {
    text-align: left;
}

.hero.interior-hero.hero-content-right .hero-content,
.hero.resources-hero.hero-content-right .hero-content,
.hero.events-hero.hero-content-right .hero-content,
.hero.is-style-interior.hero-content-right .hero-content {
    text-align: right;
}

/* Center text for full-width interior heroes */
.hero.interior-hero.hero-content-full .hero-content,
.hero.resources-hero.hero-content-full .hero-content,
.hero.events-hero.hero-content-full .hero-content,
.hero.is-style-interior.hero-content-full .hero-content {
    text-align: center;
}

/* Adjust hero-description max-width for left/right layouts */
.hero.interior-hero.hero-content-left .hero-description,
.hero.interior-hero.hero-content-right .hero-description,
.hero.resources-hero.hero-content-left .hero-description,
.hero.resources-hero.hero-content-right .hero-description,
.hero.events-hero.hero-content-left .hero-description,
.hero.events-hero.hero-content-right .hero-description,
.hero.is-style-interior.hero-content-left .hero-description,
.hero.is-style-interior.hero-content-right .hero-description {
    margin: 0;
}

.hero.interior-hero.hero-content-full .hero-description,
.hero.resources-hero.hero-content-full .hero-description,
.hero.events-hero.hero-content-full .hero-description,
.hero.is-style-interior.hero-content-full .hero-description {
    max-width: var(--max-width-content-md);
    margin-left: auto;
    margin-right: auto;
}