/* --- GLOBAL STYLES --- */
body {
  background-color: white;
  margin: 0;
  font-family: sans-serif;
}

a {
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease-in-out;
}

/* --- SHARED COMPONENTS: HEADER --- */
header {
  background-color: black;
  color: white;
  padding: 20px 0;
  text-align: center;
  position: relative;
  z-index: 10;
}
header h1 { margin: 0; text-transform: lowercase; font-size: 2.3em; }
header h1 a { color: white; text-decoration: none; }
header h1 a:hover { color: #888; }
nav { margin-top: 10px; }
nav a { color: white; text-decoration: none; margin: 0 15px; font-weight: bold; transition: color 0.3s; }
nav a:hover { color: #888; }

/* --- SHARED COMPONENTS: MAIN CONTENT AREA --- */
main {
  max-width: 1400px;
  margin: 40px auto;
  padding: 0 20px;
}

/* --- RESPONSIVE MEDIA QUERIES --- */
/* This is the magic that will apply to EVERY page that links this stylesheet. */
@media (max-width: 1000px) {
  /* Stack the hero section and re-order it */
  .hero-section {
    grid-template-columns: 1fr;
  }
  .hero-section .featured-article {
    order: 1;
  }
  .hero-section .side-reviews:first-child {
    order: 2;
  }
  .hero-section .side-reviews:last-child {
    display: none;
  }

  /* Stack all other multi-column grids */
  .main-grid,
  .bottom-articles-grid,
  .final-section-grid {
    grid-template-columns: 1fr; /* This fixes the Dylan article on mobile */
  }

  /* Adjust heights and font sizes for mobile */
  .recent-reviews-column { height: auto; }
  .featured-article h2 { font-size: 2em; }
  .article-card-large h3 { font-size: 1.5em; }
}