/* ==========================================================================
   Detail Projects — template artikel

   Geometri diambil dari frame Figma "Desktop - Detail Projects" (1770:12636):
   kolom teks 960 + kolom info 400 = 1360; dua kolom artikel 660 + jarak 40;
   galeri 3 gambar 326.68 dengan jarak 190 (= 13.97% dari 1360).

   Bagian artikel memakai tema terang seperti di Figma, jadi footer halaman
   ini memakai varian terang.
   ========================================================================== */

/* --- 1. Hero ------------------------------------------------------------- */
.phero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: min(900px, 100svh);
  padding: calc(var(--sp-12) + 104px) var(--gutter) var(--sp-10);
  overflow: hidden;
  background: var(--black-100);
}
.phero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.phero__bg img { width: 100%; height: 100%; object-fit: cover; }

/* Peredup di bawah supaya judul tetap terbaca di atas foto apa pun. */
.phero__fade {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 1;
  height: max(260px, 42%);
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.55) 48%,
    var(--black-100) 100%
  );
  pointer-events: none;
}
.phero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
}
.phero__title {
  margin: 0;
  font-size: clamp(2.25rem, 1.2rem + 4.6vw, 4rem);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--white-100);
}

/* --- 2. Badan artikel (tema terang) -------------------------------------- */
.particle {
  /* Navbar memakai gutter yang sama, jadi isi artikel sejajar dengannya di
     setiap lebar layar. Tanpa ini teks menempel ke tepi layar. */
  padding: var(--sp-12) var(--gutter);
  background: var(--white-100);
  color: var(--black-80);
}

/* --- 3. Ringkasan + kartu info ------------------------------------------- */
.pabout {
  display: grid;
  grid-template-columns: minmax(0, 960fr) minmax(0, 400fr);
  align-items: start;
  margin-bottom: var(--sp-12);
}
.pabout__text { padding-right: var(--sp-8); }
.pabout__title {
  margin: 0 0 var(--sp-5);
  font-size: clamp(1.625rem, 1.2rem + 1.6vw, 2.25rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #1a1a1a;
}
.pabout__desc {
  margin: 0 0 var(--sp-4);
  font-size: 1rem;
  line-height: 1.65;
  color: #4d4d4d;
}
.pabout__desc:last-child { margin-bottom: 0; }

.pabout__aside {
  display: flex;
  flex-direction: column;
  gap: var(--sp-5);
}

/* Kartu Service / Discipline. Isi kedua baris ini datang dari CMS. */
.pinfo,
.psocials {
  margin: 0;
  padding: 20px;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 16px;
  background: #f2f2f2;
}
.pinfo__row + .pinfo__row { margin-top: var(--sp-4); }
.pinfo__row dt {
  margin: 0 0 2px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #4d4d4d;
}
.pinfo__row dd {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: #767676;
}

.psocials { text-align: center; }
.psocials__label {
  margin: 0 0 var(--sp-4);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #4d4d4d;
}
.psocials__list {
  display: flex;
  justify-content: center;
  gap: var(--sp-8);
}
.psocials__list a {
  display: block;
  color: #3d3d3d;
  transition: color 0.2s ease, transform 0.25s var(--ease-out);
}
.psocials__list svg { width: 24px; height: 24px; display: block; }
.psocials__list a:hover {
  color: var(--orange-100);
  transform: translateY(-2px);
}
.psocials__list a:focus-visible {
  outline: 2px solid var(--orange-100);
  outline-offset: 4px;
  border-radius: 4px;
}

/* --- 4. Bagian artikel yang berulang ------------------------------------- */
.psection + .psection { margin-top: var(--sp-12); }
.psection__title {
  margin: 0 0 var(--sp-8);
  font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #1a1a1a;
}
.psection__rule {
  height: 1px;
  margin: var(--sp-12) 0;
  border: 0;
  background: rgba(0, 0, 0, 0.12);
}

/* Dua kolom teks: 660 + 40 + 660 pada lebar 1360. */
.pcols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-8);
  margin-bottom: var(--sp-10);
}
.pcols__col p {
  margin: 0 0 var(--sp-4);
  font-size: 0.9375rem;
  line-height: 1.7;
  color: #4d4d4d;
}
.pcols__col p:last-child { margin-bottom: 0; }

/* Galeri, diukur dari render Figma: tiga gambar selebar 327px dengan jarak
   29px, dan seluruh grupnya di tengah menyisakan 160px di kiri-kanan.
   Grup = 327*3 + 29*2 = 1039 dari 1360 (76.4%), jaraknya 29/1039 = 2.79%. */
.pgallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.79%;
  width: 76.4%;
  margin-inline: auto;
}
.pgallery__item {
  margin: 0;
  aspect-ratio: 326.68 / 440.26;
  border-radius: 14px;
  overflow: hidden;
  background: #ececec;
}
.pgallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--ease-out);
}
.pgallery__item:hover img { transform: scale(1.04); }

.pback {
  margin: var(--sp-12) 0 0;
  text-align: center;
}
.particle .btn--ghost {
  border-color: rgba(0, 0, 0, 0.2);
  color: #1a1a1a;
}
.particle .btn--ghost:hover {
  border-color: var(--orange-20);
  color: var(--white-100);
}

/* --- 5. Layar sempit ----------------------------------------------------- */
@media (max-width: 1023px) {
  .pabout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-8);
  }
  .pabout__text { padding-right: 0; }
  /* Di layar lebih sempit grupnya memakai lebar penuh supaya gambarnya
     tidak mengecil, tapi jarak antarnya tetap serapat Figma. */
  .pgallery { width: 100%; }
}

@media (max-width: 760px) {
  .particle { padding-inline: var(--gutter); }
  .pcols {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-6);
  }
  .pgallery {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-5);
    width: 100%;
  }
  /* Gambar sumbernya 327px; dibatasi supaya tidak pernah diperbesar
     melebihi itu dan terlihat pecah saat menumpuk. */
  .pgallery__item {
    max-width: 380px;
    margin-inline: auto;
  }
  .particle { padding-block: var(--sp-10); }
  .psection + .psection { margin-top: var(--sp-10); }
  .psection__rule { margin: var(--sp-10) 0; }
}

@media (prefers-reduced-motion: reduce) {
  .pgallery__item img,
  .psocials__list a { transition: none; }
  .pgallery__item:hover img { transform: none; }
}

/* Revisi 12 Okt 2026 — bayangan hitam di atas foto hero artikel, supaya
   logo dan menu navbar tetap terbaca di atas gambar yang terang. */
.phero::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  height: clamp(150px, 26%, 260px);
  background: linear-gradient(to bottom, rgba(0,0,0,.72) 0%, rgba(0,0,0,.42) 45%, rgba(0,0,0,.14) 78%, rgba(0,0,0,0) 100%);
  pointer-events: none;
}

/* Revisi 13 Okt 2026 — teks artikel mengalir di samping kartu Service/Discipline,
   lalu otomatis memakai lebar penuh setelah melewati kartu (desktop).
   Kartu ditaruh lebih dulu di HTML supaya bisa "mengapung" di kanan;
   di tablet & HP urutan tampil tetap: teks dulu, kartu di bawahnya. */
@media (min-width: 1024px) {
  .pabout { display: block; margin-bottom: 0; }
  .pabout__aside { float: right; width: 29.4%; margin: 0 0 var(--sp-8) var(--sp-8); }
  .pabout__text { padding-right: 0; margin-bottom: var(--sp-12); }
  .nl-article-body > :is(figure, img, video, hr, .psection, .pcols, .pgallery),
  .nl-article-body > p:has(img, video) { clear: right; }
  .particle .pback { clear: both; }
}
@media (max-width: 1023px) {
  .pabout { display: flex; flex-direction: column; }
  .pabout__aside { order: 2; }
}

/* Artikel Insight = artikel murni (teks, gambar, video): tanpa judul "About …"
   dan tanpa kotak Service & Disciplines. Kotak Our Socials tetap tampil.
   Judulnya tetap ada untuk Google & pembaca layar, hanya tidak terlihat. */
[data-article-kind="insight"] .pinfo { display: none !important; }
[data-article-kind="insight"] .pabout__title {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* Tablet & HP: kotak Our Socials selebar kotak di artikel portfolio (tidak menyusut). */
@media (max-width: 1023px) {
  [data-article-kind="insight"] .pabout__aside { width: min(100%, 333px); }
}

/* V10.46: same spacing above content as at its left and right edges. */
.particle { padding-top: max(var(--gutter), calc((100vw - var(--maxw)) / 2)); }
[data-article-kind="insight"] .pabout__aside { display: none !important; }
[data-article-kind="insight"] .pabout.is-empty-intro { display: none; }
[data-article-kind="insight"] .pabout__text { padding-right: 0; }