/*
========================================================
  BLOG STYLES — Aleksandar Mandić
  Loaded IN ADDITION to general.css, style.css, queries.css.
  Only contains what's unique to the blog (index card grid +
  article reading layout) plus the thank-you page, which reuses
  the blog page shell. The header, footer, buttons, colors,
  and typography all come from the shared stylesheets.

  Reuses the existing token system:
  - teal accent  #2a9d8f / hover #238478
  - light bg     #f1f3f5
  - dark         #1a1a1c
  - body text    #495057 / headings #1a1a1c / muted #6b7177
  - radius 9px, Archivo, 62.5% root (1rem = 10px)
========================================================
*/

/* ******************************************** */
/* SHARED — pushes content below the fixed-ish header */
/* ******************************************** */

/* The blog pages have no full-screen hero, so the header would
   overlap the first content. This spacer reserves the header height. */
.blog-page-main {
  background-color: #f1f3f5;
  padding-top: 9.6rem; /* matches header height */
}

/* ******************************************** */
/* BLOG INDEX — intro */
/* ******************************************** */

.blog-index-hero {
  background-color: #f1f3f5;
  padding: 6.4rem 0 4.8rem 0;
  text-align: center;
}

.blog-index-hero .section-label {
  color: #2a9d8f;
}

.blog-intro {
  font-size: clamp(18px, 15.3px + 0.73vw, 22px);
  line-height: 1.6;
  color: #495057;
  max-width: 70rem;
  margin: 0 auto;
}

/* ******************************************** */
/* BLOG INDEX — card grid */
/* ******************************************** */

.blog-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 4.8rem;
  padding-bottom: 9.6rem;
}

/* the whole card is a link */
.blog-card-link:link,
.blog-card-link:visited {
  text-decoration: none;
  display: block;
  border-radius: 11px;
  transition: all 0.3s;
}

.blog-card-link:hover,
.blog-card-link:active {
  transform: translateY(-0.6rem);
}

.blog-card {
  background-color: #fff;
  border-radius: 11px;
  overflow: hidden;
  box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.075);
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.3s;
}

.blog-card-link:hover .blog-card {
  box-shadow: 0 3.2rem 6.4rem rgba(0, 0, 0, 0.12);
}

.blog-card-img {
  width: 100%;
  aspect-ratio: 3 / 2; /* or 4/3 — taller, shows more of the image */
  object-fit: cover;
  object-position: center;
  display: block;
  filter: grayscale(15%) contrast(1.05);
}

.blog-card-body {
  padding: 3.2rem;
  display: flex;
  flex-direction: column;
  flex: 1; /* lets the read-more pin to the bottom */
}

.blog-card-meta {
  font-size: 1.3rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #2a9d8f;
  margin-bottom: 1.2rem;
}

.blog-card-title {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.5px;
  color: #1a1a1c;
  margin-bottom: 1.6rem;
}

.blog-card-excerpt {
  font-size: 1.6rem;
  line-height: 1.6;
  color: #495057;
  margin-bottom: 2.4rem;
}

.blog-card-readmore {
  margin-top: auto; /* pins to bottom of card */
  font-size: 1.7rem;
  font-weight: 600;
  color: #2a9d8f;
  transition: color 0.3s;
}

/* larger arrow that slides right on hover (wrap arrow in <span class="arrow">) */
.blog-card-readmore .arrow {
  display: inline-block;
  font-size: 2rem;
  transition: transform 0.3s ease;
}

.blog-card-link:hover .blog-card-readmore .arrow {
  transform: translateX(4px);
}

.blog-card-link:hover .blog-card-readmore {
  color: #238478;
}

/* ******************************************** */
/* SINGLE POST — article reading layout */
/* ******************************************** */

.post {
  background-color: #f1f3f5;
  padding: 6.4rem 0 9.6rem 0;
}

/* narrow column — long-form reads best at ~65ch */
.post-container {
  max-width: 76rem;
  margin: 0 auto;
  padding: 0 3.2rem;
}

.post-back-link:link,
.post-back-link:visited {
  display: block; /* own line — keeps it clear of .post-meta */
  font-size: 1.6rem;
  font-weight: 600;
  color: #2a9d8f;
  text-decoration: none;
  margin-bottom: 4rem;
  transition: color 0.3s;
}

.post-back-link:hover,
.post-back-link:active {
  color: #238478;
}

.post-meta {
  display: block; /* own line, below the back link */
  font-size: 1.3rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: #2a9d8f;
  margin-bottom: 1.6rem;
  /* text-align: center; */
}

