/**
 * YACHTWAVE Feature Page Styles
 * Shared layout for the matrix-category feature pages (tasks, maintenance logs, checklists, ...).
 * Pattern: gradient hero + wave, pain/ROI stat cards, alternating two-column feature bands
 * (page-section / page-section gray provide the band backgrounds), editions note, page-cta.
 *
 * Usage: <link rel="stylesheet" href="/css/feature-page.css?v=...">
 * Pairs with /css/yw-carousel.css for the screenshot carousels.
 */

body {
    overflow-x: hidden;
}

/* Hero */
.feature-hero {
    position: relative;
    width: 100%;
    padding: 120px 25px 80px;
    background: linear-gradient(135deg, #0478CC 0%, #0B5BA8 100%);
    text-align: center;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.feature-hero h1 {
    color: #ffffff;
    font-size: 40px;
    font-weight: 700;
    margin: 0 0 15px 0;
    line-height: 1.2;
    letter-spacing: -0.5px;
}

.feature-hero p {
    color: #D9EBF7;
    font-size: 18px;
    margin: 0 auto;
    line-height: 1.6;
    max-width: 700px;
}

.feature-hero-wave {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.feature-hero-wave svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 60px;
    transform: scaleY(-1);
}

.feature-hero-wave .shape-fill {
    fill: #FFFFFF;
}

/* Deep-link targets (matrix "Learn more" links land on these).
   Without this the heading sits flush against the top edge of the window and is hard to read. */
.page-section[id],
.page-heading[id],
.feature-band-text h3[id] {
    scroll-margin-top: 90px;
}

/* Two-column feature band layout */
.feature-band {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.feature-band.image-left .feature-band-media {
    order: -1;
}

/* For tall media (portrait phone carousels) with short text: pin the text to the top */
.feature-band.align-top {
    align-items: start;
}

.feature-band-text h3 {
    font-size: 19px;
    font-weight: 700;
    color: #0B2239;
    margin: 0 0 6px 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.feature-band-text h3 .edition-badge {
    margin-left: 8px;
}

/* Section-level badge: the whole group is gated to one edition.
   Put a <br> before the span in the markup — the badge then sits on its own line
   under the heading and follows whatever alignment the heading uses. */
.page-heading .edition-badge {
    margin-top: 14px;
    font-size: 12px;
    padding: 4px 14px;
}

.feature-band-text p {
    font-size: 15px;
    color: #5A6A80;
    line-height: 1.7;
    margin: 0 0 22px 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.feature-band-text p:last-child {
    margin-bottom: 0;
}

/* Edition badges */
.edition-badge {
    display: inline-block;
    background: #D9EBF7;
    color: #0478CC;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 10px;
    border-radius: 12px;
    white-space: nowrap;
    vertical-align: middle;
}

.edition-badge.soon {
    background: #FEE7DB;
    color: #FA884C;
}

/* Screenshot placeholder (pre-asset stage) */
.screenshot-placeholder {
    border: 3px dashed #4AA6E8;
    border-radius: 12px;
    background: #D9EBF7;
    min-height: 340px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 30px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.screenshot-placeholder strong {
    color: #0478CC;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.screenshot-placeholder span {
    color: #0B2239;
    font-size: 14px;
    line-height: 1.6;
    max-width: 380px;
}

/* ROI stat cards */
.feature-stat-row {
    max-width: 1000px;
    margin: 40px auto 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.feature-stat {
    background: #ffffff;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    padding: 25px 20px;
    text-align: center;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.feature-stat .stat-number {
    display: block;
    font-size: 32px;
    font-weight: 800;
    color: #0478CC;
    line-height: 1.1;
    margin-bottom: 8px;
}

.feature-stat .stat-text {
    font-size: 13px;
    color: #5A6A80;
    line-height: 1.5;
}

/* Editions note */
.feature-editions-note {
    max-width: 900px;
    margin: 0 auto;
    background: #D9EBF7;
    border-radius: 10px;
    padding: 25px 30px;
    text-align: center;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.feature-editions-note p {
    font-size: 15px;
    color: #0B2239;
    line-height: 1.7;
    margin: 0;
}

.feature-editions-note a {
    color: #0478CC;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    margin-top: 8px;
}

.feature-editions-note a:hover {
    text-decoration: underline;
}

@media (max-width: 992px) {
    .feature-hero {
        padding: 100px 20px 70px;
    }

    .feature-hero h1 {
        font-size: 30px;
    }

    .feature-hero p {
        font-size: 16px;
    }

    .feature-band {
        grid-template-columns: 1fr;
        gap: 30px;
    }

    .feature-band.image-left .feature-band-media {
        order: 0;
    }

    .feature-stat-row {
        grid-template-columns: 1fr;
    }

    .page-section[id],
    .page-heading[id],
    .feature-band-text h3[id] {
        scroll-margin-top: 60px;
    }
}