/*
 * Onboarding-laskeutumissivu (page-onboarding-landing.php)
 *
 * Kylmäkontaktoinnin kohdesivu: personoitu tervehdys, hyödyt
 * yritykselle ja askeleet. Värit ja muodot Tarjoomon graafisen
 * ohjeiston mukaan (navy + turkoosi, pill-napit, 15px kortit,
 * ei liukuvärejä).
 */

/* Sisältöalue valkoisena - sivun harmaa tausta jää kaistoiksi reunoille */
.onblp {
    background: #fff;
    padding: 10px 40px 60px;
    border-top: 1px solid #ddd;
}

/* ---------- Hero ---------- */

/* Ei taustalaatikkoa - tekstisisältö suoraan valkoisella pohjalla */
.onblp-hero {
    color: #000;
    padding: 30px 20px 0;
    margin: 0 0 40px;
    text-align: center;
}

.onblp-hero-badge {
    display: inline-block;
    background: #fff;
    border: 1px solid #3cbccf;
    color: #000;
    border-radius: 9999px;
    padding: 6px 18px;
    font-size: 15px;
    margin-bottom: 18px;
}

.onblp-hero h1 {
    color: #000;
    margin: 0 0 15px;
}

.onblp-hero-lead {
    max-width: 640px;
    margin: 0 auto 28px;
    font-size: 18px;
    line-height: 1.6;
    color: #000;
}

.onblp-hero-actions {
    display: flex;
    gap: 15px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ---------- Napit ---------- */

.onblp-btn {
    display: inline-block;
    border-radius: 9999px;
    padding: 13px 32px;
    font-weight: 700;
    font-size: 16px;
    text-decoration: none;
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 250ms ease-in-out;
}

.onblp-btn-primary {
    background: #31336f;
    color: #fff;
}

.onblp-btn-primary:hover {
    background: #3cbccf;
    color: #fff;
    text-decoration: none;
}

.onblp-btn-outline {
    background: transparent;
    color: #31336f;
    border-color: #31336f;
}

.onblp-btn-outline:hover {
    border-color: #3cbccf;
    color: #3cbccf;
    text-decoration: none;
}

/* ---------- Osioiden otsikot ---------- */

.onblp h2 {
    color: #0d819c;
    text-align: center;
    margin: 0 0 25px;
}

.onblp-section {
    margin: 0 0 45px;
}

/* ---------- Hyödyt (features-block-tyyliin) ---------- */

.onblp-benefits .col-12 {
    text-align: center;
    margin-bottom: 25px;
}

.onblp-benefits svg {
    height: 60px;
    width: auto;
    margin-bottom: 12px;
}

.onblp-benefits h4 {
    color: #31336f;
    margin: 0 0 8px;
}

.onblp-benefits p {
    font-size: 15px;
    line-height: 1.55;
}

/* ---------- Askeleet ---------- */

.onblp-steps {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
}

.onblp-step {
    background: #f2f0f1;
    border-radius: 15px;
    padding: 30px;
    flex: 1 1 240px;
    max-width: 340px;
    text-align: center;
}

.onblp-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 9999px;
    background: #3cbccf;
    color: #fff;
    font-weight: 900;
    font-size: 20px;
    margin-bottom: 12px;
}

.onblp-step h4 {
    color: #31336f;
    margin: 0 0 8px;
}

.onblp-step p {
    font-size: 15px;
    line-height: 1.55;
    margin: 0;
}

/* ---------- Muokattava sisältöalue ---------- */

.onblp-content {
    max-width: 760px;
    margin: 0 auto 45px;
}

/* Herosta siirtynyt esittelyteksti muokattavan sisällön (esim. videon) jälkeen */
.onblp-content-lead {
    font-size: 18px;
    line-height: 1.6;
    text-align: center;
    margin: 25px auto 0;
}

/* CTA-napit muokattavan sisällön jälkeen */
.onblp-content-actions {
    margin-top: 25px;
}

/* ---------- Videon autoplay (?autoplay=1) ---------- */

/* Videon vanhempi (esim. wp-block-video-figure) saa luokan JS:stä,
   jotta Ääni päälle -nappi asemoituu videon päälle siirtämättä
   videoelementtiä DOM:ssa */
.onblp-video-wrap {
    position: relative;
}

.onblp-unmute {
    position: absolute;
    left: 50%;
    bottom: 18px;
    transform: translateX(-50%);
    background: #31336f;
    color: #fff;
    border: 2px solid #fff;
    border-radius: 9999px;
    padding: 10px 26px;
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
    transition: background 250ms ease-in-out;
}

.onblp-unmute:hover {
    background: #3cbccf;
}

/* ---------- Mobiili ---------- */

@media (max-width: 767px) {
    .onblp {
        padding: 10px 15px 40px;
    }

    .onblp-hero {
        padding: 20px 10px 0;
    }

    .onblp-hero-lead {
        font-size: 16px;
    }
}