/* Section tengah PDP. Dipindahkan dari clvn-desk
   (src/components/pdp/mid.css, 330 baris, seluruhnya).
   Angka angkanya TIDAK berubah, satu pun tidak. Yang berubah hanya
   nama kelas. Semua ukuran memakai token di tokens.css. Tidak ada
   angka px yang ditulis langsung kecuali hairline 1px.

   Berkas sumber berisi DUA komponen, jadi di sini ada DUA blok:
     kartu keunggulan  ->  .section-pdp-mid-usp
     standar mutu      ->  .section-pdp-mid-safety
   Di sumber track, kartu, dan badge masih blok terpisah dengan gaya
   nama lama. Di sini ketiganya ikut masuk sebagai elemen satu tingkat
   (__track, __card-media, __badge-label), pola yang sudah dipakai
   product-pushes.css dan side-nav.css.

   Slot media sumber diganti .u-placeholder milik tokens.css. */

/* --- A. Kartu keunggulan ---------------------------------------
   Terukur @1280: tinggi section 698.19, latar putih.
   Tingginya tidak dipatok. Dia jatuh sendiri dari padding 6rem,
   gap 6rem, tinggi judul, dan tinggi kartu yang ditentukan media
   persegi 357.49. */
.section-pdp-mid-usp {
  background: var(--white);
}

.section-pdp-mid-usp__inner {
  width: var(--grid-width);
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6rem;
  padding: 6rem 0;
}

.section-pdp-mid-usp__heading {
  margin: 0;
  color: var(--black);
  /* TIDAK ada text-align di sini. Terukur di sumber: text-align start,
     lebar kotak judul 700.29 @1280. Wrapper memang align-items center,
     jadi KOTAK judul duduk di tengah, tapi TEKS di dalamnya tetap rata
     kiri. Sebelumnya ditulis center dan itu salah baca. */
  padding: 0 var(--margin);
}

/* Track inline-flex, lebarnya menyusut mengikuti isi. Band 22 kolom
   jadi PLAFON, bukan lebar paksa. overflow clip, bukan hidden,
   karena hidden bikin scroll container. */
.section-pdp-mid-usp__track {
  display: inline-flex;
  flex-direction: row;
  /* Terukur flex-start, bukan stretch. Akibatnya nyata: di sumber tiap
     kartu setinggi isinya sendiri (461.95 / 479.59 / 479.59 @1280),
     bukan disamakan setinggi kartu tertinggi. */
  align-items: flex-start;
  gap: var(--gutter);
  max-width: calc(22 * var(--col) + 21 * var(--gutter));
  overflow: clip;
  /* Sumber punya padding 2px di sini, sengaja TIDAK disalin. Di sumber
     padding itu aman karena max-width duduk di elemen pembungkus yang
     lain. Di sini keduanya elemen yang sama, jadi dengan border-box
     padding 2px justru memotong 4px dari band kartu. */
}

/* Tiga kartu, bukan enam. Sepertiga band 22 kolom setelah dua gutter
   di antaranya dipotong:
     (22col + 21g - 2g) / 3  =  (22col + 19g) / 3
   Terukur 357.49 @1280. */
.section-pdp-mid-usp__card {
  flex: 0 0 calc((22 * var(--col) + 19 * var(--gutter)) / 3);
  display: flex;
  flex-direction: column;
  gap: 2rem;
  /* Terukur 8.8832 @1280 = 1rem. Ikut disalin walau di sini tidak
     terlihat (kartu tanpa latar dan overflow-nya visible), supaya
     kalau nanti kartu dapat latar radiusnya sudah benar. */
  border-radius: 1rem;

  /* Reveal. Default 0.3, naik ke 1 lewat kelas is-in yang dipasang
     js/pdp-mid.js. */
  opacity: 0.3;
  transition: opacity 0.8s var(--ease-media);
}

.section-pdp-mid-usp__card.is-in {
  opacity: 1;
}

/* Kalau visitor minta gerak dikurangi, kartu langsung tampil penuh.
   Bukan sekadar mempercepat transisi, tapi menghapus keadaan redupnya
   supaya teks tidak pernah tampil di opacity 0.3 tanpa pemicu. */
@media (prefers-reduced-motion: reduce) {
  .section-pdp-mid-usp__card {
    opacity: 1;
    transition: none;
  }
}

.section-pdp-mid-usp__card-media {
  aspect-ratio: 1 / 1;
  width: 100%;
  border-radius: 1rem;
  overflow: clip;
}

.section-pdp-mid-usp__card-caption {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-top: 2rem;
  border-top: 1px solid var(--hairline);
}

