/* ============ AWARD SLIDESHOW ============
   Slideshow press dan penghargaan. Blok sumbernya dinamai ulang jadi
   .section-award-slideshow. Semua angka di berkas ini hasil ukur dan
   disalin apa adanya, yang berubah hanya nama kelasnya.

   Terukur: autoplay interval 4000ms (transisi tercatat di t=4975, 8975,
   12977). Crossfade opacity 1.5s cubic-bezier(.48,.04,.52,.96), slide
   bertumpuk absolute. Ada satu tombol underlined "Pause". Logo sumber di
   bawah, bulat 6.4rem, opacity 0.65 dan yang aktif 1.

   Caption BUKAN satu blok yang teksnya ditukar. Semua caption dirender
   bertumpuk dan ikut crossfade, sama seperti gambarnya. Judulnya punya
   dua state, masuk dari bawah dan keluar ke atas, di dalam kotak yang
   dipotong. Karena itu JS-nya perlu tahu slide SEBELUMNYA, bukan cuma
   yang aktif. */
.section-award-slideshow {
  position: relative;
  height: calc(100svh - var(--header-height-fixed));
  min-height: 55rem;
  overflow: clip;
}
.section-award-slideshow__media { position: absolute; inset: 0; }
.section-award-slideshow__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  /* Crossfade 1.5s, terukur. */
  transition: opacity 1.5s var(--ease-swap);
}
.section-award-slideshow__slide[data-active='true'] { opacity: 1; }
/* Sumbernya menaruh <img> di dalam slide. Situs ini belum punya aset,
   jadi slotnya diisi .u-placeholder. Selektor img dipertahankan apa
   adanya dan .u-placeholder ditambahkan di sebelahnya, supaya rule ini
   tetap berlaku saat asetnya nanti masuk. */
