/* Bemanda Membership page styles (0.1.1).
   Full-width illustrated scene behind the content with a light-blue mask, and
   the three plan cards forced into a single row of 3. Scoped under .bm-scene /
   .bm-membership so nothing leaks into the rest of Moodle. */

/* ---- Full-bleed masked background scene ----
   .bm-scene breaks out of Moodle's centered content column to span the
   viewport width, lays the kids illustration at the bottom, and washes it with
   a light-blue gradient so the cards above stay clearly focused. */
.bm-scene {
    position: relative;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: 30px 16px 60px;
    /* Light-blue mask layered OVER the illustration (var set inline in PHP). */
    background-image:
        linear-gradient(rgba(214, 240, 252, .82), rgba(225, 245, 255, .92)),
        var(--bm-hero);
    background-repeat: no-repeat, no-repeat;
    background-position: center top, center bottom;
    background-size: cover, min(1100px, 100%) auto;
}

.bm-membership {
    --bm-blue: #00689b;
    --bm-blue-dark: #06364f;
    --bm-terra: #d2622e;
    --bm-green: #2e9e6b;
    --bm-ink: #22313a;
    position: relative;
    z-index: 1;
    max-width: 1100px;
    margin: 0 auto;
}

.bm-membership__head { text-align: center; margin-bottom: 18px; }
.bm-membership__head h1 { color: var(--bm-blue-dark); margin: 0 0 10px; }
.bm-membership__head p { color: var(--bm-ink); font-size: 1.1rem; max-width: 680px; margin: 0 auto; }

.bm-note {
    background: #fff7e7;
    border: 1px solid #ffd18c;
    color: #a85a10;
    border-radius: 14px;
    padding: 12px 18px;
    text-align: center;
    max-width: 760px;
    margin: 0 auto 28px;
    font-weight: 600;
}

/* ---- Three cards in ONE row ---- */
.bm-plans {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    align-items: stretch;
}

.bm-plan {
    position: relative;
    background: #fff;
    border: 2px solid #e3eef4;
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 14px 34px rgba(0, 54, 79, .16);
}
.bm-plan--green  { border-color: #cdeede; }
.bm-plan--terra  { border-color: #ffd6c4; }
.bm-plan--blue   { border-color: #cfe6f2; }

.bm-plan__tag {
    position: absolute; top: 14px; right: 14px;
    background: var(--bm-terra); color: #fff;
    font-size: .75rem; font-weight: 800;
    padding: 4px 10px; border-radius: 999px;
}

.bm-plan__head { padding: 22px 22px 14px; }
.bm-plan__head h3 { margin: 0 0 6px; color: var(--bm-blue-dark); }
.bm-plan__price { font-size: 2rem; font-weight: 900; color: var(--bm-blue); }
.bm-plan__price span { font-size: .9rem; font-weight: 600; color: #5b7884; margin-left: 4px; }
.bm-plan--green  .bm-plan__price { color: var(--bm-green); }
.bm-plan--terra  .bm-plan__price { color: var(--bm-terra); }

.bm-plan__body { padding: 0 22px 22px; display: flex; flex-direction: column; flex: 1; }
.bm-plan__blurb { color: var(--bm-ink); }
.bm-plan__feats { list-style: none; padding: 0; margin: 8px 0 18px; flex: 1; }
.bm-plan__feats li { padding: 6px 0 6px 24px; position: relative; color: var(--bm-ink); }
.bm-plan__feats li::before { content: "✓"; position: absolute; left: 0; color: var(--bm-green); font-weight: 800; }

.bm-plan__cta {
    display: block; text-align: center;
    margin-top: auto;
    padding: 12px 18px; border-radius: 999px;
    font-weight: 800; text-decoration: none;
    background: var(--bm-blue); color: #fff;
    transition: transform .2s ease;
}
.bm-plan__cta:hover { transform: translateY(-2px); text-decoration: none; color: #fff; }
.bm-plan--green .bm-plan__cta { background: var(--bm-green); }
.bm-plan--terra .bm-plan__cta { background: var(--bm-terra); }

.bm-trust {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 22px;
    margin: 30px 0 0; color: #3d5763; font-weight: 700;
}
.bm-trust span::before { content: "✓ "; color: var(--bm-green); }

.bm-login-hint { text-align: center; margin-top: 18px; color: var(--bm-ink); }

/* Stack to a single column on small screens only. */
@media (max-width: 860px) {
    .bm-plans { grid-template-columns: 1fr; }
    .bm-scene { background-size: cover, 140% auto; }
}