/* Section collection-cta. Blok penutup halaman koleksi.

   Isinya tiga hal saja: satu judul, satu paragraf, satu tombol.
   Tidak ada media, tidak ada kartu, tidak ada JS.

   BUKAN hasil porting. Tidak ada CSS sumber yang disalin ke sini.
   Yang dipinjam dari hasil ukur halaman koleksi cuma proporsinya:
   ritme jarak judul ke paragraf ke tombol, dan lebar baris teks yang
   dihitung sebagai kelipatan kolom kisi situs, bukan angka bebas.

   Semua warna, radius, easing, dan kolom diambil dari tokens.css.
   Muat setelah tokens.css, bersama berkas section lain:
     <link rel="stylesheet" href="/css/collection-cta.css" />

   Breakpoint di berkas ini cuma satu, 1024px, ditulis sebagai
   max-width: 1023.98px supaya tidak ada celah setengah piksel dengan
   media query min-width: 1024px milik tokens.css. Ada satu sentuhan
   tambahan di 1680px, dan itu murni soal batas lebar container. */

/* Section ini penuh selebar layar, jadi latar warnanya membentang dari
   tepi ke tepi. Itu yang menandai akhir halaman: seluruh section di
   atasnya duduk di atas putih.

   Warnanya var(--stone), off white hangat dari tokens.css. Dipilih
   karena teks --black dan tombol --blue-primary sama sama kontras di
   atasnya tanpa perlu penyesuaian warna apa pun. --blue-cgi juga
   tersedia dan sama sahnya, tinggal ganti satu baris ini kalau blok
   penutupnya mau lebih menonjol.

   padding 12rem atas bawah, angka yang sama dengan blok penutup PDP
   (pdp-faq). Blok penutup halaman memakai ritme yang lebih longgar
   daripada section koleksi biasa yang 8rem, dan itu memang disengaja
   supaya terasa sebagai berhenti, bukan sebagai jeda. */
.section-collection-cta {
  background: var(--stone);
  padding: 12rem 0;
}

/* Container mengikuti kisi situs: selebar --grid-width, ditengahkan,
   dibatasi --max-width. Sama persis dengan container section lain,
   jadi judulnya sejajar dengan konten di atasnya walau isinya rata
   tengah.

   text-align center dipasang di sini, bukan di tiap anak. .u-btn itu
   inline-flex dengan width fit-content, jadi ia ikut tertengahkan oleh
   text-align dan tidak butuh margin auto sendiri. */
.section-collection-cta__container {
  width: var(--grid-width);
  margin-inline: auto;
  max-width: var(--max-width);
  text-align: center;
}

/* Lebar judul 14 kolom + 13 gutter dari kisi 24 kolom. Bukan lebar
   penuh: 24 kolom bikin barisnya terlalu panjang untuk ukuran huruf
   sebesar ini dan judulnya jadi susah dibaca sekali lihat.

   margin bawah 3rem ke paragraf, ritme yang sama dengan banner penutup
   di pdp-end. auto di kiri kanan karena max-width saja tidak
   menengahkan kotaknya, cuma isinya. */
.section-collection-cta__heading {
  margin: 0 auto 3rem;
  max-width: calc(14 * var(--col) + 13 * var(--gutter));
  color: var(--black);
}

/* Paragraf sengaja lebih sempit daripada judul, 8 kolom + 7 gutter.
   Itu lebar baris teks tubuh yang dipakai situs ini di tempat lain
   (391.55px @1280), dan panjang baris segitu masih nyaman dibaca.

   Warnanya --black7, redup. Hierarkinya sama dengan kartu koleksi:
   judul penuh, teks pendukung redup. margin bawah 4rem ke tombol. */
.section-collection-cta__body {
  margin: 0 auto 4rem;
  max-width: calc(8 * var(--col) + 7 * var(--gutter));
  color: var(--black7);
}

/* Di bawah 1024 kisinya cuma 12 kolom, jadi batas 14 kolom di atas
   tidak punya arti lagi dan malah melebihi lebar container. Dilepas,
   bukan dikecilkan, karena container-nya sendiri sudah jadi batas yang
   benar di tier ini.

   Jaraknya ikut merapat: 1.2rem judul ke paragraf dan 3rem paragraf ke
   tombol, angka yang sama dengan versi mobile blok penutup PDP.
   padding section turun ke 6rem. */
@media (max-width: 1023.98px) {
  .section-collection-cta {
    padding: 6rem 0;
  }

  .section-collection-cta__heading {
    max-width: none;
    margin-bottom: 1.2rem;
  }

  .section-collection-cta__body {
    max-width: none;
    margin-bottom: 3rem;
  }
}

/* Sentuhan 1680. --grid-width itu 94.444vw dan terus melebar selama
   viewport melebar, sedangkan --max-width (1680px) baru menggigit jauh
   setelahnya. Hasilnya container sempat lebih lebar daripada patokan
   halaman koleksi sumber, yang berhenti di 1586.67px.

   Ditulis sebagai 94.444 persen dari --max-width, bukan 1586.667px
   mentah, supaya angkanya tetap ikut kalau --max-width diubah. Latar
   warnanya tidak terpengaruh, yang berhenti melebar cuma isinya. */
@media (min-width: 1680px) {
  .section-collection-cta__container {
    width: calc(var(--max-width) * 0.94444);
  }
}