/* mobile-center.css — Apple / Stripe / Notion-style centered layout on narrow
 * screens (≤640px). Desktop/tablet stay left-aligned (engineering aesthetic).
 * Loaded LAST after all other V2 CSS so these rules win via source-order.
 *
 * Scoped under .v2-theme so admin/legacy pages are untouched.
 */

@media (max-width: 640px) {

    /* ── Shared section heads (home page: team, projects, testimonials, faq…) */
    .v2-theme .v2-sect-head {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 14px;
    }
    .v2-theme .v2-sect-head__lhs {
        align-items: center;
        gap: 10px;
    }
    .v2-theme .v2-sect-head__tag {
        justify-content: center;
    }
    .v2-theme .v2-sect-head__rhs {
        white-space: normal;
    }
    .v2-theme .v2-sect-head .v2-h2,
    .v2-theme .v2-sect-head .v2-para {
        text-align: center;
    }

    /* ── Product-detail section heads (parking, server-rental, juniper, etc.) */
    .v2-theme .v2-pd-sect__head {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 6px;
    }
    .v2-theme .v2-pd-sect__label,
    .v2-theme .v2-pd-sect__title {
        text-align: center;
    }

    /* ── Product-detail hero ───────────────────────────────────────── */
    .v2-theme .v2-pd-hero__tag {
        justify-content: center;
        text-align: center;
    }
    .v2-theme .v2-pd-hero__copy {
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .v2-theme .v2-pd-hero__copy .v2-h1 {
        text-align: center;
    }
    .v2-theme .v2-pd-hero__sub,
    .v2-theme .v2-pd-hero__desc {
        margin-left: auto;
        margin-right: auto;
    }
    .v2-theme .v2-pd-hero__ctas {
        justify-content: center;
    }
    .v2-theme .v2-pd-hero__claim {
        align-self: center;
        /* Force the claim ribbon onto one line on mobile by tightening type
           and letter-spacing. White-space:nowrap prevents the last word
           from dropping; max-width:100% + overflow-hidden keeps it inside
           the screen on extreme narrow viewports. */
        white-space: nowrap;
        font-size: 9px;
        letter-spacing: 0.6px;
        padding: 5px 10px;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* ── Home hero (if present) ────────────────────────────────────── */
    .v2-theme .v2-hero__tag,
    .v2-theme .v2-hero__copy,
    .v2-theme .v2-hero__ctas {
        text-align: center;
    }
    .v2-theme .v2-hero__ctas { justify-content: center; }

    /* ── Juniper categories grid — 2 columns on mobile ──────────── */
    .v2-theme .v2-jn-cats,
    .v2-theme .v2-jn-products {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px;
    }
    .v2-theme .v2-jn-cats__card {
        padding: 18px 14px;
        gap: 12px;
    }
    .v2-theme .v2-jn-cats__name {
        font-size: 14px;
        line-height: 1.3;
    }
    .v2-theme .v2-jn-cats__count {
        font-size: 11px;
    }

    /* ── Product price strip — 2 columns on mobile ───────────────── */
    /* Use double-class selector to outrank the page-scoped overrides
       like .juniper-page .v2-pd-price__inner that load after this file. */
    .v2-theme .v2-pd-price__inner,
    .v2-theme.juniper-page .v2-pd-price__inner,
    body.v2-theme .v2-pd-price__inner {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px;
        padding: 16px 12px;
    }
    .v2-theme .v2-pd-price__divider,
    .v2-theme.juniper-page .v2-pd-price__divider { display: none !important; }
    .v2-theme .v2-pd-price__cell {
        align-items: center;
        text-align: center;
        gap: 4px;
        min-width: 0;
    }
    .v2-theme .v2-pd-price__k {
        font-size: 9px;
        letter-spacing: 0.6px;
        text-align: center;
    }
    .v2-theme .v2-pd-price__v {
        font-size: 22px;
        text-align: center;
        word-break: break-word;
    }
    .v2-theme .v2-pd-price__v-unit { font-size: 12px; }
    .v2-theme .v2-pd-price__unit {
        font-size: 9px;
        letter-spacing: 0.6px;
        text-align: center;
    }

    /* ── HUD metrics — 2 columns, centered cells ──────────────────── */
    .v2-theme .v2-pd-hud__inner {
        grid-template-columns: repeat(2, 1fr);
    }
    .v2-theme .v2-pd-hud__cell {
        align-items: center;
        text-align: center;
        padding: 16px 12px;
        gap: 6px;
    }
    .v2-theme .v2-pd-hud__k {
        font-size: 9px;
        letter-spacing: 0.6px;
        text-align: center;
    }
    .v2-theme .v2-pd-hud__v {
        font-size: 22px;
        text-align: center;
    }
    .v2-theme .v2-pd-hud__note {
        text-align: center;
        font-size: 11px;
    }

    /* ── ROI calc head — inputs themselves stay left for UX ───────── */
    .v2-theme .v2-pd-calc__head {
        justify-content: center;
        gap: 16px;
    }

    /* ── Flow (how it works) steps — body text left, meta left ───── */
    .v2-theme .v2-pd-flow__step {
        align-items: flex-start;
        text-align: left;
    }
    .v2-theme .v2-pd-flow__meta {
        justify-content: flex-start;
        gap: 14px;
    }
    .v2-theme .v2-pd-flow__t,
    .v2-theme .v2-pd-flow__d { text-align: left; }

    /* ── Features — 2 columns on mobile, each cell centered ──────── */
    .v2-theme .v2-pd-features {
        grid-template-columns: repeat(2, 1fr);
    }
    .v2-theme .v2-pd-features__cell {
        align-items: center;
        text-align: center;
        gap: 8px;
        padding: 14px 12px;
    }
    .v2-theme .v2-pd-features__code {
        font-size: 9px;
        letter-spacing: 0.6px;
        text-align: center;
    }
    .v2-theme .v2-pd-features__t {
        text-align: center;
        font-size: 14px;
    }
    .v2-theme .v2-pd-features__d {
        text-align: center;
        font-size: 12px;
        line-height: 1.45;
    }

    /* ── Use cases — 2 columns on mobile, each cell centered like a team card */
    .v2-theme .v2-pd-cases {
        grid-template-columns: repeat(2, 1fr);
    }
    .v2-theme .v2-pd-cases__cell {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 8px;
        padding: 14px 12px;
    }
    .v2-theme .v2-pd-cases__n {
        font-size: 11px;
    }
    .v2-theme .v2-pd-cases__t {
        text-align: center;
        font-size: 14px;
    }
    .v2-theme .v2-pd-cases__d {
        text-align: center;
        font-size: 12px;
        line-height: 1.45;
    }

    /* ── Pricing tiers — head/price/CTA centered, bullet list left ── */
    .v2-theme .v2-pd-tier {
        align-items: center;       /* card-level: keep label + title + price + CTA centered */
        text-align: center;
    }
    .v2-theme .v2-pd-tier__price {
        justify-content: center;
    }
    .v2-theme .v2-pd-tier__list {
        width: 100%;
        text-align: left;
    }
    .v2-theme .v2-pd-tier__list li {
        justify-content: flex-start;
        text-align: left;
    }
    .v2-theme .v2-pd-tier__cta {
        margin-left: auto;
        margin-right: auto;
    }
    .v2-theme .v2-pd-tier__flag {
        /* keep corner flag corner-pinned on mobile too */
        top: 0;
        right: 0;
        left: auto;
    }

    /* ── Hardware cards — body text left, icon kept centered ─────── */
    .v2-theme .v2-pd-hardware__cell {
        align-items: flex-start;
        text-align: left;
    }
    .v2-theme .v2-pd-hardware__icon {
        margin: 0 auto;     /* the visual icon stays centered above the text */
    }
    .v2-theme .v2-pd-hardware__spec {
        align-items: flex-start;
    }

    /* ── Integrations strip — body text left ──────────────────────── */
    .v2-theme .v2-pd-integrations__cell {
        text-align: left;
    }
    /* If the last cell is alone in its 2-col row (odd count), span full width
       so there's no empty cell next to it. */
    .v2-theme .v2-pd-integrations > .v2-pd-integrations__cell:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    /* ── Testimonials (product + home) ─────────────────────────────── */
    .v2-theme .v2-pd-testimonial {
        align-items: center;
        text-align: center;
    }
    .v2-theme .v2-pd-testimonial__foot {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 10px;
    }
    .v2-theme .v2-pd-testimonial__badge {
        align-items: center;
        text-align: center;
    }
    .v2-theme .v2-tm__card {
        align-items: center;
        text-align: center;
    }
    .v2-theme .v2-tm__foot {
        flex-direction: column;
        align-items: flex-start;
        align-self: stretch;
        text-align: left;
        gap: 10px;
    }
    .v2-theme .v2-tm__foot-right {
        align-items: flex-start;
        align-self: stretch;
        text-align: left;
    }

    /* ── Process timeline: left-aligned inside cards (matches Services).
       Hide the orange dot (it pins to the desktop connector line which is
       itself hidden on mobile) and drop the 24px indent it reserved.    */
    .v2-theme .v2-process__dot { display: none; }
    .v2-theme .v2-process__meta,
    .v2-theme .v2-process__step .v2-h3,
    .v2-theme .v2-process__step .v2-para-dim { padding-left: 0; }

    /* ── Projects: full-bleed hero card with text overlay (mobile) ──
       Full-width 16:9 hero, category chip top-left, year top-right,
       large white title over a bottom-gradient, orange accent line +
       mono CTA under the hero. Inspired by Cisco/Juniper/Schneider. */
    .v2-theme .v2-projects__grid {
        grid-template-columns: 1fr;
        grid-auto-rows: auto;
        gap: 14px;
        background: transparent;
        border: 0;
    }
    .v2-theme .v2-projects__card {
        position: relative;
        min-width: 0;
        border: 1px solid var(--v2-border);
        overflow: hidden;
        display: flex;
        flex-direction: column;
    }
    .v2-theme .v2-projects__card--featured { grid-column: auto; grid-row: auto; }

    .v2-theme .v2-projects__media { aspect-ratio: 16/9; position: relative; }
    .v2-theme .v2-projects__card--featured .v2-projects__media { aspect-ratio: 16/9; }
    .v2-theme .v2-projects__media::after {
        content: "";
        position: absolute; left: 0; right: 0; bottom: 0; height: 60%;
        background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0) 100%);
        pointer-events: none;
    }

    /* Category chip — pulled out of body and pinned over the image */
    .v2-theme .v2-projects__meta {
        position: absolute;
        top: 12px; left: 12px;
        z-index: 3;
        display: inline-flex;
        gap: 6px;
        align-items: center;
        padding: 5px 9px;
        background: rgba(0,0,0,0.55);
        border: 1px solid var(--v2-accent);
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }
    .v2-theme .v2-projects__meta .v2-mono-dim { display: none; }

    /* Year tag — already inside .v2-projects__media, restyle */
    .v2-theme .v2-projects__year {
        top: 12px; right: 12px;
        z-index: 3;
        background: rgba(0,0,0,0.55);
        padding: 5px 8px;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }
    .v2-theme .v2-projects__badge { display: none; }

    /* Title — absolutely positioned above the CTA strip, over gradient */
    .v2-theme .v2-projects__title,
    .v2-theme .v2-projects__card--featured .v2-projects__title {
        position: absolute;
        left: 16px; right: 16px;
        bottom: 60px;
        z-index: 3;
        margin: 0;
        font-size: 22px;
        line-height: 1.2;
        letter-spacing: -0.4px;
        color: #fff;
        text-shadow: 0 2px 12px rgba(0,0,0,0.5);
    }

    /* Body strip — CTA row only, orange top border */
    .v2-theme .v2-projects__body {
        padding: 0;
        gap: 0;
        border-top: 1px solid var(--v2-accent);
        background: var(--v2-bg-card);
    }
    .v2-theme .v2-projects__card .v2-para-dim { display: none; }

    .v2-theme .v2-projects__cta {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 14px 16px;
        margin-top: 0;
        border-top: 0;
        font-family: var(--v2-f-mono);
        font-size: 11px;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: var(--v2-accent);
    }
    .v2-theme .v2-projects__cta::after { content: "→"; }

    /* ── Partners grid: 2 columns on mobile, each card as a discrete
       bordered tile (no shared grid-bleed seam). Equal-height rows
       keep cards uniform regardless of description length.
       minmax(0,1fr) lets columns shrink below intrinsic logo width. */
    .v2-theme .v2-partners__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: 1fr;
        gap: 12px;
        background: transparent;
        border: 0;
    }
    .v2-theme .v2-partners__card {
        padding: 18px 14px;
        gap: 12px;
        border: 1px solid var(--v2-border);
        height: 100%;
        min-width: 0;
    }
    /* Fixed logo band so the text band starts at the same Y in every card.
       Use flex centering + full-width img with a small horizontal padding so
       wider logos (Marvel etc.) fit instead of getting clipped at 80%. */
    .v2-theme .v2-partners__logo {
        height: 48px;
        flex: 0 0 48px;
        width: 100%;
        padding: 0 6px;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .v2-theme .v2-partners__logo img {
        max-width: 100%;
        max-height: 100%;
        width: auto;
        height: auto;
        object-fit: contain;
        display: block;
    }
    .v2-theme .v2-partners__info { margin-top: 0; }
    .v2-theme .v2-partners__name { font-size: 14px; }

    /* ── Team cards (home /team section) ───────────────────────────── */
    .v2-theme .v2-team__grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .v2-theme .v2-team__card {
        text-align: center;
    }
    .v2-theme .v2-team__body { padding: 14px 12px 16px; gap: 6px; }
    .v2-theme .v2-team__name { font-size: 15px; letter-spacing: -0.2px; }
    .v2-theme .v2-team__role { font-size: 12px; }
    .v2-theme .v2-team__meta { gap: 6px; font-size: 10px; }
    .v2-theme .v2-team__photo { max-width: 100%; border-radius: 6px; }

    /* ── Related products ──────────────────────────────────────────── */
    .v2-theme .v2-pd-related__card {
        flex-direction: column;
        justify-content: center;
        text-align: center;
        gap: 10px;
    }
    .v2-theme .v2-pd-related__arrow {
        display: none;
    }

    /* ── Footer: accordion on mobile (Apple/Cisco pattern) ────────── */
    .v2-theme .v2-footer { padding: 40px 20px 20px; }
    .v2-theme .v2-footer__top {
        grid-template-columns: 1fr;
        gap: 0;
        padding-bottom: 20px;
    }
    .v2-theme .v2-footer__brand { padding-bottom: 20px; }

    .v2-theme details.v2-footer__col {
        border-top: 1px solid var(--v2-border);
        padding: 0;
    }
    .v2-theme details.v2-footer__col:last-of-type {
        border-bottom: 1px solid var(--v2-border);
    }
    .v2-theme details.v2-footer__col > summary {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 0;
        cursor: pointer;
        pointer-events: auto;
        list-style: none;
    }
    .v2-theme details.v2-footer__col > summary h4 {
        margin: 0;
        font-size: 11px;
    }
    .v2-theme details.v2-footer__col > summary::after {
        content: "+";
        color: var(--v2-accent);
        font-family: var(--v2-f-mono);
        font-size: 18px;
        line-height: 1;
        transition: transform 0.2s ease;
    }
    .v2-theme details.v2-footer__col[open] > summary::after {
        content: "−";
    }
    .v2-theme details.v2-footer__col > a {
        padding-bottom: 10px;
        margin-bottom: 0;
    }
    .v2-theme details.v2-footer__col[open] > a:last-of-type {
        padding-bottom: 16px;
    }

    /* Hide the duplicate /privacy · /terms · /sitemap line in the bottom
       strip — /privacy and /terms now live inside the /contact accordion. */
    .v2-theme .v2-footer__bottom > span:nth-child(2) { display: none; }
    .v2-theme .v2-footer__bottom { justify-content: center; padding-top: 14px; }

    /* ── Specs grid — 2 columns on mobile (overrides product-detail.css
       which forces 1fr at ≤640px). Each row stacks key/value centered
       like a team card. ─────────────────────────────────────────── */
    .v2-theme .v2-pd-specs {
        grid-template-columns: repeat(2, 1fr);
    }
    .v2-theme .v2-pd-specs__row {
        flex-direction: column;
        gap: 6px;
        align-items: center;
        text-align: center;
        padding: 14px 12px;
    }
    .v2-theme .v2-pd-specs__v {
        max-width: 100%;
        text-align: center;
        font-size: 12px;
        line-height: 1.4;
        word-break: break-word;
    }
    .v2-theme .v2-pd-specs__k {
        font-size: 9px;
        letter-spacing: 0.6px;
    }

    /* Testimonials — keep mark/name/badge centered, quote body left */
    .v2-theme .v2-tm__quote {
        text-align: left;
        align-self: stretch;
    }
    .v2-theme .v2-pd-testimonial__quote {
        text-align: left;
        align-self: stretch;
    }

    /* ──────────────────────────────────────────────────────────────────
       Unified pattern for the five home sections that previously fell
       through (About / Services / Process / FAQ / Contact):
       —  section-head: centered (label + title + meta)
       —  body content (cards, rows, paragraphs): left-aligned
       Hero / Testimonials / Team / Partners / Footer keep their
       hand-tuned rules above. ────────────────────────────────────── */

    /* Section heads — centered across all sections that use v2-sect-head */
    .v2-theme .v2-sect-head {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 8px;
    }
    .v2-theme .v2-sect-head__lhs,
    .v2-theme .v2-sect-head__rhs {
        align-items: center;
        justify-content: center;
        text-align: center;
        flex-wrap: wrap;
    }
    .v2-theme .v2-sect-head__lhs > *,
    .v2-theme .v2-sect-head__rhs > * { text-align: center; }
    .v2-theme .v2-sect-head .v2-h2 { text-align: center; }
    /* Decorative slug ("/section.name") drops on tiny screens */
    .v2-theme .v2-sect-head__slug { display: none; }

    /* About — head centered (above), card body left */
    .v2-theme .v2-about__cards { text-align: left; }
    .v2-theme .v2-about__card,
    .v2-theme .v2-about__card .v2-h3,
    .v2-theme .v2-about__card .v2-para,
    .v2-theme .v2-about__card .v2-para-dim,
    .v2-theme .v2-about__card .v2-mono,
    .v2-theme .v2-about__card .v2-mono-dim { text-align: left; }
    .v2-theme .v2-about__download { align-self: center; }

    /* Services — same shape: head center, card text left */
    .v2-theme .v2-services__grid { text-align: left; }
    .v2-theme .v2-services__grid > *,
    .v2-theme .v2-services__grid .v2-h3,
    .v2-theme .v2-services__grid .v2-para,
    .v2-theme .v2-services__grid .v2-para-dim { text-align: left; }

    /* Process — steps left aligned, no leftover left padding */
    .v2-theme .v2-process__grid { text-align: left; }
    .v2-theme .v2-process__step,
    .v2-theme .v2-process__step .v2-h3,
    .v2-theme .v2-process__step .v2-para,
    .v2-theme .v2-process__step .v2-para-dim,
    .v2-theme .v2-process__meta { text-align: left; }

    /* FAQ — head center, accordion body left */
    .v2-theme .v2-faq__list { text-align: left; }
    .v2-theme .v2-faq__item,
    .v2-theme .v2-faq__q,
    .v2-theme .v2-faq__a,
    .v2-theme .v2-faq__text { text-align: left; }

    /* Contact — head center, form/rows left */
    .v2-theme .v2-contact__rows,
    .v2-theme .v2-contact__row,
    .v2-theme .v2-contact__val,
    .v2-theme .v2-form,
    .v2-theme .v2-form__head,
    .v2-theme .v2-row,
    .v2-theme .v2-row__label { text-align: left; }
    .v2-theme .v2-form__submit { align-self: center; }
}