/* MARK: - Landing Page (Logged-Out Hero)
 * Split hero with iPhone mockup for the public home page.
 * Loaded only when the visitor is not signed in (index.php logged-out branch).
 *
 * Depends on: variables.css (via lusitropy.css)
 *
 * Used by:
 *   - index.php (logged-out marketing hero)
 *
 * Components:
 *   - .hero-split       — two-column grid (copy + device)
 *   - .hero-copy        — logo, title, lead line, subtitle, CTA (left column on desktop)
 *   - .hero-brand       — logo stacked above title, top-left aligned
 *   - .phone-device*     — cartoon iPhone frame around app screenshot
 *   - .hero-device       — figure wrapper + caption
 */

/* MARK: Split Hero Layout */

.hero-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 48px;
    min-height: calc(100dvh - 80px);
    padding-top: 80px;
    padding-bottom: 48px;
}

.hero-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    text-align: left;
}

/* Logo + title stack — mirrors the app welcome screen hierarchy */
.hero-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.hero-logo {
    width: 96px;
    height: 96px;
    opacity: 0.9;
}

.hero-title {
    font-size: var(--font-extra-extra-large-title); /* 42px — AppFont.Quicksand.extraExtraLargeTitle */
    font-weight: 700;
    letter-spacing: 0.04em;
    color: var(--newOrange);
    margin: 0;
}

/* Lead line — primary value proposition above the feature list */
.hero-lead {
    font-size: var(--font-headline); /* 17px — AppFont.Quicksand.headline */
    font-weight: 600;
    max-width: 440px;
    line-height: 1.5;
    opacity: 0.85;
    margin: 0;
}

.hero-subtitle {
    font-size: var(--font-subheadline); /* 15px — AppFont.Quicksand.subheadline */
    max-width: 440px;
    line-height: 1.7;
    opacity: 0.7;
    margin: 0;
}

.hero-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 8px;
}

/* MARK: iPhone Device Frame
 * Three nested layers: lavender outer shell → black bezel → screen crop.
 * Proportions are cartoon-exaggerated, not photorealistic.
 */

.hero-device {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 0;
}

.phone-device {
    width: 260px;
    padding: 6px;
    background: var(--newPurple);
    border-radius: 48px;
    box-shadow: 0 var(--appShadowSize) 0 rgba(200, 175, 245, 0.25);
}

.phone-device-bezel {
    padding: 3px;
    background: #000;
    border-radius: 42px;
}

.phone-device-screen {
    overflow: hidden;
    border-radius: 39px;
    line-height: 0;
}

.phone-device-screen img {
    display: block;
    width: 100%;
    height: auto;
    vertical-align: top;
}

.hero-device-caption {
    font-size: var(--font-control); /* 13px — device caption under phone frame */
    font-weight: 600;
    color: var(--newPurple);
    text-align: center;
    margin: 0;
}

/* MARK: Responsive — stack copy above phone on narrow viewports */

@media (max-width: 900px) {
    .hero-split {
        grid-template-columns: 1fr;
        gap: 40px;
        min-height: auto;
        padding-top: 96px;
        padding-bottom: 40px;
    }

    .hero-copy {
        align-items: center;
        text-align: center;
    }

    .hero-brand {
        align-items: center;
    }

    .hero-subtitle {
        max-width: 440px;
    }

    .hero-lead {
        max-width: 440px;
    }

    .hero-actions {
        justify-content: center;
    }

    .phone-device {
        width: min(260px, 76vw);
    }
}

@media (max-width: 600px) {
    .hero-logo {
        width: 76px;
        height: 76px;
    }

    .hero-title {
        font-size: var(--font-large-title); /* 34px — one step down on narrow screens */
    }

    .hero-lead {
        font-size: var(--font-callout); /* 16px */
    }

    .hero-subtitle {
        font-size: var(--font-footnote); /* 13px */
    }

    .phone-device {
        width: min(220px, 72vw);
    }
}