/* Breakpoints. Ported from design/kos-hp/project/styles.css lines 215-239.
   Section-specific responsive rules will be added as sections are ported. */

@media (max-width: 1100px) {
  .hero { grid-template-columns: 1fr; }
  /* Nav links collapse into the hamburger drawer at tablet — desktop only above 1100px. */
  .nav-links { display: none; }
  /* Release blocks: drop the date aside, keep cover + body side-by-side */
  .release-grid { grid-template-columns: 1fr 1fr; gap: 60px; }
  .release-aside { display: none; }
  /* Featured tracks reflow from 5-up to 3-up */
  .tracks .grid { grid-template-columns: repeat(3, 1fr); }
  /* Story + Join stack vertically below tablet */
  .story { grid-template-columns: 1fr; }
  .join .shell { grid-template-columns: 1fr; }
  .join-form { margin-left: 0; }
  .join .note { text-align: left; margin-left: 0; }
  /* Listen platforms reflow from 5-up to 2-up */
  .listen .platforms { grid-template-columns: repeat(2, 1fr); }
  .platform { border-bottom: 3px solid rgba(255,255,255,0.22); }
  .platform:nth-child(2n) { border-right: 0; }
  .platform:nth-last-child(-n+1) { border-bottom: 0; }
  .footer .inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  .shell { padding: 0 20px; }
  .release-grid { grid-template-columns: 1fr; gap: 40px; }
  .tracks .grid { grid-template-columns: repeat(2, 1fr); }
  /* Listen header + platforms collapse to single column */
  .listen .head { grid-template-columns: 1fr; }
  .listen .platforms { grid-template-columns: 1fr; }
  .platform { border-right: 0; }
  .footer .inner { grid-template-columns: 1fr; }
  .footer .meta { flex-direction: column; gap: 14px; text-align: center; }
}