/* "Category – list" page only. Hero = shared hub-hero. No "lp-" classes: [class^="lp-"] forces the icon font. */
.cat-list {
  --cl-head: var(--typography-headline-font-family, 'ES Rebond Grotesque'), sans-serif;
  --cl-text: var(--typography-paragraph-font-family, 'lp-inter'), sans-serif;
  --cl-accent: var(--color-content-accent, #005BC1);
  --cl-line: var(--color-divider-primary, #DFD6C9);
}

.ds-inner,
.cat-body { max-width: var(--hub-max); margin: 0 auto; padding-inline: var(--hub-gutter); }
.cat-body { padding-bottom: 80px; }
.ds-h2 { margin: 0; font: 500 28px/36px var(--cl-head); color: #222; }

/* Featured: carousel 4 / 2 / 82% */
.ds-related { --lp-carousel-item: calc((100% - 3 * 24px) / 4); padding: 40px 0 64px; }
.ds-related__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 40px; margin-bottom: 24px; } /* Arrows (40px) revealed by JS: no shift. */
.ds-related .lp-carousel__track { align-items: stretch; }
.ds-card { position: relative; display: flex; height: 100%; overflow: hidden; background: #fff; border: 1px solid var(--cl-line); border-radius: 2px; transition: border-color .2s ease-out; }
.ds-card:hover { border-color: var(--cl-accent); }
/* Thumb/letter tile from style.css, full height. */
.ds-card .related_posts_img { flex: 0 0 80px; height: auto; min-height: 96px; border-radius: 0; }
.ds-card .related_posts_img img { display: block; transition: transform .2s ease-out; }
.ds-card:hover .related_posts_img img { transform: scale(1.03); }
.ds-card__content { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; }
.ds-card__title { margin: 0; font: 500 15px/21px var(--cl-head); color: #222; transition: color .2s ease-out; }
.ds-card:hover .ds-card__title { color: var(--cl-accent); }
.ds-card__title a { color: inherit !important; text-decoration: none !important; }
.ds-card__title a::after { content: ""; position: absolute; inset: 0; } /* Whole card clickable. */
.ds-badge { align-self: flex-start; padding: 4px 8px; border-radius: 2px; background: #DFB254; font: 500 12px/16px var(--cl-head); color: #222; }
.ds-badge--linen { background: var(--cl-line); }
.ds-badge--dark { background: #222; color: #fff; }

/* Themes */
.cat-h2 { margin-bottom: 32px; }
.cat-theme { margin-bottom: 24px; padding: 32px; background: #F8F6F3; border-radius: 2px; }
.cat-theme__top { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; padding-top: 15px; margin-bottom: 4px; }
.cat-theme__top::before { content: ""; position: absolute; top: 0; left: 0; width: 32px; height: 3px; background: #DFB254; } /* Gold = decorative divider (DS). */
.cat-theme__h { margin: 0; font: 500 22px/30px var(--cl-head); color: #222; }
.cat-theme__h a { color: #222; text-decoration: none; transition: color .2s ease-out; }
.cat-theme__h a:hover { color: var(--cl-accent); }
.cat-theme__h a::after { content: " →"; color: var(--cl-accent); opacity: 0; transition: opacity .2s ease-out; }
.cat-theme__h a:hover::after { opacity: 1; }
.cat-theme__desc { margin: 0 0 8px; padding-bottom: 16px; border-bottom: 1px solid var(--cl-line); font: 400 14px/22px var(--cl-text); color: #5E5E5E; }
.cat-theme__links { margin: 0; padding: 0; list-style: none; columns: 2; column-gap: 32px; }
.cat-theme__links li { margin: 0; padding: 0; break-inside: avoid; border-bottom: 1px solid var(--cl-line); }
.cat-theme__links a { position: relative; display: block; margin: 0 -12px; padding: 8px 12px 8px 32px; border-radius: 2px; font: 400 14px/22px var(--cl-text); color: #222; text-decoration: none; transition: background-color .2s ease-out, color .2s ease-out; }
.cat-theme__links a::before { content: "›"; position: absolute; top: 8px; left: 14px; font: 500 16px/22px var(--cl-text); color: var(--cl-accent); transition: transform .2s ease-out; }
.cat-theme__links a:hover { background: #fff; color: var(--cl-accent) !important; }
.cat-theme__links a:hover::before { transform: translateX(3px); }
/* Collapsed links stay in the HTML (crawlable), no JS. */
.cat-more { text-align: right; }
.cat-more summary { display: inline-block; margin-top: 20px; list-style: none; cursor: pointer; font: 400 14px/22px var(--cl-text); color: var(--cl-accent); }
.cat-more summary::-webkit-details-marker { display: none; }
.cat-more summary::after { content: " ↓"; }
.cat-more summary:hover { color: #00409D; text-decoration: underline; }
.cat-more[open] summary { display: none; }
.cat-more .cat-theme__links { text-align: left; }

/* Bottom CTA */
.ds-cta { background: var(--cl-line); }
.ds-cta__inner { display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 24px; padding-right: 24px; }
.ds-cta__img { position: relative; grid-column: 1 / span 6; min-height: 320px; overflow: hidden; }
.ds-cta__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 35% 50%; } /* Keep the subject in frame. */
.ds-cta__content { grid-column: 8 / span 5; display: flex; flex-direction: column; align-items: flex-start; gap: 40px; padding: 64px 0; }
.ds-cta__top { display: flex; flex-direction: column; gap: 24px; }
.ds-cta__head { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.ds-cta .ds-h2 { font-size: 32px; line-height: 40px; }
.ds-cta p { margin: 0; font: 400 14px/22px var(--cl-text); color: #5E5E5E; }
.ds-cta p.ds-cta__legend { font-size: 11px; line-height: 16px; font-style: italic; }
.ds-btn { cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 16px 24px; border-radius: 9999px; background: var(--cl-accent); font: 500 16px/24px var(--cl-text); color: #fff !important; text-decoration: none !important; transition: background-color .2s ease-out; }
.ds-btn:hover { background: #00409D; }

@media (max-width: 991px) {
  .ds-related { --lp-carousel-item: calc((100% - 24px) / 2); }
}
@media (max-width: 767px) {
  .ds-h2 { font-size: 22px; line-height: 30px; }
  .ds-cta .ds-h2 { font-size: 24px; line-height: 32px; }
  .cat-theme__h { font-size: 20px; line-height: 28px; }
  .ds-related { --lp-carousel-item: 82%; padding: 32px 0 40px; }
  .cat-theme { padding: 24px; }
  .cat-theme__links { columns: 1; }
  .ds-cta__inner { display: block; padding: 0 16px; }
  .ds-cta__img { min-height: 0; }
  .ds-cta__img img { position: static; height: auto; aspect-ratio: 16 / 9; }
  .ds-cta__content { gap: 20px; padding: 24px 0 32px; }
  .ds-cta__top { gap: 12px; }
  .ds-cta__head { gap: 8px; }
}