/* ==========================================================================
   program.css
   ========================================================================== */

/* ==========================================================================
   faq.css
   Section FAQ — layout 2 kolom: intro kiri (judul, deskripsi, link) +
   accordion kanan.

   Semua class & state (.faq__item, .faq__question, .faq__icon,
   .faq__answer, .faq__answer-inner, .is-open, data-faq-*) dipertahankan
   persis, jadi js/faq-accordion.js tidak perlu diubah.

   Prinsip: minimal. Satu gerakan yang berarti (plus berputar jadi silang
   saat dibuka), satu perubahan warna (teks jadi brand saat aktif), tidak
   ada ornamen tambahan. Garis pembatas antar item sendiri yang jadi
   struktur visualnya.
   ========================================================================== */

.faq {
  padding: 64px 0;
}

.faq__inner {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 80px;
  align-items: start;
  max-width: 1160px;
  margin: 0 auto;
}

/* -------------------------------------------------------------------- */
/* Kolom kiri — intro                                                   */
/* -------------------------------------------------------------------- */

.faq__intro {
  position: sticky;
  top: 100px;
}

.faq__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h2);
  line-height: 1.15;
  color: var(--text-dark);
  margin: 0 0 var(--space-4);
}

.faq__desc {
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0 0 var(--space-5);
  max-width: 34ch;
}

/* -------------------------------------------------------------------- */
/* Kolom kanan — accordion                                              */
/* -------------------------------------------------------------------- */

.faq__list {
  display: flex;
  flex-direction: column;
}

.faq__item {
  border-bottom: 1px solid var(--border-soft);
}

.faq__item:first-child {
  border-top: 1px solid var(--border-soft);
}

.faq__question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  padding: 22px 2px;
  font-family: inherit;
  font-weight: var(--fw-medium);
  font-size: var(--fs-md);
  color: var(--text-dark);
  line-height: 1.5;
  transition: color var(--transition-base);
}

.faq__question:hover {
  color: var(--text-dark);
}

.faq__question:focus-visible {
  outline: 2px solid var(--text-brand);
  outline-offset: 4px;
  border-radius: 3px;
}

.faq__item.is-open .faq__question {
  font-weight: var(--fw-semibold);
  color: var(--text-dark);
  /* Rapatkan jarak ke jawaban: padding bawah baris pertanyaan dikecilkan
     hanya saat item terbuka, tanpa mengubah tinggi baris saat tertutup. */
  padding-bottom: 8px;
}

/* -------------------------------------------------------------------- */
/* Ikon: plus yang berputar jadi silang                                 */
/* -------------------------------------------------------------------- */

.faq__icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--text-dark);
  transition: color var(--transition-base), transform var(--transition-base);
}

.faq__icon::before,
.faq__icon::after {
  content: '';
  position: absolute;
  background: currentColor;
  border-radius: 1px;
  transition: transform var(--transition-base), background var(--transition-base);
}

.faq__icon::before {
  width: 100%;
  height: 2px;
}

.faq__icon::after {
  width: 2px;
  height: 100%;
}

.faq__question:hover .faq__icon {
  color: var(--text-dark);
}

.faq__item.is-open .faq__icon {
  color: var(--text-dark);
  transform: rotate(135deg);
}

.faq__icon svg {
  display: none;
}

/* -------------------------------------------------------------------- */
/* Jawaban                                                              */
/* -------------------------------------------------------------------- */

.faq__answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--transition-base);
}

.faq__item.is-open .faq__answer {
  grid-template-rows: 1fr;
}

