/* ================================
   All Posts — Style 2 (CLEAN)
   Page: listofposts_s2.php
   Design: Image-left floating card (like screenshot)
   ================================ */

/* ---------- Theme mapping ---------- */
body.post-list-s2 {
  --pl2-bg: var(--bg-soft, #f8fafc);
  --pl2-card: var(--card, #fff);
  --pl2-border: var(--card-border, rgba(2, 6, 23, .10));
  --pl2-surface: var(--surface, rgba(15, 23, 42, .04));
  --pl2-text: var(--text, #0f172a);
  --pl2-muted: var(--muted-2, #64748b);

  --pl2-accent: var(--primary, #0ea5e9);
  --pl2-accent-2: var(--primary-600, #0284c7);
  --pl2-grad: var(--brand-gradient, linear-gradient(135deg, #0ea5e9, #22d3ee));

  --pl2-radius: clamp(18px, 1.6vw, 26px);
  --pl2-radius-sm: clamp(12px, 1vw, 16px);

  --pl2-shadow-1: var(--shadow-1, 0 12px 30px rgba(2, 6, 23, .10));
  --pl2-shadow-2: var(--shadow-2, 0 22px 60px rgba(2, 6, 23, .16));
  --pl2-shadow-3: var(--shadow-3, 0 32px 90px rgba(2, 6, 23, .18));

  background: linear-gradient(180deg, var(--bg, #fff) 0%, var(--pl2-bg) 45%, var(--bg, #fff) 100%);
  color: var(--pl2-text);
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  z-index: 0;
}

body.post-list-s2::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(900px 520px at 12% 10%, color-mix(in oklab, var(--pl2-accent) 16%, transparent) 0%, transparent 62%),
    radial-gradient(900px 520px at 92% 12%, color-mix(in oklab, var(--pl2-accent-2) 14%, transparent) 0%, transparent 64%),
    radial-gradient(900px 620px at 82% 92%, color-mix(in oklab, var(--pl2-accent) 10%, transparent) 0%, transparent 60%),
    radial-gradient(circle at 1px 1px, color-mix(in oklab, var(--pl2-text) 6%, transparent) 1px, transparent 0);
  background-size: auto, auto, auto, 22px 22px;
  background-repeat: no-repeat, no-repeat, no-repeat, repeat;
  opacity: .95;
}

body.post-list-s2>* {
  position: relative;
  z-index: 1;
}

/* ---------- Page wrappers ---------- */
body.post-list-s2 .post-list-surface {
  padding: 18px 0 64px;
}

body.post-list-s2 .post-list-max {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(12px, 2.2vw, 18px);
}

/* ================================
   Layout: main + sidebar
   ================================ */
body.post-list-s2 .pl2-layout {
  display: grid;
  grid-template-columns: minmax(0, 2.1fr) minmax(280px, 1fr);
  gap: clamp(18px, 3vw, 26px);
  margin-top: 18px;
}

body.post-list-s2 .pl2-main {
  min-width: 0;
}

body.post-list-s2 .pl2-sidebar {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

@media (max-width: 980px) {
  body.post-list-s2 .pl2-layout {
    grid-template-columns: 1fr;
  }

  body.post-list-s2 .post-list-controls {
    position: static;
  }
}

/* ================================
   HERO (inside .pl2-main)
   ================================ */
body.post-list-s2 .pl2-main .post-list-hero {
  position: relative;
  margin: 0 0 14px;
  border-radius: calc(var(--pl2-radius) + 6px);
  border: 1px solid var(--pl2-border);
  box-shadow: var(--pl2-shadow-2);
  overflow: hidden;
  background:
    radial-gradient(1200px 500px at 10% 0%, color-mix(in oklab, var(--pl2-accent) 18%, transparent), transparent 60%),
    radial-gradient(900px 420px at 90% 20%, color-mix(in oklab, var(--pl2-accent-2) 14%, transparent), transparent 60%),
    color-mix(in oklab, var(--pl2-card) 90%, transparent);
}

body.post-list-s2 .pl2-main .post-list-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .92;
  background:
    radial-gradient(circle at 50% 0%, color-mix(in oklab, var(--bg) 88%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in oklab, var(--bg) 76%, transparent), transparent 70%),
    radial-gradient(circle at 1px 1px, color-mix(in oklab, var(--pl2-text) 6%, transparent) 1px, transparent 0);
  background-size: auto, auto, 22px 22px;
  background-repeat: no-repeat, no-repeat, repeat;
}

body.post-list-s2 .post-list-hero-inner {
  position: relative;
  z-index: 1;
  padding: clamp(22px, 3.2vw, 40px) clamp(14px, 2.4vw, 24px);
  max-width: 860px;
  margin: 0 auto;
}

body.post-list-s2 .post-list-hero-title {
  margin: 0;
  font-family: "Playfair Display", ui-serif, Georgia, "Times New Roman", Times, serif;
  font-weight: 800;
  font-size: clamp(2.05rem, 3.2vw, 2.85rem);
  letter-spacing: -0.02em;
  color: var(--pl2-text);
}

body.post-list-s2 .post-list-hero-sub {
  margin: 10px 0 22px;
  font-size: .98rem;
  color: var(--pl2-muted);
  font-weight: 650;
}

body.post-list-s2 .post-list-hero-search-wrap {
  max-width: 680px;
  margin: 0 auto;
}

body.post-list-s2 .post-list-hero-search {
  display: flex;
  align-items: center;
  gap: .7rem;
  min-height: 56px;
  padding: .95rem 1.05rem;
  border-radius: 999px;
  background: color-mix(in oklab, var(--pl2-card) 85%, transparent);
  border: 1px solid color-mix(in oklab, var(--pl2-accent) 18%, var(--pl2-border));
  box-shadow: var(--pl2-shadow-1);
  backdrop-filter: blur(12px) saturate(1.15);
  transition: border-color .18s ease, box-shadow .18s ease, transform .12s ease;
}

body.post-list-s2 .post-list-hero-search:focus-within {
  border-color: color-mix(in oklab, var(--pl2-accent) 55%, var(--pl2-border));
  box-shadow: 0 0 0 6px color-mix(in oklab, var(--pl2-accent) 20%, transparent), var(--pl2-shadow-2);
  transform: translateY(-1px);
}

body.post-list-s2 .post-list-hero-search>i {
  font-size: 1.05rem;
  opacity: .72;
}

body.post-list-s2 .post-list-hero-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 1rem;
  font-weight: 650;
  color: var(--pl2-text);
}

body.post-list-s2 .post-list-hero-input::placeholder {
  color: rgba(148, 163, 184, .95);
  font-weight: 600;
}

body.post-list-s2 .post-list-hero-btn {
  border: 0;
  border-radius: 999px;
  width: 46px;
  height: 46px;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--pl2-grad);
  color: #001018;
  box-shadow: 0 14px 34px color-mix(in oklab, var(--pl2-accent) 35%, transparent);
  transition: transform .14s ease, box-shadow .18s ease, filter .18s ease;
}

body.post-list-s2 .post-list-hero-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 20px 52px color-mix(in oklab, var(--pl2-accent) 45%, transparent);
  filter: saturate(1.06);
}

/* ================================
   Controls (filters / view / count)
   ================================ */
body.post-list-s2 .post-list-controls {
  position: sticky;
  top: 10px;
  z-index: 20;
  padding: 5px;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: .7rem;
  border-radius: 999px;
  border: 1px solid var(--pl2-border);
  background: color-mix(in oklab, var(--pl2-card) 78%, transparent);
  box-shadow: var(--pl2-shadow-2);
  backdrop-filter: blur(10px) saturate(1.12);
  margin-top: 12px;
}

body.post-list-s2 .post-list-controls>* {
  align-self: center;
}

body.post-list-s2 .post-list-search,
body.post-list-s2 .post-list-pill,
body.post-list-s2 .post-list-view,
body.post-list-s2 .post-list-count {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
}

body.post-list-s2 .post-list-search {
  flex: 1 1 260px;
  max-width: 360px;
  gap: .55rem;
  padding: .62rem .85rem;
  border-radius: 18px;
  background: var(--pl2-card);
  border: 1px solid var(--pl2-border);
  box-shadow: var(--pl2-shadow-1);
}

body.post-list-s2 .post-list-search-input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--pl2-text);
  font-weight: 800;
  font-size: .95rem;
}

body.post-list-s2 .post-list-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  align-items: center;
  flex: 0 0 auto;
}

body.post-list-s2 .post-list-pill {
  padding: .46rem .8rem;
  border-radius: 999px;
  background: var(--pl2-card);
  color: var(--pl2-text);
  border: 1px solid var(--pl2-border);
  text-decoration: none;
  font-weight: 900;
  font-size: .88rem;
  transition: transform .12s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

body.post-list-s2 .post-list-pill:hover {
  transform: translateY(-1px);
  box-shadow: var(--pl2-shadow-1);
  border-color: color-mix(in oklab, var(--pl2-accent) 25%, var(--pl2-border));
}

body.post-list-s2 .post-list-pill[aria-current="true"] {
  background: var(--pl2-grad);
  color: #001018;
  border: 0;
  box-shadow: 0 14px 34px color-mix(in oklab, var(--pl2-accent) 30%, transparent);
}

body.post-list-s2 .post-list-view {
  margin-left: auto;
  gap: .35rem;
  padding: .28rem;
  border-radius: 999px;
  border: 1px solid var(--pl2-border);
  background: var(--pl2-card);
  box-shadow: var(--pl2-shadow-1);
  flex: 0 0 auto;
}

body.post-list-s2 .post-list-view-btn {
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .46rem .78rem;
  border-radius: 999px;
  background: transparent;
  color: var(--pl2-text);
  font-weight: 900;
  font-size: .88rem;
  transition: transform .12s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}

body.post-list-s2 .post-list-view-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--pl2-shadow-1);
  background: color-mix(in oklab, var(--pl2-accent) 10%, transparent);
}

body.post-list-s2 .post-list-view-btn.is-active,
body.post-list-s2 .post-list-view-btn[aria-pressed="true"] {
  background: var(--pl2-grad);
  color: #001018;
}

body.post-list-s2 .post-list-count {
  padding: .46rem .85rem;
  border-radius: 999px;
  border: 1px solid var(--pl2-border);
  background: var(--pl2-card);
  box-shadow: var(--pl2-shadow-1);
  color: var(--pl2-muted);
  font-weight: 900;
  flex: 0 0 auto;
}

@media (max-width: 1180px) {
  body.post-list-s2 .post-list-controls {
    flex-wrap: wrap;
    border-radius: var(--pl2-radius);
    justify-content: center;
    padding: .9rem .9rem;
  }

  body.post-list-s2 .post-list-view {
    margin-left: 0;
    order: 4;
  }

  body.post-list-s2 .post-list-count {
    order: 5;
  }
}

/* ================================
   Posts grid wrapper
   ================================ */
body.post-list-s2 .post-list-grid {
  display: grid;
  gap: 18px;
  margin-top: 18px;
}

body.post-list-s2[data-view="list"] .post-list-grid {
  grid-template-columns: 1fr;
}

body.post-list-s2[data-view="grid"] .post-list-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 1100px) {
  body.post-list-s2[data-view="grid"] .post-list-grid {
    grid-template-columns: 1fr;
  }
}

/* ================================
   CARD — Image Left / Content Right
   ================================ */
body.post-list-s2 .post-list-card {
  position: relative;
  border: 1px solid var(--pl2-border);
  border-radius: var(--pl2-radius);
  background: var(--pl2-card);
  box-shadow: var(--pl2-shadow-1);
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
  height: 200px;
}

/* Hover */
body.post-list-s2 .post-list-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--pl2-shadow-2);
  border-color: color-mix(in oklab, var(--pl2-accent) 25%, var(--pl2-border));
}

