/* Section product-pushes.
   Dipindahkan dari clvn-desk (sections.css baris 105 sampai 200).
   Angka angkanya TIDAK berubah, satu pun tidak. Yang berubah hanya
   nama kelas.

   Dua penamaan yang perlu dicatat:
   Blok section-nya memakai nama .section-product-pushes, sesuai
   konvensi situs ini. Kartunya di sumber adalah blok TERPISAH, di
   sini ikut masuk sebagai elemen .section-product-pushes__card.
   Alasannya satu berkas satu blok, pola yang sudah dipakai side-nav
   dan mega-nav (.side-nav__promo-cta, .mega-nav__promo-thumb).
   Turunan kartu jadi kebab satu tingkat: __card-header, __card-title,
   dan seterusnya. */

/* --- Section product pushes, deret kartu bundel ----------------
   Terukur @1280: padding 8rem 0, judul margin-bottom 6.4rem,
   track gap 2.4rem, slide flex:1 -> 593.78px, kartu radius 8px.

   Angka angka itu DESKTOP dan dulu dipasang tanpa gerbang, sehingga
   ikut berlaku di mobile dan membuat seksi ini 114px terlalu tinggi.
   Terukur di rujukan pada lebar 375: padding atas 4rem dan jarak judul
   ke kartu 4rem. */
.section-product-pushes {
  padding: 4rem 0;
  /* Terukur: position relative + z-index 1. Bukan hiasan. Section
     sticky-text-gallery di bawahnya memakai margin-top negatif dan
     z-index -1, dan angka ini yang menahan section-product-pushes
     tetap di atas saat keduanya bertumpuk. */
  position: relative;
  z-index: 1;
}

.section-product-pushes__heading {
  margin: 0 0 4rem;
  text-align: center;
  color: var(--black);
}
@media (min-width: 1024px) {
  .section-product-pushes {
    padding: 8rem 0;
  }
  .section-product-pushes__heading {
    margin-bottom: 6.4rem;
  }
}

.section-product-pushes__track {
  display: flex;
  flex-direction: row;
  /* gap 2.4rem, sengaja bukan var(--gutter). Terukur 21.32px @1280. */
  gap: 2.4rem;
  width: var(--grid-width);
  margin: 0 auto;
  max-width: var(--max-width);
}

.section-product-pushes__card {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2.4rem;
  background: var(--blue-cgi);
  /* radius 8px tetap, bukan rem. Terukur begitu. */
  border-radius: 8px;
  overflow: clip;
}

.section-product-pushes__card-header {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: 2.4rem;
  padding: 4rem 4rem 0;
}

/* Blok teks kartu bukan flex ber-gap. Terukur: judulnya punya
   margin-bottom 0.8rem (7.1066px @1280) dan itu satu-satunya jarak.
   Dengan gap 1.2rem tinggi __card-header jadi 98.98, targetnya 95.45,
   dan selisih itu ikut menaikkan tinggi section 3.5px. */
.section-product-pushes__card-text { display: block; }
.section-product-pushes__card-title { margin: 0 0 0.8rem; color: var(--black); }
.section-product-pushes__card-desc { margin: 0; }

/* Tombol di kartu override padding, terukur 1.8rem 1.6rem. */
.section-product-pushes__card-cta {
  padding: 1.8rem 1.6rem;
  flex-shrink: 0;
}

.section-product-pushes__card-media {
  /* Rasio 1:1 persis di semua breakpoint. Terukur 593.78 x 593.78. */
  aspect-ratio: 1 / 1;
  width: 100%;
}
/* Slot media sekarang diisi .u-placeholder, belum ada aset, jadi rule
   di bawah ini belum kena apa apa. Sengaja dibawa ikut supaya saat
   <img> asli masuk perilakunya sudah sama dengan yang terukur. */
.section-product-pushes__card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Mobile: kartu jadi carousel horizontal selebar 10col + 9gutter. */
@media (max-width: 1023.98px) {
  .section-product-pushes__track {
    width: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding-inline: var(--margin);
    /* scroll-padding WAJIB menyertai padding-inline di scroller yang
       ber-snap mandatory. scroll-snap-align: start menempelkan tepi
       kartu ke tepi scrollport, dan scrollport mengabaikan padding,
       jadi tanpa baris ini browser menggulir sendiri sejauh 16px saat
       halaman dimuat dan paddingnya habis dimakan snap: kartu pertama
       kembali menempel di tepi layar. */
    scroll-padding-inline: var(--margin);
    /* Terukur 24.003px di 375, sama dengan desktop. */
    gap: 2.4rem;
  }
  .section-product-pushes__card {
    flex: 0 0 calc(10 * var(--col) + 9 * var(--gutter));
    min-height: 47.4rem;
    scroll-snap-align: start;
  }
  .section-product-pushes__card-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.6rem;
  }
}