/* ─────────────────────────────────────────────────────────────────────────────
   Block: Laskeutumissivu-hero  (.fp-landing-hero-block)

   Two-column layout:
     Left  — eyebrow + heading + body + CTA
     Right — benefit panel (green accent, checkmark list, action buttons)

   Matches the proto .hero / .hero-panel visual language.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Two-column grid ─────────────────────────────────────────────────────── */

.fp-landing-hero {
    display: grid;
    grid-template-columns: minmax(280px, 0.9fr) minmax(300px, 1fr);
    gap: clamp(28px, 5vw, 64px);
    align-items: center;
}

.fp-landing-hero--no-panel {
    grid-template-columns: minmax(280px, 0.75fr);
}

/* ── Left: content ───────────────────────────────────────────────────────── */

.fp-landing-hero-block .fp-landing-hero__eyebrow {
    display: inline-block;
    margin: 0 0 0.625rem;
    color: var(--color-secondary, #00A0E0);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Extra specificity to beat h1:not(:first-child), h2:not(:first-child) in app.css */
.fp-landing-hero-block .fp-landing-hero__heading {
    margin-top: 0;
    margin-bottom: 1rem;
    color: var(--color-primary, #00388E);
    font-size: clamp(1.875rem, 4vw, 3rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.01em;
}

.fp-landing-hero__body {
    max-width: 600px;
    color: #33455b;
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    line-height: 1.65;
    margin-bottom: 0;
}

.fp-landing-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 1.5rem;
}

.fp-landing-hero__actions .btn {
    font-size: 1rem;
    min-width: 0;
    padding: .5rem 1.5rem;
}

/* ── Right: benefit panel ────────────────────────────────────────────────── */

.fp-landing-hero__panel {
    display: grid;
    gap: 14px;
    padding: clamp(1rem, 2.5vw, 1.5rem);
    border: 1px solid #1f8f5f;
    background: linear-gradient(135deg, #e5f7ee 0%, #f4fcf8 100%);
    box-shadow: 0 10px 30px rgba(31, 143, 95, 0.12);
}

.fp-landing-hero__panel-heading {
    margin: 0;
    color: #14613f;
    font-size: clamp(1rem, 1.5vw, 1.25rem);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0;
}

/* ── Benefit list ────────────────────────────────────────────────────────── */

.fp-landing-hero__benefits {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
    color: #1a2e1e;
    font-size: 0.9375rem;
}

.fp-landing-hero__benefits li {
    padding-left: 1.5rem;
    position: relative;
    line-height: 1.4;
    margin-bottom: unset;
}

.fp-landing-hero__benefits li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #1f8f5f;
    font-weight: 700;
}

/* ── Panel buttons ───────────────────────────────────────────────────────── */

.fp-landing-hero__panel-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.fp-landing-hero__panel-actions .btn {
    font-size: 1rem;
    min-width: 0;
    padding: .5rem 1.5rem;
}

/* Override btn-primary inside panel to use green */
.fp-landing-hero__panel .btn.btn-primary {
    background: #1f8f5f;
    border-color: #1f8f5f;
}

.fp-landing-hero__panel .btn.btn-primary:hover {
    background: #18744d;
    border-color: #18744d;
}

.fp-landing-hero__panel .btn.btn-secondary {
    color: #1f8f5f;
    background: #fff;
    border-color: #1f8f5f;
}

.fp-landing-hero__panel .btn.btn-secondary:hover {
    color: #fff;
    background: #18744d;
    border-color: #18744d;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
    .fp-landing-hero {
        grid-template-columns: 1fr;
    }

    .fp-landing-hero--no-panel {
        grid-template-columns: 1fr;
    }
}