.section-pdp-mid-usp__card-title {
  margin: 0;
  color: var(--black);
}

.section-pdp-mid-usp__card-body {
  margin: 0;
  color: var(--black7);
}

/* Mobile dan tablet: track jadi carousel horizontal.
   Wrapper dilepas dari grid-width supaya carousel bisa menyentuh tepi
   layar, dan padding tepinya pindah ke track. Judul menahan padding
   var(--margin) sendiri, jadi dia tetap sejajar dengan kartu pertama. */
@media (max-width: 1023px) {
  .section-pdp-mid-usp__inner {
    width: 100%;
    align-items: stretch;
  }

  .section-pdp-mid-usp__track {
    display: flex;
    max-width: 100%;
    overflow: visible;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-inline: var(--margin);
    gap: 1.6rem;
    /* Scrollbar disembunyikan, gesture-nya tetap jalan. */
    scrollbar-width: none;
  }
  .section-pdp-mid-usp__track::-webkit-scrollbar {
    display: none;
  }

  /* Grid mobile 12 kolom, kartu 10 kolom supaya kartu berikutnya
     mengintip di tepi kanan dan carousel-nya terbaca sebagai carousel. */
  .section-pdp-mid-usp__card {
    flex: 0 0 calc(10 * var(--col) + 9 * var(--gutter));
    scroll-snap-align: start;
    /* Sumber mengecilkan jarak media ke caption dari 2rem jadi 1rem
       di bawah 1024. */
    gap: 1rem;
  }

  /* Caption ikut merapat di mobile: gap 0.8rem dan padding-top 1rem,
     terbaca langsung dari rule sumber. */
  .section-pdp-mid-usp__card-caption {
    gap: 0.8rem;
    padding-top: 1rem;
  }
}

/* TAMBAHAN situs ini, BUKAN dari sumber. Tidak ada satu angka pun yang
   berubah di sini, cuma satu properti wrap.
   Sumber memakai TIGA kartu, dan band 22 kolom terisi PAS oleh tiga
   kartu (3 kartu + 2 gutter = 22col + 21g = max-width track). Brief
   section ini minta EMPAT kartu, dan kartu keempat jatuh persis di
   luar band lalu dipotong habis oleh overflow clip, alias hilang sama
   sekali di 1024 ke atas. Dengan wrap dia turun ke baris kedua, bukan
   lenyap. Kalau kartunya nanti dikembalikan jadi tiga, rule ini tidak
   pernah aktif: tiga kartu lebarnya pas sebaris dan tidak ada yang
   wrap. Rentang di bawah 1024 sengaja tidak disentuh, wrap di sana
   akan mematikan carousel. */
@media (min-width: 1024px) {
  .section-pdp-mid-usp__track {
    flex-wrap: wrap;
  }
}

/* --- B. Standar mutu -------------------------------------------
   Terukur @1280: border-top 1px hairline, padding 6rem 0. */
.section-pdp-mid-safety {
  border-top: 1px solid var(--hairline);
  padding: 6rem 0;
  background: var(--white);
}

/* 8 kolom kiri, sisanya kanan, gap satu gutter.
   Kolom kanan ditulis 1fr, persis seperti sumber, bukan dihitung balik
   jadi 16col + 15g. Hasilnya sama (terukur 800.211 di sumber, 800.202
   di sini) tapi 1fr tidak bisa meleset kalau grid-width berubah. */
.section-pdp-mid-safety__grid {
  width: var(--grid-width);
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: calc(8 * var(--col) + 7 * var(--gutter)) 1fr;
  gap: var(--gutter);
}

/* 6 kolom PLUS 6 gutter, bukan 5. Terukur begitu, judulnya melar
   satu gutter melewati kolom keenam. */
.section-pdp-mid-safety__heading {
  margin: 0;
  color: var(--black);
  width: calc(6 * var(--col) + 6 * var(--gutter));
  max-width: 100%;
}

/* Lebar 13col + 12g = 646.97 @1280 duduk di KOLOMNYA, bukan di tiap
   anak. Terukur begitu di sumber: kolom kanan sendiri 646.97 di dalam
   track grid selebar 800.21, sisanya sengaja dibiarkan kosong.
   Anak-anaknya lalu ikut melebar sendiri karena align-items default
   stretch, jadi tidak perlu rule untuk tiap anak lagi. */
.section-pdp-mid-safety__right {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  width: calc(13 * var(--col) + 12 * var(--gutter));
  max-width: 100%;
}

/* Tombol BUKAN fit-content. Terukur 272.55 @1280 dan itu persis
   5col + 6g = 272.55, jadi lebarnya memang dipatok. Dengan fit-content
   lebarnya jadi 185.52, ikut panjang label placeholder. */
