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

/* ---- Hero rise animation (staggered entrance) ---- */
.net-hero__rise {
    opacity: 0;
    transform: translateY(28px);
    animation: netRise .75s var(--ease-out) forwards;
}
.net-hero__rise.d1 { animation-delay: .15s; }
.net-hero__rise.d2 { animation-delay: .3s; }
.net-hero__rise.d3 { animation-delay: .48s; }
@keyframes netRise {
    to { opacity: 1; transform: none; }
}

/* ---- Fiber-Powered network section layout ----
   Full-width stack: heading → backbone strip → text|image split all span
   the container (was a 2-col grid that squeezed content into half). */
.net-int-network {
    display: grid;
    grid-template-columns: 1fr;
    gap: clamp(20px, 3vw, 32px);
    align-items: start;
}

.net-int-network__body {
    /* inherits .net-lede sizing; this block adds extra breathing room */
    max-width: 100%; /* override the centered lede cap in this two-col layout */
    margin: 0;
}
.net-int-network__body p + p {
    margin-top: 1em;
}

/* ---- Speed-fit badges (Advantage / Premier / Gig labels) ---- */
.net-int-speed-badge {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    font-size: .88rem;
    font-weight: 800;
    letter-spacing: .04em;
    padding: 6px 14px;
    border-radius: var(--radius-pill);
    margin-bottom: 10px;
    line-height: 1;
}

.net-int-speed-badge--blue {
    background: var(--sky);
    color: var(--blue);
}

.net-int-speed-badge--cyan {
    background: rgba(0, 181, 255, .15);
    color: #9ed6ff; /* legible on dark bento cells */
}
/* light-context override — cyan badge inside a light cell */
.net-bento__cell:not(.is-dark) .net-int-speed-badge--cyan {
    background: rgba(0, 181, 255, .12);
    color: #0079b3;
}

.net-int-speed-badge--green {
    background: rgba(10, 195, 79, .14);
    color: var(--green);
}

/* ---- WiFi Extenders promo block (inside net-section--dark) ---- */
.net-int-extenders {
    background: rgba(255, 255, 255, .04);
    border: 1px solid var(--dk-border);
    border-radius: var(--radius-lg);
    padding: clamp(26px, 4vw, 42px);
    position: relative;
    overflow: hidden;
}
/* thin gradient top bar matching the section aesthetic */
.net-int-extenders::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--grad);
    opacity: .7;
}

.net-int-extenders__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(24px, 4vw, 48px);
}

.net-int-extenders__cta {
    flex-shrink: 0;
}

/* ---- Responsive ---- */
@media (max-width: 1023px) {
    .net-int-network {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .net-int-extenders__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 22px;
    }

    .net-int-extenders__cta {
        width: 100%;
    }
    .net-int-extenders__cta .net-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 640px) {
    .net-int-speed-badge {
        font-size: .82rem;
        padding: 5px 12px;
    }

    .net-int-extenders {
        padding: 22px 18px;
    }
}

/* ==== Fiber explainer: text + image split ==== */
.net-int-netgrid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px, 4vw, 44px); align-items: stretch; }
.net-int-netgrid__media { position: relative; border-radius: var(--radius-lg); overflow: hidden; min-height: 280px; }
.net-int-netgrid__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 5s var(--ease-out); }
.net-int-netgrid:hover .net-int-netgrid__media img { transform: scale(1.05); }
.net-int-netgrid__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, transparent 55%, rgba(0,18,38,.45)); }
@media (max-width: 900px) { .net-int-netgrid { grid-template-columns: 1fr; } .net-int-netgrid__media { min-height: 210px; } }

/* ==== V2 additions: net-int-* only ==== */

/* Hero2 canvas mount — light gradient-blob surface for this page */
.net-page-internet .net-hero2-canvas {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

/* Speed gauge widget */
.net-gauge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    user-select: none;
}
.net-gauge svg {
    width: clamp(120px, 18vw, 180px);
    height: auto;
    overflow: visible;
}
.net-gauge__track { opacity: .35; }
.net-gauge__arc   { transition: stroke-dasharray 1.4s cubic-bezier(.22,1,.36,1); }
.net-gauge__needle { transition: transform 1.4s cubic-bezier(.22,1,.36,1); }
.net-gauge__label {
    font-family: var(--ff-display, 'Space Grotesk', sans-serif);
    font-size: clamp(.9rem, 1.8vw, 1.1rem);
    font-weight: 800;
    color: var(--blue, #0061FF);
    line-height: 1;
    letter-spacing: -.02em;
}
.net-gauge__num  { font-variant-numeric: tabular-nums; }
.net-gauge__unit { font-size: .72em; opacity: .7; margin-left: 2px; }

/* Eyebrow numbered labels (V2 editorial style) */
.net-page-internet .net-eyebrow__num {
    display: inline-block;
    font-variant-numeric: tabular-nums;
    font-weight: 900;
    margin-right: 6px;
    color: var(--blue, #0061FF);
    opacity: .7;
}

/* Rotator word flip (V2 kinetic H1) */
.net-rotator {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    color: var(--blue, #0061FF);
}

@media (max-width: 640px) {
    .net-gauge { display: none; } /* gauge collapses on small screens */
}