/*
 * Het blogoverzicht (/blog/).
 *
 * Laadt alleen op de berichtenpagina (inc/assets.php, regel R8).
 *
 * Alle maten zijn gemeten op samdesign.nl met getComputedStyle en
 * getBoundingClientRect (R9), op 1440, 1024, 768 en 390px. Breekpunten zijn
 * dezelfde als in main.css: 1024px en 767px.
 *
 * Twee dingen wijken bewust af van de bestaande site en staan als zodanig in
 * CLAUDE.md §14: de draaiende tekstring stopt bij prefers-reduced-motion (§8),
 * en de kaarttitel is een h2 in plaats van een h3, zodat de koppenreeks onder
 * de h1 niet springt (§6). De maten van die kop blijven gelijk.
 */

/* ==================================================================
   Hero
   ================================================================== */

/*
 * De hero houdt op mobiel 30px lucht in plaats van de 20px van .container.
 * Zo staat het op de bestaande site: de kaartenlijst eronder blijft daar wél
 * op 20px staan.
 */
@media (max-width: 767px) {
  .blogHeroContainer {
    padding-inline: 30px;
  }
}

/*
 * De positioneercontext van het stempel. Omdat .container de lucht met padding
 * maakt, is dit blok precies de inhoudsbreedte — en dus telt "15%" hieronder
 * over 1280px, net als op de bestaande site.
 */
.blogHero {
  position: relative;
  margin-top: 80px;
}

.blogTitle {
  font-size: 100px;
  font-weight: 500;
  line-height: 90px;
  letter-spacing: -0.05em;
  color: var(--colorNavy);
}

.blogTitleDot {
  color: var(--colorPinkDeep);
}

/*
 * De streep links is een border op de alinea zelf. De 631px is de streep (1px)
 * plus de lucht (30px) plus de tekstkolom (600px) uit het ontwerp.
 */
.blogIntro {
  max-width: 631px;
  margin-top: 40px;
  padding-left: 30px;
  border-left: 1px solid var(--colorNavy);
  font-size: 20px;
  font-weight: 400;
  line-height: 33px;
  color: var(--colorNavy);
}

/* ------------------------------------------------------------------
   Het stempel
   ------------------------------------------------------------------ */

/*
 * Onderkant gelijk met de onderkant van de hero, rechts 15% van de
 * inhoudsbreedte vrij. Vanaf tablet schuift hij omhoog en naar de rand; op
 * mobiel staat hij er niet.
 */
.blogStamp {
  position: absolute;
  right: 15%;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 157px;
  height: 157px;
}

/* Het draaien doet pages/blog.js met Motion (§8). Staat JavaScript uit, dan
   staat de ring stil — er valt niets aan te missen. */
.blogStampRing {
  position: absolute;
  width: 157px;
  height: 157px;
}

/*
 * Een inline SVG met viewBox krimpt in een flexbox tot niets, omdat de reset er
 * max-width: 100% op zet. Vandaar de expliciete maat.
 */
.blogStampMark {
  flex: none;
  width: 39.211px;
  height: 60.115px;

  /* De ring staat absoluut en zou het beeldmerk anders afdekken. z-index werkt
     hier zonder position, omdat dit een flex-item is. */
  z-index: 1;
}

/* ==================================================================
   De kaartenlijst
   ================================================================== */

/*
 * De 80px hierboven en de 80px onder de hero vallen op de bestaande site samen
 * tot één marge van 80px; dat gebeurt hier ook, omdat de hero geen ondermarge
 * heeft.
 */
.postList {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-top: 80px;
}

/* De onderruimte hoort bij het laatste blok: dat is de lijst zelf, of de
   "meer"-link eronder. */
.postList:last-child,
.postListEmpty,
.postListMore {
  margin-bottom: 150px;
}

.postListEmpty {
  margin-top: 80px;
  font-size: 20px;
  line-height: 33px;
}

/* ------------------------------------------------------------------
   Eén kaart
   ------------------------------------------------------------------ */

.postCardMedia {
  display: block;
}