.post-title {
  font-size: clamp(28px, 20.7px + 1.94vw, 42px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.5px;
  color: #1a1a1c;
  margin-bottom: 4.8rem;
}

.post-hero-img {
  width: 100%;
  border-radius: 11px;
  margin-bottom: 4.8rem;
  filter: grayscale(15%) contrast(1.05);
}

/* article body typography — generous for older readers.
   Each element carries its own explicit class (no descendant
   element selectors), so the styling is self-describing and
   never depends on the cascade. */
.post-body-text {
  font-size: 1.9rem;
  line-height: 1.8;
  color: #495057;
  margin-bottom: 2.8rem;
}

.post-body-heading {
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.5px;
  color: #1a1a1c;
  margin: 5.6rem 0 2.4rem 0;
}

.post-body-subheading {
  font-size: 2.2rem;
  font-weight: 600;
  line-height: 1.3;
  color: #3a3d42;
  margin: 3.6rem 0 1.6rem 0;
}

.post-body-list {
  margin: 0 0 2.8rem 2.4rem;
}

.post-body-list-item {
  font-size: 1.9rem;
  line-height: 1.8;
  color: #495057;
  margin-bottom: 1.2rem;
}

.post-body-bold {
  color: #1a1a1c;
  font-weight: 600;
}

.post-body-link:link,
.post-body-link:visited {
  color: #2a9d8f;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.3s;
}

.post-body-link:hover,
.post-body-link:active {
  color: #238478;
}

/* pull-quote / Socrates-style accent, reused look */
.post-body-quote {
  font-style: italic;
  font-size: 2.1rem;
  line-height: 1.5;
  color: #3a3d42;
  border-left: 3px solid #2a9d8f;
  padding-left: 2rem;
  margin: 4rem 0;
}

/* in-article CTA box */
.post-cta {
  background-color: #1a1a1c;
  border-radius: 11px;
  padding: 4.8rem 4rem;
  text-align: center;
  margin-top: 6.4rem;
}

.post-cta-heading {
  font-size: 2.6rem;
  font-weight: 700;
  color: #f1f3f5;
  margin-bottom: 1.6rem;
  letter-spacing: -0.5px;
}

.post-cta-text {
  font-size: 1.7rem;
  line-height: 1.6;
  color: #ced4da;
  margin-bottom: 3.2rem;
  max-width: 52rem;
  margin-left: auto;
  margin-right: auto;
}

/* related posts at the foot of an article */
.post-related {
  background-color: #f1f3f5;
  padding: 0 0 9.6rem 0;
}

.post-related-heading {
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: #1a1a1c;
  margin-bottom: 3.2rem;
  text-align: center;
}

/* ******************************************** */
/* THANK-YOU PAGE — contact form redirect target, reuses the blog page shell */
/* ******************************************** */

/* tall enough that the footer doesn't ride up on big screens */
.thank-you {
  min-height: calc(100vh - 9.6rem);
  display: flex;
  align-items: center;
  padding: 6.4rem 0 9.6rem 0;
  text-align: center;
}

.thank-you .container {
  max-width: 76rem;
}

.thank-you-icon {
  width: 6.4rem;
  height: 6.4rem;
  margin-bottom: 2.4rem;
}

.thank-you .section-label {
  color: #2a9d8f;
}

.thank-you .heading-secondary {
  margin-bottom: 2.4rem;
}

.thank-you-text {
  font-size: clamp(18px, 15.3px + 0.73vw, 22px);
  line-height: 1.6;
  color: #495057;
  margin-bottom: 4.8rem;
}

.thank-you-note {
  font-size: 1.8rem;
  line-height: 1.6;
  color: #6b7177;
  margin-top: 4.8rem;
}

.thank-you-link:link,
.thank-you-link:visited {
  color: #2a9d8f;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.3s;
}

.thank-you-link:hover,
.thank-you-link:active {
  color: #238478;
}

/* ******************************************** */
/* RESPONSIVE — em-based, matching queries.css style */
/* ******************************************** */

/* BELOW 944px — single-column card grid */
@media (max-width: 59em) {
  .blog-grid {
    grid-template-columns: 1fr;
    gap: 3.2rem;
  }
}

/* BELOW 544px — tighten article padding */
@media (max-width: 34em) {
  .post-cta {
    padding: 3.6rem 2.4rem;
  }
  .blog-card-body {
    padding: 2.4rem;
  }
}