/* ==========================================================================
   Brick Breaker Games - responsive layer
   Mobile-first base lives in style.css. These are progressive enhancements
   for wider viewports plus print and orientation helpers.
   Breakpoints: 560px / 760px / 1000px / 1180px
   ========================================================================== */

/* ---------------------------------------------------------- >= 560px ---- */
@media (min-width: 560px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .scores-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cookie-inner { grid-template-columns: 1fr auto; align-items: center; }
  .newsletter form { grid-template-columns: 1fr auto; align-items: start; }
  .newsletter form .field { margin-bottom: 0; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section { padding: 3rem 0; }
}

/* ---------------------------------------------------------- >= 760px ---- */
@media (min-width: 760px) {
  body { font-size: 17px; }
  .grid-4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .hero { padding: 3.2rem 0 3.4rem; }
  .hero-inner { grid-template-columns: 1.05fr .95fr; gap: 2.4rem; }
  .section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; }
  .author-box { grid-template-columns: 96px 1fr; padding: 1.3rem 1.4rem; }
  .author-box img { width: 96px; height: 96px; }
  .wrap { padding-inline: 1.5rem; }
  .ad-slot { min-height: 110px; }
}

/* --------------------------------------------------------- >= 1000px ---- */
@media (min-width: 1000px) {
  .nav-toggle { display: none; }
  .main-nav {
    display: block;
    width: auto;
    border-top: 0;
    padding: 0;
    margin-left: auto;
  }
  .main-nav ul { display: flex; align-items: center; gap: .15rem; }
  .main-nav a {
    padding: .45rem .7rem;
    border-bottom: 0;
    border-radius: var(--radius-sm);
    font-size: .95rem;
  }
  .main-nav a:hover { background: var(--bg-alt); }
  .main-nav a[aria-current="page"] { background: var(--brand-soft); color: var(--brand); }
  .header-tools { margin-top: 0; margin-left: .5rem; }
  .brand-text small { font-size: .65rem; }

  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  .layout-sidebar { grid-template-columns: minmax(0, 1fr) 320px; gap: 2.6rem; }
  .sidebar { position: sticky; top: calc(var(--header-h) + 1rem); }
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
  .section { padding: 3.6rem 0; }
}

/* --------------------------------------------------------- >= 1180px ---- */
@media (min-width: 1180px) {
  .prose { font-size: 1.08rem; }
  .hero h1 { max-width: 15ch; }
}

/* ------------------------------------------------- Landscape phones ----- */
@media (max-width: 900px) and (orientation: landscape) {
  .site-header { position: static; }
  .game-stage { padding: .35rem; }
  .game-hud { font-size: .8rem; padding: .3rem .2rem .4rem; }
  .touch-pad button { min-height: 44px; }
}

/* --------------------------------------------- Coarse pointer tweaks ---- */
@media (pointer: coarse) {
  .btn { padding: .8rem 1.3rem; }
  .chip { padding: .5rem .95rem; }
  .main-nav a { padding-block: .75rem; }
}

/* -------------------------------------------------- Reduced data/motion - */
@media (prefers-reduced-motion: reduce) {
  .reading-progress { transition: none; }
}

/* ------------------------------------------------------------- Print ---- */
@media print {
  .site-header, .site-footer, .ad-slot, .cookie-banner, .share,
  .game-stage, .game-controls, .touch-pad, .sidebar, .newsletter,
  .reading-progress, .skip-link { display: none !important; }
  body { font-size: 12pt; color: #000; background: #fff; }
  .layout-sidebar { display: block; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .85em; color: #444; }
  .prose > h2 { page-break-after: avoid; }
}