/**
 * Homepage Module 1: Hero Section
 *
 * Figma Node: 179-6573 (Main Content), 182-7231 (Hero Visual)
 *
 * Layout: Two-column with content on left, hero visual on right
 * Dimensions: 1512px max-width × 778px height
 * Content position: 144px from left, 87px from top
 */

/* ==========================================================================
   SECTION CONTAINER
   ========================================================================== */

.workjam-hero {
    background: #FFCC00;
    width: 100%;
    overflow: hidden;
    padding-top: 16px;
}

/* Remove top padding when solid white nav */
.workjam-header--solid-white ~ main .workjam-hero {
    padding-top: 0;
}

.workjam-hero__container {
    max-width: 1512px;
    min-height: 778px;
    margin: 0 auto;
    position: relative;
    padding: 0;
}

/* ==========================================================================
   CONTENT AREA (LEFT SIDE)
   ========================================================================== */

.workjam-hero__content {
    position: absolute;
    left: 144px;
    top: 87px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    z-index: 2;
}

/* Typography */
.workjam-hero__headline {
    font-family: 'Avenir Next', sans-serif;
    font-size: 64px;
    font-weight: 700; /* Demi Bold */
    color: #121C66;
    line-height: 1.205;
    margin: 0;
    max-width: 815px;
}

.workjam-hero__subheadline {
    font-family: 'Avenir Next', sans-serif;
    font-size: 32px;
    font-weight: 600; /* Demi Bold */
    color: #121C66;
    line-height: 1.205;
    margin: 0;
    max-width: 590px;
}

.workjam-hero__body {
    font-family: 'Avenir Next', sans-serif;
    font-size: 16px;
    font-weight: 400; /* Regular */
    color: #121C66;
    line-height: 1.6;
    margin: 0;
    max-width: 575px;
}

/* ==========================================================================
   CTA BUTTONS
   ========================================================================== */

.workjam-hero__ctas {
    display: flex;
    align-items: center;
    gap: 24px;
}

/* Primary CTA - Solid Button */
.workjam-hero__cta-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 16px 24px;
    background: #121C66;
    color: #FFFFFF;
    font-family: 'Avenir Next', sans-serif;
    font-size: 16px;
    font-weight: 500; /* Medium */
    text-decoration: none;
    border-radius: 500px;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.workjam-hero__cta-primary:hover {
    background: #0F1754;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(18, 28, 102, 0.3);
    color: #FFFFFF;
}

/* Secondary CTA - Underlined Link */
.workjam-hero__cta-secondary {
    display: inline-flex;
    align-items: center;
    color: #000044;
    font-family: 'Avenir Next', sans-serif;
    font-size: 16px;
    font-weight: 500; /* Medium */
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-position: from-font;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.workjam-hero__cta-secondary:hover {
    color: #000033;
    text-decoration-thickness: 2px;
}

/* ==========================================================================
   HERO VISUAL (RIGHT SIDE)
   ========================================================================== */

.workjam-hero__visual {
    position: absolute;
    left: 41.7%;
    top: 59px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 966px;
    height: 100%;
}

.workjam-hero__image {
    width: 100%;
    height: auto;
    max-width: none;
    display: block;
}

.workjam-hero__image img {
    width: 100%;
    height: auto;
}

/* ==========================================================================
   PHONE MOCKUP - THREE LAYER COMPOSITE (DESKTOP ONLY)
   Figma Node: 220-2351
   Canvas: 2898px × 2530px
   ========================================================================== */

/* Desktop: Show phone mockup, hide static image */
.workjam-hero__phone-mockup-desktop {
    display: block;
}

.workjam-hero__static-image-mobile {
    display: none;
}

/* Layer 1: Phone Stand Background */
.workjam-hero__phone-stand {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    z-index: 1;
}

.workjam-hero__phone-stand-image {
    width: 100%;
    height: auto;
    display: block;
}

/* Layer 2: Video Container (Clipped to Phone Screen) */
.workjam-hero__phone-video-container {
    position: absolute;
    left: 36.72%;
    top: 4%;
    width: 26.60%;
    overflow: hidden;
    border-radius: 41px;
    z-index: 2;
}

.workjam-hero__phone-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* Desktop Large - 1400px */
@media (max-width: 1400px) {
    .workjam-hero__content {
        left: 80px;
        top: 70px;
    }

    .workjam-hero__headline {
        font-size: 64px;
    }

    .workjam-hero__subheadline {
        font-size: 28px;
    }

    .workjam-hero__visual {
        left: 39%;
        top: 150px;
        z-index: 1;
    }
}

/* Tablet Landscape - 1024px */
@media (max-width: 1024px) {
    .workjam-hero__container {
        min-height: auto;
        padding: 50px 30px 0 30px;
        text-align: center;
    }

    .workjam-hero__content {
        position: relative;
        left: 0;
        top: 0;
        margin: 0 auto;
        max-width: 100%;
        align-items: center;
    }

    .workjam-hero__headline {
        font-size: 48px;
    }

    .workjam-hero__subheadline {
        font-size: 22px;
    }

    .workjam-hero__ctas {
        justify-content: center;
        flex-wrap: wrap;
    }

    /* Mobile/Tablet: Hide phone mockup, show static image */
    .workjam-hero__phone-mockup-desktop {
        display: none;
    }

    .workjam-hero__static-image-mobile {
        display: block;
    }

    .workjam-hero__visual {
        position: relative;
        left: 0;
        top: 0;
        margin: 30px auto 0 auto;
        width: unset;
    }

    .workjam-hero__image {
        max-width: 100%;
        width: 100%;
    }
}

/* Tablet Portrait - 768px */
@media (max-width: 768px) {
    .workjam-hero__container {
        padding: 50px 30px 0 30px;
        text-align: center;
    }

    .workjam-hero__content {
        max-width: 100%;
        align-items: center;
    }

    .workjam-hero__headline {
        font-size: 48px;
    }

    .workjam-hero__subheadline {
        font-size: 22px;
    }

    .workjam-hero__ctas {
        justify-content: center;
        flex-wrap: wrap;
    }

    .workjam-hero__visual {
        margin-top: 30px;
    }

    .workjam-hero__image {
        max-width: 100%;
        width: 100%;
    }
}

/* Mobile - 600px */
@media (max-width: 600px) {
    .workjam-hero__container {
        padding: 40px 20px 0 20px;
    }

    .workjam-hero__headline {
        font-size: 40px;
    }

    .workjam-hero__subheadline {
        font-size: 20px;
    }

    .workjam-hero__body {
        font-size: 15px;
    }

    .workjam-hero__ctas {
        flex-direction: column;
        gap: 16px;
        width: 100%;
    }

    .workjam-hero__cta-primary,
    .workjam-hero__cta-secondary {
        width: 100%;
        justify-content: center;
    }

}

/* Small Mobile - 400px */
@media (max-width: 400px) {
    .workjam-hero__container {
        padding: 32px 16px 0 16px;
    }

    .workjam-hero__headline {
        font-size: 32px;
    }

    .workjam-hero__subheadline {
        font-size: 18px;
    }

    .workjam-hero__body {
        font-size: 14px;
    }

    .workjam-hero__cta-primary {
        padding: 14px 24px;
        font-size: 15px;
    }

    .workjam-hero__cta-secondary {
        font-size: 15px;
    }

}