.section-award-slideshow__slide img,
.section-award-slideshow__slide .u-placeholder { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Terukur: ada pembungkus captions tersendiri di atas caption.
   Di mobile dia yang memberi margin kiri kanan dan naik 11.4rem dari
   dasar, di desktop dia menempel penuh ke tepi. */
.section-award-slideshow__captions {
  position: absolute;
  inset: 0 var(--margin) 11.4rem;
  z-index: 2;
}
.section-award-slideshow__caption {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 1.6rem;
  text-align: center;
  /* Warna teksnya #141414, bukan putih. Terukur di semua slide.
     Gambar penghargaannya memang terang. */
  color: var(--black);
}
/* 5 kolom + 5 gutter = 255.42px. */
.section-award-slideshow__subtitle { margin: 0; flex: 0 1 auto; width: calc(5 * var(--col) + 5 * var(--gutter)); }
.section-award-slideshow__source { margin: 0; flex: 0 1 auto; }

/* Subtitle dan sumber ikut crossfade 1.5s, bukan berganti seketika.
   visibility ikut ditransisikan supaya slide non-aktif tidak bisa
   difokus keyboard maupun dibaca screen reader saat tersembunyi. */
.section-award-slideshow__subtitle,
.section-award-slideshow__source {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 1.5s var(--ease-swap),
    visibility 1.5s;
}
.section-award-slideshow__caption[data-state='entering'] .section-award-slideshow__subtitle,
.section-award-slideshow__caption[data-state='entering'] .section-award-slideshow__source {
  opacity: 1;
  visibility: visible;
}

/* grid-width dikurangi (1 kolom + 2 gutter) = 1140.67px.
   line-height 1.2 !important ada di PEMBUNGKUS ini, bukan di judulnya.
   Judulnya sendiri tetap 1.1 dari skala lg-t-56 (54.72px @1280).
   Kalau 1.2 ditempel ke judul, tingginya jadi 59.70 dan meleset 5px. */
.section-award-slideshow__title {
  overflow: clip;
  max-width: calc(var(--grid-width) - (var(--col) + 2 * var(--gutter)));
  line-height: 1.2 !important;
}
/* Judul masuk dengan digeser dari bawah kotak yang dipotong tadi, lalu
   yang lama keluar ke atas. Terukur translate3d 107 persen, durasi
   1.5s, easing yang sama dengan crossfade gambar. */
.section-award-slideshow__quote {
  display: inline-block;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  will-change: transform;
}
.section-award-slideshow__caption[data-state='entering'] .section-award-slideshow__quote,
.section-award-slideshow__caption[data-state='leaving'] .section-award-slideshow__quote {
  opacity: 1;
  visibility: visible;
  animation-duration: 1.5s;
  animation-timing-function: var(--ease-swap);
  animation-fill-mode: forwards;
}
.section-award-slideshow__caption[data-state='entering'] .section-award-slideshow__quote { animation-name: award-slideshow-entering; }
.section-award-slideshow__caption[data-state='leaving'] .section-award-slideshow__quote { animation-name: award-slideshow-leaving; }
@keyframes award-slideshow-entering {
  from { transform: translate3d(0, 107%, 0); }
  to   { transform: translateZ(0); }
}
@keyframes award-slideshow-leaving {
  from { transform: translateZ(0); }
  to   { transform: translate3d(0, -107%, 0); }
}
/* Tombol Pause juga membekukan animasi judul, bukan cuma timer-nya. */
.section-award-slideshow.is-paused * { animation-play-state: paused; }

.section-award-slideshow__logos {
  position: absolute;
  z-index: 3;
  bottom: 6.4rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  column-gap: 2rem;
  max-width: var(--grid-width);
  list-style: none;
  margin: 0;
  padding: 0;
}
.section-award-slideshow__logo {
  width: 6.4rem;
  height: 6.4rem;
  border-radius: 50%;
  border: 0;
  cursor: pointer;
  opacity: 0.65;
  background: var(--white);
  color: var(--black);
  font-size: max(1.1rem, 11px);
  font-weight: 600;
  /* 1.5s, sama dengan crossfade gambarnya. Bukan 0.35s. Yang 0.35s itu
     durasi khusus saat kursor menyentuh slideshow. */
  transition: opacity 1.5s var(--ease-swap);
}
.section-award-slideshow__logo[data-active='true'] { opacity: 1; }
.section-award-slideshow:hover .section-award-slideshow__logo,
.section-award-slideshow:hover .section-award-slideshow__slide { transition-duration: 0.35s; }

/* Terukur: teksnya gelap, berat 400, dan garis bawahnya gradien
   currentcolor selebar 0 yang baru memanjang saat hover. 13.33px itu
   ukuran bawaan browser untuk button yang tidak mewarisi font.
   reset.css di situs ini memaksa button mewarisi font lewat
   input, button, textarea, select { font: inherit }, jadi angkanya
   ditulis ulang: min(1.5rem, 13.33px) = 13.32 @1280 dan 13.33 di
   mobile. */
.section-award-slideshow__pause {
  position: absolute;
  right: var(--margin);
  bottom: 1rem;
  z-index: 9;
  background-image: linear-gradient(90deg, currentcolor, currentcolor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  border: 0;
  cursor: pointer;
  color: var(--black);
  text-decoration: none;
  padding-bottom: 0.1em;
  font-size: min(1.5rem, 13.33px);
  font-weight: 400;
  transition: background-size 0.6s var(--ease-media);
}
.section-award-slideshow__pause:hover,
.section-award-slideshow__pause:focus-visible {
  background-size: 100% 1px;
  transition-timing-function: var(--ease-in-overshoot);
}

@media (min-width: 1024px) {
  /* Terukur: mulai 1024 pembungkus caption menempel penuh, captionnya
     pindah ke tengah, dan jaraknya naik dari 1.6rem ke 2.4rem. */
  .section-award-slideshow__captions { inset: 0; }
  .section-award-slideshow__caption { justify-content: center; gap: 2.4rem; }
}
@media (max-width: 1023.98px) {
  /* Ukuran dan gap SENGAJA menyimpang dari hasil ukur (5rem dan 2rem).
     Enam logo 5rem plus lima gap 2rem butuh 40rem, yaitu 1.067 kali
     lebar viewport di bawah 415px, sedangkan max-width barisnya cuma
     var(--grid-width) alias 0.915 kali viewport. Selisihnya tidak bisa
     diserap: tiap <li> punya min-width auto yang terkunci di lebar
     tombolnya, jadi flex TIDAK menyusutkan apa apa, barisnya sekadar
     meluber ke kanan lalu dipotong overflow clip milik
     .section-award-slideshow. Yang terlihat: logo terakhir terpenggal
     dan barisnya miring ke kiri, di SEMUA lebar di bawah 484px.

     Dikecilkan, bukan dibungkus wrap. Dengan wrap hasilnya 5 logo di
     baris atas dan 1 sendirian di bawah, dan karena
     .section-award-slideshow__logos dipaku ke bottom sementara
     .section-award-slideshow__captions berhenti 11.4rem dari dasar,
     baris kedua itu naik menabrak subtitle slide. Satu baris utuh yang
     sedikit lebih kecil jauh lebih rapi.
     Hasilnya 31.4rem, 0.837 kali viewport, muat di 320px sekalipun.

     Angkanya dipertahankan apa adanya walau section ini memuat tiga
     slide, bukan enam. Ini hasil ukur, bukan hasil hitung per jumlah
     slide. */
  .section-award-slideshow__logos { bottom: 4rem; column-gap: 1rem; }
  .section-award-slideshow__logo { width: 4.4rem; height: 4.4rem; }
}