/* ============================================
   SIGN — Responsive overrides v2
   ============================================ */

/* ── Shared overflow safety ── */
.post-list,
.table-wrap,
.manage-page,
.bot-dashboard,
.moneylab-wrap,
.announcements-page,
.profile-page,
.board-container,
.auth-container {
  min-width: 0;
  max-width: 100%;
}

.post-list,
.manage-page,
.bot-dashboard .table-wrap,
.moneylab-section .table-wrap {
  overflow-x: auto;
}

.post-list table,
.manage-table,
.bot-dashboard table,
.moneylab-section table {
  min-width: 640px;
}

/* ── Tablet (≤ 1024px) ── */
@media (max-width: 1024px) {
  .services,
  .event,
  .contact {
    padding-left: 5%;
    padding-right: 5%;
  }

  .contact-container {
    gap: 20px;
  }

  .contact-container img {
    width: min(360px, 100%);
    height: auto;
  }

  .auth-container {
    margin-top: 36px;
    margin-bottom: 36px;
  }
}

/* ── Mid-width (≤ 900px) ── */
@media (max-width: 900px) {
  html {
    --header-offset: 56px;
  }

  .site-header-inner {
    padding: 0 16px;
  }

  .logo img {
    height: 30px;
  }

  .mobile-menu-toggle {
    height: 36px;
    padding: 0 10px;
    font-size: 13px;
  }

  .hero {
    min-height: 68vh;
    height: auto;
    padding: 20px 5%;
  }

  .services,
  .event,
  .contact {
    padding-top: 32px;
    padding-bottom: 32px;
  }

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

  .services-card {
    width: 100%;
  }

  .event-header {
    flex-direction: column;
    align-items: flex-start;
  }

  .event-item {
    flex: 0 0 min(80vw, 320px);
  }

  .contact-container {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .contact-container img {
    width: min(420px, 100%);
    max-width: 100%;
    margin: 0 auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
  }

  .auth-container {
    margin: 20px auto;
    max-width: calc(100% - 24px);
    padding: 20px 16px;
  }

  .django-messages-list {
    padding-left: 4%;
    padding-right: 4%;
  }

  .social-account-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .account-links,
  .account-links-group,
  .quick-links {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .account-link-button,
  .shop-link {
    width: 100%;
    margin: 0;
    justify-content: center;
    text-align: center;
  }

  .board-container {
    margin: 16px auto;
    max-width: calc(100% - 16px);
    padding: 16px;
  }

  .post-list th,
  .post-list td {
    padding: 10px;
    font-size: 14px;
  }

  .button-group {
    text-align: left;
  }

  .button-group .board-button {
    margin: 0 8px 8px 0;
  }

  .confirm-delete .button-group {
    flex-direction: column;
    gap: 10px;
  }

  .announcements-page {
    padding: 24px 5%;
  }

  .page-header h1 {
    font-size: 24px;
  }

  .announcement-grid {
    grid-template-columns: 1fr;
  }

  .image-actions,
  .detail-actions {
    flex-wrap: wrap;
  }

  .moneylab-wrap {
    padding: 20px 4% 40px;
  }

  .moneylab-section {
    padding: 14px;
  }

  .bot-dashboard {
    padding-left: 10px;
    padding-right: 10px;
  }

  .server-select form {
    display: grid;
    gap: 8px;
    align-items: start;
  }

  .server-select select {
    min-width: 0;
    width: 100%;
  }

  .settings-nav {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    position: static;
    gap: 8px;
  }

  .settings-tab {
    white-space: nowrap;
    flex: 0 0 auto;
  }

  .feature-grid {
    grid-template-columns: 1fr;
  }

  .profile-page {
    padding: 20px 4%;
  }

  .profile-hero-inner {
    grid-template-columns: 1fr;
    align-items: start;
    min-height: 0;
    gap: 12px;
    padding: 16px;
  }

  .profile-avatar-box {
    width: 100px;
    height: 100px;
  }

  .profile-edit-btn {
    width: 100%;
    justify-content: center;
  }

  .music-layout {
    grid-template-columns: 1fr;
  }

  .album-frame {
    height: 160px;
  }

  .discord-connect-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .settings-actions-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Small mobile (≤ 560px) ── */
@media (max-width: 560px) {
  html {
    --header-offset: 56px;
  }

  .site-header-inner {
    padding: 0 12px;
  }

  .mobile-menu-toggle {
    padding: 0 8px;
  }

  .mobile-menu-toggle span {
    display: none;
  }

  .auth-required-toast {
    right: 8px;
    left: 8px;
    bottom: 8px;
  }

  .auth-required-toast-card {
    width: auto;
  }

  .hero .hero-text h1 {
    font-size: clamp(1.8rem, 10vw, 2.2rem);
  }

  .hero .hero-text p {
    font-size: 14px;
  }

  .hero .cta-button,
  .board-button,
  .invite-btn,
  .attendance-btn,
  .btn-primary,
  .btn-secondary,
  .btn-danger {
    width: 100%;
  }

  .event-item {
    flex-basis: 74vw;
  }

  .services-container {
    grid-template-columns: 1fr;
  }

  .post-detail .post-meta-actions {
    justify-content: flex-start;
  }

  .announcement-form {
    padding: 14px;
  }

  input,
  select,
  textarea,
  button {
    font-size: 16px;
  }

  .manage-page {
    padding: 14px 10px;
  }

  .manage-table {
    min-width: 620px;
  }

  .settings-modal,
  .crop-modal {
    padding: 8px;
  }
}