/* ==========================================================================
   03 · Quotes
   Referensi: assets/image-reference/3.00 Quotes.png (frame 412 × 917)
   Urutan masuk: foto (tirai + zoom pelan) → label → judul diketik → ayat per baris
   Sentuhan imperfect (tambahan di luar desain): foto miring sedikit + grain film.
   ========================================================================== */

.quote {
  /* Tinggi pas satu layar supaya foto (flex) yang menyesuaikan, bukan section */
  height: var(--frame-h);
  display: flex;
  flex-direction: column;
  padding: 2.5rem var(--gutter) 5.1875rem;
  background: var(--color-ink);
  color: var(--color-on-ink);
}

/* --- Foto ----------------------------------------------------------------- */
/* Tinggi foto mengisi sisa ruang (497px di frame 412 × 917); di layar pendek
   foto memendek dan dipotong otomatis, teks tetap utuh. */

.quote__photo {
  flex: 1 1 0;
  min-height: 8rem;
  transform: rotate(-1.5deg);
}

.quote__photo-frame {
  position: relative;
  height: 100%;
  overflow: hidden;
}

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

/* Grain film tipis */
.quote__photo-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.22;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* --- Teks ----------------------------------------------------------------- */

.quote__body {
  /* Jarak foto → teks: ±89px di frame 917, ikut tinggi layar */
  margin-top: clamp(1.5rem, 9.67svh, 5.5625rem);
}

.quote__label {
  font-size: 0.8125rem; /* 13px */
  line-height: 1.385;
}

.quote__title {
  margin-top: 2.5625rem;
  font-size: clamp(2.75rem, 13.27vw, 3.42rem); /* ±55px di frame 412 */
  font-weight: 300;
  line-height: 1;
}

.quote__verse {
  margin-top: 0.3rem;
  font-size: 0.8125rem; /* 13px */
  line-height: 1.385; /* 18px */
  text-align: right;
}