/* LIST view layout = screenshot style */
body.post-list-s2[data-view="list"] .post-list-card {
  display: flex;
  align-items: stretch;
  gap: clamp(16px, 2.6vw, 28px);
  padding: clamp(18px, 2.8vw, 28px);
  overflow: visible;
  /* allow floating image */
}

/* cover */
body.post-list-s2 .post-list-cover {
  position: relative;
  display: block;
  text-decoration: none;
}

body.post-list-s2[data-view="list"] .post-list-cover {
  flex: 0 0 clamp(220px, 26vw, 320px);
  align-self: center;
  margin-left: clamp(-34px, -2.5vw, -18px);
  border-radius: clamp(14px, 1.2vw, 18px);
}

/* soft back plate */
body.post-list-s2[data-view="list"] .post-list-cover::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg,
      color-mix(in oklab, var(--pl2-accent) 28%, transparent),
      color-mix(in oklab, var(--pl2-accent) 10%, transparent));
  transform: translate(-20px, 14px);
  opacity: .95;
  z-index: -1;
  bottom: 14px;
}

/* sheen (normal) */
body.post-list-s2 .post-list-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(120% 80% at 20% 20%, rgba(255, 255, 255, .26), transparent 55%);
  opacity: .9;
}

body.post-list-s2 .post-list-cover img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* list view = square image like screenshot */
body.post-list-s2[data-view="list"] .post-list-cover img {
  aspect-ratio: 1 / 1;
  border-radius: inherit;
  box-shadow:
    0 18px 40px rgba(0, 0, 0, .18),
    0 1px 8px rgba(0, 0, 0, .10);
  transition: transform .35s ease, filter .35s ease;
}

