/* ============================================================
   franco-media.com - blog listing (posts index) and category
   archives. TASK-N05 Block B5, 05-09-2026, per Brain's ruling of
   05-09-2026 ("same sidebar component as home"). Only loaded on
   is_home() or is_category() (see gpcf_enqueue_styles()).

   .split/.rail/.slot/.widget/.chip come from shared-components.css
   (already loaded globally) - not redefined here. .cards/.card are
   duplicated from home.css because this file loads on templates that
   do not load home.css - the same duplication-over-refactor choice
   made throughout this block, kept for the same reason: home.css is
   Brain-approved and already verified live, and is not touched by
   this block.

   Column count (TASK-N20, ruling BU3): two columns was the original
   deliberate choice for this grid; changed to three on Fabrice's
   instruction, 02-10-2026 (TASK-N19e, ruling BU2). Revisit when
   excerpts land (TASK-N22).
   ============================================================ */

.wrap{
  max-width:var(--content-max);
  margin:0 auto;
  padding-left:var(--page-gutter);
  padding-right:var(--page-gutter);
}
.blogsect{ padding:40px 0 0; }
/* TASK-N38 (A2, A3): intro under the header of a category archive and of the blog listing. */
.archive-intro{ padding-top:32px; }
.archive-intro p{
  margin:0 0 12px;
  max-width:68ch;
  font-family:var(--font-body);
  font-size:var(--size-lead);
  line-height:1.6;
  color:var(--os-text);
}
.archive-intro + .wrap .blogsect{ padding-top:24px; }
.eyebrow{
  margin:0 0 6px;
  font-family:var(--font-body);
  font-weight:var(--weight-bold);
  font-size:13.5px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--os-link);
}
.blogsect h2{
  margin:0;
  font-family:var(--font-display);
  font-weight:var(--weight-display);
  font-size:var(--size-section-h2);
  line-height:1.15;
  color:var(--os-heading);
}
.blogsect .lead{
  margin:10px 0 0;
  font-family:var(--font-body);
  font-size:var(--size-lead);
  line-height:1.5;
  color:var(--os-muted);
  max-width:56ch;
}

/* ---------- Article grid (duplicated from home.css, B3) ---------- */
/* TASK-N19e: corrected to 3 columns, matching home.css and this block's
own stated intent (B5 comment above: "same sidebar component as home").
Was repeat(2,1fr), a divergence from home.css found during the N19c
category column diagnosis, not what Fabrice originally reported but a
real mismatch against this file's own documented intent. No layout or
sidebar structure changed, still one right sidebar, only the number of
article-card tiles per row inside the same content column. */

.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--card-gap);
}
.card{
  background:var(--os-card);
  border:1px solid var(--os-line);
  border-radius:var(--radius-card);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  color:inherit;
  transition:box-shadow var(--duration-base) var(--ease), transform var(--duration-base) var(--ease);
}
.card:hover{
  box-shadow:var(--shadow-floating);
  transform:translateY(-2px);
}
.card, .card:hover, .card:focus{ text-decoration:none; } /* TASK-N22 (ruling CK): the card is an anchor and the parent theme underlines every link, which put an underline under the title, the excerpt and the date. Off here, blog listing and category archives only (this file is not loaded on home). */
.card .ph{
  aspect-ratio:16 / 10;
  background:var(--os-sunken);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--font-body);
  font-weight:var(--weight-bold);
  font-size:var(--size-label);
  letter-spacing:1.6px;
  text-transform:uppercase;
  color:var(--os-text); /* N28 (DY3C): muted on sunken measures 4.42:1 */
}
.card .ph.ph-photo{ padding:0; }
.card .ph.ph-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
.card .body{ padding:14px 16px 16px; display:flex; flex-direction:column; gap:9px; }
.card h3{
  margin:0;
  font-family:var(--font-display);
  font-weight:var(--weight-display);
  font-size:var(--size-card-title);
  line-height:var(--lh-card-title);
  color:var(--os-heading);
}
.card time{ font-family:var(--font-body); font-size:var(--size-caption); color:var(--os-muted); }
/* TASK-N22 (ruling BU4, spec 5b): excerpt line under the title, listing and category cards only. The text is capped at about 25 words in PHP (word boundary, ellipsis), this clamps it to three lines. Existing tokens only. home.css is not loaded here and the home card never carries this element. */
.card .excerpt{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--size-small);
  line-height:var(--lh-body);
  color:var(--os-muted);
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
  line-clamp:3;
  overflow:hidden;
}

/* Column count (TASK-N20, ruling BU3): two columns was the original
   deliberate choice for this grid; changed to three on Fabrice's
   instruction, 02-10-2026 (TASK-N19e, ruling BU2). Excerpts landed in
   TASK-N22: whether three across is too cramped with them is Fabrice's call
   by eye on the deployed result, a flip back to two is a one-line change to
   repeat(2,1fr) above.
   Closing line (TASK-N23): a two-column layout B with a 540 px content column
   was chosen (ruling CR) and reversed before any deploy. Final: three columns
   at 820 px by layout A, ruling CT, 05-10-2026. The column-count history ends
   here. */

/* ---------- Pagination ---------- */

.pager{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:var(--space-13);
}
.pager .page-numbers{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:40px;
  height:40px;
  padding:0 12px;
  border-radius:var(--radius-sm);
  border:1px solid var(--os-line);
  background:var(--os-card);
  font-family:var(--font-body);
  font-weight:var(--weight-bold);
  font-size:14.5px;
  color:var(--os-link);
}
.pager .page-numbers:hover{ background:var(--acc-tint, var(--os-tint)); } /* TASK-N18: rubrique accent on category archives, ruled 2c/3 - no-op on the blog listing, which has no rubrique */
.pager .page-numbers.current{ background:var(--acc-tint, var(--os-tint)); border-color:var(--acc, var(--os-link)); color:var(--os-heading); } /* TASK-N18, ruled 2c/3; N28 (DY4): ink on the tint with an accent edge, white on an accent fill fails 4.5:1 for two accents */
.pager .page-numbers.dots{ border-color:transparent; background:none; color:var(--os-muted); }

.notfound{ padding:40px 0 8px; }
.notfound-form{ display:flex; gap:10px; max-width:640px; margin:0; padding:0; }
.notfound-form input[type="search"]{ flex:1 1 auto; min-width:0; min-height:var(--tap-comfortable); }
.notfound-go{
  flex:0 0 auto;
  min-height:var(--tap-comfortable);
  padding:0 24px;
  border:0;
  border-radius:var(--radius-sm);
  background:var(--os-link);
  color:var(--on-dark);
  font-family:var(--font-body);
  font-size:var(--size-body);
  font-weight:var(--weight-bold);
  cursor:pointer;
}
.notfound-go:hover{ background:var(--os-link-hover); }
.notfound-go:focus-visible{ outline:2px solid var(--os-accent); outline-offset:2px; }

.blogempty{
  padding:40px 0;
  font-family:var(--font-body);
  font-size:var(--size-body);
  color:var(--os-muted);
}

/* ---------- Mobile (390px) ---------- */

@media (max-width:768px){
  .wrap{ padding-left:var(--page-gutter-mobile); padding-right:var(--page-gutter-mobile); }
  .blogsect{ padding:28px 0 0; }
  .blogsect h2{ font-size:var(--m-size-h2); }
  .cards{ grid-template-columns:1fr; gap:14px; }
  .card .ph{ aspect-ratio:16 / 9; }
}