/* ==========================================================================
   KBS MEDIA PORTAL — responsive rules
   ========================================================================== */

@media (max-width: 1180px) {
  .feature-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .hero-inner {
    gap: 36px;
  }
}

@media (max-width: 1080px) {
  .hero-inner,
  .upload-layout,
  .panel-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .hero {
    padding-block: 52px 40px;
  }

  .hero-visual {
    max-width: 520px;
  }

  .auth-page {
    grid-template-columns: 1fr;
  }

  .auth-showcase {
    display: none;
  }

  .auth-main {
    min-height: 100vh;
  }
}

@media (max-width: 1024px) {
  .app-shell {
    grid-template-columns: minmax(0, 1fr);
  }

  .sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    width: 272px;
    transform: translateX(-102%);
    transition: transform 0.22s ease;
    box-shadow: 0 0 0 1px var(--border);
  }

  html[dir='rtl'] .sidebar {
    transform: translateX(102%);
  }

  .sidebar.is-open {
    transform: translateX(0);
  }

  .sidebar-close {
    display: inline-flex;
  }

  .sidebar-backdrop.is-open {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 35;
    background: rgba(4, 6, 11, 0.6);
    backdrop-filter: blur(3px);
  }

  .topbar-menu {
    display: inline-flex;
  }

  .content {
    padding: 20px 18px 48px;
  }
}

@media (max-width: 860px) {
  .preview-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .preview-side {
    border-inline-start: 0;
    border-block-start: 1px solid var(--border);
  }

  .preview-stage {
    min-height: 260px;
  }

  .preview-stage iframe {
    height: 52vh;
  }
}

@media (max-width: 760px) {
  .container {
    padding-inline: 16px;
  }

  .site-nav {
    display: none;
  }

  .site-header-inner,
  .page-header-inner {
    min-height: 60px;
  }

  .hero {
    padding-block: 40px 30px;
  }

  .hero-lead {
    font-size: 14.5px;
  }

  .hero-actions .btn {
    flex: 1;
  }

  .steps {
    grid-template-columns: minmax(0, 1fr);
  }

  .section {
    padding-block: 38px;
  }

  .topbar {
    padding: 9px 14px;
    gap: 8px;
  }

  .profile-meta {
    display: none;
  }

  .profile {
    border-inline-start: 0;
    padding-inline-start: 0;
    margin-inline-start: 0;
  }

  .search-box {
    max-width: none;
  }

  .list-row {
    grid-template-columns: 40px minmax(0, 1fr) auto;
    gap: 10px;
    padding: 10px 12px;
  }

  .list-row .list-cell {
    display: none;
  }

  .files-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  }

  .toolbar-info {
    margin-inline-start: 0;
    width: 100%;
  }

  .modal-host {
    padding: 12px;
  }

  .modal {
    max-height: calc(100vh - 24px);
  }

  .settings-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 560px) {
  body {
    font-size: 14px;
  }

  .feature-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .view-title {
    font-size: 18px;
  }

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

  .stat-value {
    font-size: 20px;
  }

  .files-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .file-thumb {
    aspect-ratio: 16 / 9;
  }

  .dropzone {
    padding: 30px 16px;
  }

  .dz-icon {
    width: 46px;
    height: 46px;
  }

  .queue-item {
    gap: 10px;
  }

  .queue-thumb {
    width: 38px;
    height: 38px;
  }

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

  .upload-main {
    padding-block: 20px 36px;
  }

  .success-screen {
    padding: 34px 18px;
  }

  .success-actions .btn {
    width: 100%;
  }

  .toast-host {
    inset-inline: 12px;
    inset-block-end: 12px;
    max-width: none;
  }

  .auth-main {
    padding: 28px 16px;
  }

  .storage-row {
    grid-template-columns: 74px minmax(0, 1fr);
    row-gap: 4px;
  }

  .storage-value {
    grid-column: 2;
    justify-self: end;
  }

  .modal-foot {
    flex-direction: column-reverse;
  }

  .modal-foot .btn {
    width: 100%;
  }

  .preview-stage {
    padding: 10px;
  }

  .pagination {
    justify-content: center;
  }
}

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

@media print {
  .sidebar,
  .topbar,
  .site-header,
  .page-header,
  .page-footer,
  .toast-host,
  .modal-host {
    display: none !important;
  }

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