.faq__answer-inner {
  overflow: hidden;
  color: var(--text-muted);
  font-size: var(--fs-base);
  line-height: 1.7;
  margin: 0;
  padding: 0 26px 0 2px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.faq__answer-inner,
.faq__answer-inner * {
  margin: 0 !important;
}

.faq__answer-inner p + p {
  margin-top: 12px !important;
}

.faq__item.is-open .faq__answer-inner {
  padding-bottom: 18px;
  opacity: 1;
  transition-delay: 0.1s;
}

.faq__empty {
  text-align: center;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  padding: var(--space-5) 0;
}

/* -------------------------------------------------------------------- */
/* Responsive                                                           */
/* -------------------------------------------------------------------- */

@media (max-width: 900px) {
  .faq__inner {
    grid-template-columns: 1fr;
    /* Di layout 1 kolom, jarak intro → list cukup diatur lewat margin
       .faq__desc di bawah, jadi gap grid tidak perlu selebar versi
       2 kolom desktop (80px). */
    gap: 8px;
  }

  .faq__intro {
    position: static;
  }

  .faq__desc {
    max-width: none;
    /* Rapatkan jarak deskripsi ke accordion di bawahnya. */
    margin-bottom: var(--space-3);
  }
}

@media (max-width: 640px) {
  .faq {
    padding: 40px 0;
  }

  .faq__title {
    font-size: var(--fs-h2);
  }

  .faq__desc {
    margin-bottom: var(--space-2);
  }

  .faq__question {
    font-size: var(--fs-base);
    padding: 18px 2px;
  }

  .faq__answer-inner {
    font-size: var(--fs-base);
  }
}

/* -------------------------------------------------------------------- */
/* Aksesibilitas gerak                                                  */
/* -------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .faq__question,
  .faq__icon,
  .faq__icon::before,
  .faq__icon::after,
  .faq__answer,
  .faq__answer-inner {
    transition: none !important;
  }
}


/* -------------------------------------------------------------------- */
/* Hero                                                                 */
/* -------------------------------------------------------------------- */

.program-hero {
  padding: 10px 0 40px;
  overflow: hidden;
  min-height: calc(100vh - 90px);
  display: flex;
  align-items: center;
}

.program-hero__inner {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  align-items: center;
  gap: var(--space-9);
  width: 100%;
}

.program-hero__media {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--space-6) var(--space-2) var(--space-2) var(--space-7);
  min-height: 560px;
}

.program-hero__img {
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 680px;
  height: auto;
  max-height: 720px;
  object-fit: contain;
  border-radius: var(--radius-lg);
}

.program-hero__content {
  padding-right: var(--space-2);
}

.program-hero__title {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h1);
  line-height: 1.25;
  color: var(--text-dark);
  margin: 0 0 15px;
}

.program-hero__title span {
  color: var(--text-brand);
}

.program-hero__desc {
  color: var(--text-muted);
  font-size: var(--fs-md);
  line-height: 1.5;
  margin: 0 0 var(--space-5);
  max-width: 54ch;
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

.btn-primary.program-hero__cta {
  padding: 10px 22px;
  font-size: 15px;
  gap: 8px;
}

.btn-primary.program-hero__cta svg {
  width: 16px;
  height: 16px;
}

/* -------------------------------------------------------------------- */
/* Section Title (shared default — Berita keeps this)                   */
/* -------------------------------------------------------------------- */

.program-berita .section-title {
  text-align: center;
  font-size: var(--fs-h2);
  margin-bottom: var(--space-6);
}

.program-berita .section-title--left {
  text-align: left;
  margin-bottom: var(--space-3);
}

/* -------------------------------------------------------------------- */
/* Program Pokok — redesigned as a program index/listing                */
/* -------------------------------------------------------------------- */

.program-pokok {
  background: var(--bg-white);
  padding: 88px 0;
}

.program-pokok .section-title {
  text-align: center;
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h2);
  color: var(--text-dark);
  margin: 0 0 var(--space-8);
  position: relative;
}

.program-pokok .section-title::after {
  content: '';
  display: block;
  width: 64px;
  height: 2px;
  background: var(--text-brand);
  margin: 18px auto 0;
}

.program-pokok__grid {
  display: flex;
  flex-direction: column;
  max-width: 1160px;
  margin: 0 auto;
  gap: 88px;
  counter-reset: pokok;
}

.program-pokok__card {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto auto;
  align-items: center;
  column-gap: 64px;
  color: inherit;
}

/* Icon/media block — now a full-bleed photo card with the title
   overlaid on top (matches the reference layout), instead of a
   split box with a small 42%-width zoomed thumbnail. */
.program-pokok__icon {
  grid-column: 2;
  grid-row: 1 / 4;
  position: relative;
  isolation: isolate;
  color: var(--text-brand);
  background: linear-gradient(155deg, var(--bg-soft), var(--bg-white));
  border-radius: 14px;
  display: block;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  height: auto;
  box-sizing: border-box;
  text-decoration: none;
}

.program-pokok__icon img {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center;
  border-radius: 0;
}

/* The source photos already carry their own title/branding baked into the
   image itself, so we don't overlay a duplicate text label on top of them.
   Cards without a photo also stay plain (no fallback text label). */
.program-pokok__icon-title {
  display: none;
}

.program-pokok__icon:not(:has(img)) {
  display: flex;
  align-items: center;
  justify-content: center;
}

.program-pokok__content {
  grid-column: 1;
  grid-row: 1 / 4;
  display: grid;
  grid-template-rows: auto auto auto;
  align-content: center;
}

.program-pokok__title {
  grid-row: 1;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--text-dark);
  margin: 0;
  overflow-wrap: break-word;
  word-break: break-word;
}