body.post-list-s2 .post-list-card:hover .post-list-cover img {
  transform: scale(1.04);
  filter: saturate(1.05);
}

/* body */
body.post-list-s2 .post-list-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 6px 0;
}

body.post-list-s2 .post-list-text {
  min-width: 0;
}

body.post-list-s2 .post-list-kicker {
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pl2-muted);
  margin-bottom: 8px;
  font-weight: 800;
}

body.post-list-s2 .post-list-h {
  margin: 0 0 10px;
  font-size: clamp(18px, 1.8vw, 22px);
  line-height: 1.2;
  font-weight: 900;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--pl2-text);
}

body.post-list-s2 .post-list-h a {
  color: inherit;
  text-decoration: none;
}

body.post-list-s2 .post-list-h a:hover {
  color: color-mix(in oklab, var(--pl2-accent) 70%, var(--pl2-text));
}

body.post-list-s2 .post-list-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 0;
  font-size: 13px;
  color: var(--pl2-muted);
  margin-bottom: 12px;
  font-weight: 700;
}

body.post-list-s2 .post-list-meta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

body.post-list-s2 .post-list-meta span:not(:last-child)::after {
  content: "•";
  margin: 0 12px;
  color: rgba(0, 0, 0, .18);
}

body.post-list-s2 .post-list-meta i {
  display: none;
}