/*
 * De hoogte staat vast en de breedte volgt de kolom, dus de afbeelding wordt
 * bijgesneden. Het img in de selector staat er om de reset te verslaan: die
 * zet height: auto op elke img met width- en height-attribuut, en dat weegt
 * even zwaar als twee classes.
 */
.postCard img.postCardImage {
  width: 100%;
  height: 523px;
  object-fit: cover;
  object-position: center;
}

/*
 * Het tekstblok schuift 60px over de afbeelding heen. Heeft een bericht geen
 * uitgelichte afbeelding, dan schuift het blok over de rand van de kaart —
 * precies zoals op de bestaande site (CLAUDE.md §14).
 */
.postCardBody {
  margin-top: -60px;
  padding: 0 20px 0 25px;
}

/* De lucht zit onder elk onderdeel, niet erboven: zonder foto begint de datum
   bovenaan, zoals op de bestaande site. */
.postCardBody > * {
  margin-bottom: 15px;
}

.postCardBody > :last-child {
  margin-bottom: 0;
}

/*
 * Een bericht zonder uitgelichte afbeelding (home.php). Het tekstblok hierboven
 * schuift altijd 60px omhoog, dus zonder iets eronder viel het over de rand van
 * de kaart heen. Dit vlak heeft de maat van het beeld, het grijs van het
 * FAQ-vlak en het lijnlogo er heel licht in — zelfde vorm als op de kaart van
 * blogSlider.
 */
.postCardPlaceholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 523px;
  background: #f3f3f5;
}

.postCardPlaceholderMark {
  width: 96px;
  height: auto;
  opacity: 0.18;
}

/* Het witte randje om de foto zit in de afbeelding zelf, niet in de CSS. */
.postCard img.postCardAuthor {
  width: 81px;
  height: 81px;
}

.postCardDate {
  display: block;
  font-size: 20px;
  font-weight: 300;
  line-height: 33px;
  color: var(--colorNavy);
}

/*
 * De onderstreping staat er altijd, maar doorzichtig: zo verspringt er niets
 * bij het aanwijzen. Focus doet hetzelfde als hover, zodat de link ook met het
 * toetsenbord te volgen is.
 */
.postCardTitle {
  font-size: 26px;

  /* De reset balanceert koppen; deze titel breekt af zoals op de bestaande
     site, anders vallen de regels anders (R9). */
  text-wrap: wrap;
  font-weight: 400;
  line-height: 30px;
  letter-spacing: -0.05em;
  color: var(--colorNavy);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.2s;
}

.postCardTitle:hover,
.postCardTitle:focus-within {
  text-decoration-color: var(--colorNavy);
}

.postCardTitle a {
  color: inherit;
  text-decoration: none;
}

/* ------------------------------------------------------------------
   Meer laden
   ------------------------------------------------------------------ */

.postListMore {
  margin-top: 80px;
  text-align: center;
}

.postListMoreLink {
  font-size: 20px;
  font-weight: 400;
  line-height: 35px;
  color: var(--colorNavy);
  text-decoration: none;
}

/* ==================================================================
   Tablet
   ================================================================== */

@media (max-width: 1024px) {
  .blogTitle {
    font-size: 55px;
    line-height: 66px;
  }

  .blogStamp {
    right: 20px;
    bottom: 78px;
  }

  .postList {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ==================================================================
   Mobiel
   ================================================================== */

@media (max-width: 767px) {
  .blogHero {
    margin-top: 50px;
  }

  .blogTitle {
    font-size: 44px;
    line-height: 36px;
  }

  .blogIntro {
    font-size: 15px;
    line-height: 25px;
  }

  .blogStamp {
    display: none;
  }

  .postList {
    grid-template-columns: repeat(1, 1fr);
    margin-top: 50px;
  }

  .postList:last-child,
  .postListEmpty,
  .postListMore {
    margin-bottom: 50px;
  }

  .postListEmpty {
    margin-top: 50px;
  }

  .postCard img.postCardImage {
    height: 390px;
  }

  .postCardPlaceholder {
    height: 390px;
  }
}