/* ==========================================================================
   fk-blog — stylesheet of the fk_tbx_blog front pages (article list page +
   article detail page), served on those pages only (controller setMedia).

   Production form of the VALIDATED design proposal (scratchpad preview
   fk-blog.css): the composition reuses the delivered fk-ui building blocks
   verbatim and only DRAWS the missing pieces (category pills, pagination,
   card excerpt, reading column), each anchored on the delivered charter.
   Source paths cited per rule are relative to
   docs/reference/fk-ui/fk-ui/src/scss/ unless stated otherwise.

   Token-only: consumes the theme CSS custom properties (--* tokens of
   themes/fk_tbx/src/scss/_tokens.scss). Only non-token literals are the
   delivered invariants #fff ($white) and the delivered breakpoints
   576/768/992px ($breakpoint-sm/md/lg, theme/_variable-base.scss:192-194)
   and transitions (theme/_variable-base.scss:188-189).

   DELTA vs the validated preview file (step B3): the preview PART 1 rules
   already compiled in the served theme.css are NOT carried — hero-page and
   breadcrumb-nav stay theme-side (with the Bootstrap layer: container-md,
   row/row-cols/g-4, breadcrumb base, utilities, .btn/.btn-secondary,
   .section-padding, .bg-light-grey). The delivered home-news rules ARE
   carried: their theme→module move is catalog-acted (decision utilisateur
   2026-08-02) and was PERFORMED at step B4 — the theme chain no longer
   ships any home-news rule (theme.scss documented delta), this file is
   their single source. The move added the section shell rules (.home-news,
   __header, __title — _home-news.scss:2-22) next to the card rules carried
   since B3.

   Focus/hover: sober, NO halo ring — per the fk-form "strict delivered"
   decision; the delivered .btn kills focus outline/box-shadow entirely
   (_base-custom.scss:208-211). :focus-visible mirrors the hover state.
   ========================================================================== */


/* ==========================================================================
   PART 1 — DELIVERED RULES, COPIED VERBATIM (R1)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Section shell — copy of components/home/_home-news.scss:2-22 (the
   « Dernières actualités » section paddings, header row and title), moved
   from the theme at step B4 (catalog-acted move). The section background
   comes from the delivered utility class bg-light-grey carried by the
   markup — theme-side, like every delivered utility.
   -------------------------------------------------------------------------- */
.home-news {
  padding: 82px 0;
}

.home-news__title {
  margin-bottom: 12px;
}

.home-news__title span {
  color: var(--accent-color);
}

.home-news__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 24px;
  text-align: center;
}

@media (max-width: 768px) {
  .home-news {
    padding: 32px 0;
  }
}

/* --------------------------------------------------------------------------
   Article card — copy of components/home/_home-news.scss:25-98, THE
   delivered card motif (.home-news__card), reused as-is by the blog grid.
   Both delivered meta styles are copied: __card-date (sp13 partial
   home-news.php:41) and __card-cat (aca partial home-news-aca.php:41).
   -------------------------------------------------------------------------- */
.home-news__card {
  display: block;
  height: 100%;
  background-color: #fff;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.home-news__card-img {
  display: block;
  width: 100%;
  /* Delivered comment: height capped to stay light on mobile. */
  height: 220px;
  object-fit: cover;
}

.home-news__card-body {
  padding: 20px;
}

.home-news__card-date {
  display: block;
  color: var(--primary-color);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.3px;
  margin-bottom: 8px;
}

.home-news__card-cat {
  display: block;
  color: var(--accent-color);
  font-size: 14px;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 8px;
}

.home-news__card-title {
  color: var(--primary-color);
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 16px;
}

.home-news__card-title span {
  color: var(--accent-color);
}

.home-news__card-link {
  color: var(--secondary-color);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.home-news__card-link:hover {
  opacity: 0.7;
}

@media (max-width: 768px) {
  .home-news__card-date {
    font-size: 12px;
  }

  .home-news__card-cat {
    font-size: 12px;
  }

  .home-news__card-title {
    font-size: 18px;
  }

  .home-news__card-link {
    font-size: 14px;
  }
}


/* ==========================================================================
   PART 2 — fk-blog__* PROPOSED RULES (nothing delivered for these pieces;
   every value anchored on the delivered charter, anchors cited per rule)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Category filter pills (list page) — plain links, one per category URL.
   DRAWN (no delivered filter pill): geometry anchored on the delivered
   pill button (.btn: radius var(--radius-full), 2px border, inline-flex,
   transition $transition-base — _base-custom.scss:192-232) and on the
   delivered pill badge (.product-card__badge: padding 4px 16px, 1px border,
   14px, radius-full, inline-flex gap 8px —
   components/catalog/_product-card.scss:129-158). Typography echoes the
   delivered card category meta (14px uppercase letter-spacing .3px,
   _home-news.scss:58-69). Active state = accent bg + revert text like the
   delivered .btn.btn-accent pair (_base-custom.scss:233-242).
   Row rhythm: gap 12px like .home-news__header (_home-news.scss:14-22),
   block margin 40px like .section-header (_base-custom.scss:156-161).
   -------------------------------------------------------------------------- */
.fk-blog__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 40px;
}

