/* ============================================================
   The two listing pages — Information & Activity (Figma 1:790) and Product (1:389).
   Both frames share one skeleton (hero, 262px category sidebar, 762px column, 3-across grid, pager),
   so articles.jade and products.jade load this same file; only the CARD differs, hence .ls-card
   (articles) and .pl-card (products) below.
   The scaffold classes (.cm-shop / .cm-art / .cm-pagination in cm.css) are still used by
   product-detail.jade, article-detail.jade and home.jade, so they are left untouched rather than
   reshaped here.
   The .ab-* hero rules are repeated on purpose: each page loads exactly one of these stylesheets.
   ============================================================ */

.ab-wrap { width: 100%; max-width: 1048px; margin-inline: auto; padding-inline: 12px; }

/* red 67x5 divider (1:808) */
.ab-rule { display: block; width: 67px; height: 5px; margin: 14px 0 0; background: #c71e30; }

/* buttons 1:810 / 1:813 */
.ab-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 20px; font-size: 14px; font-weight: 700;
  text-decoration: none; border: 1px solid transparent; border-radius: 0;
}
.ab-btn-red { background: #c71e30; color: #fdfdfd; }
.ab-btn-red:hover { background: #a91827; color: #fdfdfd; }
.ab-btn-ghost { border-color: #fefdfd; color: #fefdfd; }
.ab-btn-ghost:hover { background: rgba(255, 255, 255, .12); color: #fefdfd; }

/* ---------- HERO (1:805, 1920x455) ---------- */
.ab-hero {
  display: flex; align-items: center; min-height: 455px; padding: 40px 0;
  color: #fefdfd;
  /* NO colour wash. Figma 1:621 (and 1:14 on HOME) is a bare <img> with no fill and no overlay — the
     navy is baked into the photo, which already fades to near-black on the left where the text sits.
     Stacking a gradient on top double-darkened it (user report 2026-09-16). Same trap CLAUDE.md already
     records for the CTA band artwork: the asset IS the treatment, never layer a second one over it. */
  background: url("/front/img/cm/hero-inner.webp") center/cover no-repeat;
}
.ab-hero-eyebrow { margin: 0; font-size: 16px; font-weight: 700; color: #c71e30; }   /* 1:806 */
.ab-hero-title { margin: 6px 0 0; font-size: clamp(30px, 3.6vw, 43.939px); font-weight: 800; line-height: 1.15; }  /* 1:807 */
.ab-hero-text { max-width: 520px; margin: 16px 0 0; font-size: 16px; line-height: 1.7; }   /* 1:809 — Regular 16px */
.ab-hero-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

/* ---------- LAYOUT ----------
   Figma: content runs 448 → 1472 (the usual 1024 column). The sidebar occupies the first 262px
   (x448 → x710) and the cards the remaining 762px. */
.ls-main { padding: 40px 0 56px; background: #f9f9f9; }   /* the frame's ground is #f9f9f9 */
.ls-layout { display: grid; grid-template-columns: 262fr 762fr; gap: 0 24px; align-items: start; }
.ls-side { min-width: 0; }
.ls-body { min-width: 0; }

/* both headings are the same navy gradient, Bold 30px (1:877 / 1:870) */
.ls-side-head, .ls-head {
  margin: 0; font-size: 30px; font-weight: 700; line-height: 1.3;
  background: linear-gradient(90deg, #000e27, #0b3d73);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ls-side-head { margin-bottom: 22px; }
.ls-head { margin-bottom: 14px; }

/* 1:871–1:876 — 18px, 39px apart; the current one is Bold (that is the whole active state) */
.ls-side-nav { display: flex; flex-direction: column; gap: 18px; }
.ls-side-nav a {
  font-size: 18px; font-weight: 400; line-height: 1.2; color: #363636; text-decoration: none;
}
.ls-side-nav a:hover { color: #c71e30; }
.ls-side-nav a.is-active { font-weight: 700; color: #011a36; }
/* Two-level categories (product + services): a sub-category is indented 40px, measured off the
   Services frame where the tree is actually drawn (x23.39% parent → 25.47% child = 1920 * 2.08%). */
.ls-side-nav a.is-child { padding-left: 40px; }

/* 1:878 — Regular 16px intro under the heading */
.ls-intro { margin: 0 0 18px; font-size: 16px; font-weight: 400; line-height: 1.6; color: #363636; }

/* ---------- CARDS ----------
   3 across: 239.6px wide with a 20.4px gutter inside the 762px column. The card itself has no
   background or border in the design — the shadow belongs to the IMAGE (1:816). */
.ls-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 20px; }
.ls-card { display: flex; flex-direction: column; min-width: 0; }
.ls-card-media {
  display: block; aspect-ratio: 239.6 / 137.169; overflow: hidden;
  background: #e9edf2; border-radius: 9.94px; box-shadow: 0 3.976px 14.91px rgba(0, 0, 0, .15);
}
.ls-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ls-card-body { display: flex; flex-direction: column; flex: 1 1 auto; padding-top: 14px; }

/* 1:817 — Bold 14px #011a36, two lines */
.ls-card-title { margin: 0; font-size: 14px; font-weight: 700; line-height: 1.35; }
.ls-card-title a {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  color: #011a36; text-decoration: none;
}
.ls-card-title a:hover { color: #c71e30; }

/* 1:818 — Regular 14px #363636, two lines. Clamped in CSS; postCard() also caps the string at 120
   characters, which is why a card can end mid-word — the clamp is what decides what is shown. */
.ls-card-desc {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin: 10px 0 0; font-size: 14px; font-weight: 400; line-height: 1.5; color: #363636;
}

/* 1:819 date + 1:820/1:821 red Read More, pinned to the bottom of the card */
.ls-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 16px; }
.ls-card-date { font-size: 11.685px; font-weight: 400; color: #363636; }
.ls-card-more {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 112px; height: 32.135px; padding: 0 12px;
  font-size: 13.146px; font-weight: 500; color: #fdfdfd; text-decoration: none;
  background: #c71e30; border-radius: 0;
}
.ls-card-more:hover { background: #a91827; color: #fdfdfd; }

/* ---------- PRODUCT CARDS (Figma 1:389) ----------
   A real card here, unlike the article one: white panel 240x349, r10, shadow, with the photo filling
   the top 167px and only the TOP corners rounded. Same 3-across / 20px gutter as the article grid. */
.pl-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 33px 20px; }
.pl-card {
  display: flex; flex-direction: column; min-width: 0; overflow: hidden;
  background: #fdfdfd; border-radius: 10px; box-shadow: 0 4px 15px rgba(0, 0, 0, .15);
}
.pl-card-media { display: block; aspect-ratio: 240 / 167; overflow: hidden; background: #e9edf2; }
.pl-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pl-card-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 10px 12px 20px; }
/* 1:420 — Bold 14px, UPPERCASE, #061a3d (the design sets the case, so the data keeps its own) */
.pl-card-name { margin: 0; font-size: 14px; font-weight: 700; line-height: 1.35; text-transform: uppercase; }
.pl-card-name a {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  color: #061a3d; text-decoration: none;
}
.pl-card-name a:hover { color: #c71e30; }
/* 1:421 — Regular 14px #606369, two lines */
.pl-card-desc {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  margin: 10px 0 0; font-size: 14px; font-weight: 400; line-height: 1.5; color: #606369;
}
/* 1:440/1:441 — red 173x44, Bold 14px, centred with the card's own side inset */
.pl-card-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 173px; max-width: 100%; height: 44px; margin: 18px auto 0; padding: 0 12px;
  font-size: 14px; font-weight: 700; color: #fdfdfd; text-decoration: none; background: #c71e30;
}
.pl-card-btn:hover { background: #a91827; color: #fdfdfd; }

/* ---------- PAGINATION (1:791–1:798) ----------
   Numbers are 10.26px #bdbdbd; the current page is a 22.443px red square with #fdfbfc text. */
.ls-pager { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 36px; }
.ls-pager-num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22.443px; height: 22.443px; padding: 0 4px;
  font-size: 10.26px; line-height: 1.25; color: #bdbdbd; text-decoration: none;
}
.ls-pager-num:hover { color: #c71e30; }
.ls-pager-num.is-current { font-size: 11.542px; font-weight: 500; color: #fdfbfc; background: #c71e30; }
.ls-pager-gap { font-size: 10.26px; color: #bdbdbd; }
.ls-pager-arrow { display: inline-flex; align-items: center; justify-content: center; width: 22.443px; height: 22.443px; }
.ls-pager-arrow img { display: block; width: 8px; height: 12px; }
/* one chevron asset for both directions: the design rotates it for "previous" (node 1:794) */
.ls-pager-arrow.is-prev img { transform: scaleX(-1); }
/* first/last page: the arrow stays in place, greyed and unclickable */
.ls-pager-arrow.is-off { opacity: .35; cursor: default; }

/* ---------- EMPTY STATE ---------- */
.ls-empty { padding: 40px 0; text-align: center; }
.ls-empty-title { margin: 0; font-size: 18px; font-weight: 700; color: #011a36; }
.ls-empty-text { margin: 8px 0 0; font-size: 14px; font-weight: 300; color: #363636; }

/* ---------- responsive (no mobile frame in Figma — derived from the desktop one) ---------- */
@media (max-width: 991.98px) {
  /* the sidebar becomes a scrollable row of categories above the grid */
  .ls-layout { grid-template-columns: 1fr; gap: 24px; }
  .ls-side-head { margin-bottom: 14px; font-size: 26px; }
  .ls-head { font-size: 26px; }
  .ls-side-nav {
    flex-direction: row; flex-wrap: nowrap; gap: 10px;
    overflow-x: auto; padding-bottom: 6px; -webkit-overflow-scrolling: touch;
  }
  .ls-side-nav a {
    flex: 0 0 auto; padding: 8px 14px; font-size: 15px;
    background: #fff; border: 1px solid #e3e7ec; border-radius: 999px;
  }
  .ls-side-nav a.is-active { color: #fdfdfd; background: #c71e30; border-color: #c71e30; }
  .ls-cards { grid-template-columns: repeat(3, 1fr); gap: 26px 16px; }
  .pl-cards { gap: 26px 16px; }
}
@media (max-width: 767.98px) {
  .ab-hero { min-height: 380px; }
  .ab-hero-text { max-width: none; }
  .ls-main { padding: 32px 0 44px; }
  .ls-cards { grid-template-columns: repeat(2, 1fr); }
  .pl-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
  .ab-hero { min-height: 340px; padding: 32px 0; }
  .ab-hero-btns .ab-btn { width: 100%; }
  .ls-side-head, .ls-head { font-size: 22px; }
  .ls-cards { grid-template-columns: 1fr; gap: 24px; }
  .pl-cards { grid-template-columns: 1fr; gap: 24px; }
  .pl-card-btn { width: 100%; }
  /* one card per row is wide, so the image would tower — keep it to the designed ratio */
  .ls-card-media { aspect-ratio: 16 / 9; }
  .ls-intro { font-size: 15px; }
}