/* ==========================================================================
   Topin.pk — responsive layer (desktop → tablet → mobile)
   ========================================================================== */

/* ---------- Large tablets / small laptops ---------- */
@media (max-width:1080px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .article-layout{grid-template-columns:1fr;gap:36px}
  .sidebar{position:static}
  .nav-list{gap:0}
  .nav-item > a{padding:10px 9px;font-size:.9rem}
}

/* ---------- Tablet ---------- */
@media (max-width:900px){
  body{font-size:16px}
  h1{font-size:2rem}
  .hero h1{font-size:2.3rem}
  .hero{padding:56px 0 46px}
  .section{padding:44px 0}
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .grid-featured{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:repeat(2,1fr);gap:28px}
  .link-columns{columns:2}
  .article-header h1{font-size:2rem}

  /* Collapsible navigation */
  .menu-btn{display:inline-flex}
  .primary-nav{
    position:fixed;inset:68px 0 0 0;background:#fff;border-top:1px solid var(--line);
    padding:12px 20px 40px;overflow-y:auto;transform:translateX(100%);
    transition:transform .22s ease;visibility:hidden;z-index:99;
  }
  .primary-nav.is-open{transform:translateX(0);visibility:visible}
  .nav-list{display:block}
  .nav-item{border-bottom:1px solid var(--line);position:relative}
  .nav-item > a{display:block;padding:15px 4px;font-size:1.02rem}
  body.nav-open{overflow:hidden}
}

/* ---------- Mobile ---------- */
@media (max-width:640px){
  .container{padding:0 16px}
  h1{font-size:1.75rem}
  h2{font-size:1.4rem}
  .hero{padding:44px 0 38px}
  .hero h1{font-size:1.95rem}
  .hero p{font-size:1rem}
  .hero-trust{gap:8px 16px;font-size:.83rem}
  .section{padding:36px 0}
  .section-head{flex-direction:column;align-items:flex-start;gap:6px}

  .grid{gap:18px}
  .grid-2,.grid-3,.grid-4,.steps,.proscons{grid-template-columns:1fr}
  .link-columns{columns:1}

  .search-form{flex-direction:column}
  .search-form input[type=search],.search-form .btn{width:100%}
  .newsletter-box{padding:26px 22px;flex-direction:column;align-items:stretch}
  .newsletter-form{flex-direction:column;max-width:none}
  .newsletter-form .btn{width:100%}

  .article-card--featured .card-title{font-size:1.25rem}
  .card-body{padding:16px}
  .rank-item{padding:20px}
  .author-box{flex-direction:column;text-align:center;align-items:center}

  /* Comparison tables scroll horizontally on small screens */
  .table-scroll{border-radius:var(--radius-sm)}
  table.compare{min-width:560px;font-size:.88rem}
  table.compare th,table.compare td{padding:10px 12px}

  .footer-grid{grid-template-columns:1fr;gap:24px}
  .footer-bottom{flex-direction:column;gap:6px}
  .to-top{right:14px;bottom:14px}
  .primary-nav{inset:64px 0 0 0}
}

/* ---------- Very small phones ---------- */
@media (max-width:380px){
  .hero h1{font-size:1.7rem}
  .icon-btn{width:38px;height:38px}
}

/* ---------- Phase 2 components ---------- */
@media (max-width:900px){
  .spec-list{grid-template-columns:repeat(3,1fr)}
}

@media (max-width:640px){
  .spec-list{grid-template-columns:1fr}
  .prevnext{grid-template-columns:1fr}
  .prevnext-next{text-align:left}
  .quick-answer{padding:22px 20px}
  .no-results{padding:24px 20px}

  /* Give the scrollable table a visible affordance on touch screens */
  .table-scroll{position:relative}
  .table-scroll::after{
    content:"Scroll for more \2192";
    display:block;font-size:.78rem;color:var(--muted);
    padding:8px 12px;background:var(--grey);border-top:1px solid var(--line);
  }
}

/* Comfortable tap targets on touch devices */
@media (hover:none){
  .nav-item > a,.page-link,.chip{min-height:44px;display:flex;align-items:center}
  .chip,.page-link{justify-content:center}
}

/* ---------- Print ---------- */
@media print{
  .site-header,.site-footer,.to-top,.newsletter,.pagination,.breadcrumbs{display:none}
  body{font-size:12pt;color:#000}
  .article-layout{display:block}
}