/* Section ugc-grid.

   Disalin apa adanya dari clvn-desk/src/components/sections/sections.css
   baris 456 sampai 558. Nama blok sumber diganti jadi
   .section-ugc-grid, dan dua nama elemennya yang dulu satu kata
   gabungan sekarang dipisah tanda hubung: __title-wrap dan __tag-link.

   Semua angka di berkas ini hasil ukur. Jangan dirapikan, jangan
   dibulatkan, jangan disusun ulang.

   Muat SEBELUM mega-nav.css, sama seperti berkas section lain. */

/* --- ugc-grid --------------------------------------------------- */
.section-ugc-grid { padding: 14rem 0 11rem; background: var(--stone); }
.section-ugc-grid__title-wrap {
  width: var(--grid-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2.4rem;
  padding-bottom: 6rem;
}
/* Di mobile judulnya selebar penuh kotak isi dan justru SUBTITLE yang
   disempitkan. Terukur 343 dan 275 pada lebar 375. Sebelumnya rumus
   desktop di bawah dipasang tanpa gerbang, sehingga di 375 ia menghitung
   245px dan menyempitkan elemen yang salah. */
.section-ugc-grid__heading { margin: 0; }
.section-ugc-grid__subtitle { margin: 0; white-space: pre-wrap; }
@media (max-width: 1023.98px) {
  .section-ugc-grid__subtitle { width: 27.5rem; }
}
/* 8 kolom + 9 gutter = 425.81px. Ganjil (gutter lebih banyak dari
   kolom), tapi memang begitu terukurnya. Angka ini DESKTOP. */
@media (min-width: 1024px) {
  .section-ugc-grid__heading { width: calc(8 * var(--col) + 9 * var(--gutter)); }
}
/* Terukur: tautan ini BUKAN biru dan BUKAN tebal. Warnanya ikut induk
   (#515151), berat 400, dan garis bawahnya gradien currentcolor yang
   di keadaan diam lebarnya 0 lalu memanjang saat hover. Padding-bottom
   0.1em yang memberi jaraknya ke baseline. */
.section-ugc-grid__tag-link {
  display: inline;
  color: inherit;
  font-weight: 400;
  text-decoration: none;
  padding-bottom: 0.1em;
  background-image: linear-gradient(90deg, currentcolor, currentcolor);
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 1px;
  transition: background-size 0.6s var(--ease-media);
}
.section-ugc-grid__tag-link:hover,
.section-ugc-grid__tag-link:focus-visible {
  background-size: 100% 1px;
  transition-timing-function: var(--ease-in-overshoot);
}

.section-ugc-grid__list {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  gap: var(--gutter);
  list-style: none;
  margin: 0;
  padding: 0;
}
/* (6 kolom + 5 gutter) dikurangi 2.12 gutter = 253.07px @1280. */
.section-ugc-grid__card {
  width: calc((6 * var(--col) + 5 * var(--gutter)) - 2.12 * var(--gutter));
  flex-shrink: 0;
}
.section-ugc-grid__card a {
  position: relative;
  display: block;
  border-radius: 1.6rem;
  overflow: clip;
  aspect-ratio: var(--ratio);
}
.section-ugc-grid__card img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Terukur 11px, line-height 15.4 (1.4), letter-spacing -0.66px
   (-0.06em), berat 400, putih. Itu skala mono, jadi kelasnya .t-mono.
   .t-mono tidak menyetel line-height, ditambahkan di sini. */
.section-ugc-grid__badge {
  position: absolute;
  top: 1.8rem;
  left: 1.8rem;
  line-height: 1.4;
  color: var(--white);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Rotasi dan offset statis dari CSS, bukan scroll-driven. Terukur. */
.section-ugc-grid__card:nth-child(4n + 1) { margin-top: 4.8rem; transform: rotate(-2deg); }
.section-ugc-grid__card:nth-child(4n + 2) { margin-top: 2.6rem; transform: rotate(1deg); }
.section-ugc-grid__card:nth-child(4n + 3) { margin-top: 11.2rem; transform: rotate(-2deg); }
.section-ugc-grid__card:nth-child(4n)     { margin-top: 0;      transform: rotate(4deg); }

@media (max-width: 1023.98px) {
  /* Terukur 6rem 0 4rem di mobile, 14rem 0 11rem baru mulai 1024. */
  .section-ugc-grid { padding: 6rem 0 4rem; }
  /* Terukur 1.3rem di mobile, 2.4rem mulai 1024. */
  .section-ugc-grid__title-wrap { gap: 1.3rem; }
  /* SATU SATUNYA penyimpangan dari sumber di berkas ini, dan bukan soal
     angka. Selektornya diberi ruas elemen ul.

     reset.css punya `ul[class], ol[class] { margin: 0; padding: 0 }`.
     Spesifisitasnya 0-1-1, sedangkan kelas polos cuma 0-1-0, jadi reset
     MENANG dan padding di bawah ini tidak pernah hidup. Terukur di
     375: 0px, padahal seharusnya 16px. Dengan ruas ul spesifisitasnya
     seri 0-1-1 dan yang menang jadi urutan muat, dan ugc-grid.css
     dimuat setelah reset.css.

     Angkanya sendiri tidak disentuh. Kalau suatu hari reset.css
     mengganti `ul[class]` jadi `ul`, ruas ini boleh dilepas. */
  ul.section-ugc-grid__list {
    justify-content: flex-start;
    align-items: center;
    overflow-x: auto;
    padding: 0 var(--margin);
  }
  /* Semua rotasi dan offset dimatikan di mobile. Terukur. */
  .section-ugc-grid__card,
  .section-ugc-grid__card:nth-child(4n + 1),
  .section-ugc-grid__card:nth-child(4n + 2),
  .section-ugc-grid__card:nth-child(4n + 3),
  .section-ugc-grid__card:nth-child(4n) {
    margin-top: 0;
    transform: none;
    width: calc(8 * var(--col) + 7 * var(--gutter));
  }
  .section-ugc-grid__card a { border-radius: 0.8rem; }
}