/* ================================================================ RESPONSIVE FIXES — Future Andhra News Drop-in layer on top of main.css + telugu-typography.css Load LAST in (after main.css & telugu-typography.css) Breakpoints handled: ≤1200px large desktop / laptop ≤1100px large tablet / small laptop ≤ 900px tablet (sidebar collapses) ≤ 768px mobile landscape / large phone ≤ 680px hamburger threshold (nav hides) ≤ 480px small mobile ≤ 360px very small phones ================================================================ */ /* ---------------------------------------------------------------- 0a. BREAKING NEWS TICKER — speed override main.css uses 35s, style.css uses 40s — both overridden here ---------------------------------------------------------------- */ .brk-track { animation-duration: 10s !important; /* was 35s */ } .ticker-content { animation-duration: 10s !important; /* was 40s */ } /* Slightly faster on mobile (shorter visible area) */ @media (max-width: 680px) { .brk-track { animation-duration: 10s !important; } .ticker-content { animation-duration: 10s !important; } } /* ---------------------------------------------------------------- 0. GLOBAL SAFEGUARDS — prevent horizontal overflow on every page ---------------------------------------------------------------- */ html { overflow-x: hidden; } body { overflow-x: hidden; max-width: 100vw; } * { min-width: 0; /* stops flex/grid children from blowing out */ } img, video, iframe, embed, object { max-width: 100%; height: auto; } /* ---------------------------------------------------------------- 1. CONTAINER — safe padding on every viewport ---------------------------------------------------------------- */ .container { width: 100%; max-width: var(--max-w, 1340px); margin-inline: auto; padding-inline: 16px; box-sizing: border-box; } /* ================================================================ LARGE TABLET / SMALL LAPTOP — ≤1200px ================================================================ */ @media (max-width: 1200px) { .hdr-center { max-width: 340px; } } /* ================================================================ LARGE TABLET — ≤1100px ================================================================ */ @media (max-width: 1100px) { /* 4-col grid → 3 */ .news-grid-4 { grid-template-columns: repeat(3, 1fr); } /* Footer: 4 → 2 columns */ .footer-top { grid-template-columns: 1fr 1fr; gap: 24px; } /* Content grid sidebar narrower */ .content-grid { grid-template-columns: 1fr 260px; gap: 20px; } /* Slider height */ .slide { height: 360px; } } /* ================================================================ TABLET — ≤900px ================================================================ */ @media (max-width: 900px) { /* ── Homepage layout: sidebar below content ── */ .main-grid { grid-template-columns: 1fr !important; gap: 20px; } .sidebar { display: grid !important; grid-template-columns: repeat(2, 1fr); gap: 16px; align-items: start; } /* ── Inner page content grid collapses ── */ .content-grid { grid-template-columns: 1fr !important; gap: 20px; } /* ── News grids ── */ .news-grid-4 { grid-template-columns: repeat(2, 1fr); } .news-grid-3 { grid-template-columns: repeat(2, 1fr); } .news-grid { grid-template-columns: repeat(2, 1fr); } .related-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } /* ── Breaking hero section ── */ .brk-hero { grid-template-columns: 1fr; gap: 0; } .brk-hero-main { height: 300px; } /* Side panel: show as a 2-col row under main */ .brk-hero > div:last-child { display: grid !important; grid-template-columns: 1fr 1fr; gap: 3px; flex-direction: unset; } .brk-hero-side { height: 180px; } /* ── Slider ── */ .slide { height: 320px; } /* ── Sub-nav selects bar ── */ #sub-nav-selects { padding: 4px 0; } .sub-nav-inner { gap: 5px; } .sub-cat-select { min-width: 120px; font-size: 12px; } /* ── Cat block: 2-col sub list ── */ .cat-sub-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } } /* ================================================================ MOBILE LANDSCAPE / LARGE PHONE — ≤768px ================================================================ */ @media (max-width: 768px) { /* ── Header: stack search below logo+hamburger row ── */ #hdr .hdr-inner { flex-wrap: wrap; row-gap: 8px; padding: 8px 0; } #hdr .logo { flex: 1 1 auto; min-width: 0; } #hdr .hdr-right { flex-shrink: 0; order: 2; } #hdr .hdr-center { order: 3; width: 100%; max-width: 100% !important; flex: 0 0 100%; } #hdr .search-box { width: 100%; max-width: 100%; } /* ── Top bar: simplify ── */ #top-bar .tb-links { display: none !important; } #top-bar .tb-date { font-size: 11px; } /* ── Quick links: hide on smaller screens to save space ── */ .hdr-quick { display: none !important; } /* NOTE: #nav and .hamburger are intentionally NOT touched here. main.css already handles the nav→hamburger swap at ≤680px. Hiding #nav above that threshold is what was corrupting the navbar. */ /* ── Slider ── */ .slide { height: 270px; } .slide-content { padding: 14px 18px; } .slider-btn { width: 36px; height: 36px; font-size: 13px; } .slider-dots { bottom: 10px; right: 14px; gap: 5px; } .slider-dots span { width: 7px; height: 7px; } .slider-dots span.active { width: 16px; } /* ── Breaking hero ── */ .brk-hero-main { height: 260px; } .brk-hero-side { height: 160px; } .brk-caption h2 { font-size: 16px; line-height: 1.35; } .brk-side-caption p { font-size: 12px; line-height: 1.45; } /* ── News grids ── */ .news-grid-4 { grid-template-columns: repeat(2, 1fr); } .news-grid-3 { grid-template-columns: repeat(2, 1fr); } .news-grid-2 { grid-template-columns: repeat(2, 1fr); } .news-grid { grid-template-columns: repeat(2, 1fr); } .related-grid { grid-template-columns: repeat(2, 1fr); } /* ── Sidebar: single column on mobile ── */ .sidebar { grid-template-columns: 1fr !important; display: flex !important; flex-direction: column; } /* ── Category page: large first card — stack on mobile ── */ .content-grid main > article.news-card { flex-direction: column !important; } .content-grid main > article.news-card > div:first-child { width: 100% !important; } .content-grid main > article.news-card > div:first-child img { height: 220px !important; width: 100% !important; } /* ── Post page ── */ .post-title { font-size: clamp(20px, 5vw, 26px) !important; } .post-featured-img { border-radius: 8px; } .post-featured-img img { max-height: 300px; } .post-meta { gap: 8px; font-size: 11px; } /* ── Footer: 2-col on tablet ── */ .footer-top { grid-template-columns: 1fr 1fr; gap: 20px; padding: 32px 0 24px; } .footer-brand { grid-column: 1 / -1; } /* ── Pagination ── */ .pagination { gap: 5px; } .pagination a, .pagination span { padding: 7px 12px; font-size: 12px; } /* ── Trending: 2-col grid ── */ .trending-list { display: grid !important; grid-template-columns: repeat(2, 1fr); gap: 0; } /* Make each pair visually separated */ .trend-item:nth-child(odd) { border-right: 1px solid var(--gray-100, #f0f0f0); } .trend-item:last-child { border-right: none; } /* ── Page wrapper padding ── */ .page-wrapper { padding: 16px 0; } .cat-header { padding: 20px 0; } .cat-header h1 { font-size: clamp(20px, 5vw, 28px); } } /* ================================================================ HAMBURGER THRESHOLD — ≤680px (reinforcing main.css rules) ================================================================ */ @media (max-width: 680px) { /* Absolutely ensure nav is hidden */ #nav { display: none !important; } #sub-nav-selects { display: none !important; } .hamburger { display: flex !important; } .hdr-quick { display: none !important; } /* All news grids → single column */ .news-grid-4, .news-grid-3, .news-grid-2, .news-grid { grid-template-columns: 1fr !important; } .related-grid { grid-template-columns: 1fr !important; } /* Sidebar → full single column */ .sidebar { display: flex !important; flex-direction: column !important; gap: 16px; } /* Footer → single column */ .footer-top { grid-template-columns: 1fr !important; } .footer-bottom { flex-direction: column; align-items: flex-start; gap: 6px; } /* Breaking ticker compact */ .brk-label { font-size: 11px; padding: 0 12px 0 14px; padding-right: 24px; } /* Category page: featured first card always stacked */ article.news-card > div[style*="width:45%"] { width: 100% !important; flex-shrink: unset !important; } article.news-card > div[style*="flex-direction:row"] { flex-direction: column !important; } /* Trending back to column */ .trending-list { display: flex !important; flex-direction: column !important; } .trend-item:nth-child(odd) { border-right: none; } } /* ================================================================ SMALL MOBILE — ≤480px ================================================================ */ @media (max-width: 480px) { .container { padding-inline: 10px; } /* ── Top bar ── */ #top-bar { display: none !important; } /* hide entirely on very small phones */ /* ── Breaking bar ── */ #breaking-bar .brk-label { font-size: 10px; padding: 0 10px; padding-right: 18px; letter-spacing: 0.6px; } .brk-track a { font-size: 12px; } /* ── Logo ── */ .logo-img { width: 38px !important; height: 38px !important; font-size: 18px !important; } .logo-img-real { max-height: 42px !important; } .logo-name { font-size: 18px !important; letter-spacing: 0.5px; } .logo-tag { display: none; } /* ── Header ── */ #hdr .hdr-inner { padding: 6px 0; row-gap: 7px; } #hdr .hdr-center { padding-bottom: 2px; } .search-box input { padding: 8px 12px; font-size: 13px; } .search-box button { padding: 0 12px; font-size: 12px; } /* ── Hamburger icon ── */ .hamburger { padding: 6px; } .hamburger span { width: 22px; } /* ── Slider ── */ .slide { height: 230px; } .slide-content { padding: 10px 12px; } .slide-content h2 { font-size: 14px !important; line-height: 1.35; margin-bottom: 6px; } .slide-content .cat { font-size: 9px; margin-bottom: 6px; } .slider-btn { width: 30px; height: 30px; font-size: 11px; } .slider-btn.prev { left: 8px; } .slider-btn.next { right: 8px; } /* ── Breaking hero ── */ .brk-hero > div:last-child { grid-template-columns: 1fr !important; } .brk-hero-main { height: 220px; } .brk-hero-side { height: 150px; } .brk-caption { padding: 12px 14px; } .brk-caption h2 { font-size: 14px !important; } .brk-side-caption { padding: 10px 12px; } .brk-side-caption p { font-size: 11px !important; } /* ── Cards ── */ .card-title { font-size: 13px; } .card-body { padding: 10px; } .h160 { height: 140px; } .h200 { height: 160px; } /* ── Category block: main card image full width ── */ .cat-main-card { flex-direction: column; gap: 8px; } .cat-main-card img { width: 100% !important; height: 140px !important; border-radius: 6px; } .cat-sub-list { grid-template-columns: 1fr !important; } /* ── Trending: single column ── */ .trending-list { display: flex !important; flex-direction: column !important; } .trend-num { font-size: 22px; min-width: 32px; } /* ── Post page ── */ .post-title { font-size: 19px !important; line-height: 1.3; } .post-content { font-size: 14px; line-height: 1.8; } .post-featured-img img { max-height: 240px; border-radius: 6px; } .post-meta { gap: 6px; } .post-category-badge { font-size: 10px; padding: 3px 9px; } /* ── Share buttons: full-width vertical ── */ .share-btns { flex-direction: column !important; gap: 8px !important; } .share-btn, .share-btns a, .share-btns button { width: 100% !important; justify-content: center !important; padding: 12px 16px !important; } .share-box { padding: 14px 16px; } /* ── Related grid ── */ .related-grid { grid-template-columns: 1fr !important; } /* ── Pagination ── */ .pagination a, .pagination span { padding: 6px 10px; font-size: 12px; } /* ── Category header ── */ .cat-header { padding: 16px 0; } .cat-header h1 { font-size: 20px !important; } /* ── Section head ── */ .sec-head { gap: 8px; } .sec-title { font-size: 15px !important; } /* ── Footer ── */ .footer-top { padding: 22px 0 18px; gap: 16px; } .footer-col h4 { font-size: 13px; } .footer-logo { font-size: 24px; } .footer-tagline { font-size: 12px; } .footer-social a { width: 30px; height: 30px; font-size: 12px; } .footer-bottom p { font-size: 11px; } /* ── Sidebar widgets ── */ .widget-head, .widget-title { font-size: 13px; padding: 10px 14px; } .list-card img { width: 58px; height: 44px; } /* ── Breadcrumb ── */ .breadcrumb { font-size: 11px; gap: 4px; } /* ── Inner page: no-results ── */ .no-results { padding: 40px 16px; } .no-results i { font-size: 36px; } /* ── Scroll-to-top button ── */ #scroll-top { width: 38px; height: 38px; bottom: 16px; right: 16px; font-size: 14px; } } /* ================================================================ VERY SMALL PHONES — ≤360px ================================================================ */ @media (max-width: 360px) { .container { padding-inline: 8px; } .logo-name { font-size: 16px !important; } .logo-img { width: 34px !important; height: 34px !important; font-size: 16px !important; } .logo-img-real { max-height: 38px !important; } .slide { height: 200px; } .slide-content h2 { font-size: 13px !important; } .brk-hero-main { height: 190px; } .brk-caption h2 { font-size: 13px !important; } .post-title { font-size: 17px !important; } /* Footer already single-col; just reduce padding */ .footer-top { padding: 16px 0 14px; } .pagination a, .pagination span { padding: 5px 8px; font-size: 11px; } } /* ================================================================ PRINT — hide chrome, keep readable article body ================================================================ */ @media print { #top-bar, #breaking-bar, #hdr, #nav, #sub-nav-selects, #mobile-menu, #mobile-overlay, .hamburger, #footer, #scroll-top, .sidebar, .share-box, .related-section, .ad-banner-section, .ad-widget, .ad-banner-full { display: none !important; } .content-grid, .main-grid { grid-template-columns: 1fr !important; } .post-title { font-size: 18pt; } .post-content { font-size: 11pt; line-height: 1.85; } body { background: white; color: black; } } /* ================================================================ UTILITIES — small helpers used across pages ================================================================ */ /* Ensure the mobile menu itself stays off-screen until toggled */ #mobile-menu { will-change: transform; -webkit-overflow-scrolling: touch; } /* Category page — sub-nav select row: horizontal scroll on small tablets */ @media (max-width: 900px) and (min-width: 681px) { .sub-nav-inner { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; } .sub-nav-inner::-webkit-scrollbar { display: none; } .sub-cat-select { flex-shrink: 0; } } /* Breaking news ticker — don't let items overflow on small screens */ .brk-ticker { overflow: hidden; min-width: 0; } .brk-track { will-change: transform; } /* Prevent long Telugu words from breaking layout in cards */ .card-title, .card-excerpt, .post-title, .trend-body p, .widget-item p, .list-card-info h4, .brk-caption h2, .brk-side-caption p, .slide-content h2, .cat-main-card h4 { overflow-wrap: anywhere; word-break: break-word; } /* Touch-friendly tap targets for nav and buttons */ @media (hover: none) and (pointer: coarse) { .pagination a, .pagination span { min-height: 40px; min-width: 36px; display: inline-flex; align-items: center; justify-content: center; } .widget-cat-link a { padding: 10px 0; display: block; } .footer-col ul li a { padding: 8px 0; display: block; } .nav-dropdown a { padding: 12px 16px; } .mob-cat-link { min-height: 48px; } .mob-cat-toggle { min-height: 48px; } }