/*
📚 BLOG PAGE STYLES

Theme styles come from:
../../styles/theme.css

Sidebar layout lives in theme.css (section 14).
This file is for the blog.html post cards only.


*****

AI Disclaimer

Vast majority of this site and pages was built by myself and no
course work pages were generated using AI. 

Things AI was used for; Redundant tasks, catching CSS/HTML errors, making fine tuned/minor adjustments to styles and elements on pages (If I wanted a button moved over a few pixels and just couldn't figure out how), checking links, and periodically reviewing my work upon request.

*****


Guide
1. Latest posts (3 long cards)
2. Earlier weeks (small cards)

*/



/* --- 1. LATEST POSTS --- */
.posts-latest {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;

}



/* --- 2. EARLIER WEEKS --- */
/* phone = 1 across, tablet = 2, desktop = 4 */
.earlier-weeks h2 {
  margin: 0 0 16px;
  font-size: 30px;

}


.posts-archive {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;

}


.card--mini h3 {
  font-size: 22px;

}

.posts-archive .card-links {
  align-items: flex-start;
}

.posts-archive .card-links a {
  text-decoration: underline;
  transform-origin: left center;
}


@media (min-width: 700px) {
  .posts-archive {
    grid-template-columns: repeat(2, minmax(0, 1fr));

  }

}


@media (min-width: 1000px) {
  .posts-archive {
    grid-template-columns: repeat(4, minmax(0, 1fr));

  }

}