/* Category archive v2. Loads after category-archives.css and reuses its image
   machinery (.yhseo-category-card__image is still what yhseo_category_archive_image()
   emits, so the fallback layer, object-fit and focal point all still apply).
   Everything else here is new: v1's classes are untouched so the three lanes
   still on that template are unaffected.

   Tokens are the canonical set - navy #0b2233, ink #16272f, pine #0e5a46,
   hover #0a4737, ground #e8edec - and radii are 4 and 12, nothing else. */

.yhca2-main {
  position: relative;
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 20px 0 72px;
}

/* ---------- head: three lines, then the story ----------
   v1 opened with a stat card, a pagination sentence and a philosophy panel,
   roughly 430px of chrome at 375px before a reader saw a headline. */

.yhca2-head {
  padding: 26px 0 30px;
  border-bottom: 1px solid #d5dad6;
}

.yhca2-eyebrow {
  margin: 0 0 9px;
  color: #0e5a46;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .065em;
  text-transform: uppercase;
}

.yhca2-head h1 {
  max-width: 850px;
  margin: 0;
  color: #16272f !important;
  font: 600 clamp(34px, 5vw, 46px)/1.04 Georgia, "Times New Roman", serif;
  letter-spacing: -.032em;
}

.yhca2-dek {
  max-width: 660px;
  margin: 14px 0 0;
  color: #55666e;
  font-size: 17px;
  line-height: 1.5;
}

.yhca2-section {
  padding: 30px 0 0;
}

.yhca2-section-head {
  max-width: 700px;
  margin: 0 0 18px;
}

.yhca2-section-head h2 {
  margin: 0;
  color: #16272f !important;
  font: 600 clamp(22px, 2.6vw, 28px)/1.16 Georgia, "Times New Roman", serif;
  letter-spacing: -.02em;
}

.yhca2-section-head p {
  margin: 7px 0 0;
  color: #55666e;
  font-size: 15px;
  line-height: 1.5;
}

/* ---------- lead ---------- */

.yhca2-lead {
  overflow: hidden;
  border: 1px solid #d5dad6;
  border-radius: 12px;
  background: #fff;
}

