/* ============================================================
   RESPONSIVE — designed for mobile, not just stacked desktop
   ============================================================ */

@media (max-width: 860px) {
  .main-nav { display: none; }
  .mobile-menu-btn { display: flex; }

  .site-header__inner { height: var(--header-h); }
  .brand__name { font-size: var(--step-0); }

  .hero { padding: var(--sp-5) 0 var(--sp-5); }
  .hero__title { font-size: var(--step-4); }
  .hero__tagline { font-size: var(--step-0); }
  .hero__actions .btn { flex: 1; justify-content: center; }
  .hero__featured-strip { max-width: none; }

  .featured { grid-template-columns: 1fr; gap: var(--sp-4); }
  .featured__art { max-width: 280px; margin: 0 auto; }
  .featured__title { font-size: var(--step-3); text-align: center; }
  .featured__desc, .featured__stats, .featured__actions { text-align: center; justify-content: center; }

  .album-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); }

  .album-view__header { grid-template-columns: 1fr; text-align: center; }
  .album-view__cover { max-width: 220px; margin: 0 auto; }
  .album-view__meta-row, .album-view__actions { justify-content: center; }
  .album-view__banner { height: 160px; margin-bottom: -50px; }

  .track-list__head { display: none; }
  .track-row { grid-template-columns: 32px 1fr 60px; }
  .track-row__duration { text-align: right; }
  .track-row__actions { grid-column: 3; }
}

@media (max-width: 640px) {
  :root { --header-h: 64px; }
  .album-grid { grid-template-columns: repeat(2, 1fr); }
  .section-head__title { font-size: var(--step-1); }
  .hero__title { font-size: var(--step-3); }
  .site-footer { flex-direction: column; text-align: center; }
}

@media (max-width: 420px) {
  .album-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
  .rail { padding: 0 var(--sp-2); }
}

/* Prevent any horizontal overflow platform-wide */
html, body { max-width: 100%; overflow-x: hidden; }

/* TEFLON FAMILY RADIO RADIO — PHASE 4 PART 7 TRACK ACTION CONTROL POLISH */

/*
 * Favorite, Play Next and Queue controls are independent user actions.
 * They must never be compressed into the duration column or overlap one
 * another. No runtime authority is changed by this presentation layer.
 */

.track-row__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 0.45rem;
  min-width: 0;
}

.track-row__actions button,
.track-row__actions .icon-btn {
  flex: 0 0 auto;
  min-width: 44px;
  min-height: 44px;
  touch-action: manipulation;
}

.track-row__actions button:focus-visible,
.track-row__actions .icon-btn:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 2px;
}

/*
 * Existing <=860px layout previously placed actions in grid-column 3,
 * the same narrow 60px region used by track duration.
 *
 * Move the entire action group onto its own row instead.
 */
@media (max-width: 860px) {
  .track-row {
    align-items: center;
  }

  .track-row__actions {
    grid-column: 1 / -1;
    width: 100%;
    justify-content: flex-end;
    padding-top: 0.35rem;
  }

  .track-row__duration {
    grid-column: 3;
    grid-row: 1;
  }
}

/*
 * Cellphone presentation: controls remain separate and large enough for
 * touch, but use the full available row instead of stacking over Favorite.
 */
@media (max-width: 640px) {
  .track-row__actions {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns:
      repeat(auto-fit, minmax(44px, max-content));
    justify-content: start;
    gap: 0.5rem;
    padding-inline-start: 32px;
  }

  .track-row__actions button,
  .track-row__actions .icon-btn {
    min-width: 48px;
    min-height: 48px;
  }
}

@media (max-width: 420px) {
  .track-row__actions {
    padding-inline-start: 0;
    grid-template-columns:
      repeat(auto-fit, minmax(48px, 1fr));
  }
}

@media (forced-colors: active) {
  .track-row__actions button:focus-visible,
  .track-row__actions .icon-btn:focus-visible {
    outline-color: CanvasText;
  }
}

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