/* =========================================================
   ShowCardPost — Full CSS (append to theme CSS)
   - Full-width cards for main content (not sidebar)
   - Default responsive grid: 5 → 4/3/2/1 columns
   - Optional single-row scroller: add .scp--one-row
   - Titles single-line with ellipsis, no excerpt
   - No-image cards get soft pastel hero + overlaid title-card
   - Neutral palette, tiny radius, works with or without global vars
   ========================================================= */

/* ---------- Section root & tokens ---------- */
.scp{
  /* scoped tokens with fallbacks to your global variables if present */
  --scp-cols: 5;                                /* default desktop columns */
  --scp-gap: 16px;
  --scp-radius: 8px;
  --scp-border: var(--border, #e5e7eb);
  --scp-border-strong: var(--border-strong, #d1d5db);
  --scp-text: var(--text, #111827);
  --scp-muted: var(--muted, #5b6471);
  --scp-chip: var(--chip, #f3f4f6);
  --scp-shadow: 0 2px 12px rgba(17,24,39,.06);

  width:100%;
  margin:0 0 20px 0;
  color:var(--scp-text);
}
.scp *{ box-sizing:border-box; }

/* ---------- Header ---------- */
.scp-head{
  margin:0 0 12px 0;
  display:flex; align-items:flex-end; justify-content:space-between; gap:12px;
}
.scp-title{
  margin:0; font-size:20px; line-height:1.2; font-weight:800; color:var(--scp-text);
}

/* ---------- Grid (full-width) ---------- */
.scp-grid{
  display:grid;
  grid-template-columns:repeat(var(--scp-cols), minmax(0,1fr));
  gap:var(--scp-gap);
}

/* ---------- Card ---------- */
.scp-card{
  position:relative;
  background:#fff;
  border:1px solid var(--scp-border);
  border-radius:var(--scp-radius);
  box-shadow:var(--scp-shadow);
  overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.scp-card:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(17,24,39,.10);
  border-color:#dfe3ea;
}

/* thumbnail (image variant) */
.scp-thumb{ position:relative; display:block; width:100%; aspect-ratio:16/9; background:#f6f7f9; overflow:hidden; }
.scp-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

/* body */
.scp-body{ padding:12px 14px 14px; }

/* title (single line + ellipsis) */
.scp-card-title{
  font-size:18px; line-height:1.25; margin:0 0 6px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.scp-card-title a{
  display:block; color:inherit; text-decoration:none;
  white-space:inherit; overflow:inherit; text-overflow:inherit;
}
.scp-card-title a:hover{ text-decoration:underline; }

/* meta under title (e.g., "Sep 11 • Forum • Author") */
.scp-meta{ margin:0 0 6px; font-size:12px; color:var(--scp-muted); }

/* no excerpt (hidden) */
.scp-excerpt{ display:none !important; }

/* small chip (optional, if you output flags) */
.scp-chip{
  display:inline-block; background:var(--scp-chip); border:1px solid var(--scp-border);
  border-radius:6px; padding:3px 8px; font-size:12px; color:#374151;
}

/* ---------- No-image variant ---------- */
/* When your PHP marks cards with no usable image: add .no-image on .scp-card */
.scp-card.no-image::before{
  content:"";
  display:block; width:100%;
  aspect-ratio:16/9;                 /* keeps visual rhythm with image cards */
  background:var(--scp-solid, #eef2f6);
}
/* overlay the title as a small white card that sits over the pastel hero */
.scp-card.no-image .scp-card-title{
  display:block;
  background:#fff;
  border:1px solid var(--scp-border);
  border-radius:8px;
  box-shadow:var(--scp-shadow);
  padding:8px 10px;
  margin:-22px 0 8px;                /* pull up to overlap hero */
  font-size:18px; line-height:1.25;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.scp-card.no-image .scp-card-title a{ color:var(--scp-text); }

/* meta spacing for no-image */
.scp-card.no-image .scp-meta{ margin:0 0 4px; }

/* pastel rotation (soft, harmonious) */
.scp-grid .scp-card.no-image:nth-child(10n+1){ --scp-solid:#EAF3FF; } /* light-sky */
.scp-grid .scp-card.no-image:nth-child(10n+2){ --scp-solid:#ECFDF5; } /* light-mint */
.scp-grid .scp-card.no-image:nth-child(10n+3){ --scp-solid:#FFF8E1; } /* light-amber */
.scp-grid .scp-card.no-image:nth-child(10n+4){ --scp-solid:#F5F0FF; } /* light-lilac */
.scp-grid .scp-card.no-image:nth-child(10n+5){ --scp-solid:#E8F6FF; } /* light-azure */
.scp-grid .scp-card.no-image:nth-child(10n+6){ --scp-solid:#EAFBF0; } /* light-green */
.scp-grid .scp-card.no-image:nth-child(10n+7){ --scp-solid:#FFF0F5; } /* light-rose */
.scp-grid .scp-card.no-image:nth-child(10n+8){ --scp-solid:#F4F6F8; } /* light-gray */
.scp-grid .scp-card.no-image:nth-child(10n+9){ --scp-solid:#FFF4E8; } /* light-peach */
.scp-grid .scp-card.no-image:nth-child(10n+10){ --scp-solid:#E3F2FD; } /* light-blue */

/* ---------- Optional: single-row horizontal scroller ---------- */
.scp--one-row .scp-grid{
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:minmax(240px, 1fr);
  grid-template-columns:none;
  overflow-x:auto; overflow-y:hidden;
  gap:var(--scp-gap);
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  padding-bottom:6px; /* room for scrollbar */
}
.scp--one-row .scp-card{ scroll-snap-align:start; }
.scp--one-row .scp-grid::-webkit-scrollbar{ height:8px; }
.scp--one-row .scp-grid::-webkit-scrollbar-thumb{ background:#cfd3da; border-radius:999px; }
.scp--one-row .scp-grid::-webkit-scrollbar-track{ background:transparent; }

/* ---------- Optional: module-level pagination (scoped) ---------- */
.scp-pagination{
  margin:14px 0 0; display:flex; flex-wrap:wrap; gap:8px; align-items:center;
}
.scp-pagination .scp-page,
.scp-pagination .scp-page-current{
  border:1px solid var(--scp-border); border-radius:999px;
  padding:6px 10px; line-height:1; font-size:13px; text-decoration:none;
  background:#fff; color:#374151; display:inline-flex; align-items:center; gap:6px;
}
.scp-pagination .scp-page:hover{
  background:#111; border-color:#111; color:#fff; text-decoration:none;
}
.scp-pagination .scp-page-current{
  background:#111; border-color:#111; color:#fff; font-weight:800;
}

/* ---------- Responsive columns ---------- */
@media (max-width: 1280px){ .scp-grid{ --scp-cols: 4; } }
@media (max-width: 992px){  .scp-grid{ --scp-cols: 3; } .scp-title{ font-size:18px; } }
@media (max-width: 768px){  .scp-grid{ --scp-cols: 2; } }
@media (max-width: 520px){  .scp-grid{ --scp-cols: 1; } .scp-card-title{ font-size:17px; } }
/* =========================================================
   ShowCardPost — Responsive fix (append after your SCP CSS)
   - Auto-fit columns by available width (no hard “5 columns” on mobile)
   - Keeps .scp--one-row behavior unchanged
   - Provides a .scp--fixed helper if you ever need fixed cols again
   ========================================================= */

/* 1) Default: auto-fit cards with a sensible minimum width */
.scp{
  /* You can tweak this min card width; grid will flow accordingly */
  --scp-min: 220px;          /* min card width */
  --scp-gap: 16px;           /* keep your gap */
}
.scp-grid{
  display:grid;
  gap:var(--scp-gap);
  /* Auto-fit creates as many columns as will fit; min() avoids overflow on very narrow screens */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--scp-min)), 1fr));
}

/* 2) Small viewport refinements (optional) */
@media (max-width: 992px){
  .scp{ --scp-min: 200px; }       /* allow one more column before wrapping */
}
@media (max-width: 768px){
  .scp{ --scp-min: 240px; }       /* lean toward 1–2 columns on small phones */
}
@media (max-width: 520px){
  .scp{ --scp-min: 100%; }        /* always 1 column on very small screens */
  .scp-card-title{ font-size: 17px; }
}

/* 3) Explicit fixed-columns mode (use on the container: .scp.scp--fixed) */
.scp.scp--fixed{ --scp-cols: 5; } /* change this where needed */
.scp.scp--fixed .scp-grid{
  grid-template-columns: repeat(var(--scp-cols), minmax(0, 1fr));
}

/* 4) Keep one-row scroller behavior (unchanged); make sure min width cooperates */
.scp--one-row .scp-grid{
  grid-auto-flow: column;
  grid-auto-columns: minmax(var(--scp-min), 1fr);
  grid-template-columns: none;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

/* 5) Better fallback for browsers without aspect-ratio */
@supports not (aspect-ratio: 1 / 1){
  .scp-thumb{ position:relative; padding-top:56.25%; background:#f6f7f9; }
  .scp-thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
}

/* 6) Slightly larger no-image pastel hero so it reads well on mobile */
.scp-card.no-image::before{ aspect-ratio: 16/9; }
@supports not (aspect-ratio: 1 / 1){
  .scp-card.no-image::before{ display:block; padding-top:56.25%; content:""; }
}