/* =====================================================
   RESPONSIVE — 1200px / 1024px / 880px / 768px / 480px / 360px
   ===================================================== */

/* ── Large tablets / small laptops ── */
@media(max-width:1200px){
  .hero h1{font-size:clamp(3rem,6vw,5rem)}
  .stats{grid-template-columns:repeat(3,1fr)}
}

/* ── Tablet landscape ── */
@media(max-width:1024px){
  .navbar{height:68px}
  .header-logo{height:42px}
  .grid{grid-template-columns:repeat(3,1fr);gap:16px}
  .stats{grid-template-columns:repeat(3,1fr)}
}

/* ── Tablet portrait / large mobile ── */
@media(max-width:880px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat:last-child{grid-column:1/-1}
  footer .grid-f{grid-template-columns:1fr}

  /* Header treatment (logos -> centered bar, visible toggle + menu) lives in nav.css */
}

/* ── Mobile ── */
@media(max-width:768px){
  .wrap{padding:0 16px}
  section.band{padding:40px 0}
  .head{margin-bottom:20px}

  /* Header scaling is handled in nav.css (same layout as desktop) */
  .hero-logos{top:84px;gap:26px}
  .hero-logo{height:92px}

  /* Clear the fixed mobile header */
  #view-detail .band,
  #view-map .band,
  #view-compare .band,
  #view-exhibition .band,
  #view-admin .band{padding-top:84px!important}

  /* Hero — reordered & evenly distributed: title → eyebrow → description, button pinned to bottom */
  .hero{min-height:100svh;align-items:stretch;padding-bottom:0}
  .hero-inner{display:flex;flex-direction:column;align-items:center;min-height:100svh;padding-top:190px;padding-bottom:180px}
  .hero-inner > .eyebrow{order:1;margin:0}
  .hero-inner > h1{order:2;margin:18px 0 0}
  .hero-inner > p.lead{order:3;margin:60px auto 0}   /* sirf description — top value se control */
  .hero-inner > .hero-cta{order:4;margin-top:auto}   /* button bottom par pinned — padding-bottom se control */
  .hero h1{font-size:clamp(2rem,9vw,3.2rem);line-height:1.05}
  .hero p.lead{font-size:.95rem;max-width:100%}
  .hero-cta{flex-direction:column;gap:10px}
  .hero-cta .btn{width:100%;justify-content:center}
  .sun{width:120px;height:120px;top:8%;left:58%}
  .scrollhint{display:flex;bottom:34px}
  .floatmango{opacity:.45}

  /* Gallery */
  .grid{grid-template-columns:repeat(2,1fr);gap:12px}
  .card h3{font-size:1rem}
  .card .body{padding:12px 12px 14px}

  /* Detail page */
  .detail-hero{grid-template-columns:1fr;padding:24px 16px;gap:18px;border-radius:16px;text-align:center}
  .detail-hero .meta{order:2}
  .detail-hero .figwrap{order:1}
  .detail-hero .figwrap svg{width:min(60%,180px)}
  .detail-hero h1{font-size:clamp(1.8rem,8vw,2.8rem)}
  .detail-hero .od{justify-content:center}
  .facts{grid-template-columns:repeat(2,1fr);gap:10px;margin-top:16px}
  .twocol{grid-template-columns:1fr;gap:20px;margin-top:24px}
  .gallery3{grid-template-columns:repeat(3,1fr);gap:8px}

  /* Map */
  .maplayout{grid-template-columns:1fr;gap:16px}
  .mappanel{min-height:auto}

  /* Compare */
  .cmp-grid{grid-template-columns:1fr;gap:16px}
  .cmp-pick{gap:6px;flex-wrap:wrap}
  table.cmp{font-size:.8rem}
  table.cmp th,table.cmp td{padding:8px}

  /* Exhibition */
  .exhib{max-width:100%;border-radius:18px}
  .exhib .top{padding:24px 16px 16px}
  .exhib .body{padding:4px 16px 20px}
  .exhib h1{font-size:1.6rem}
  .exhib .qf{grid-template-columns:repeat(2,1fr)}

  /* Admin */
  .kpis{grid-template-columns:repeat(2,1fr);gap:10px}
  .admincharts{grid-template-columns:1fr;gap:14px}
  .chartbox{height:200px}
  .reg-header{flex-direction:column;align-items:flex-start;gap:10px}
  .reg-header>div{width:100%;flex-direction:column}
  .reg-search{width:100%}
  .reg-search input{min-width:0;width:100%}
  .btn-add{width:100%;justify-content:center}

  /* Modal */
  .emodal{border-radius:14px}
  .emodal-head{padding:16px 16px 0}
  .emodal-body{padding:12px 16px 16px;grid-template-columns:1fr;gap:10px}
  .emodal-body .full{grid-column:1}
  .emodal-foot{padding:0 16px 16px;flex-direction:column}
  .btn-save,.btn-cancel{width:100%;justify-content:center;text-align:center}

  .qr-zoom-inner{padding:18px 14px}

  /* Footer */
  footer{padding:36px 0 24px}
  footer .grid-f{grid-template-columns:1fr;gap:20px}
  footer .fine{flex-direction:column;gap:6px;text-align:center}

  .lb{padding:14px}
  .lb .inner{padding:20px 16px}
}

/* ── Small mobile ── */
@media(max-width:480px){
  .hero h1{font-size:clamp(1.8rem,10vw,2.6rem)}
  .hero p.lead{font-size:.9rem}
  .hero-logos{top:80px;gap:22px}
  .hero-logo{height:78px}

  .grid{grid-template-columns:1fr;gap:12px}

  .factcard{padding:12px}
  .factcard .v{font-size:1.1rem}

  .gallery3{grid-template-columns:repeat(2,1fr)}

  .kpis{grid-template-columns:1fr}
  .kpi .n{font-size:1.5rem}

  .btn{font-size:.88rem;padding:12px 18px}

  section.band{padding:32px 0}

  .cmp-chip{font-size:.76rem;padding:5px 8px}

  .panel{padding:16px 12px}
  .adcard{padding:14px 12px}

  .stats{grid-template-columns:1fr 1fr}
  .stat:last-child{grid-column:1/-1}
  .stat .n{font-size:2rem}

  .exhib .qf{grid-template-columns:1fr 1fr}
  .facts{grid-template-columns:1fr 1fr}
}

/* ── Very small phones ── */
@media(max-width:360px){
  .hero h1{font-size:clamp(1.6rem,11vw,2.2rem)}
  .hero-logos{top:76px;gap:18px}
  .hero-logo{height:64px}
  .grid{grid-template-columns:1fr}
  .wrap{padding:0 12px}
  .btn{font-size:.84rem;padding:11px 14px}
  .exhib .qf{grid-template-columns:1fr}
  .kpis{grid-template-columns:1fr}
  table.cmp{font-size:.72rem}
  table.cmp th,table.cmp td{padding:6px}
  footer .fine{font-size:.72rem}
}