.program-pokok__desc {
  grid-row: 2;
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--text-muted);
  margin: 8px 0 0;
  max-width: 52ch;
  overflow-wrap: break-word;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.program-pokok__actions {
  grid-row: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 16px;
}

.program-pokok__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 26px;
  border-radius: 10px; /* sebelumnya: 999px (pill penuh) — dibuat lebih kecil/rounded-square */
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  transition: background var(--transition-base), color var(--transition-base), border-color var(--transition-base);
  border: 1px solid var(--text-brand);
}

.program-pokok__btn--donasi {
  background: transparent;
  color: var(--text-brand);
}

.program-pokok__btn--donasi:hover {
  background: var(--text-brand);
  color: var(--bg-white);
}

.program-pokok__card:nth-child(even) .program-pokok__icon {
  grid-column: 1;
}

.program-pokok__card:nth-child(even) .program-pokok__content {
  grid-column: 2;
}

.program-pokok__empty {
  grid-column: 1 / -1;
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  padding: var(--space-5) 0;
}

/* -------------------------------------------------------------------- */
/* Berita Terkait                                                       */
/* -------------------------------------------------------------------- */

.program-berita {
  padding: 48px 0;
}

/* PERUBAHAN: deskripsi kini rata kiri-kanan (justify), sama seperti gaya
   deskripsi hero (.program-hero__desc) — text-justify + hyphens supaya
   spasi antar kata di baris terakhir tidak melebar aneh, dan kata panjang
   tetap bisa terpenggal rapi di ujung baris. */
.program-berita__lead {
  color: var(--text-muted);
  font-size: var(--fs-md);
  line-height: 1.5;
  max-width: 1200px;
  margin: 0 0 var(--space-6);
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;
}

.program-berita__slider {
  overflow: hidden;
}

.program-berita__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3 * 20px) / 4);
  gap: var(--card-gap);
  transition: transform 0.45s ease;
}

.program-berita__card {
  min-width: 0;
}

.program-berita__track:has(.berita-empty) {
  display: block;
}

.program-berita__track .berita-empty {
  display: block;
  width: 100%;
  text-align: center;
  font-size: var(--fs-sm);
}

/* -------------------------------------------------------------------- */
/* Cerita Penerima Manfaat Section                                      */
/* -------------------------------------------------------------------- */

.cpm {
  background: var(--bg-blue-tint);
  padding: 48px 0;
  width: 100%;
  overflow: hidden;
}

.cpm__heading {
  text-align: center;
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: 1.3;
  color: var(--text-brand);
  font-weight: var(--fw-normal);
  margin: 0 0 24px;
}

.cpm__heading strong {
  display: block;
  font-weight: var(--fw-semibold);
  color: var(--text-brand);
}

.cpm__inner {
  display: grid;
  grid-template-columns: 240px 1fr;
  align-items: center;
  gap: 40px;
  position: relative;
}

.cpm__intro {
  min-width: 240px;
  flex-shrink: 0;
  z-index: 10;
}

.cpm__quote-icon {
  display: inline-flex;
  color: var(--text-brand);
  width: 130px;
  height: 104px;
  margin-bottom: var(--space-4);
}
.cpm__quote-icon svg {
  width: 100%;
  height: 100%;
}

.cpm__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  line-height: 1.35;
  color: var(--text-brand);
  margin: 0 0 var(--space-5);
  letter-spacing: -0.01em;
}

.cpm__nav {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  max-width: 220px;
  width: 100%;
}

.cpm__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border: none;
  background: transparent;
  color: var(--text-brand);
  cursor: pointer;
  padding: 0;
  transition: transform var(--transition-fast), opacity var(--transition-fast);
}
.cpm__arrow svg {
  width: 20px;
  height: 20px;
}
.cpm__arrow:hover {
  transform: scale(1.15);
}
.cpm__arrow:active {
  transform: scale(0.95);
}
.cpm__arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
  transform: none;
}

.cpm__nav-line {
  position: relative;
  flex: 1 1 auto;
  height: 2px;
  background: var(--border-soft);
  border-radius: 2px;
  overflow: hidden;
}

.cpm__nav-line::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: calc((var(--active-index, 0) + 1) / var(--total-slides, 1) * 100%);
  background: var(--text-brand);
  transition: width 0.4s cubic-bezier(0.25, 1, 0.5, 1);
  border-radius: 2px;
}

.cpm__slider {
  position: relative;
  width: 100%;
  overflow: visible !important;
  margin-right: -50vw;
  padding-right: 50vw;
  padding-top: 28px;
  padding-bottom: 28px;
  clip-path: inset(-50px -200vw -50px 0px);
}