/* you still have <i> in HTML -> hidden */

/* (optional) if later you add <img class="meta-icn" ...> */
body.post-list-s2 .post-list-meta .meta-icn {
  width: 16px;
  height: 16px;
  object-fit: contain;
  opacity: .85;
}

body.post-list-s2 .post-list-excerpt {
  margin: 0;
  color: color-mix(in oklab, var(--pl2-muted) 92%, var(--pl2-text));
  line-height: 1.65;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* CTA */
body.post-list-s2 .post-list-cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 2px 18px;
  border-radius: 999px;
  background: var(--pl2-grad);
  color: #001018;
  text-decoration: none;
  font-weight: 950;
  font-size: 13px;
  letter-spacing: .02em;
  box-shadow: 0 16px 34px color-mix(in oklab, var(--pl2-accent) 35%, transparent);
  transition: transform .18s ease, filter .18s ease, box-shadow .18s ease;
}

body.post-list-s2 .post-list-cta:hover {
  transform: translateY(-1px);
  filter: saturate(1.05);
  box-shadow: 0 20px 42px color-mix(in oklab, var(--pl2-accent) 42%, transparent);
}

/* GRID view layout */
body.post-list-s2[data-view="grid"] .post-list-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

body.post-list-s2[data-view="grid"] .post-list-cover {
  aspect-ratio: 16 / 10;
}

