/* CollegesInfo.org — Mobile Fix CSS v2 */
*,*::before,*::after{box-sizing:border-box}
html{overflow-x:hidden;-webkit-text-size-adjust:100%;scroll-behavior:smooth;-webkit-tap-highlight-color:transparent}
body{overflow-x:hidden;max-width:100vw}
img{max-width:100%;height:auto}
header,footer,section,article,nav{max-width:100vw;overflow-x:hidden}
main{max-width:100vw}

/* ── FIX 1: HERO TEXT INVISIBLE ON PURPLE ── */
section.hero-grad p strong,
section.hero-grad p b,
.hero-grad p strong,
.hero-grad p b {
    color: #ffffff !important;
    font-weight: 800 !important;
}
section.hero-grad p,
.hero-grad > div > div > p {
    color: rgba(255,255,255,0.9) !important;
}

/* ── FIX 2: STREAM PILLS ON PURPLE ── */
.hero-grad .flex.flex-wrap a {
    color: rgba(255,255,255,0.9) !important;
    border-color: rgba(255,255,255,0.25) !important;
    background: rgba(255,255,255,0.12) !important;
}
.hero-grad .flex.flex-wrap a:hover {
    background: rgba(255,255,255,0.22) !important;
}

/* ── FIX 3: TRENDING LINKS ── */
.hero-grad .text-sm.text-white\/60 {
    padding-bottom: 16px !important;
    font-size: 12px !important;
}
.hero-grad .text-sm a {
    color: rgba(255,255,255,0.85) !important;
}

/* ── FIX 4: HERO BADGE — SINGLE LINE ── */
.hero-grad .inline-flex {
    max-width: 90vw !important;
    text-align: center !important;
    white-space: normal !important;
    font-size: 12px !important;
    padding: 6px 14px !important;
    line-height: 1.4 !important;
}

/* ── TOP BAR HIDE ON MOBILE ── */
@media(max-width:767px){
    .ci-topbar { display:none !important; }
}

/* ── NAV MOBILE ── */
@media(max-width:900px){
    .ci-nav { padding:0 16px !important; height:56px !important; }
    .ci-nav-links { display:none !important; }
    .ci-search-wrap { display:none !important; }
    .ci-nav-right .ci-btn-red { display:none !important; }
    .ci-hamburger { display:flex !important; flex-direction:column; gap:5px; cursor:pointer; border:none; background:transparent; padding:6px; min-width:44px; min-height:44px; align-items:center; justify-content:center; }
    .ci-logo { font-size:18px !important; }
    .ci-btn-wa { padding:7px 12px !important; font-size:12px !important; min-height:44px !important; }
    .ci-mobile-menu { padding:12px 16px 16px !important; }
    .ci-mobile-menu a { font-size:15px !important; padding:13px 0 !important; }
}

/* ── HERO MOBILE ── */
@media(max-width:767px){
    section.hero-grad > div { padding:36px 16px 48px !important; }
    section.hero-grad h1 { font-size:1.7rem !important; line-height:1.25 !important; margin-bottom:12px !important; }
    section.hero-grad p { font-size:14px !important; line-height:1.65 !important; margin-bottom:20px !important; }
    /* Search form stacked */
    section.hero-grad form { flex-direction:column !important; border-radius:14px !important; overflow:hidden !important; box-shadow:0 4px 24px rgba(0,0,0,0.35) !important; }
    section.hero-grad form > div { border-radius:0 !important; }
    section.hero-grad form input { width:100% !important; padding:14px 16px !important; font-size:15px !important; border-radius:0 !important; }
    section.hero-grad form button { width:100% !important; padding:14px !important; border-radius:0 !important; font-size:15px !important; font-weight:700 !important; }
    /* Pills */
    section.hero-grad .flex.flex-wrap.gap-2 { gap:7px !important; margin-bottom:16px !important; }
    section.hero-grad .flex.flex-wrap a { font-size:12px !important; padding:6px 12px !important; }
    /* Trending */
    section.hero-grad .text-sm { font-size:12px !important; padding-bottom:8px !important; line-height:1.6 !important; word-break:break-word !important; }
    /* Trust row */
    .trust-row { display:none !important; }
}

@media(max-width:400px){
    section.hero-grad h1 { font-size:1.45rem !important; }
    .ci-logo { font-size:16px !important; }
}

/* ── STATS BAR ── */
@media(max-width:767px){
    .stats-bar { flex-wrap:wrap !important; }
    .stat { width:50% !important; padding:14px 8px !important; border-right:none !important; border-bottom:1px solid rgba(255,255,255,0.15) !important; }
    .stat-n { font-size:22px !important; }
    .stat-l { font-size:11px !important; }
    /* Tailwind stats grid */
    .grid.grid-cols-2.md\:grid-cols-4 { grid-template-columns:repeat(2,1fr) !important; }
}

