/* ============================================================
   Posts block — category buttons and the photo tiles.
   The grid has 6 columns; each tile's place (data-v, set by render.php
   and posts.js) depends on how many are shown, so rows always fill:
   hero = whole row · half = 1/2 · third = 1/3 · tall + side = the
   three-post mosaic (one tall tile, two beside it). Square corners; the
   title sits in the photo, over a dark gradient, in the text font (Inter).
   ============================================================ */

:where(:root) {
  --color-bg: #fafaf9; --color-surface: #fff; --color-text: #0c0c0c;
  --color-text-muted: #6b6b6b; --color-text-faint: #a1a1a1;
  --color-hover: rgba(0,0,0,.05); --color-chip: rgba(0,0,0,.045);
  --color-btn-active: #0c0c0c; --color-btn-text-active: #fff; --transition: .2s ease;
}

.pp-posts { --pp-posts-gap: clamp(6px, .8vw, 12px); padding-block: 8px 56px; }

/* Category buttons */
.pp-posts__filter { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: clamp(24px, 3vw, 36px); }
.pp-posts__chip {
  height: 36px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--color-chip);
  color: var(--color-text);
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
  transition: background var(--transition), color var(--transition);
}
.pp-posts__chip:hover { background: var(--color-hover); }
.pp-posts__chip[aria-pressed="true"] { background: var(--color-btn-active); color: var(--color-btn-text-active); font-weight: 550; }

/* Tiles */
.pp-posts__grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--pp-posts-gap);
  align-items: start;
}
.pp-post {
  position: relative;
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  min-width: 0;
  color: #fff;
  text-decoration: none;
  outline: none;
}
.pp-post[hidden] { display: none; }
/* Not underlined like links in page text. */
.pp-posts .pp-post, .pp-posts .pp-post:hover { text-decoration: none; }
.pp-post[data-v="hero"]  { grid-column: 1 / -1; }
.pp-post[data-v="half"]  { grid-column: span 3; }
.pp-post[data-v="tall"]  { grid-column: span 4; grid-row: span 2; align-self: stretch; }

.pp-post__media {
  position: relative;
  display: block;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background: #1c1c1c;
}
.pp-post[data-v="hero"] .pp-post__media { aspect-ratio: 21 / 9; }
.pp-post[data-v="half"] .pp-post__media { aspect-ratio: 4 / 3; }
/* The tall tile's photo fills the height of the two tiles beside it. */
.pp-post[data-v="tall"] .pp-post__media { aspect-ratio: auto; flex: 1; min-height: 320px; }

.pp-post__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s cubic-bezier(0.16, 0.8, 0.24, 1);
}
/* Square also inside page text, where themes round images. */
.pp-posts .pp-post__img { border-radius: 0; }
/* Dark gradient at the bottom, so the title reads on any photo; deeper on hover. */
.pp-post__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.38) 32%, rgba(0, 0, 0, 0) 62%);
  transition: opacity 0.5s ease, background-color 0.5s ease;
}
.pp-post__media--empty { display: flex; align-items: center; justify-content: center; }
.pp-post__media--empty span {
  margin-bottom: 12%;
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: clamp(3rem, 7vw, 6rem);
  font-weight: 700;
  line-height: 1;
  color: rgba(255, 255, 255, 0.12);
}

.pp-posts .pp-post__title {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  margin: 0;
  padding: clamp(14px, 1.6vw, 22px);
  color: #fff;
  font-family: var(--font-sans, Inter, system-ui, sans-serif);
  font-size: 1.1875rem;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.02em;
  text-wrap: balance;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}
