/* ==========================================================================
   12 · Shared Album
   Referensi: assets/image-reference/11.00 Shared album.png (frame 412 × 917)
   Kolase 2 kolom (171 & 146px, jarak 23px) + garis gelombang; teks & tombol
   menempel ke bawah. Di layar pendek kolase mengecil (svh) supaya muat.
   ========================================================================== */

.album {
  --album-gutter: clamp(1rem, 5.83vw, 1.5rem); /* 24px di frame 412 */

  display: flex;
  flex-direction: column;
  padding: clamp(2rem, 7.93svh, 4.54rem) var(--album-gutter) 3.02rem;
  background: var(--color-ink);
  color: var(--color-on-ink);
}

/* --- Kolase --------------------------------------------------------------- */

.album__collage {
  /* 339px di frame 412 × 917; tinggi kolase = lebar × 1,267 → batasi lewat svh */
  width: min(93.2%, 37svh);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 171fr 146fr;
  column-gap: 6.87%;
  align-items: start;
}

.album__col {
  display: flex;
  flex-direction: column;
}

.album__photo {
  overflow: hidden;
}

.album__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Rasio tiap kotak foto sesuai desain; kemiringan awal berbeda-beda (imperfect) */
.album__photo--a {
  aspect-ratio: 171 / 256;
  --tilt: -5deg;
}

.album__photo--b {
  aspect-ratio: 146 / 220;
  --tilt: 4deg;
}

.album__photo--c {
  aspect-ratio: 171 / 128;
  --tilt: 3deg;
}

.album__photo--d {
  aspect-ratio: 146 / 195;
  margin-top: 10.48%; /* 15px */
  --tilt: -4deg;
}

/* Garis gelombang: tergambar dari kiri ke kanan saat section tampil */
.album__wave {
  display: block;
  width: 100%;
  height: auto;
  margin-block: 5.85%; /* 10px */
  color: var(--color-paper);
}

.album__wave path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset var(--dur-exit) var(--ease-snap);
}

.album.is-active .album__wave path {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1200ms var(--ease-cinematic) 500ms;
}

/* --- Teks & tombol -------------------------------------------------------- */

.album__title {
  /* Mendorong teks & tombol ke bawah */
  margin-top: auto;
  padding-top: 1.5rem;
  font-size: clamp(3.75rem, 17.43vw, 4.4875rem); /* 71.8px di frame 412 */
  font-weight: 200;
  line-height: 1;
}

.album__desc {
  margin-top: 1.206rem;
  font-size: 0.875rem; /* 14px */
  line-height: 1.4286; /* 20px */
  /* Pemenggalan baris biasa (bukan "pretty") supaya sama dengan desain */
  text-wrap: wrap;
}

.album__action {
  margin-top: 1.244rem;
}

.album__action .button {
  min-height: 2.75rem; /* 44px */
}

@media (prefers-reduced-motion: reduce) {
  .album__wave path,
  .album.is-active .album__wave path {
    transition: none;
  }
}