/* ==========================================================================
   Layout - Page structures & Responsive Breakpoints
   ========================================================================== */

/* Home Page - Vertically centered */
.page-home {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--space-lg);
}

.page-home main {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  flex: 1;
  width: 100%;
  max-width: var(--container-width);
  padding-top: 18vh;
}

.page-home .logo {
  margin-bottom: var(--space-xl);
}

.page-home .search-mode-nav {
  margin-bottom: var(--space-lg);
}

/* Search Results Page */
.page-search main {
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: var(--space-md);
  width: 100%;
}

/* Show Page (Song Detail) */
.page-show main {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md);
  width: 100%;
}

/* FAQ Page */
.page-faq {
  min-height: 100vh;
}

.page-faq main {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: var(--space-lg) var(--space-md);
  width: 100%;
  text-align: center;
}

.page-faq .logo {
  margin-bottom: var(--space-lg);
}

.page-faq h2 {
  margin-bottom: var(--space-lg);
  color: var(--color-text-secondary);
  font-weight: 400;
}

.page-faq .faq-list {
  text-align: left;
}

/* ==========================================================================
   Responsive Breakpoints
   ========================================================================== */

/* Base (0-575px): Mobile-first */
@media (max-width: 575px) {
  .search-bar {
    flex-direction: column;
    border-radius: var(--radius-md);
    padding: var(--space-sm);
  }

  .search-bar__input {
    width: 100%;
    text-align: center;
  }

  .search-bar__btn {
    width: 100%;
    padding: var(--space-sm);
    border-radius: var(--radius-md);
  }

  .advanced-options {
    grid-template-columns: auto 1fr;
  }

  .search-header__logo {
    display: none;
  }

  .search-header__inner {
    flex-direction: column;
    gap: var(--space-sm);
  }

  .search-header .search-bar {
    max-width: 100%;
  }

  .info-bar {
    flex-direction: column;
    align-items: flex-start;
  }

  .song-detail__meta {
    grid-template-columns: 1fr;
  }

  .song-detail__actions {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
}

/* 576px+ */
@media (min-width: 576px) {
  .search-bar {
    flex-direction: row;
  }

  .advanced-options {
    grid-template-columns: auto 1fr auto 1fr;
  }
}

/* 768px+ */
@media (min-width: 768px) {
  .page-home {
    padding: var(--space-xl);
  }

  .page-show main,
  .page-faq main {
    padding: var(--space-xl) var(--space-lg);
  }

  .song-detail__meta {
    grid-template-columns: auto 1fr auto 1fr;
  }
}

/* 992px+ */
@media (min-width: 992px) {
  :root {
    --container-width: 800px;
    --container-wide: 900px;
  }
}

/* Touch targets for coarse pointers (touch devices) */
@media (pointer: coarse) {
  .search-bar__btn,
  .pagination a,
  .song-detail__back,
  .theme-toggle {
    min-height: 44px;
    min-width: 44px;
  }

  .advanced-options select,
  .advanced-options input[type="checkbox"] {
    min-height: 44px;
    min-width: 44px;
  }

  .search-mode-nav a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}