/*
 * responsive.css
 * Προσαρμογές για μεγαλύτερα πλάτη οθόνης, πάνω στο mobile-first στυλ
 * του style.css. Δύο σημεία διακοπής: 640px (tablet) και 900px (desktop).
 */

/* ============ Tablet και άνω (≥ 640px) ============ */

@media (min-width: 40em) {
  :root {
    --gutter: 2rem;
  }

  /* Hero: κείμενο και διάγραμμα δίπλα-δίπλα */
  .hero__grid {
    grid-template-columns: 1.3fr 1fr;
  }

  /* Βιβλίο: εξώφυλλο δίπλα στο κείμενο */
  .book-teaser {
    grid-template-columns: 14rem 1fr;
  }

  /* Κάρτες: δύο στήλες */
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============ Desktop (≥ 900px) ============ */

@media (min-width: 56.25em) {
  :root {
    --section-gap: 2.5rem;
  }

  /* Κάρτες: τρεις στήλες όταν υπάρχει αρκετός χώρος */
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Ελαφρώς μεγαλύτερο κενό στο grid του hero σε πλατιές οθόνες */
  .hero__grid {
    gap: var(--space-5);
  }
}