/* ==========================================================================
   Call Ringtone — responsive layer
   Breakpoints: 1024 / 860 / 768 / 560 / 380
   ========================================================================== */

@media (max-width:1024px){
  .tone-grid{grid-template-columns:repeat(2,1fr);}
  .card-grid{grid-template-columns:repeat(2,1fr);}
  .footer__grid{grid-template-columns:1.4fr 1fr 1fr;row-gap:2rem;}
  .detail__grid{grid-template-columns:1fr;}
  .nav__link{padding:.5rem .48rem;font-size:.82rem;}
}

@media (max-width:900px){
  .nav-toggle{display:inline-flex;}
  .nav{
    position:fixed;inset:66px 0 auto 0;margin:0;background:var(--surface);
    border-bottom:1px solid var(--line);max-height:calc(100vh - 66px);
    overflow-y:auto;display:none;box-shadow:var(--shadow);
  }
  .nav.is-open{display:block;}
  .nav__list{flex-direction:column;align-items:stretch;gap:0;padding:.6rem var(--gutter) 1.1rem;}
  .nav__list li{border-bottom:1px solid var(--line-soft);}
  .nav__list li:last-child{border-bottom:0;}
  .nav__link{padding:.85rem .2rem;font-size:.98rem;border-radius:0;}
  .header__actions{margin-left:auto;}
}

@media (max-width:768px){
  .section{padding:2.6rem 0;}
  .hero{padding:2.2rem 0 1.8rem;}
  .controls__filters,
  .controls__filters[data-cols]{grid-template-columns:repeat(2,1fr);}
  .card-grid{grid-template-columns:1fr;}
  .footer__grid{grid-template-columns:1fr 1fr;}
  .footer__about{grid-column:1 / -1;}
  .spec-list{grid-template-columns:1fr;}
  .player__inner{grid-template-columns:1fr auto;grid-template-areas:"now right" "mid mid";
    gap:.5rem 1rem;padding:.6rem 0 .75rem;}
  .player__now{grid-area:now;}
  .player__right{grid-area:right;}
  .player__mid{grid-area:mid;}
  .volwrap{display:none;}
  .player__title,.player__meta{max-width:46vw;}
}

@media (max-width:560px){
  :root{--gutter:16px;}
  .tone-grid{grid-template-columns:1fr;}
  .hero__stats{gap:1.1rem;}
  .hero__stat b{font-size:1.15rem;}
  .grid-actions .btn{flex:1;}
  .modal__panel{margin:0;border-radius:0;min-height:100vh;max-height:100vh;}
  .brand__name{font-size:.98rem;}
  .controls{padding:.9rem;}
}

@media (max-width:380px){
  .controls__filters,
  .controls__filters[data-cols]{grid-template-columns:1fr;}
  .footer__grid{grid-template-columns:1fr;}
  .brand__name{font-size:.9rem;}
  .player__transport .icon-btn{width:34px;height:34px;}
  .tone-card__foot{flex-wrap:wrap;}
}