/* ============================================================
   KEMETI CALENDAR v5.0 — responsive.css
   Mobile + Tablet + Print
   ============================================================ */

/* ============ MOBILE (≤ 767px) ============ */
@media (max-width: 767px){
  body{padding:8px;font-size:14px}

  /* Header */
  .hdr{padding:11px 12px;gap:8px;min-height:56px}
  .brand{gap:8px}
  .brand .logo{width:40px;height:40px}
  .brand h1{font-size:14px}
  .brand .sub{font-size:8px;letter-spacing:2px}
  .hdr-actions{gap:4px}
  .ibtn{width:36px;height:36px}
  .ibtn svg{width:17px;height:17px}

  /* Nav — Horizontal scroll */
  .nav{
    display:flex;flex-wrap:nowrap;overflow-x:auto;
    justify-content:flex-start;gap:5px;padding:5px;
    -webkit-overflow-scrolling:touch;
    scroll-snap-type:x proximity;
  }

  .nav button{
    flex:0 0 72px;min-width:72px;
    scroll-snap-align:start;
    font-size:9px;
  }

  /* Cards */
  .card{padding:17px 13px;margin-bottom:11px}
  .card::before{inset:7px}

  /* Hero */
  .hero{padding:24px 8px 20px}
  .hero .cop-day{font-size:44px;min-width:115px;height:76px;padding:0 22px}
  .hero .cop-month{font-size:19px}
  .hero .hiero-line{font-size:25px;letter-spacing:3px}

  /* Picker */
  .cop-picker{grid-template-columns:1fr 1fr 1fr;gap:5px}
  .cop-picker .field{padding:8px 5px}
  .cop-picker .field select,
  .cop-picker .field input{font-size:16px}

  .nav-row{gap:5px}
  .nav-row button{font-size:10.5px;padding:10px 5px}

  /* Cals row */
  .cals-row{
    grid-template-columns:72px 1fr;
    position:relative;padding:11px;
  }
  .cals-row .extra{grid-column:2;justify-self:start}

  /* Qibla */
  .qibla-compass-wrap{width:min(76vw,280px);height:min(76vw,280px)}

  /* Map */
  #realMap{height:55vh;min-height:320px;max-height:520px}

  /* Dendera */
  #dendera3D{height:58vh;min-height:360px;max-height:650px}
  .dendera-controls{display:grid;grid-template-columns:repeat(2,1fr)}
  .dendera-controls button:last-child{grid-column:1/-1}

  /* Music */
  .music-box{padding:20px 13px 14px;max-height:96vh}
  .music-controls{gap:8px}
  .music-controls button{width:42px;height:42px}
  .music-controls button.main{width:56px;height:56px}
  .music-add-form{grid-template-columns:1fr}
  .music-add-form .btn{width:100%}
  .music-add-form .url-input{grid-column:1}
  .music-list{max-height:32vh}

  /* Toast */
  .toast{bottom:76px;font-size:12px;padding:12px 22px}

  /* Temples */
  .temple-photo{height:210px!important}
  .temple-atlas-grid,
  .temple-detail-grid{grid-template-columns:1fr!important}
  .atlas-3d{height:430px!important}

  /* Tests */
  .tests-summary{grid-template-columns:1fr 1fr}

  /* Settings */
  .setting-row{flex-wrap:wrap}
  .setting-select{width:100%;max-width:100%}
  .setting-range{max-width:100%}
  .backup-actions{grid-template-columns:1fr}

  /* PWA */
  .pwa-banner{flex-wrap:wrap}
  .pwa-install-btn{width:100%}

  /* Psychic */
  .psy-row{grid-template-columns:1fr 1fr}

  /* Egypt */
  .luck-grid{grid-template-columns:1fr}

  /* Loading */
  .loading-screen .eye{width:90px;height:90px}
  .loading-screen .loading-text{font-size:13px}
  .loading-screen .loading-bar{width:220px}
  .loading-screen .loading-glyphs{font-size:20px;letter-spacing:10px}
}

/* ============ TABLET (768-1099px) ============ */
@media (min-width: 768px) and (max-width: 1099px){
  .nav{grid-template-columns:repeat(8,1fr)}
  .view.on.two-col{display:block}
}

/* ============ DESKTOP (≥ 1100px) ============ */
@media (min-width: 1100px){
  .nav{grid-template-columns:repeat(15,1fr)}
}

/* ============ VERY SMALL SCREENS (≤ 380px) ============ */
@media (max-width: 380px){
  .hero .cop-day{font-size:38px;min-width:100px;height:68px}
  .hero .cop-month{font-size:17px}
  .hero .hiero-line{font-size:22px}
  .nav button{flex:0 0 64px;min-width:64px}
  .cals-row{grid-template-columns:60px 1fr}
}

/* ============ PRINT ============ */
@media print{
  .nav,
  .hdr-actions,
  .ibtn,
  .music-mini,
  .toast,
  .music-modal,
  .voice-modal,
  .loading-screen{
    display:none!important;
  }

  body{
    background:#fff;
    color:#000;
  }

  .card{
    border:1px solid #ccc;
    box-shadow:none;
    background:#fff;
  }
}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    scroll-behavior:auto!important;
    transition-duration:.001ms!important;
  }
}