/* ============================================================
   mobile.css — page-specific styles for template-mobile.php
   Loaded AFTER the shared bundle (tokens → base → sections →
   hero → animations). Only novel classes live here; shared
   classes (.spc-plan, .spc-bento, .spc-bundle, etc.) are NOT
   touched.
   ============================================================ */

/* ---- Mobile page hero modifier ---- */
/*
 * .spc-mob-hero extends .spc-phero for the mobile page.
 * The base phero already handles background, padding and color;
 * this modifier widens the canvas slightly and adds a faint
 * device-silhouette accent via a pseudo-element.
 */
.spc-mob-hero {
    /* slightly taller to accommodate the longer hero headline */
    padding-bottom: clamp(52px, 8vw, 88px);
}

/* Decorative gradient orb in the upper-right corner */
.spc-mob-hero::after {
    content: "";
    position: absolute;
    top: -10%;
    right: -5%;
    width: clamp(280px, 40vw, 520px);
    height: clamp(280px, 40vw, 520px);
    border-radius: 50%;
    background: radial-gradient(closest-side,
        rgba(0, 181, 255, .18) 0%,
        rgba(10, 195, 79, .10) 55%,
        transparent 100%);
    filter: blur(18px);
    pointer-events: none;
    z-index: 1;
}

/* ---- Mobile hero title ---- */
/*
 * .spc-mob-hero__title sits alongside .spc-phero__title.
 * The shared class already sets color and a clamp-based size;
 * this modifier reduces the font size ceiling slightly so the
 * long "free for a full year" line stays on two lines max.
 */
.spc-mob-hero__title {
    font-size: clamp(2rem, 4.4vw, 3.1rem);
    max-width: 740px;
}

/* ---- Mobile plan card modifier ---- */
/*
 * .spc-mob-plan extends .spc-plan. The shared class handles the
 * full card shell; this modifier adds the "Internet required"
 * context strip at the top of each card.
 */
.spc-mob-plan {
    /* push content down to make room for the required note */
    padding-top: 34px;
}

/* ---- Mobile plan note (Internet required line under price) ---- */
/*
 * .spc-mob-plan__note sits alongside .spc-plan__tag on the <p>
 * element that carries the per-plan "Internet® required" notice.
 * We reinforce it as a distinct required-notice style: slightly
 * bolder and a warm-but-readable navy tint.
 */
.spc-mob-plan__note {
    font-size: .88rem;
    font-weight: 700;
    color: var(--navy);
    background: var(--sky);
    border-radius: var(--radius-sm);
    padding: 7px 12px;
    margin-bottom: 18px;
    line-height: 1.4;
}
/* Dark-card (is-popular) variant */
.spc-mob-plan.is-popular .spc-mob-plan__note {
    background: rgba(0, 181, 255, .14);
    color: #9ed6ff;
}

/* ---- Feature badge inside bento cells ---- */
/*
 * .spc-mob-badge is the "Unlimited Plus only" tag that lives
 * inside a dark bento cell. It needs to read clearly against
 * the navy background.
 */
.spc-mob-badge {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    margin-top: auto; /* pins to bottom of flex column in the cell */
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #fff;
    background: var(--grad);
    padding: 5px 13px;
    border-radius: var(--radius-pill);
    white-space: nowrap;
    box-shadow: var(--shadow-blue);
}

/* ---- Responsive ---- */
@media (max-width: 1023px) {
    .spc-mob-hero::after {
        display: none; /* avoid clashing with collapsed hero layout */
    }

    .spc-mob-hero__title {
        font-size: clamp(1.9rem, 5.2vw, 2.8rem);
    }
}

@media (max-width: 640px) {
    .spc-mob-hero {
        padding-bottom: clamp(40px, 8vw, 56px);
    }

    .spc-mob-hero__title {
        font-size: clamp(1.75rem, 7vw, 2.4rem);
    }

    .spc-mob-plan__note {
        font-size: .82rem;
        padding: 6px 10px;
    }

    .spc-mob-badge {
        font-size: .72rem;
        padding: 4px 11px;
    }
}