/* ========== eBharat Mobile FINAL ========== */

/* 1) HERO proportion + type scale (your screenshot looked oversized) */
@media (max-width: 560px){
  .hero{ padding:44px 0 18px !important; border-bottom:1px solid #fde68a33 !important; }
  .title{ font-size: clamp(22px, 6vw, 28px) !important; line-height:1.14 !important; margin:0 0 8px !important; }
  .sub{ font-size:14px !important; color:#475569 !important; }
  .wrap{ padding-left:16px !important; padding-right:16px !important; }
}

/* 2) ICON TILES → force 2-column (your issue #2) */
@media (max-width: 560px){
  /* common container */
  .grid.cols-4{ grid-template-columns:repeat(2,1fr) !important; }

  /* fallback: when tiles are direct children of a panel/section */
  .panel > .tile:not(.tile-hero),
  section > .tile:not(.tile-hero){
    width:calc(50% - 8px) !important; display:inline-flex !important; vertical-align:top !important;
    margin:0 12px 12px 0 !important;
  }
  .panel > .tile:not(.tile-hero):nth-of-type(2n),
  section > .tile:not(.tile-hero):nth-of-type(2n){ margin-right:0 !important; }

  /* compact tile internals */
  .tile{ padding:14px !important; gap:12px !important; border-radius:18px !important; }
  .tile .icon{ width:44px !important; height:44px !important; flex:0 0 44px !important; font-size:18px !important; }
  .kicker{ font-size:12px !important; }
}

/* tiny phones → single column */
@media (max-width: 360px){
  .grid.cols-4{ grid-template-columns:1fr !important; }
  .panel > .tile:not(.tile-hero),
  section > .tile:not(.tile-hero){ width:100% !important; margin-right:0 !important; }
}

/* 3) Scroller header CTA looked awkward → hide on mobile; keep swipe */
@media (max-width: 560px){
  .sc-head .sc-cta{ display:none !important; }
  .sc-title{ font-size:17px !important; }
  .track{ gap:12px !important; padding-bottom:10px !important; }
  .track .item{ flex:0 0 88vw !important; min-height:92px !important; padding:14px !important; border-radius:16px !important; box-shadow:0 10px 24px rgba(2,6,23,.06); }
}

/* 4) Quick-link chips a bit smaller */
@media (max-width: 560px){
  .ql-title{ font-size:11px !important; }
  .ql-row a{ padding:8px 12px !important; font-weight:700 !important; }
}

@media (max-width:560px){
  /* Headline + sub */
  .hero .title, .hero h1{ font-size:26px !important; line-height:1.18 !important; margin-bottom:8px !important; }
  .hero .sub{ font-size:14px !important; color:#475569 !important; }

  /* The big blue pill under the heading (your search/CTA) */
  .hero .search,
  .hero .cta-row > *:first-child{
    transform: scale(.96);              /* shrink overall */
  }
  .hero .search{ padding:6px 8px !important; border-radius:16px !important; }
  .hero .search input{ padding:10px 12px !important; font-size:15px !important; }
}

@media (max-width:560px){
  /* Common grids */
  .grid.cols-4{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; }

  /* If tiles are direct children (not in .grid) */
  .panel > .tile:not(.tile-hero),
  section > .tile:not(.tile-hero){
    width:auto !important;
    margin:0 !important;
    display:flex !important;
  }
  /* Force the parent to become a 2-col grid */
  .panel:has(> .tile:not(.tile-hero)),
  section:has(> .tile:not(.tile-hero)){
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    gap:12px !important;
  }

  /* Tile compactness + tap size */
  .tile{ padding:14px !important; gap:12px !important; border-radius:18px !important; }
  .tile .icon{ width:44px !important; height:44px !important; flex:0 0 44px !important; font-size:18px !important; }
  .tile .kicker{ font-size:12px !important; }
}

/* Tiny phones → 1 column */
@media (max-width:360px){
  .grid.cols-4{ grid-template-columns:1fr !important; }
  .panel:has(> .tile:not(.tile-hero)),
  section:has(> .tile:not(.tile-hero)){
    grid-template-columns:1fr !important;
  }
}

@media (max-width:560px){
  .sc-head .sc-cta{ display:none !important; }
  .sc-title{ font-size:17px !important; }
  .track{ gap:12px !important; padding-bottom:10px !important; }
  .track .item{ flex:0 0 88vw !important; min-height:92px !important; padding:14px !important; border-radius:16px !important; box-shadow:0 10px 24px rgba(2,6,23,.06); }
}

/* === FINAL MOBILE OVERRIDES === */

/* Hero scale */
@media (max-width:560px){
  .hero{ padding:36px 0 16px !important; border-bottom:1px solid #fde68a33 !important; }
  .hero .title, .hero h1{ font-size:24px !important; line-height:1.18 !important; margin:0 0 8px !important; }
  .hero .sub{ font-size:14px !important; color:#475569 !important; }
}

/* Quick Links: show all (wrap), no awkward cut-off */
@media (max-width:560px){
  .quick-links .ql-row{
    display:flex !important; flex-wrap:wrap !important;
    gap:8px 10px !important; overflow:visible !important; scrollbar-width:none !important;
  }
  .quick-links .ql-row a{ padding:8px 12px !important; }
}

/* Scrollers: hide “View all” on mobile, keep swipe */
@media (max-width:560px){
  .sc-head .sc-cta{ display:none !important; }
  .sc-title{ font-size:17px !important; }
}

/* 2-col grid we’ll apply to the right parent via JS */
@media (max-width:560px){
  .eb-tiles{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0,1fr)) !important;
    gap:12px !important;
  }
  .eb-tiles > .tile, .eb-tiles > a.tile, .eb-tiles > li.tile{
    width:auto !important; margin:0 !important; display:flex !important;
  }
  .tile{ padding:14px !important; gap:12px !important; border-radius:18px !important; }
  .tile .icon{ width:44px !important; height:44px !important; flex:0 0 44px !important; font-size:18px !important; }
  .tile .kicker{ font-size:12px !important; }
}
@media (max-width:360px){
  .eb-tiles{ grid-template-columns:1fr !important; }
}

/* === BUTTON + CTA FIXES === */
@media (max-width:560px){
  /* Hero Search button */
  .hero .btn, .hero .wp-block-button__link,
  .hero button, .hero a.button{
    font-size:14px !important;
    padding:10px 18px !important;
    border-radius:8px !important;
  }

  /* Scroller top-right CTA */
  .sc-head .sc-cta{
    font-size:12px !important;
    padding:4px 10px !important;
    border-radius:6px !important;
    line-height:1.2 !important;
  }
}

/* --- Hero tidy + collapsible quick links (mobile) --- */
@media (max-width:560px){
  /* tighten hero */
  .hero{ padding:28px 0 10px !important; }
  .hero .title{ font-size:24px !important; line-height:1.18 !important; margin-bottom:6px !important; }
  .hero .sub{ font-size:14px !important; color:#475569 !important; }

  /* hide chips by default */
  .quick-links{ margin-top:8px !important; }
  .quick-links .ql-row{
    display:none !important;
  }

  /* “Browse topics” button */
  .ql-toggle{
    display:inline-flex; align-items:center; gap:.4rem;
    font-weight:800; font-size:13px;
    padding:8px 12px; border:1px solid #cbd5e1; border-radius:999px;
    background:#fff; color:#0f172a; text-decoration:none;
    box-shadow:0 4px 12px rgba(2,6,23,.06);
  }

  /* when open */
  .ql-open .quick-links .ql-row{
    display:flex !important; flex-wrap:wrap !important;
    gap:8px 10px !important; margin-top:10px;
  }
  .ql-open .ql-toggle{ background:#eef2ff; border-color:#c7d2fe; }
}

@media (max-width:560px){
  .hero{ padding:28px 0 10px !important; }
  .hero .title{ font-size:24px !important; line-height:1.18 !important; margin-bottom:6px !important; }
  .hero .sub{ font-size:14px !important; color:#475569 !important; }
  .hero .search{ padding:8px 10px !important; border-radius:14px !important; box-shadow:none !important; }
  .hero .btn{ font-size:14px !important; padding:10px 16px !important; border-radius:10px !important; }
  /* declutter */
  .quick-links{ display:none !important; }
}

@media (max-width:560px){
  .sc-head .sc-cta{
    background:transparent !important;
    border:0 !important;
    font-size:12px !important;
    padding:0 6px !important;
    color:#2563eb !important;
  }
}