body.post-list-s2[data-view="grid"] .post-list-cover img {
  border-radius: 0;
}

body.post-list-s2[data-view="grid"] .post-list-body {
  padding: 16px 16px 18px;
}

/* Mobile: stack list view */
@media (max-width: 860px) {
  body.post-list-s2[data-view="list"] .post-list-card {
    flex-direction: column;
    padding: 18px;
  }

  body.post-list-s2[data-view="list"] .post-list-cover {
    margin-left: 0;
    width: 100%;
    max-width: 640px;
  }

  body.post-list-s2[data-view="list"] .post-list-cover img {
    aspect-ratio: 16 / 9;
  }

  body.post-list-s2[data-view="list"] .post-list-cover::before {
    transform: translate(-12px, 12px);
  }
}

/* ================================
   Pagination
   ================================ */
body.post-list-s2 .post-list-pagination {
  display: flex;
  gap: .75rem;
  justify-content: center;
  align-items: center;
  margin-top: clamp(28px, 4vw, 52px);
}

body.post-list-s2 .post-list-chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .68rem 1.05rem;
  border-radius: 999px;
  background: var(--pl2-card);
  color: var(--pl2-text);
  border: 1px solid var(--pl2-border);
  font-weight: 900;
  text-decoration: none;
  transition: transform .12s ease, box-shadow .18s ease, border-color .18s ease;
}

body.post-list-s2 .post-list-chip:hover {
  transform: translateY(-1px);
  box-shadow: var(--pl2-shadow-1);
  border-color: color-mix(in oklab, var(--pl2-accent) 25%, var(--pl2-border));
}

body.post-list-s2 .post-list-chip--solid {
  border: 0;
  color: #001018;
  background: var(--pl2-grad);
  box-shadow: 0 14px 34px color-mix(in oklab, var(--pl2-accent) 28%, transparent);
}

body.post-list-s2 .post-list-chip.is-disabled {
  pointer-events: none;
  opacity: .55;
}

/* ================================
   Empty state
   ================================ */
body.post-list-s2 .post-list-empty-wrap {
  padding: 80px 0;
  display: flex;
  justify-content: center;
}

body.post-list-s2 .post-list-empty {
  background: color-mix(in oklab, var(--pl2-card) 86%, transparent);
  border: 1px dashed color-mix(in oklab, var(--pl2-border) 90%, transparent);
  border-radius: var(--pl2-radius-sm);
  padding: 28px;
  text-align: center;
  max-width: 520px;
  box-shadow: var(--pl2-shadow-2);
  backdrop-filter: blur(10px) saturate(1.1);
}

body.post-list-s2 .post-list-empty-ico {
  font-size: 1.8rem;
  opacity: .85;
}

body.post-list-s2 .post-list-empty-title {
  margin-top: 10px;
  font-weight: 900;
}

body.post-list-s2 .post-list-empty-btn {
  display: inline-flex;
  margin-top: 14px;
  padding: .75rem 1.1rem;
  border-radius: 12px;
  border: 1px solid color-mix(in oklab, var(--pl2-accent) 40%, var(--pl2-border));
  background: color-mix(in oklab, var(--pl2-accent) 10%, transparent);
  color: color-mix(in oklab, var(--pl2-accent) 82%, var(--pl2-text));
  text-decoration: none;
  font-weight: 900;
}

body.post-list-s2 .post-list-empty-btn:hover {
  background: var(--pl2-grad);
  color: #001018;
  border-color: transparent;
}

/* ================================
   Sidebar widgets + galleries
   ================================ */