.fk-blog__pill {
  display: inline-flex;
  align-items: center;
  padding: 8px 20px;
  background-color: #fff;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-full);
  color: var(--primary-color);
  font-family: var(--font-primary);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

/* Sober hover, no halo (fk-form strict-delivered decision). */
.fk-blog__pill:hover,
.fk-blog__pill:focus-visible {
  outline: 0;
  border-color: var(--accent-color);
  color: var(--accent-color);
}

.fk-blog__pill--active,
.fk-blog__pill--active:hover,
.fk-blog__pill--active:focus-visible {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--accent-revert-color);
}

@media (max-width: 768px) {
  /* Mobile: same 8px gap step-down as the delivered card metas
     (14px -> 12px, _home-news.scss:53-55). */
  .fk-blog__filters {
    gap: 8px;
    margin-bottom: 32px;
  }

  .fk-blog__pill {
    padding: 6px 16px;
    font-size: 12px;
  }
}

/* --------------------------------------------------------------------------
   Card excerpt — EXTENSION of the delivered card motif: the delivered
   .home-news__card has no excerpt, but the user acted a post "Description
   (affichée sur les vignettes)". Sits between __card-title (margin-bottom
   16px) and __card-link. 16px muted ink like .section-desc
   (_base-custom.scss:184-188); muted = rgba(primary, .65), the fk-form
   precedent ($text-light is not a theme token). Clamped to 2 lines.
   -------------------------------------------------------------------------- */
.fk-blog__excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  color: rgba(var(--primary-color-rgb), 0.65);
  font-size: 16px;
  line-height: 1.5;
  margin: 0 0 16px;
}

@media (max-width: 768px) {
  /* Same step-down as the delivered __card-link (16px -> 14px,
     _home-news.scss:86-93). */
  .fk-blog__excerpt {
    font-size: 14px;
  }
}

/* --------------------------------------------------------------------------
   Empty state — acted 2026-08-02 (exact wording set by the user). Replaces
   the card grid when no article is published. Same muted ink and sizes as
   .fk-blog__excerpt; centered, with enough breathing room to keep the
   section from collapsing between the pills and the footer.
   -------------------------------------------------------------------------- */
.fk-blog__empty {
  color: rgba(var(--primary-color-rgb), 0.65);
  font-size: 16px;
  line-height: 1.5;
  text-align: center;
  margin: 0;
  padding: 48px 0;
}

@media (max-width: 768px) {
  .fk-blog__empty {
    font-size: 14px;
    padding: 32px 0;
  }
}

/* --------------------------------------------------------------------------
   Pagination (list page) — DRAWN, acted gap (nothing delivered).
   Round page buttons: radius-full circles like the delivered round icon
   chips (.product-card__vehicle-icon, _product-card.scss:107-121); 44px
   diameter ≈ the delivered .btn height (12px padding + 15px text + 2px
   borders, _base-custom.scss:192-211). Inactive/hover/active states reuse
   the pill states above (accent bg + revert text when active, per the
   delivered .btn.btn-accent pair). Disabled = greyed on light-grey.
   Prev/next = same circles with plain "‹ ›" glyphs (no icon font — sober).
   Top margin 40px = .section-header rhythm (_base-custom.scss:156-161).
   -------------------------------------------------------------------------- */
.fk-blog__pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 40px;
}

.fk-blog__page {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background-color: #fff;
  border: 2px solid var(--border-color);
  border-radius: var(--radius-full);
  color: var(--primary-color);
  font-family: var(--font-primary);
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

a.fk-blog__page:hover,
a.fk-blog__page:focus-visible {
  outline: 0;
  border-color: var(--accent-color);
  color: var(--accent-color);
}

.fk-blog__page--active,
.fk-blog__page--active:hover,
.fk-blog__page--active:focus-visible {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--accent-revert-color);
}

.fk-blog__page--disabled {
  background-color: transparent;
  border-color: var(--border-color);
  color: rgba(var(--primary-color-rgb), 0.35);
  pointer-events: none;
}

/* Ellipsis between distant page numbers: plain, borderless. */
.fk-blog__page--gap {
  width: auto;
  min-width: 24px;
  background-color: transparent;
  border: 0;
  color: rgba(var(--primary-color-rgb), 0.5);
}

@media (max-width: 768px) {
  .fk-blog__pagination {
    gap: 6px;
    margin-top: 32px;
  }

  .fk-blog__page {
    width: 40px;
    height: 40px;
    font-size: 14px;
  }
}