/* ── SECTIONS PADDING ── */
@media(max-width:767px){
    section.py-14, section.py-16, section.py-20 { padding-top:28px !important; padding-bottom:28px !important; }
    .max-w-7xl { padding-left:16px !important; padding-right:16px !important; }
    h2.text-3xl, h2.text-4xl { font-size:1.45rem !important; line-height:1.3 !important; }
    .sec-title { font-size:1.45rem !important; }
    .sec-sub { font-size:13px !important; }
    .sec-hd { flex-direction:column !important; gap:8px !important; }
}

/* ── STREAM CARDS ── */
@media(max-width:767px){
    .grid.grid-cols-2.sm\:grid-cols-3.md\:grid-cols-4.lg\:grid-cols-5 { grid-template-columns:repeat(2,1fr) !important; gap:8px !important; }
    .sg { grid-template-columns:repeat(2,1fr) !important; gap:8px !important; }
    .sc { padding:14px 8px !important; }
}

/* ── CITY GRID ── */
@media(max-width:767px){
    .grid.grid-cols-2.sm\:grid-cols-3.md\:grid-cols-4.lg\:grid-cols-6 { grid-template-columns:repeat(2,1fr) !important; gap:8px !important; }
}

/* ── COLLEGE CARDS ── */
@media(max-width:767px){
    .grid.md\:grid-cols-2.lg\:grid-cols-4 { grid-template-columns:1fr !important; gap:12px !important; }
    .cg { grid-template-columns:1fr !important; gap:12px !important; }
}

/* ── QUICK LINKS ── */
@media(max-width:767px){
    .grid.grid-cols-1.md\:grid-cols-3.lg\:grid-cols-4 { grid-template-columns:1fr !important; gap:8px !important; }
    section.bg-red-50 a, section.bg-green-50 a, section.bg-amber-50 a { padding:12px 14px !important; font-size:13px !important; }
    section.bg-red-50 h2, section.bg-green-50 h2, section.bg-amber-50 h2 { font-size:18px !important; }
}

/* ── BLOG GRID ── */
@media(max-width:767px){
    .bg { grid-template-columns:1fr !important; gap:12px !important; }
    .grid.md\:grid-cols-2.lg\:grid-cols-3 { grid-template-columns:1fr !important; gap:12px !important; }
}

/* ── FAQ ── */
@media(max-width:767px){
    details summary { font-size:14px !important; padding:13px 14px !important; line-height:1.45 !important; }
    details > div, details p { font-size:13px !important; padding:0 14px 13px !important; }
    .faq-q { font-size:14px !important; padding:12px 14px !important; }
    .faq-a { font-size:13px !important; padding:0 14px 12px !important; }
}

/* ── KCET BANNER ── */
@media(max-width:767px){
    .kcet-wrap { flex-direction:column !important; margin:0 16px !important; border-radius:12px !important; }
    .kb-l { padding:24px 20px !important; }
    .kb-l h3 { font-size:20px !important; }
    .kb-r { width:100% !important; flex-direction:row !important; padding:16px 20px !important; border-left:none !important; border-top:1px solid rgba(255,255,255,0.08) !important; justify-content:space-around !important; }
    .kb-div { width:1px !important; height:36px !important; }
    .kb-stat .n { font-size:22px !important; }
}

/* ── AI SECTION ── */
@media(max-width:767px){
    .ai-sec { padding:28px 16px !important; }
    .ai-grid { grid-template-columns:1fr !important; gap:12px !important; }
}

/* ── WA STRIP ── */
@media(max-width:767px){
    .ci-wa-strip { flex-direction:column !important; padding:20px 16px !important; gap:14px !important; text-align:center !important; }
    .ci-wa-strip h4 { font-size:15px !important; line-height:1.4 !important; }
    .ci-wa-strip p { font-size:12px !important; }
    .ci-wa-btns { width:100% !important; }
    .ci-wa-call, .ci-wa-green { flex:1 !important; text-align:center !important; font-size:13px !important; }
}

/* ── FOOTER ── */
@media(max-width:900px){
    .ci-footer { padding:24px 16px 0 !important; }
    .ci-footer-grid { grid-template-columns:1fr !important; gap:20px !important; }
    .ci-footer-cols { grid-template-columns:repeat(2,1fr) !important; gap:16px !important; }
    .ci-footer-bottom { flex-direction:column !important; text-align:center !important; gap:8px !important; padding:14px 0 16px !important; }
    .ci-footer-credit { justify-content:center !important; }
}
@media(max-width:480px){
    .ci-footer-cols { grid-template-columns:1fr !important; }
}

/* ── ALSO SEARCHED ── */
@media(max-width:767px){
    .also-sec { padding:16px !important; }
    .atag { font-size:11px !important; padding:4px 10px !important; }
}

/* ── TOUCH TARGETS — min 44px (Apple guideline) ── */
@media(max-width:767px){
    button, a.ci-btn-wa, a.ci-btn-red, a.ci-wa-call, a.ci-wa-green, .kb-btn, .cc-btn { min-height:44px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; }
}