.pp-post[data-v="half"] .pp-post__title { font-size: clamp(1.25rem, 1.7vw, 1.5rem); }
.pp-post[data-v="hero"] .pp-post__title,
.pp-post[data-v="tall"] .pp-post__title { font-size: clamp(1.5rem, 2.4vw, 2.25rem); padding: clamp(18px, 2.4vw, 32px); letter-spacing: -0.03em; }
/* Underline that draws in from the left on hover, and a small arrow. */
.pp-post__title span {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
  padding-bottom: 2px;
  transition: background-size 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.pp-post__title span::after {
  content: '→';
  display: inline-block;
  margin-left: 0.35em;
  font-weight: 500;
  font-size: 0.8em;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (hover: hover) {
  .pp-post:hover .pp-post__img { transform: scale(1.045); }
  .pp-post:hover .pp-post__media::after { background-color: rgba(0, 0, 0, 0.12); }
  .pp-post:hover .pp-post__title span { background-size: 100% 2px; }
  .pp-post:hover .pp-post__title span::after { opacity: 1; transform: none; }
}
.pp-post:focus-visible .pp-post__media { outline: 2px solid var(--color-text); outline-offset: 3px; }
.pp-post:focus-visible .pp-post__title span { background-size: 100% 2px; }

/* Shown after a category change or "Load more". */
.pp-post.is-entering { animation: pp-post-in 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: var(--pp-delay, 0ms); }
@keyframes pp-post-in { from { opacity: 0; transform: translateY(14px); } }

.pp-posts__more { display: flex; justify-content: center; padding-top: 48px; }
.pp-posts__more[hidden] { display: none; }
.pp-posts__more-btn {
  padding: 11px 26px;
  border: 0;
  border-radius: 999px;
  background: var(--color-chip);
  color: var(--color-text);
  font: inherit;
  font-size: 0.875rem;
  cursor: pointer;
  transition: background var(--transition);
}
.pp-posts__more-btn:hover { background: var(--color-hover); }
.pp-posts__empty { padding: 64px 0; color: var(--color-text-muted); text-align: center; }

/* Medium screens: two columns; the large tiles span both. */
@media (max-width: 1100px) {
  .pp-posts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pp-post,
  .pp-post[data-v="half"],
  .pp-post[data-v="side"] { grid-column: span 1; }
  .pp-post[data-v="tall"] { grid-column: 1 / -1; grid-row: auto; }
  .pp-post[data-v="tall"] .pp-post__media { aspect-ratio: 16 / 9; flex: none; min-height: 0; }
  .pp-post[data-v="hero"] .pp-post__media { aspect-ratio: 16 / 9; }
  .pp-post[data-v="half"] .pp-post__media { aspect-ratio: 3 / 2; }
  /* An odd one at the end of a two-column run would sit alone: give it the row. */
  .pp-post[data-v="hero"] ~ .pp-post[data-v]:nth-last-child(1 of :not([hidden])):nth-child(even of :not([hidden])) { grid-column: 1 / -1; }
  .pp-post[data-v="hero"] ~ .pp-post[data-v]:nth-last-child(1 of :not([hidden])):nth-child(even of :not([hidden])) .pp-post__media { aspect-ratio: 21 / 9; }
}
/* Phones: one column, photos edge to edge of the content. */
@media (max-width: 600px) {
  .pp-posts__grid { grid-template-columns: minmax(0, 1fr); }
  .pp-post[data-v] { grid-column: 1 / -1; }
  .pp-post .pp-post__media,
  .pp-post[data-v] .pp-post__media { aspect-ratio: 3 / 2; }
  .pp-post[data-v="hero"] .pp-post__media,
  .pp-post[data-v="tall"] .pp-post__media { aspect-ratio: 4 / 3; }
  .pp-posts .pp-post__title { font-size: 1.25rem; }
  .pp-post[data-v="hero"] .pp-post__title,
  .pp-post[data-v="tall"] .pp-post__title,
  .pp-post[data-v="half"] .pp-post__title { font-size: 1.5rem; padding: 18px; }
}

@media (prefers-reduced-motion: reduce) {
  .pp-post__img, .pp-post__title span, .pp-post__title span::after, .pp-post__media::after { transition: none; }
  .pp-post.is-entering { animation: none; }
}

/* Compact (block setting, less scrolling): same-size smaller tiles, four in
   a row on computers; on phones short wide strips, title in the photo. */
.pp-posts--compact .pp-posts__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pp-posts--compact .pp-post[data-v] { grid-column: auto; grid-row: auto; }
.pp-posts--compact .pp-post[data-v] .pp-post__media { aspect-ratio: 4 / 3; flex: none; min-height: 0; }
.pp-posts--compact .pp-post[data-v] .pp-post__title { font-size: 1.0625rem; padding: 14px; }
.pp-posts--compact .pp-post__media--empty span { font-size: 3rem; }
@media (max-width: 1100px) { .pp-posts--compact .pp-posts__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .pp-posts--compact .pp-posts__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) {
  .pp-posts--compact .pp-posts__grid { grid-template-columns: minmax(0, 1fr); }
  .pp-posts--compact .pp-post[data-v] .pp-post__media { aspect-ratio: 3 / 1; }
  .pp-posts--compact .pp-post[data-v] .pp-post__title { font-size: 1.125rem; padding: 12px 14px; }
  .pp-posts--compact .pp-post__media--empty span { font-size: 2rem; }
}