body.post-list-s2 .pl2-widget,
body.post-list-s2 .pl2-gallery {
  background: color-mix(in oklab, var(--pl2-card) 88%, transparent);
  border-radius: var(--pl2-radius-sm);
  border: 1px solid var(--pl2-border);
  box-shadow: var(--pl2-shadow-1);
  backdrop-filter: blur(10px) saturate(1.12);
}

body.post-list-s2 .pl2-widget {
  overflow: visible;
  padding-right: 22px;
  /* space for right offset */
  padding-bottom: 22px;
  /* space for bottom offset */
}

body.post-list-s2 .pl2-widget-title {
  margin: 0 0 10px;
  font-size: .88rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}

body.post-list-s2 .pl2-widget-body {
  font-size: .93rem;
}

body.post-list-s2 .pl2-latest-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .5rem;
}

body.post-list-s2 .pl2-latest-list li a {
  position: relative;
  display: block;
  padding: .25rem 0;
  text-decoration: none;
  color: var(--pl2-text);
  font-weight: 650;
  font-size: .92rem;
  line-height: 1.4;
  opacity: .95;
}

body.post-list-s2 .pl2-latest-list li a::before {
  content: "•";
  position: absolute;
  left: -10px;
  top: .45rem;
  font-size: .7rem;
  color: color-mix(in oklab, var(--pl2-muted) 85%, transparent);
  opacity: 0;
  transform: translateX(-2px);
  transition: opacity .16s ease, transform .16s ease, color .16s ease;
}

body.post-list-s2 .pl2-latest-list li a:hover {
  color: color-mix(in oklab, var(--pl2-accent) 88%, var(--pl2-text));
}

body.post-list-s2 .pl2-latest-list li a:hover::before {
  opacity: 1;
  transform: translateX(0);
  color: var(--pl2-accent);
}

body.post-list-s2 .pl2-gallery {
  padding: 14px 16px 16px;
}

body.post-list-s2 .pl2-gallery-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

body.post-list-s2 .pl2-gallery-title {
  margin: 0;
  font-size: .88rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .12em;
}

body.post-list-s2 .pl2-gallery-viewall {
  font-size: .78rem;
  text-decoration: none;
  font-weight: 800;
  color: var(--pl2-accent);
}

body.post-list-s2 .pl2-gallery-viewall:hover {
  text-decoration: underline;
}

body.post-list-s2 .pl2-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

body.post-list-s2 .pl2-gallery-item {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid color-mix(in oklab, var(--pl2-border) 90%, transparent);
  background: color-mix(in oklab, var(--pl2-surface) 65%, transparent);
}

body.post-list-s2 .pl2-gallery-item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: scale(1.001);
  transition: transform .22s ease;
}

body.post-list-s2 .pl2-gallery-item:hover img {
  transform: scale(1.06);
}

body.post-list-s2 .pl2-gallery-item::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--pl2-border) 60%, transparent);
}

/* ================================
   Skeleton shimmer (uses ::after so it doesn't conflict with back-plate)
   ================================ */
@keyframes pl2Shimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

body.post-list-s2 .post-list-card[data-skeleton="1"] .post-list-cover::after {
  background: linear-gradient(110deg,
      color-mix(in oklab, var(--pl2-surface) 45%, transparent) 8%,
      color-mix(in oklab, var(--pl2-surface) 65%, transparent) 18%,
      color-mix(in oklab, var(--pl2-surface) 45%, transparent) 33%);
  background-size: 200% 100%;
  animation: pl2Shimmer 1.1s linear infinite;
  opacity: 1;
}

body.post-list-s2 .post-list-card[data-skeleton="1"] .post-list-cover img {
  opacity: 0;
}

/* ================================
   Accessibility + Reduced motion
   ================================ */
body.post-list-s2 a:focus-visible,
body.post-list-s2 button:focus-visible,
body.post-list-s2 input:focus-visible,
body.post-list-s2 select:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--pl2-accent) 22%, transparent);
  border-radius: 12px;
}

