/* Responsive page layout. Header and drawer menu live in header.css. */

@media (max-width:1050px){
  .home-hero,
  .scan-layout,
  .feature-grid,
  .detail-layout{
    grid-template-columns:1fr!important;
  }

  .catalog-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
  }

  .variant-row,
  .detail-content .collection-variant.variant-row,
  .collection-tools,
  .collection-group-card,
  .collection-variant-line{
    grid-template-columns:1fr!important;
  }

  .prices{
    grid-template-columns:repeat(3,1fr)!important;
  }
}

@media (max-width:860px){
  html,
  body{
    max-width:100vw;
    overflow-x:hidden;
  }

  .home-hero,
  .page,
  .container{
    width:min(100% - 24px,1180px)!important;
  }

  .home-hero{
    min-height:auto!important;
    padding:44px 0 50px!important;
  }

  .hero-white,
  .hero-gold{
    font-size:clamp(38px,11vw,58px)!important;
    line-height:.98!important;
  }

  .hero-copy{
    font-size:16px!important;
    line-height:1.65!important;
    max-width:100%!important;
  }

  .hero-actions,
  .steps,
  .feature-grid,
  .scan-layout,
  .catalog-grid,
  .pricing-grid,
  .editor-grid,
  .image-fields,
  .toolbar,
  .info-grid,
  .grade-fields{
    grid-template-columns:1fr!important;
  }

  .hero-actions{
    display:grid!important;
    gap:12px!important;
  }

  .stats-strip{
    grid-template-columns:1fr!important;
    gap:12px!important;
    padding:24px 12px!important;
  }

  .section{
    padding:48px 0!important;
  }

  .catalog-grid{
    gap:16px!important;
  }

  .scan-panel,
  .editor-card,
  .signature-card,
  .step-card,
  .collection-panel{
    padding:18px!important;
  }

  .upload-box,
  .scan-upload{
    min-height:220px!important;
  }

  .modal{
    z-index:99998!important;
  }

  .modal-panel{
    width:calc(100vw - 10px)!important;
    max-height:calc(100vh - 10px)!important;
    margin:5px auto!important;
    border-radius:18px!important;
  }

  .modal-close{
    position:sticky!important;
    top:10px!important;
    margin:10px!important;
    width:40px!important;
    height:40px!important;
  }

  .detail-layout{
    grid-template-columns:1fr!important;
    min-height:auto!important;
  }

  .detail-images,
  .detail-content{
    padding:18px!important;
  }

  .main-image{
    min-height:230px!important;
  }

  .main-image img{
    max-height:320px!important;
  }

  .thumbs{
    grid-template-columns:1fr 1fr!important;
  }

  .variant-row,
  .detail-content .collection-variant.variant-row{
    grid-template-columns:1fr!important;
    gap:10px!important;
    padding:13px!important;
  }

  .prices{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }

  .prices span{
    white-space:normal!important;
    font-size:11px!important;
    padding:8px 5px!important;
  }

  .detail-content .collection-actions{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:8px!important;
  }

  .collection-grade{
    grid-column:1 / -1!important;
    justify-content:space-between!important;
    width:100%!important;
  }

  .collection-tools{
    grid-template-columns:1fr!important;
    gap:10px!important;
  }

  .collection-filter-buttons{
    display:grid!important;
    grid-template-columns:1fr 1fr 1fr!important;
  }

  .collection-stats{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:10px!important;
  }

  .collection-group-card{
    grid-template-columns:1fr!important;
  }

  .collection-group-image{
    min-height:155px!important;
  }

  .collection-group-head{
    display:grid!important;
    grid-template-columns:1fr auto!important;
  }

  .collection-variant-line{
    grid-template-columns:1fr!important;
  }

  .collection-variant-prices{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }

  .collection-remove{
    justify-self:end!important;
  }

  .auth-panel{
    width:calc(100vw - 22px)!important;
    max-height:calc(100vh - 22px)!important;
    padding:24px 18px!important;
    border-radius:20px!important;
  }

  .auth-logo-mini,
  .auth-logo-mini img{
    width:145px!important;
  }

  .lightbox{
    padding:8px!important;
  }

  .lightbox-panel{
    width:98vw!important;
    height:88vh!important;
  }

  .lightbox-nav{
    width:46px!important;
    height:46px!important;
    font-size:34px!important;
  }

  .lightbox-prev{
    left:10px!important;
  }

  .lightbox-next{
    right:10px!important;
  }

  .back-to-top{
    right:14px!important;
    bottom:14px!important;
    width:46px!important;
    height:46px!important;
    font-size:22px!important;
  }
}

@media (max-width:900px){
  .admin-hero,
  .scan-hero,
  .collector-guide-section{
    display:block!important;
  }

  .admin-hero .btn,
  .scan-hero .btn,
  .collector-guide-section .btn{
    margin-top:14px!important;
    width:100%!important;
    justify-content:center!important;
  }

  .admin-stat-grid,
  .admin-form-grid,
  .ai-config-grid,
  .scan-guide-grid,
  .guide-rarity-table,
  .guide-info-grid{
    grid-template-columns:1fr!important;
  }

  .admin-table-head{
    display:none!important;
  }

  .admin-table-row{
    grid-template-columns:1fr auto!important;
  }

  .admin-date{
    grid-column:1 / -1!important;
  }

  .admin-backup-row{
    grid-template-columns:1fr!important;
  }

  .guide-grade-row{
    grid-template-columns:42px 60px 1fr!important;
  }

  .guide-grade-row span{
    grid-column:1 / -1!important;
  }
}

@media (max-width:520px){
  .grade-chip-grid,
  .collection-stats,
  .collection-filter-buttons,
  .prices,
  .collection-variant-prices,
  .detail-content .collection-actions{
    grid-template-columns:1fr!important;
  }

  .collector-guide-content{
    padding:24px 18px!important;
  }

  .collector-guide-head h2{
    font-size:26px!important;
  }

  .page-title{
    font-size:32px!important;
  }
}