/* --------------------------------------------------------------------------
   Detail hero meta line (category + date above the h1) — DRAWN wrapper;
   the two spans replicate verbatim the delivered card meta typography:
   category = .home-news__card-cat ink (_home-news.scss:58-69), date =
   .home-news__card-date ink (_home-news.scss:46-56); uppercase carried by
   the markup class .text-uppercase exactly like the delivered partials.
   Bottom margin 12px = the delivered .home-news__title margin
   (_home-news.scss:8-13).
   -------------------------------------------------------------------------- */
.fk-blog__hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 16px;
  margin: 0 0 12px;
}

.fk-blog__hero-cat {
  color: var(--accent-color);
  font-size: 14px;
  font-weight: normal;
  letter-spacing: 0.3px;
}

.fk-blog__hero-date {
  color: var(--primary-color);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

@media (max-width: 768px) {
  /* Same 14px -> 12px step-down as the delivered card metas. */
  .fk-blog__hero-cat,
  .fk-blog__hero-date {
    font-size: 12px;
  }
}

/* --------------------------------------------------------------------------
   Article reading column (detail page) — DRAWN (no delivered article
   body). Centered 800px column per the acted composition; readability
   precedent: .section-header .title-group max-width 600px
   (_base-custom.scss:163-165) — 800px chosen for a full reading column,
   flagged as a derived fine value.
   -------------------------------------------------------------------------- */
.fk-blog__article {
  max-width: 800px;
  margin: 0 auto;
}

/* Cover image: radius-lg per the acted composition; cover crop like the
   delivered card image (_home-news.scss:34-40); 16/9 like the delivered
   full-width image block ratio in spirit (bloc-image-full). Bottom margin
   40px = .section-header rhythm (_base-custom.scss:156-161). */
.fk-blog__cover {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius-lg);
  margin-bottom: 40px;
}

@media (max-width: 768px) {
  .fk-blog__cover {
    border-radius: var(--radius-md);
    margin-bottom: 24px;
  }
}

/* --------------------------------------------------------------------------
   Rich content (WYSIWYG output) — DRAWN. Base ink/16px like .section-desc
   (_base-custom.scss:184-188) but full primary ink for body copy;
   line-height 1.7 (derived: delivered body is 1.4, a long-form reading
   column needs more — flagged as a derived fine value). Headings on
   var(--font-display) per the acted composition, sized on the delivered
   scale: h2 26px = delivered h4 (_base-custom.scss:107-115) close to the
   card title 24px (_home-news.scss:71-84); mobile 22px = delivered h4
   mobile. Accent list markers + accent-border quote echo the delivered
   accent usage (hero-page__title span, _hero-page.scss:40-42).
   Links = delivered card-link ink (secondary, 700 —_home-news.scss:86-97)
   plus underline for in-text readability.
   -------------------------------------------------------------------------- */
.fk-blog__content {
  color: var(--primary-color);
  font-size: 16px;
  line-height: 1.7;
}

.fk-blog__content p {
  margin: 0 0 20px;
}

.fk-blog__content h2 {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.25;
  margin: 40px 0 16px;
}

.fk-blog__content h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  margin: 32px 0 12px;
}

.fk-blog__content ul,
.fk-blog__content ol {
  margin: 0 0 20px;
  padding-left: 24px;
}

.fk-blog__content li {
  margin-bottom: 8px;
}

.fk-blog__content li::marker {
  color: var(--accent-color);
}

.fk-blog__content a {
  color: var(--secondary-color);
  font-weight: 700;
  text-decoration: underline;
}

.fk-blog__content a:hover {
  /* Same sober hover as the delivered card link (_home-news.scss:95-97). */
  opacity: 0.7;
}

.fk-blog__content img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  margin: 32px 0;
}

.fk-blog__content blockquote {
  border-left: 3px solid var(--accent-color);
  padding: 4px 0 4px 24px;
  margin: 32px 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.6;
}

.fk-blog__content blockquote p {
  margin: 0;
}

@media (max-width: 768px) {
  .fk-blog__content h2 {
    font-size: 22px;
  }

  .fk-blog__content h3 {
    font-size: 18px;
  }

  .fk-blog__content blockquote {
    font-size: 16px;
  }
}

/* --------------------------------------------------------------------------
   Back to list (detail page) — retained option: the delivered
   .btn.btn-secondary pill with the delivered home-news CTA label
   ("Voir toutes les actualités", partials/home/home-news.php:4,49-52),
   centered like the delivered CTA row. Only the wrapper is drawn; the
   button itself is 100% delivered classes.
   -------------------------------------------------------------------------- */
.fk-blog__back {
  margin-top: 48px;
  text-align: center;
}