.cpm__track {
  display: flex;
  gap: 95px;
  transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: transform;
}

.cpm__card {
  position: relative;
  flex: 0 0 540px;
  max-width: calc(100vw - 80px);
  background: var(--bg-white);
  border-radius: 28px;
  box-shadow: none;
  border: 1px solid var(--border-soft);
  padding: 48px 125px 36px 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}

.cpm__card-quote {
  position: absolute;
  top: -22px;
  left: 28px;
  display: inline-flex;
  color: var(--text-brand);
  width: 54px;
  height: 44px;
  background: transparent;
  padding: 0;
  z-index: 2;
}
.cpm__card-quote svg {
  width: 100%;
  height: 100%;
}

.cpm__card-text {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--text-dark);
  text-align: left;
  margin: 0 0 var(--space-5);
  padding: 0 var(--space-2);
  max-width: 42ch;
}

.cpm__card-person {
  text-align: left;
  padding-left: var(--space-2);
}

.cpm__card-name {
  display: block;
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  color: var(--text-dark);
}

.cpm__card-role {
  display: block;
  font-size: var(--fs-base);
  color: var(--text-muted);
  margin-top: 3px;
}

/* Avatar — sedikit diperbesar untuk desktop (140px -> 160px),
   offset overlap kanan disesuaikan supaya proporsinya tetap sama. */
.cpm__card-avatar {
  position: absolute;
  top: 50%;
  right: -60px;
  transform: translateY(-50%);
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--border-soft);
  box-shadow: none;
  z-index: 3;
}

.cpm__card-avatar--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e8f0fe;
  color: var(--text-brand);
  font-weight: var(--fw-bold);
  font-size: calc(var(--fs-lg) + 12px);
  font-style: normal;
}

.cpm__track .berita-empty {
  width: 100%;
  text-align: center;
  color: var(--text-muted);
}

/* Saat kosong, matikan trik lebar penuh milik slider (padding-right: 50vw,
   margin-right negatif, clip-path) supaya track kembali jadi kotak normal
   selebar section — tanpa ini pusat teks jatuh di tengah area yang melebar
   ke kanan (sebagian di luar layar), bukan di tengah section yang terlihat.
   !important dipakai supaya konsisten menang di semua breakpoint, termasuk
   aturan mobile (640px) yang juga menulis ulang properti-properti ini. */
.cpm__slider:has(.berita-empty) {
  margin: 0 !important;
  padding: 0 !important;
  clip-path: none !important;
  overflow: hidden !important;
}

.cpm__track:has(.berita-empty) {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 100% !important;
  gap: 0 !important;
  padding: var(--space-6) 0 !important;
}

/* -------------------------------------------------------------------- */
/* Responsive Adaptation                                                */
/* -------------------------------------------------------------------- */

@media (max-width: 1200px) {
  .cpm__card {
    flex: 0 0 460px;
    padding: 44px 105px 32px 32px;
  }
  .cpm__card-avatar {
    width: 85px;
    height: 85px;
    right: -42px;
  }
  .cpm__track {
    gap: 75px;
  }

  .program-pokok__grid {
    max-width: 900px;
  }

  .program-pokok__card {
    column-gap: 40px;
  }

  .program-pokok__icon-title {
    font-size: clamp(24px, 3vw, 32px);
  }
}

@media (max-width: 1024px) {
  .program-berita__track { grid-auto-columns: calc((100% - 20px) / 2); }
}