.yhca2-lead > a {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* 16:9 across a 1180px column is 663px of photograph, which put the lead
   headline at 1093px - below the fold on a 1280x800 desktop, so "lead with the
   lead" showed a picture and no words. The cap only bites on wide viewports;
   at 375px the ratio still governs and the media is 194px. */
.yhca2-lead__media {
  aspect-ratio: 16 / 9;
  width: 100%;
  max-height: 460px;
}

.yhca2-lead__body {
  display: block;
  padding: 26px 28px 30px;
}

.yhca2-lead__title {
  margin: 0;
  color: #16272f !important;
  font: 600 clamp(26px, 3.2vw, 38px)/1.11 Georgia, "Times New Roman", serif;
  letter-spacing: -.022em;
  text-wrap: pretty;
}

.yhca2-lead__dek {
  max-width: 68ch;
  margin: 13px 0 0;
  color: #55666e;
  font-size: 17px;
  line-height: 1.55;
}

.yhca2-lead__open {
  display: inline-block;
  margin-top: 16px;
  color: #0e5a46;
  font-size: 13px;
  font-weight: 800;
}

.yhca2-lead:hover .yhca2-lead__open {
  color: #0a4737;
}

/* ---------- the reading path ----------
   Numbered because it is an order, not a ranking of popularity. */

.yhca2-path__list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.yhca2-path__item > a {
  display: flex;
  gap: 16px;
  align-items: center;
  min-height: 44px;
  padding: 10px 14px 10px 10px;
  border: 1px solid #d5dad6;
  border-radius: 12px;
  background: #fff;
  color: inherit;
  text-decoration: none;
}

.yhca2-path__item > a:hover {
  border-color: #0e5a46;
}

.yhca2-path__number {
  flex: 0 0 auto;
  min-width: 26px;
  color: #0e5a46;
  font: 600 20px/1 Georgia, "Times New Roman", serif;
  font-variant-numeric: tabular-nums;
  text-align: center;
}

.yhca2-path__media {
  flex: 0 0 84px;
  width: 84px;
  height: 84px;
  border-radius: 4px;
}

.yhca2-path__body {
  display: block;
  min-width: 0;
}

.yhca2-path__title {
  display: block;
  color: #16272f;
  font: 600 18px/1.28 Georgia, "Times New Roman", serif;
  letter-spacing: -.012em;
  text-wrap: pretty;
}

.yhca2-path__time {
  display: block;
  margin-top: 5px;
  color: #55666e;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.yhca2-path__all {
  display: inline-block;
  margin-top: 16px;
  color: #0e5a46;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}

.yhca2-path__all:hover {
  color: #0a4737;
  text-decoration: underline;
}

/* ---------- region chips ---------- */

.yhca2-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
}

.yhca2-chips a {
  display: inline-flex;
  gap: 7px;
  align-items: center;
  min-height: 44px;
  padding: 8px 15px;
  border: 1px solid #d5dad6;
  border-radius: 999px;
  background: #fff;
  color: #16272f;
  font-size: 13px;
  font-weight: 750;
  text-decoration: none;
}

.yhca2-chips a span {
  color: #55666e;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.yhca2-chips a:hover {
  border-color: #0e5a46;
  color: #0e5a46;
}

.yhca2-chips a[aria-current] {
  border-color: #0e5a46;
  background: #0e5a46;
  color: #fff;
}

.yhca2-chips a[aria-current] span {
  color: rgba(255, 255, 255, .78);
}

/* ---------- the grid ----------
   Two columns, not four. The headline is sized to stop dominating the card and
   the excerpt carries the rest; it is deliberately NOT line-clamped, because
   2.7.168 removed title clamps sitewide after they truncated mid-word. */

.yhca2-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.yhca2-card {
  overflow: hidden;
  border: 1px solid #d5dad6;
  border-radius: 12px;
  background: #fff;
}

.yhca2-card > a {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.yhca2-card__media {
  aspect-ratio: 16 / 9;
  width: 100%;
}

.yhca2-card__body {
  display: block;
  padding: 18px 20px 22px;
}

.yhca2-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 0 8px;
  color: #0e5a46;
  font-size: 12px;
  font-weight: 780;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.yhca2-card__title {
  margin: 0;
  color: #16272f !important;
  font: 600 20px/1.24 Georgia, "Times New Roman", serif;
  letter-spacing: -.012em;
  text-wrap: pretty;
}

.yhca2-card__excerpt {
  margin: 10px 0 0;
  color: #55666e;
  font-size: 15px;
  line-height: 1.55;
}

/* A story with no picture gets a text card. v1 gave it a giant brand monogram,
   which reads as a broken image rather than as a deliberate choice. */
.yhca2-card--text {
  background: #eef2f0;
  border-left: 3px solid #0e5a46;
}

.yhca2-card--text .yhca2-card__body {
  padding: 20px 22px 24px;
}

/* The fallback monogram still sits under every image while it loads. At v1's
   64px it announced itself; here it is a quiet placeholder. */
.yhca2-lead__media .yhseo-category-card__fallback,
.yhca2-card__media .yhseo-category-card__fallback,
.yhca2-path__media .yhseo-category-card__fallback {
  color: rgba(14, 90, 70, .22);
  font: 700 34px/1 Georgia, serif;
}

/* ---------- load more ----------
   A real link to the next paginated page. The script upgrades it to append in
   place; with scripting off, or for a crawler, it is the pagination. */

.yhca2-more {
  padding: 26px 0 0;
  text-align: center;
}

.yhca2-more a {
  display: inline-flex;
  min-height: 48px;
  align-items: center;
  padding: 12px 30px;
  border: 1px solid #0e5a46;
  border-radius: 4px;
  background: #0e5a46;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .02em;
  text-decoration: none;
}

.yhca2-more a:hover {
  background: #0a4737;
  border-color: #0a4737;
}

.yhca2-more a[aria-busy="true"] {
  opacity: .68;
}

.yhca2-live {
  margin: 18px 0 0;
  color: #55666e;
  font-size: 13px;
  text-align: center;
}

.yhca2-live:empty {
  margin: 0;
}

.yhca2-empty {
  margin: 0;
  color: #55666e;
  font-size: 16px;
}

/* ---------- the archive explainer, one line, at the bottom ---------- */

.yhca2-note {
  margin: 46px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid #d5dad6;
  color: #55666e;
  font-size: 13.5px;
  line-height: 1.6;
}

.yhca2-note a {
  color: #0e5a46;
  font-weight: 800;
}

@media (max-width: 760px) {
  .yhca2-main {
    width: calc(100% - 28px);
    padding-top: 14px;
  }

  .yhca2-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .yhca2-head {
    padding: 20px 0 24px;
  }

  .yhca2-lead__body {
    padding: 20px 20px 24px;
  }

  .yhca2-section {
    padding: 26px 0 0;
  }

  /* Seven chips wrap to four rows at 375px, 200px of filter UI above the
     stories - the same chrome-before-content the stat card was removed for.
     One scrolling row instead, with the scroll shadows the news filter strip
     already uses so the reader can see there is more to the side: the cover
     gradients are background-attachment local and travel with the content, so
     the inner shadow shows only on the side that still has chips. */
  .yhca2-chips {
    flex-wrap: nowrap;
    padding: 6px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    scroll-snap-type: inline proximity;
    background:
      linear-gradient(to right, #e8edec 30%, rgba(232, 237, 236, 0)) left / 40px 100%,
      linear-gradient(to left, #e8edec 30%, rgba(232, 237, 236, 0)) right / 40px 100%,
      radial-gradient(farthest-side at 0 50%, rgba(18, 42, 54, .2), transparent) left / 14px 100%,
      radial-gradient(farthest-side at 100% 50%, rgba(18, 42, 54, .2), transparent) right / 14px 100%;
    background-color: #e8edec;
    background-repeat: no-repeat;
    background-attachment: local, local, scroll, scroll;
  }

  .yhca2-chips::-webkit-scrollbar {
    display: none;
  }

  .yhca2-chips a {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }
}

@media (max-width: 520px) {
  .yhca2-path__media {
    flex-basis: 68px;
    width: 68px;
    height: 68px;
  }

  .yhca2-path__title {
    font-size: 16.5px;
  }

  .yhca2-path__item > a {
    gap: 12px;
  }

  .yhca2-dek {
    font-size: 16px;
  }

  .yhca2-lead__dek {
    font-size: 16px;
  }
}