/* ==========================================================================
   Subpage Hero Styles
   Light mode hero matching homepage design
   Clean white background with left-aligned content
   ========================================================================== */

/* Subpage Hero Section - Ripple Background */
.subpage-hero {
    position: relative;
    background: url('/images/ripples-homepage.png') center center / cover no-repeat;
    overflow: hidden;
    padding-bottom: var(--gms-space-12);
}

/* Base overlay - neutral white (for Contact, Insights) */
/* Matches homepage hero at 85% opacity for consistency */
.subpage-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.85);
    z-index: 0;
}

/* =============================================
   ZOOM VARIANTS - Different crop of same image
   ============================================= */

/* Playbooks - Focus on convergence point (center-right) */
.subpage-hero--playbooks {
    background-position: 70% 40%;
    background-size: 150%;
}

/* Workspaces - Focus on ripple rings (top area) */
.subpage-hero--workspaces {
    background-position: 50% 20%;
    background-size: 140%;
}

/* Accelerators - Focus on wave patterns (bottom-left) */
.subpage-hero--accelerators {
    background-position: 30% 70%;
    background-size: 160%;
}

/* About - Wide view, slightly zoomed (centered) */
.subpage-hero--about {
    background-position: 40% 50%;
    background-size: 130%;
}

/* Contact - Calm area, minimal ripples (top-left) */
.subpage-hero--contact {
    background-position: 20% 30%;
    background-size: 140%;
}

/* Insights - Different angle (bottom-right) */
.subpage-hero--insights {
    background-position: 80% 60%;
    background-size: 145%;
}

/* Operating System - Central view, full ripple pattern (hero page) */
.subpage-hero--operating-system {
    background-position: 50% 50%;
    background-size: 120%;
}

/* =============================================
   OVERLAY TINTS - Color treatments per page
   ============================================= */

/* Blue tint overlay - for Playbooks, Accelerators */
.subpage-hero--playbooks::before,
.subpage-hero--accelerators::before {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.85) 0%,
        rgba(0, 170, 231, 0.15) 100%
    );
}

/* Workspaces - blue accent fade, normalized to 85% base */
.subpage-hero--workspaces::before {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.85) 0%,
        rgba(255, 255, 255, 0.85) 50%,
        rgba(0, 170, 231, 0.08) 100%
    );
}

/* Warm tint overlay - for About page, normalized to 85% base */
.subpage-hero--about::before {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.85) 0%,
        rgba(255, 166, 19, 0.12) 100%
    );
}

/* Blue tint overlay - for Operating System (parent page, prominent treatment) */
.subpage-hero--operating-system::before {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.92) 0%,
        rgba(0, 170, 231, 0.06) 100%
    );
}

/* Hide wind tunnel SVG on light backgrounds */
.subpage-hero .wind-tunnel-svg {
    display: none;
}

.subpage-hero__container {
    position: relative;
    z-index: 1;
    padding: var(--gms-space-xl) var(--gms-space-4);
    padding-top: calc(var(--gms-space-xl) + var(--gms-header-height));
    padding-bottom: var(--gms-space-2xl);
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
}

/* Page Label - Eyebrow text above title */
.subpage-hero__label {
    font-size: var(--gms-heading-3);
    font-weight: var(--gms-font-medium);
    color: var(--gms-gunmetal-gray);
    line-height: var(--gms-leading-heading);
    margin: 0 0 var(--gms-space-4) 0;
    letter-spacing: 0.01em;
}

/* Hero Title - Match homepage size (48px) */
.subpage-hero__title {
    font-size: var(--gms-heading-1);
    font-weight: var(--gms-font-bold);
    line-height: var(--gms-leading-heading);
    letter-spacing: var(--gms-tracking-heading);
    margin: 0 0 var(--gms-space-lg) 0;
    max-width: 900px;
    color: var(--gms-matte-black);
}

/* Hero Tagline - Orange left border accent */
.subpage-hero__tagline {
    font-size: var(--gms-body-lg);
    font-weight: var(--gms-font-medium, 500);
    color: var(--gms-matte-black);
    line-height: var(--gms-leading-body-lg);
    max-width: 800px;
    margin: var(--gms-space-2) 0 var(--gms-space-6) 0;
    padding-left: var(--gms-space-4);
    border-left: 4px solid var(--gms-papaya-orange);
}

/* Hero Subtitle - Body text */
.subpage-hero__subtitle {
    font-size: var(--gms-body-lg);
    color: var(--gms-gunmetal-gray);
    line-height: var(--gms-leading-body-lg);
    max-width: 800px;
    margin: 0 0 var(--gms-space-4) 0;
}

/* Hero Details - Mechanism/Outcome blocks */
.subpage-hero__details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--gms-space-6);
    max-width: 900px;
    margin: var(--gms-space-6) 0;
}

.subpage-hero__detail-block {
    padding: var(--gms-space-4);
    background: rgba(0, 170, 231, 0.05);
    border-left: 3px solid var(--gms-bright-blue);
    border-radius: 0 var(--gms-radius-md) var(--gms-radius-md) 0;
}

.subpage-hero__detail-title {
    font-size: var(--gms-body-lg);
    font-weight: var(--gms-font-semibold);
    color: var(--gms-matte-black);
    margin: 0 0 var(--gms-space-2) 0;
}

.subpage-hero__detail-text {
    font-size: var(--gms-body-md);
    color: var(--gms-gunmetal-gray);
    line-height: var(--gms-leading-body);
    margin: 0;
}

@media (max-width: 768px) {
    .subpage-hero__details {
        grid-template-columns: 1fr;
        gap: var(--gms-space-4);
    }
}

/* Hero CTA Button Group */
.subpage-hero__cta-group {
    display: flex;
    gap: var(--gms-space-4);
    margin-top: var(--gms-space-6);
    flex-wrap: wrap;
}

/* Light mode button styles */
.subpage-hero .gms-button--primary {
    background: var(--gms-papaya-orange);
    color: var(--gms-matte-black);
    font-weight: var(--gms-font-semibold);
    padding: var(--gms-space-3) var(--gms-space-6);
    border-radius: var(--gms-radius-md);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.subpage-hero .gms-button--primary:hover {
    background: var(--gms-warning-600);
    transform: translateY(-1px);
}

.subpage-hero .gms-button--primary::after {
    content: '\2192';
    transition: transform 0.2s ease;
}

.subpage-hero .gms-button--primary:hover::after {
    transform: translateX(4px);
}

.subpage-hero .gms-button--secondary {
    color: var(--gms-matte-black);
    background: rgba(255, 255, 255, 0.8);
    border: 2px solid var(--gms-gunmetal-gray);
    font-weight: var(--gms-font-medium);
    padding: var(--gms-space-3) var(--gms-space-6);
    border-radius: var(--gms-radius-md);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: all 0.2s ease;
}

.subpage-hero .gms-button--secondary:hover {
    border-color: var(--gms-bright-blue);
    color: var(--gms-bright-blue);
    background: rgba(255, 255, 255, 0.95);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .subpage-hero__container {
        padding: var(--gms-space-lg);
        padding-top: calc(var(--gms-space-lg) + var(--gms-header-height));
        padding-bottom: var(--gms-space-xl);
    }

    .subpage-hero__title {
        font-size: var(--gms-heading-1);
    }

    .subpage-hero__cta-group {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    .subpage-hero__container {
        padding: var(--gms-space-md);
        padding-top: calc(var(--gms-space-md) + var(--gms-header-height));
        padding-bottom: var(--gms-space-lg);
    }

    .subpage-hero__title {
        font-size: var(--gms-heading-2);
    }
}