@media (max-width: 860px) {
  .cpm { padding: 36px 0; }
  .program-hero { min-height: auto; }
  .program-hero__media {
    min-height: auto;
    /* Padding aslinya asimetris (kiri var(--space-7) vs kanan var(--space-2)),
       ok di layout 2 kolom desktop, tapi bikin gambar hero tampak bergeser
       ke kanan begitu kolom dipaksa jadi 1fr di mobile. Disamakan supaya
       flex justify-content: center benar-benar center. */
    padding: var(--space-4) var(--space-2);
  }

  .program-hero__inner { grid-template-columns: 1fr; gap: var(--space-8); text-align: center; }
  .program-hero__content { padding-right: 0; }
  .program-hero__desc { margin-left: auto; margin-right: auto; }

  .program-berita .section-title--left { text-align: center; }
  .program-berita__lead { margin-left: auto; margin-right: auto; }

  .cpm__inner {
    grid-template-columns: 1fr;
    gap: var(--space-5);
  }
  .cpm__intro {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .cpm__nav {
    margin: 0 auto;
  }

  /* ---- Berita Terkait (mobile carousel) ----
     Sebelumnya kartu dibatasi 78vw/max-width:300px TAPI slider-nya tetap
     di dalam padding container biasa — hasilnya kartu kedua nongol cukup
     lebar dan teksnya kepotong di tengah kata, terlihat rusak.

     Sekarang dibuat mengikuti pola persis .berita-grid di home: slider
     dibuat "bleed" ke tepi viewport (margin -16px + padding 20px),
     lalu lebar kartu dihitung relatif ke lebar layar itu sendiri (82vw).
     Hasilnya: kartu pertama tampil penuh, kartu berikutnya cuma "mengintip"
     tipis & rapi di tepi kanan — persis seperti carousel Berita di home. */
  .program-berita__slider {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 20px;
    margin: 0 -16px;
    padding: 4px 20px 14px;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  .program-berita__slider::-webkit-scrollbar { display: none; }

  .program-berita__slider .program-berita__track {
    display: flex !important;
    transform: none !important;
    width: max-content;
    gap: var(--space-5);
  }

  .program-berita__slider .program-berita__track:has(.berita-empty) {
    display: block !important;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .program-berita__card {
    flex: 0 0 82vw;
    max-width: 360px;
    scroll-snap-align: start;
  }

  .program-berita__dots { display: none; }

  .program-pokok {
    padding: 64px 0;
  }

  .program-pokok__grid {
    gap: 56px;
  }

  .program-pokok__card {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    justify-items: start;
    text-align: left;
    row-gap: 24px;
  }

  .program-pokok__icon,
  .program-pokok__card:nth-child(even) .program-pokok__icon {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    height: auto;
  }

  .program-pokok__content,
  .program-pokok__card:nth-child(even) .program-pokok__content {
    grid-column: 1;
    grid-row: 2;
    justify-items: start;
    text-align: left;
  }

  .program-pokok__desc {
    justify-self: start;
    max-width: 42ch;
  }

  .program-pokok__actions {
    justify-content: flex-start;
  }
}

@media (max-width: 640px) {
  .cpm__quote-icon {
    width: 92px;
    height: 74px;
  }

  /* Slider Container Mobile (Horizontal Scroll Native) */
  .cpm__slider {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 20px 0;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    clip-path: none !important;
  }
  .cpm__slider::-webkit-scrollbar {
    display: none;
  }

  /* Track Mobile */
  .cpm__track {
    display: flex !important;
    transform: none !important;
    width: max-content;
    gap: 16px;
    padding: 0 15px;
  }

  /* Card Item Mobile — kompak, quote kecil normal di dalam kartu,
     teks, lalu baris nama+role sejajar dengan avatar. Padding kiri
     dan kanan kartu dibuat sama persis (22px) di semua sisi. */
  .cpm__card {
    flex: 0 0 calc(100vw - 90px);
    max-width: 280px;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    border-radius: 18px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "quote  quote"
      "text   text"
      "person avatar";
    column-gap: 14px;
    row-gap: 10px;
    padding: 22px;
  }

  .cpm__card-quote {
    grid-area: quote;
    position: static;
    width: 30px;
    height: 24px;
  }

  .cpm__card-text {
    grid-area: text;
    padding: 0;
    margin: 0;
    font-size: var(--fs-sm);
    max-width: none;
  }

  .cpm__card-person {
    grid-area: person;
    align-self: center;
    padding-left: 0;
  }

  .cpm__card-avatar {
    grid-area: avatar;
    position: static;
    transform: none;
    width: 46px;
    height: 46px;
    align-self: center;
    justify-self: end;
  }

  /* Nama & jabatan dikecilkan khusus di mobile supaya proporsional
     dengan avatar yang lebih kecil dan card yang lebih kompak. */
  .cpm__card-name {
    font-size: var(--fs-sm);
  }

  .cpm__card-role {
    font-size: var(--fs-xs);
    margin-top: 2px;
  }

  .program-pokok {
    padding: 48px 0;
  }
  .program-pokok .section-title {
    font-size: var(--fs-h2);
    margin-bottom: var(--space-6);
  }

  .program-pokok__icon {
    height: auto;
    padding: 0;
  }

  .program-pokok__icon-title {
    font-size: clamp(20px, 6vw, 26px);
    padding: 20px;
  }

  .program-pokok__btn {
    padding: 10px 22px;
  }

  .program-hero__desc {
    font-size: var(--fs-base);
  }

  .program-berita__lead {
    font-size: var(--fs-base);
    text-align: justify;
    text-justify: inter-word;
    hyphens: auto;
  }

  .program-pokok__desc {
    font-size: var(--fs-base);
  }
}