/* ==========================================================================
   Ganesh Chaturthi — responsive refinements
   css/ganesh-responsive.css
   ========================================================================== */

/* the atmospheric side blessings only have room to breathe on wide desktop —
   any narrower and they start competing with Ganesha for the eye */
@media (max-width:1180px){
  .atmos{ display:none; }
}

/* ---------------------------------------------------- laptop / small desk */
@media (max-width:1280px){
  .controls-top{ bottom:108px; right:24px; }
  .env-pillar{ width:min(9vw,90px); }
  .ceremony{ padding-bottom:calc(44px + env(safe-area-inset-bottom,0px)); }
  .act{ padding:8px 17px; }
}

/* ----------------------------------------------------------------- tablet */
@media (max-width:900px){
  .darshan{ padding-top:clamp(18px,4vh,36px); }
  .eyebrow{ letter-spacing:.38em; }
  .acts{ gap:0; }
  .act{ padding:8px 13px; }
  .act .label{ letter-spacing:.18em; }
  .act .sub{ font-size:8.5px; }
  .divider{ height:26px; }
  .env-pillar{ width:min(7vw,64px); opacity:.6; }
  .env-palm{ width:min(12vw,120px); }
  .visit{ display:none; }                    /* the brand mark already links out */
  .panel{ padding:34px 28px 30px; }
  .panel--wide{ max-width:min(740px,94vw); }
  .ceremony{ padding-bottom:calc(38px + env(safe-area-inset-bottom,0px)); }
}

/* short-and-wide viewports: keep the darshan copy from crowding the murti */
@media (max-height:720px) and (min-width:900px){
  .darshan{ padding-top:16px; }
  .eyebrow{ margin-bottom:9px; }
  .ceremony{ padding-bottom:26px; }
}
@media (max-height:620px){
  .title{ margin-top:8px; }
}

/* ----------------------------------------------------------------- mobile */
@media (max-width:640px){
  .controls-top{ bottom:132px; right:14px; gap:12px; }
  .ambient-toggle{ width:36px; height:36px; }
  .ambient-icon svg{ width:15px; height:15px; }

  .darshan{ padding:20px 18px 0; }
  .eyebrow{ font-size:9px; letter-spacing:.34em; margin-bottom:10px; }
  .deva{ font-size:clamp(21px,6.6vw,27px); }
  .title{ font-size:10.5px; letter-spacing:.24em; margin-top:10px; }

  .env-pillar,.env-beam{ opacity:.4; }
  .env-palm{ width:min(20vw,110px); opacity:.4; }

  /* ceremony bar: compact, horizontally scrollable, no page overflow */
  .ceremony{
    padding:0 0 calc(20px + env(safe-area-inset-bottom,0px));
  }
  .acts{
    width:100%;
    justify-content:flex-start;
    gap:0;
    padding:6px 18px 8px;
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 22px,#000 calc(100% - 22px),transparent);
            mask-image:linear-gradient(90deg,transparent,#000 22px,#000 calc(100% - 22px),transparent);
  }
  .acts::-webkit-scrollbar{ display:none; }
  .act{
    flex:0 0 auto;
    scroll-snap-align:center;
    padding:10px 14px;
    gap:4px;
  }
  .act .label{ font-size:9.5px; letter-spacing:.16em; }
  .act .sub{ display:none; }                  /* keep the strip compact on phones */
  .divider{ height:22px; }

  .signature{
    bottom:88px; right:14px;
    max-width:58vw;
    font-size:8.5px; letter-spacing:.08em;
  }
  .signature-logo{ height:34px; margin:-2px 0 0 4px; }

  .skip{ right:16px; bottom:18px; }

  /* overlays go near-fullscreen */
  .veil{ padding:0; align-items:flex-end; }
  .panel{
    max-width:none;
    min-height:78vh;
    padding:44px 22px calc(34px + env(safe-area-inset-bottom,0px));
    border-radius:26px 26px 0 0;
    border-bottom:0;
    display:flex; flex-direction:column; justify-content:center;
    transform:translateY(42px);
  }
  .panel--wide{ min-height:86vh; justify-content:flex-start; }
  .panel .sanskrit{ font-size:clamp(20px,6.4vw,26px); max-width:20ch; }
  .transport{ margin-top:26px; gap:14px; }
  .play{ width:66px; height:66px; }
  .picks{ gap:7px; }
  .pick{ padding:12px 14px; }
  .chapter-art{ margin-bottom:20px; border-radius:14px; }
  .toast{ font-size:10px; letter-spacing:.24em; }
}

@media (max-width:390px){
  .deva{ font-size:20px; }
  .act{ padding:10px 12px; }
  .signature{ right:10px; max-width:52vw; }
}

/* very small heights on phones (landscape) */
@media (max-height:520px) and (max-width:900px){
  .eyebrow{ display:none; }
  .darshan{ padding-top:12px; }
  .env-pillar,.env-palm,.env-beam{ display:none; }
  .ceremony{ gap:8px; padding-bottom:12px; }
  .signature{ display:none; }
  .panel{ min-height:96vh; justify-content:flex-start; overflow-y:auto; }
}

/* pointer-coarse devices never get the custom cursor */
@media (hover:none),(pointer:coarse){
  .cur-dot,.cur-ring,.cur-ripple{ display:none !important; }
  body.no-native-cursor,
  body.no-native-cursor a,
  body.no-native-cursor button{ cursor:auto; }
}