/* ========================================
   Responsive Layout Framework
   ======================================== */

/* Mobile-first approach: Base styles are mobile,
   then we enhance for larger screens */

/* ========================================
   Mobile (Default: < 768px)
   ======================================== */

/* Body padding adjustments for mobile */
body {
  padding: var(--spacing-md);
}

/* Section spacing for mobile */
#album-section,
#about-section {
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

/* ========================================
   Tablet (768px - 1023px)
   ======================================== */

@media (min-width: 768px) {
  /* Increase body padding */
  body {
    padding: var(--spacing-lg) var(--spacing-xl);
  }

  /* Section spacing */
  #album-section,
  #about-section {
    padding: var(--spacing-xl);
    margin-bottom: var(--spacing-2xl);
  }

  /* Album header layout */
  #album-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-xl);
    text-align: left;
  }

  .album-cover-container {
    flex-shrink: 0;
  }

  .album-info {
    flex-grow: 1;
  }

  /* Band content layout - side by side on tablet */
  .band-content {
    flex-direction: row;
    gap: var(--spacing-2xl);
  }

  .band-photo-container {
    flex: 0 0 40%;
  }

  .band-bio-container {
    flex: 1;
  }

  /* Typography adjustments */
  h1 {
    font-size: var(--font-size-4xl);
  }

  h2 {
    font-size: var(--font-size-3xl);
  }

  .section-heading {
    font-size: var(--font-size-3xl);
  }
}

/* ========================================
   Desktop (>= 1024px)
   ======================================== */

@media (min-width: 1024px) {
  /* Further increase body padding */
  body {
    padding: var(--spacing-2xl) var(--spacing-xl);
  }

  /* Section max-width and padding */
  section {
    max-width: 1200px;
  }

  #album-section,
  #about-section {
    padding: var(--spacing-2xl);
  }

  /* Player controls layout - horizontal on desktop */
  #player-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
  }

  /* Track list - two-column layout option (can be enabled later) */
  /* This is commented out but available for future use
  #track-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-sm);
  }
  */

  /* Typography scaling for large screens */
  h1 {
    font-size: 3rem;
  }

  h2 {
    font-size: 2.5rem;
  }

  .section-heading {
    font-size: 2.5rem;
  }

  .band-name {
    font-size: 2.5rem;
  }
}

/* ========================================
   Large Desktop (>= 1440px)
   ======================================== */

@media (min-width: 1440px) {
  /* Max width for very large screens */
  section {
    max-width: 1400px;
  }

  /* Slightly larger typography */
  html {
    font-size: 18px;
  }
}

/* ========================================
   Mobile-specific adjustments
   ======================================== */

@media (max-width: 767px) {
  /* Stack album header vertically on mobile */
  #album-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .album-cover-container {
    margin-bottom: var(--spacing-lg);
  }

  /* Ensure images don't overflow on small screens */
  .album-cover-image,
  .band-photo-image {
    max-width: 100%;
    height: auto;
  }

  /* Smaller typography on mobile */
  h1 {
    font-size: var(--font-size-3xl);
  }

  h2 {
    font-size: var(--font-size-2xl);
  }

  .section-heading {
    font-size: var(--font-size-2xl);
  }

  .band-name {
    font-size: var(--font-size-2xl);
  }

  /* Stack band content vertically */
  .band-content {
    flex-direction: column;
  }

  /* Player controls - mobile optimization (will be detailed in T048) */
  .controls-container {
    flex-wrap: wrap;
    justify-content: center;
  }

  .volume-container {
    width: 100%;
    margin-top: var(--spacing-md);
  }
}

/* ========================================
   Touch device optimizations
   ======================================== */

@media (hover: none) and (pointer: coarse) {
  /* Larger touch targets for mobile */
  button,
  .track-item,
  a {
    min-height: 44px; /* iOS recommended minimum */
    min-width: 44px;
  }

  /* Increase spacing for better touch accuracy */
  .control-btn {
    padding: var(--spacing-md);
  }
}

/* ========================================
   Print styles
   ======================================== */

@media print {
  /* Hide interactive elements when printing */
  #player-container,
  .track-download-btn,
  #album-download-btn,
  audio {
    display: none !important;
  }

  /* Optimize for print */
  body {
    background-color: white;
    color: black;
  }

  #album-section,
  #about-section {
    background-color: white;
    box-shadow: none;
  }

  /* Ensure images print well */
  .album-cover-image,
  .band-photo-image {
    max-width: 100%;
    page-break-inside: avoid;
  }
}

/* ========================================
   Reduced motion preference
   ======================================== */

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

  /* Disable SVG animations */
  animate {
    display: none;
  }
}

/* ========================================
   High contrast mode support
   ======================================== */

@media (prefers-contrast: high) {
  :root {
    --bg-primary: #000000;
    --bg-secondary: #1a1a1a;
    --text-primary: #ffffff;
    --border-color: #ffffff;
  }

  /* Ensure borders are visible */
  button,
  .track-item,
  input[type="range"] {
    border: 2px solid var(--border-color);
  }
}