/* ============================================================
   KAMO. G ARTIST WEBSITE — RESPONSIVE STYLES
   Campaign refinement
   ============================================================
   Breakpoints:
   - Desktop: 1280px+
   - Tablet: 992px
   - Mobile Landscape: 768px
   - Mobile Portrait: 576px
   ============================================================ */


/* ============================================================
   TABLET (max-width: 992px)
   ============================================================ */

@media (max-width: 992px) {
  /* Layout */
  .container {
    padding: 0 var(--space-md);
  }

  .app-content {
    padding: var(--space-md);
  }

  /* Grids */
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

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

  /* Dashboard */
  .metrics-row {
    grid-template-columns: repeat(2, 1fr);
  }

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

  /* Music */
  .music-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Media */
  .media-gallery {
    grid-template-columns: repeat(2, 1fr);
  }

  /* About */
  .about-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* ============================================================
   MOBILE LANDSCAPE (max-width: 768px)
   ============================================================ */

@media (max-width: 768px) {
  /* Typography */
  h1 {
    font-size: var(--h1-size-mobile);
  }

  h2 {
    font-size: var(--h2-size-mobile);
  }

  /* Layout */
  .section {
    padding: var(--space-lg) 0;
  }

  .section--lg {
    padding: var(--space-xl) 0;
  }

  /* Grids */
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  /* Dashboard Hero */
  .dashboard-hero {
    flex-direction: column;
    text-align: center;
    padding: var(--space-lg);
  }

  .dashboard-hero__stats {
    width: 100%;
    justify-content: center;
  }

  .dashboard-hero__actions {
    justify-content: center;
  }

  .dashboard-hero::before {
    display: none;
  }

  /* Quick Actions */
  .quick-actions {
    grid-template-columns: 1fr;
  }

  /* EP Spotlight */
  .ep-spotlight {
    grid-template-columns: 1fr;
    text-align: center;
    padding: var(--space-lg);
  }

  .ep-spotlight__cover {
    margin: 0 auto;
    width: 160px;
    height: 160px;
  }

  .ep-spotlight__countdown {
    justify-content: center;
  }

  .ep-spotlight__actions {
    justify-content: center;
  }

  /* Bookings */
  .bookings-layout {
    grid-template-columns: 1fr;
  }

  /* Radio */
  .radio-layout {
    grid-template-columns: 1fr;
  }

  /* Media */
  .media-gallery {
    grid-template-columns: repeat(2, 1fr);
  }

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

  /* About */
  .about-hero {
    height: 280px;
  }

  .about-hero__title {
    font-size: 24px;
  }

  .about-content {
    grid-template-columns: 1fr;
  }

  .about-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Footer */
  .footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .footer__bottom {
    flex-direction: column;
    gap: var(--space-sm);
    text-align: center;
  }

  /* CTA Strip */
  .cta-strip {
    flex-direction: column;
    text-align: center;
  }

  /* Page Hero */
  .page-hero__title {
    font-size: var(--h2-size-mobile);
  }
}


/* ============================================================
   MOBILE PORTRAIT (max-width: 576px)
   ============================================================ */

@media (max-width: 576px) {
  /* Layout */
  .container {
    padding: 0 var(--space-sm);
  }

  .app-content {
    padding: var(--space-sm);
  }

  /* Grids */
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  /* Dashboard */
  .metrics-row {
    grid-template-columns: 1fr;
  }

  /* Music */
  .music-grid {
    grid-template-columns: 1fr;
  }

  /* Media */
  .media-gallery {
    grid-template-columns: 1fr;
  }

  /* About */
  .about-stats {
    grid-template-columns: 1fr;
  }

  /* Buttons */
  .btn--lg {
    padding: 12px 24px;
    font-size: 11px;
  }

  /* Dashboard Hero */
  .dashboard-hero__name {
    font-size: 22px;
  }

  .dashboard-hero__stat-value {
    font-size: 18px;
  }

  /* Cards */
  .dashboard-card__value {
    font-size: 22px;
  }

  /* EP Spotlight */
  .ep-spotlight__title {
    font-size: 20px;
  }

  .countdown-block {
    min-width: 64px;
    padding: 8px 12px;
  }

  .countdown-block__number {
    font-size: 22px;
  }

  /* Radio */
  .radio-main {
    padding: var(--space-lg);
  }

  .radio-main__title {
    font-size: 18px;
  }

  /* About */
  .about-hero {
    height: 220px;
  }

  .about-stat__value {
    font-size: 22px;
  }

  /* CTA Strip */
  .cta-strip {
    padding: var(--space-lg);
  }

  .cta-strip__title {
    font-size: 20px;
  }

  /* Page Hero */
  .page-hero {
    padding: var(--space-lg) 0;
  }
}


/* ============================================================
   PRINT STYLES
   ============================================================ */

@media print {
  .navbar,
  .sidebar,
  .footer {
    display: none;
  }

  .app-main {
    margin-left: 0;
    padding-top: 0;
  }

  body {
    background: white;
    color: black;
  }

  a {
    color: black;
  }
}

/* Campaign refinement breakpoints */
@media (max-width: 992px) {
  .app-content { padding: 24px; }
  .latest-grid { grid-template-columns: 1fr 1fr; }
  .latest-card--release { grid-row: span 2; }
  .about-content { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .navbar { padding: 0 12px; }
  .navbar__actions .btn { padding: 10px 12px; letter-spacing: 0.4px; }
  .campaign-hero { min-height: 680px; }
  .campaign-hero__media img { object-position: 56% 22%; }
  .campaign-hero::after { background: linear-gradient(0deg, rgba(0, 0, 0, 0.98) 0%, rgba(0, 0, 0, 0.8) 48%, rgba(0, 0, 0, 0.12) 80%); }
  .campaign-hero__content { max-width: none; min-height: inherit; padding: 32px; justify-content: flex-end; }
  .campaign-hero h1 { font-size: clamp(48px, 14vw, 78px); letter-spacing: -3px; }
  .latest-grid { grid-template-columns: 1fr; }
  .latest-card, .latest-card--release { min-height: 320px; }
  .about-destinations { align-items: flex-start; flex-direction: column; }
  .download-card__audio { width: 100%; }
}

@media (max-width: 576px) {
  .app-content { padding: 12px; }
  .navbar__brand { font-size: 14px; }
  .navbar__actions .btn { font-size: 9px; padding: 9px 10px; }
  .campaign-hero { min-height: 650px; border-radius: var(--radius-md); }
  .campaign-hero__content { padding: 24px 20px; }
  .campaign-hero__actions { width: 100%; }
  .campaign-hero__actions .btn { width: 100%; }
  .latest { padding-top: 56px; }
  .page-hero { padding: 44px 4px; }
  .page-hero__title { font-size: 38px; }
  .ep-spotlight, .radio-main, .about-release { padding: 20px; }
  .spotify-embed { height: 352px; }
  .media-gallery__item { aspect-ratio: 4 / 5; }
  .about-hero { height: 440px; }
  .about-hero__overlay { padding: 24px; }
  .about-hero__title { font-size: 38px; }
  .about-destinations__links { gap: 18px; }
  .footer__nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__socials { flex-wrap: wrap; }
}