/* =====================================================================
   FIX-MEDIA — dimuat PALING AKHIR (setelah finishing.css).
   Tujuan: tidak ada lagi gambar/video yang terpotong.
   Aturan: kontainer mengikuti rasio asli media; object-fit hanya dipakai
   saat rasionya sudah sama (jadi tidak memotong apa pun).
   ===================================================================== */
picture{display:contents}

/* --- kartu produk: foto potret 3:4, jadi kotaknya 3:4 (bukan 4:3) --- */
.grid-produk .card__art,
.card__art{aspect-ratio:3/4}
.card__art img{object-fit:cover;object-position:center}

/* --- hero: ikuti rasio foto 3:4, jangan tinggi tetap --- */
.hero__art .hero-visual,
.hero-visual{height:auto;aspect-ratio:3/4}
.hero-visual>img,
.hero-visual img{width:100%;height:100%;object-fit:cover;object-position:center 48%}
.hero-visual>img{height:100%!important}

/* --- potret cerita & tile kecil --- */
.story-photo img{height:auto;aspect-ratio:3/4;object-fit:cover}
.hero-tile img{height:auto;aspect-ratio:3/4}
.pabrik__kecil img{height:auto;aspect-ratio:3/4}

/* --- video: rasio asli 464x848 (dan 368x624 untuk video proses) --- */
.media video{aspect-ratio:464/848;object-fit:contain;height:auto;width:100%;background:#000}
.media-utama video{aspect-ratio:368/624;object-fit:contain;height:auto;max-height:none;width:100%;background:#000}

/* --- galeri: rasio tiap kotak ditulis inline sesuai berkasnya --- */
.galeri__item{aspect-ratio:3/4}
.galeri__item--besar,.galeri__item--lebar{aspect-ratio:3/4}
.galeri__item--tinggi{grid-row:span 2;aspect-ratio:3/4}
.galeri__item img{object-fit:cover;object-position:center}

/* --- di layar kecil tetap pakai rasio asli 3:4 (tanpa potongan, tanpa bar hitam) --- */
@media (max-width:900px){
  .hero-visual{aspect-ratio:3/4}
  .hero-visual img{object-fit:cover;object-position:center 48%}
}

/* --- FIX: foto kecil di section pabrik dulu position:absolute dan MENUTUPI video
   (termasuk tombol/kontrol player). Sekarang jadi grid: berdampingan, tidak menimpa. --- */
.pabrik__foto{display:grid;grid-template-columns:1.45fr .55fr;gap:14px;align-items:end;position:relative}
.pabrik__foto .media-utama{max-width:none;justify-self:stretch;width:100%}
/* video section pabrik: batasi tinggi supaya tidak menjulang, rasio tetap asli */
.pabrik__foto .media-utama video{width:auto;max-width:100%;max-height:min(70vh,640px);margin-inline:auto}
.pabrik__kecil{position:static;inset:auto;right:auto;bottom:auto;width:auto;max-width:none;
  margin:0;border-width:4px;box-shadow:var(--shadow)}
.pabrik__kecil img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;display:block}
@media (max-width:1200px){
  .pabrik__foto{grid-template-columns:1fr;gap:12px}
  .pabrik__foto .media-utama{max-width:560px;justify-self:start}
  .pabrik__kecil{width:min(52%,220px);justify-self:end}
}
@media (max-width:680px){
  .pabrik__foto .media-utama{max-width:100%}
  .pabrik__kecil{width:min(64%,220px)}
}

/* =====================================================================
   TAHAP G — galeri rapi + foto pabrik tambahan
   Prinsip: dalam satu kelompok, SEMUA kotak memakai rasio yang sama,
   dan rasio itu sama dengan rasio berkasnya -> rapi tanpa potongan.
   ===================================================================== */
.galeri-grup + .galeri-grup{margin-top:clamp(32px,4vw,56px)}
.galeri__judul{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:16px;
  padding-bottom:12px;border-bottom:1px solid var(--line)}
.galeri__judul>span:last-child{color:var(--muted);font-size:.9rem}
.galeri-rapi{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.galeri-rapi--vertikal{grid-template-columns:repeat(5,1fr)}
.kartu-media{position:relative;margin:0;border-radius:var(--r);overflow:hidden;background:var(--sand)}
.kartu-media img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;
  transition:transform .6s var(--ease)}
.kartu-media:hover img{transform:scale(1.03)}
.kartu-media figcaption{position:absolute;z-index:2;inset:auto 0 0 0;padding:14px 15px;display:grid;gap:3px;
  background:linear-gradient(transparent,rgba(24,16,12,.84));color:#fff}
.kartu-media figcaption span:first-child{font-family:var(--font-head);font-size:.63rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--bata-muda)}
.kartu-media figcaption span:last-child{font-size:.78rem;line-height:1.45;opacity:.93}

/* foto-foto kecil di section pabrik: 2x2, semua 3:4 */
.pabrik__foto-kecil{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-content:end}
.pabrik__foto-kecil figure{margin:0;border-radius:var(--r);overflow:hidden;background:var(--sand);
  aspect-ratio:3/4}
.pabrik__foto-kecil img{width:100%;height:100%;object-fit:cover;display:block}

@media (max-width:1024px){
  .galeri-rapi,.galeri-rapi--vertikal{grid-template-columns:repeat(3,1fr)}
    .pabrik__foto-kecil{grid-template-columns:repeat(4,1fr)}
  .pabrik__foto-kecil figure{aspect-ratio:3/4}
}
@media (max-width:680px){
  .galeri-rapi,.galeri-rapi--vertikal{grid-template-columns:repeat(2,1fr);gap:10px}
    .pabrik__foto-kecil{grid-template-columns:1fr 1fr;gap:10px}
}

/* strip 4 foto di section pabrik: membentang penuh di bawah teks & video.
   Sebelumnya foto-foto ini ada di dalam kolom sempit (.55fr) sehingga cuma 64x86 px di layar besar. */
.pabrik__grid{grid-template-columns:1fr}
.pabrik__foto{display:grid;grid-template-columns:minmax(0,368px) 1fr;gap:clamp(16px,3vw,40px);align-items:center}
.pabrik__strip{grid-column:1/-1;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;
  margin-top:clamp(22px,3vw,38px)}
.pabrik__strip .kartu-media{aspect-ratio:3/4}
@media (max-width:1024px){
  .pabrik__foto{grid-template-columns:1fr}
  .pabrik__strip{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:680px){
  .pabrik__strip{grid-template-columns:repeat(2,1fr);gap:10px}
}

@media (min-width:681px){ .galeri-rapi--empat{grid-template-columns:repeat(4,1fr)} }
@media (max-width:680px){ .galeri-rapi--empat{grid-template-columns:repeat(2,1fr)} }
@media (max-width:680px){ .galeri-rapi .kartu-media:last-child:nth-child(odd){grid-column:1/-1} }

/* kotak tunggal (dokumentasi produksi) jangan membentang penuh di layar kecil -> dibatasi lebarnya */
.galeri-rapi .kartu-media:only-child{max-width:min(100%,340px)}
@media (min-width:1025px){ .galeri-rapi .kartu-media:only-child{max-width:340px} }