@media (prefers-reduced-motion: reduce) {
  body.post-list-s2 * {
    transition: none !important;
    animation: none !important;
  }
}

/* Grid: make cover height 120px */
body.post-list-s2[data-view="grid"] .post-list-cover {
  aspect-ratio: auto !important;
  height: 120px;
}

body.post-list-s2[data-view="grid"] .post-list-cover img {
  height: 120px;
  width: 100%;
  object-fit: cover;
}

body.post-list-s2[data-view="grid"] .post-list-body {
  padding: 12px 14px 14px;
}


/* GRID: image 120px, but card height stays premium */
body.post-list-s2[data-view="grid"] .post-list-card {
  height: 100%;
  min-height: 320px;
  /* keeps the “big card” look */
  display: flex;
  flex-direction: column;
}

body.post-list-s2[data-view="grid"] .post-list-cover {
  height: 120px;
  aspect-ratio: auto !important;
}

body.post-list-s2[data-view="grid"] .post-list-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* make content area fill remaining height, CTA stays bottom */
body.post-list-s2[data-view="grid"] .post-list-body {
  flex: 1;
  padding: 18px 18px 20px;
}

body.post-list-s2[data-view="grid"] .post-list-cta {
  margin-top: auto;
}

/* LIST view: Title max 2 lines + ellipsis */
body.post-list-s2[data-view="list"] .post-list-h {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

body.post-list-s2[data-view="list"] .post-list-h a {
  display: block;
  /* needed for proper clamping */
}

/* One-by-one “Step” cards (like your image) */
body.post-list-s2 .pl2-step-list {
  gap: 18px;
  /* must be >= your offset */
  padding-right: 10px;
  /* extra safe */
  padding-bottom: 10px;
}

/* auto colors per card */
body.post-list-s2 .pl2-step-card {
  --step-accent: #f59e0b;
}

body.post-list-s2 .pl2-step-card:nth-child(4n+2) {
  --step-accent: #ec4899;
}

body.post-list-s2 .pl2-step-card:nth-child(4n+3) {
  --step-accent: #2563eb;
}

body.post-list-s2 .pl2-step-card:nth-child(4n+4) {
  --step-accent: #10b981;
}

body.post-list-s2 .pl2-step-card {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: stretch;
  border-radius: 18px;
  background: var(--pl2-card);
  border: 1px solid var(--pl2-border);
  box-shadow: var(--pl2-shadow-1);
  overflow: visible;
}

body.post-list-s2 .pl2-step-card {
  position: relative;
  isolation: isolate;
  border-radius: 18px;
}

/* offset border behind card */
body.post-list-s2 .pl2-step-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transform: translate(8px, 8px);
  /* offset */
  z-index: -1;
  opacity: .45;
  pointer-events: none;
}

body.post-list-s2 .pl2-step-ribbon {
  width: 112px;
  padding: 14px 12px;
  color: #fff;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  justify-content: center;

  background: linear-gradient(135deg,
      color-mix(in oklab, var(--step-accent) 92%, #000),
      var(--step-accent));

  /* zig-zag edge */
  clip-path: polygon(0 0, 100% 0,
      88% 10%, 100% 20%,
      88% 30%, 100% 40%,
      88% 50%, 100% 60%,
      88% 70%, 100% 80%,
      88% 90%, 100% 100%,
      0 100%);

  border-radius: 18px 0 0 18px;
}

body.post-list-s2 .pl2-step-num {
  font-weight: 950;
  font-size: 28px;
  line-height: 1;
  letter-spacing: .02em;
}

body.post-list-s2 .pl2-step-num span {
  opacity: .9;
  margin-left: 2px;
}

body.post-list-s2 .pl2-step-thumb {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, .65);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .18);
}

body.post-list-s2 .pl2-step-body {
  flex: 1;
  min-width: 0;
  padding: 14px 14px 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
}