.section-pdp-mid-safety__right > .section-pdp-mid-safety__cta {
  width: calc(5 * var(--col) + 6 * var(--gutter));
}

.section-pdp-mid-safety__list-block {
  display: flex;
  flex-direction: column;
  /* 2rem belum terukur, dipilih supaya eyebrow menempel ke daftarnya
     dan tidak terbaca sebagai blok terpisah. */
  gap: 2rem;
}

.section-pdp-mid-safety__list-heading {
  margin: 0;
  color: var(--black7);
}

.section-pdp-mid-safety__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  /* 1.6rem belum terukur. */
  gap: 1.6rem;
}

.section-pdp-mid-safety__item {
  color: var(--black);
}

.section-pdp-mid-safety__badges {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: row;
  gap: var(--gutter);
}

/* Terukur 102.20 lebar. Itu 2 kolom + 2 gutter = 102.17 @1280, selisih
   0.03. Wajib dipatok, bukan dibiarkan menyusut mengikuti isi: tanpa
   lebar tetap tiap badge melar mengikuti panjang labelnya sendiri
   (terukur 120.97 di badge pertama) dan label yang seharusnya patah
   tiga baris cuma jadi dua. */
.section-pdp-mid-safety__badge {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  /* Terukur center, bukan flex-start. Ikon 4rem jadi duduk di tengah
     kotak 102.16, tidak menempel ke tepi kiri. */
  align-items: center;
  flex: 0 0 calc(2 * var(--col) + 2 * var(--gutter));
}

/* Terukur border-radius 0 di sumber, jadi tidak ada radius di sini. */
.section-pdp-mid-safety__badge-media {
  display: block;
  width: 4rem;
  height: 4rem;
  flex: 0 0 auto;
  overflow: clip;
}

/* .u-placeholder punya min-height 8rem. Di kotak 4rem itu memaksa
   badge jadi dua kali tinggi seharusnya, jadi dinolkan khusus di sini. */
.section-pdp-mid-safety__badge-media .u-placeholder {
  min-height: 0;
}

.section-pdp-mid-safety__badge-label {
  /* Terukur rgb(20,20,20), yaitu --black, BUKAN --black7. Label badge
     sewarna teks utama, beda dari body kartu keunggulan yang memang
     --black7. */
  color: var(--black);
  /* Terukur center. Baru terlihat saat labelnya patah dua atau tiga
     baris, dan di lebar 102.16 itu memang sering terjadi. */
  text-align: center;
  /* Sumber memakai pre-wrap supaya patahan baris label diatur dari
     kontennya, bukan dari lebar kotaknya. */
  white-space: pre-wrap;
}

/* Mobile dan tablet: satu kolom. */
@media (max-width: 1023px) {
  /* gap 2rem, bukan 4rem. Itu nilai dasar rule sumber sebelum
     media query 1024 menaikkannya jadi satu gutter. */
  .section-pdp-mid-safety__grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .section-pdp-mid-safety__heading,
  .section-pdp-mid-safety__right {
    width: 100%;
  }

  /* Tombol punya lebar sendiri di tiap rentang, bukan 100%.
     Sumber: 8col + 7g di mobile, 6col + 5g di tablet, 5col + 6g di
     desktop. Grid mobile dan tablet sama-sama 12 kolom. */
  .section-pdp-mid-safety__right > .section-pdp-mid-safety__cta {
    width: calc(8 * var(--col) + 7 * var(--gutter));
  }

  /* Empat badge berjejer di 375 menyisakan sekitar 20px per kolom
     setelah gutter, jadi labelnya patah tak terbaca. Dibungkus dua
     baris, bukan dipaksa satu baris. */
  .section-pdp-mid-safety__badges {
    flex-wrap: wrap;
    gap: 2.4rem var(--gutter);
  }

  /* Lebar 2 kolom hanya berlaku di grid 24 kolom. Di grid 12 kolom
     rumus yang sama cuma menghasilkan 58.8px di 375 dan labelnya jadi
     tidak terbaca, jadi di sini badge kembali mengikuti isinya.
     Rentang mobile section konten PDP memang belum diukur. */
  .section-pdp-mid-safety__badge {
    flex: 0 1 auto;
  }
}

/* Tablet menimpa lebar tombol saja. Rentang ini ikut kena blok
   max-width 1023 di atas, jadi yang ditulis di sini cuma bedanya. */
@media (min-width: 768px) and (max-width: 1023px) {
  .section-pdp-mid-safety__right > .section-pdp-mid-safety__cta {
    width: calc(6 * var(--col) + 5 * var(--gutter));
  }
}