/* ============================================================
   Curated playlists — shared component
   A reusable "here's a hand-picked path through our content for YOU"
   block. Embedded on /knowledge-hub/, /systems/, /resources/.
   Canonical tokens only. No :root / body overrides.
   ============================================================ */

/* -------- Section wrapper -------- */

.playlists {
  padding-block: clamp(44px, 5vw, 72px);
  background: var(--hvb-sand);
}

.playlists + section {
  /* Shade the following section subtly to separate playlists from
     whatever the page puts next. */
  background: #fff;
}

.playlists .section-head {
  margin-bottom: clamp(24px, 3vw, 36px);
}

.playlists .section-head .kicker {
  color: var(--hvb-teal);
  font-family: var(--font-head);
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin: 0 0 10px;
  display: inline-block;
  background: rgba(31, 111, 98, 0.08);
  padding: 6px 12px;
  border-radius: 999px;
}

.playlists .section-head h2 {
  margin: 0 0 10px;
  font-family: var(--font-head);
  font-size: clamp(24px, 2.8vw, 34px);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--hvb-green);
}

.playlists .section-head .subhead {
  margin: 0;
  color: var(--hvb-slate);
  font-size: clamp(15px, 1.1vw, 16.5px);
  line-height: 1.6;
  max-width: 62ch;
}

/* -------- Playlist grid -------- */

.playlist-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 20px;
}

@media (min-width: 820px) {
  .playlist-grid--two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
  .playlist-grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }
}

@media (min-width: 1120px) {
  .playlist-grid--three {
    gap: 24px;
  }
}

/* -------- Playlist card -------- */

.playlist-card {
  background: #fff;
  border: 1px solid rgba(14, 59, 46, 0.06);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-level-1);
  padding: clamp(22px, 2.5vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  overflow: hidden;
  transition: box-shadow 220ms ease, transform 220ms ease;
}

.playlist-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--hvb-green) 0%, var(--hvb-teal) 100%);
  opacity: 0;
  transition: opacity 220ms ease;
}

.playlist-card:hover,
.playlist-card:focus-within {
  box-shadow: var(--shadow-level-2);
  transform: translateY(-2px);
}

.playlist-card:hover::before,
.playlist-card:focus-within::before {
  opacity: 0.9;
}

/* Header: icon + title block */

.playlist-card__header {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.playlist-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background-color: rgba(31, 111, 98, 0.1);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 24px 24px;
}

.playlist-card__intro {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.playlist-card__eyebrow {
  margin: 0;
  font-family: var(--font-head);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--hvb-teal);
}

.playlist-card h3 {
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(18px, 1.6vw, 20px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.005em;
  color: var(--hvb-green);
}

.playlist-card__teaser {
  margin: 0;
  color: var(--hvb-slate);
  font-size: 14.5px;
  line-height: 1.55;
  max-width: 48ch;
}

/* Ordered list of picks */

.playlist-card__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  counter-reset: playlist-pick;
}

.playlist-card__list > li {
  counter-increment: playlist-pick;
  margin: 0;
  padding: 10px 0;
  border-top: 1px solid rgba(14, 59, 46, 0.06);
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
}

.playlist-card__list > li:first-child {
  border-top: 0;
  padding-top: 4px;
}

.playlist-card__list > li::before {
  content: counter(playlist-pick, decimal-leading-zero);
  font-family: var(--font-head);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: rgba(14, 59, 46, 0.4);
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
  align-self: center;
}

.playlist-card__list > li > a {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 14.5px;
  line-height: 1.35;
  color: var(--hvb-green);
  text-decoration: none;
  transition: color 160ms ease;
}

.playlist-card__list > li > a::after {
  content: "→";
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--hvb-teal);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 160ms ease, transform 160ms ease;
}

.playlist-card__list > li > a:hover,
.playlist-card__list > li > a:focus-visible {
  color: var(--hvb-teal);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  outline: none;
}

.playlist-card__list > li > a:hover::after,
.playlist-card__list > li > a:focus-visible::after {
  opacity: 1;
  transform: translateX(0);
}

.playlist-item__meta {
  grid-column: 2;
  font-family: var(--font-body);
  font-size: 12.5px;
  color: var(--hvb-slate);
  line-height: 1.4;
}

/* -------- Icon set (keyed by data-playlist-icon) --------

   Line icons baked into background-image data URIs with teal stroke,
   matching the rest of the design language. */

.playlist-card[data-playlist-icon="municipal"] .playlist-card__icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f6f62' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><line x1='3' y1='22' x2='21' y2='22'/><line x1='6' y1='18' x2='6' y2='11'/><line x1='10' y1='18' x2='10' y2='11'/><line x1='14' y1='18' x2='14' y2='11'/><line x1='18' y1='18' x2='18' y2='11'/><polygon points='12 2 20 7 4 7'/></svg>");
}

.playlist-card[data-playlist-icon="community"] .playlist-card__icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f6f62' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M23 21v-2a4 4 0 0 0-3-3.87'/><path d='M16 3.13a4 4 0 0 1 0 7.75'/></svg>");
}

.playlist-card[data-playlist-icon="granting-agency"] .playlist-card__icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f6f62' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='8' r='7'/><polyline points='8.21 13.89 7 23 12 20 17 23 15.79 13.88'/></svg>");
}

.playlist-card[data-playlist-icon="overview"] .playlist-card__icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f6f62' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><polygon points='16.24 7.76 14.12 14.12 7.76 16.24 9.88 9.88 16.24 7.76'/></svg>");
}

.playlist-card[data-playlist-icon="site-sponsor"] .playlist-card__icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f6f62' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/><circle cx='12' cy='10' r='3'/></svg>");
}

.playlist-card[data-playlist-icon="partner"] .playlist-card__icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f6f62' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71'/><path d='M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71'/></svg>");
}

.playlist-card[data-playlist-icon="press"] .playlist-card__icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f6f62' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-2 2zm0 0a2 2 0 0 1-2-2v-9c0-1.1.9-2 2-2h2'/><path d='M18 14h-8'/><path d='M15 18h-5'/><path d='M10 6h8v4h-8V6Z'/></svg>");
}