body.post-list-s2 .pl2-step-title {
  text-decoration: none;
  color: var(--pl2-text);
  font-weight: 850;
  line-height: 1.25;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body.post-list-s2 .pl2-step-more {
  align-self: flex-start;
  text-decoration: none;
  font-weight: 850;
  font-size: .85rem;
  color: color-mix(in oklab, var(--step-accent) 80%, var(--pl2-text));
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

body.post-list-s2 .pl2-step-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--pl2-shadow-2);
}

body.post-list-s2 .pl2-step-card:hover .pl2-step-more {
  text-decoration: underline;
}

/* mobile */
@media (max-width: 520px) {
  body.post-list-s2 .pl2-step-ribbon {
    width: 96px;
  }
}

body.post-list-s2 .pl2-step-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid color-mix(in oklab, var(--step-accent) 55%, transparent);
  pointer-events: none;
  opacity: .35;
}


/* ================================
   Latest Posts — Step Cards (Perfect)
   ================================ */

/* list wrapper MUST be grid so gap works */
body.post-list-s2 .pl2-step-list {
  display: grid;
  gap: 18px;
  /* must be > --step-off */
  padding-right: 12px;
  /* space for right offset on last item */
  padding-bottom: 12px;
  /* space for bottom offset on last item */
  margin-top: 10px;
}

/* auto colors */
body.post-list-s2 .pl2-step-card {
  --step-accent: #f59e0b;
}

body.post-list-s2 .pl2-step-card:nth-child(4n+2) {
  --step-accent: #ec4899;
}

body.post-list-s2 .pl2-step-card:nth-child(4n+3) {
  --step-accent: #2563eb;
}

body.post-list-s2 .pl2-step-card:nth-child(4n+4) {
  --step-accent: #10b981;
}

body.post-list-s2 .pl2-step-card {
  --step-off: 10px;

  position: relative;
  isolation: isolate;
  display: flex;
  align-items: stretch;

  border-radius: 18px;
  background: var(--pl2-card);
  border: 1px solid var(--pl2-border);
  box-shadow: var(--pl2-shadow-1);
  overflow: visible;

  /* THIS fixes the right border cut */
  margin-right: var(--step-off);
}

/* offset border (behind) */
body.post-list-s2 .pl2-step-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transform: translate(var(--step-off), var(--step-off));
  z-index: -1;
  opacity: .45;
  pointer-events: none;
}

/* soft inner stroke (optional but premium) */
body.post-list-s2 .pl2-step-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid color-mix(in oklab, var(--step-accent) 55%, transparent);
  pointer-events: none;
  opacity: .22;
}

/* left colored ribbon */
body.post-list-s2 .pl2-step-ribbon {
  width: 120px;
  padding: 14px 12px;
  color: #fff;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;

  background: linear-gradient(135deg,
      color-mix(in oklab, var(--step-accent) 92%, #000),
      var(--step-accent));

  clip-path: polygon(0 0, 100% 0,
      88% 10%, 100% 20%,
      88% 30%, 100% 40%,
      88% 50%, 100% 60%,
      88% 70%, 100% 80%,
      88% 90%, 100% 100%,
      0 100%);

  border-radius: 18px 0 0 18px;
}

/* thumb */
body.post-list-s2 .pl2-step-thumb {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, .65);
  box-shadow: 0 14px 30px rgba(0, 0, 0, .18);
}

/* right content */
body.post-list-s2 .pl2-step-body {
  flex: 1;
  min-width: 0;
  padding: 14px 14px 14px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}

body.post-list-s2 .pl2-step-title {
  text-decoration: none;
  color: var(--pl2-text);
  font-weight: 850;
  line-height: 1.25;

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

body.post-list-s2 .pl2-step-more {
  align-self: flex-start;
  text-decoration: none;
  font-weight: 850;
  font-size: .85rem;
  color: color-mix(in oklab, var(--step-accent) 80%, var(--pl2-text));
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

body.post-list-s2 .pl2-step-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--pl2-shadow-2);
}

@media (max-width: 520px) {
  body.post-list-s2 .pl2-step-ribbon {
    width: 102px;
  }
}