/* ── CTA SECTION ── */
@media(max-width:767px){
    section.hero-grad.text-white .flex.flex-col.sm\:flex-row { gap:10px !important; }
    section.hero-grad.text-white a { width:100% !important; text-align:center !important; padding:13px !important; font-size:14px !important; }
    section.hero-grad.text-white h2 { font-size:1.5rem !important; }
}

/* ── INTERNAL LINKS GRID ── */
@media(max-width:767px){
    .link-grid { grid-template-columns:1fr !important; gap:12px !important; }
}

/* ── SAFE AREA iPhone notch ── */
@supports(padding-bottom:env(safe-area-inset-bottom)){
    .ci-footer { padding-bottom:env(safe-area-inset-bottom) !important; }
    .ci-nav { padding-left:max(16px,env(safe-area-inset-left)) !important; padding-right:max(16px,env(safe-area-inset-right)) !important; }
}


/* ── STREAM PILLS FIX — compact wrap not full width ── */
section.hero-grad .flex.flex-wrap.justify-center a,
.hero-grad div.flex.flex-wrap a {
    display: inline-flex !important;
    width: auto !important;
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    color: rgba(255,255,255,0.92) !important;
    background: rgba(255,255,255,0.12) !important;
    border: 1px solid rgba(255,255,255,0.28) !important;
    border-radius: 999px !important;
    padding: 6px 14px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    -webkit-text-fill-color: rgba(255,255,255,0.92) !important;
}

/* Pill container — wrap naturally */
section.hero-grad .flex.flex-wrap.justify-center,
.hero-grad div.flex.flex-wrap {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 100% !important;
}

/* Fix -webkit-text-fill from gradient text bleeding into pills */
section.hero-grad .flex.flex-wrap a * {
    -webkit-text-fill-color: rgba(255,255,255,0.92) !important;
}


/* ── HOMEPAGE V6 GRID FIXES — MOBILE ── */
@media(max-width:767px){

    /* College listings guides — 1 column */
    .ci-home [style*="grid-template-columns:repeat(4,1fr)"] {
        grid-template-columns: 1fr !important;
    }

    /* Stream grid — 2 columns */
    .ci-stream-grid {
        grid-template-columns: repeat(2,1fr) !important;
    }

    /* City grid — 2 columns */
    .ci-city-grid {
        grid-template-columns: repeat(2,1fr) !important;
    }

    /* Exam grid — 1 column */
    .ci-exam-grid {
        grid-template-columns: 1fr !important;
    }

    /* Link grid — 1 column */
    .ci-link-grid {
        grid-template-columns: 1fr !important;
    }

    /* Blog grid — 1 column */
    .ci-blog-grid {
        grid-template-columns: 1fr !important;
    }

    /* AI grid — 1 column */
    .ci-ai-grid {
        grid-template-columns: 1fr !important;
    }

    /* KCET banner — stack */
    .ci-kcet {
        flex-direction: column !important;
    }
    .ci-kcet-r {
        width: 100% !important;
        flex-direction: row !important;
        justify-content: space-around !important;
        border-left: none !important;
        border-top: 1px solid rgba(255,255,255,.06) !important;
        padding: 18px !important;
    }
    .ci-kdiv {
        width: 1px !important;
        height: 32px !important;
    }

    /* Hero — single column */
    .ci-hero {
        grid-template-columns: 1fr !important;
        padding: 32px 16px 40px !important;
    }

    /* Section padding */
    .ci-sec { padding: 40px 0 !important; }
    .ci-w { padding: 0 16px !important; }

    /* Headings */
    .ci-h1 { font-size: 26px !important; }
    .ci-sh { font-size: 20px !important; }

    /* Bottom CTA buttons */
    .ci-home [style*="justify-content:center"] .ci-btn-red,
    .ci-home [style*="justify-content:center"] .ci-btn-out {
        width: 100% !important;
        justify-content: center !important;
    }

    /* Section header stack */
    .ci-sec-hd {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }

    /* Quick link grids */
    .ci-home [style*="grid-template-columns:repeat(4,1fr)"],
    .ci-home [style*="grid-template-columns:repeat(3,1fr)"] {
        grid-template-columns: 1fr 1fr !important;
    }
}

@media(max-width:480px){
    .ci-home [style*="grid-template-columns:repeat(4,1fr)"],
    .ci-home [style*="grid-template-columns:repeat(3,1fr)"],
    .ci-home [style*="grid-template-columns:repeat(2,1fr)"] {
        grid-template-columns: 1fr !important;
    }
    .ci-stream-grid {
        grid-template-columns: repeat(2,1fr) !important;
    }
    .ci-city-grid {
        grid-template-columns: repeat(2,1fr) !important;
    }
}


/* ── FEATURED COLLEGES + QUICK LINKS MOBILE ── */
@media(max-width:767px){
    .ci-featured-grid {
        grid-template-columns: repeat(2,1fr) !important;
    }
    .ci-ql-grid {
        grid-template-columns: repeat(2,1fr) !important;
    }
}
@media(max-width:420px){
    .ci-featured-grid {
        grid-template-columns: 1fr !important;
    }
    .ci-ql-grid {
        grid-template-columns: 1fr !important;
    }
}