/* ==========================================================================
   Galleon — HALAMAN SINGLE
   Detail artikel, product, dan project.

   Komponen .detail-* dipakai bersama halaman produk dan proyek: galeri
   kiri, panel informasi menempel di kanan. Yang berbeda hanya isi
   panelnya — produk menampilkan kategori, proyek menampilkan tabel data.

   Konvensi file ini (sama dengan home.css):
   - Satu blok bernomor per bagian, urut sesuai urutan tampil.
   - Media query diletakkan di dalam blok bagiannya.
   - Breakpoint hanya dari daftar di base.css: 1200, 1024, 768, 480.

   Urutan:
     1. Detail: layout & galeri
     2. Detail: panel informasi
     3. Detail: section isi (keunggulan produk, data & scope proyek)
     4. Artikel
     5. Modal penawaran
   ========================================================================== */


/* ==========================================================================
   1. DETAIL — LAYOUT & GALERI
   ========================================================================== */

.detail-top {
	--thumb-min: 72px;

	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	align-items: start;
	gap: var(--sp-8);
	margin-block: var(--sp-6) var(--sp-section);
}

.detail-gallery { min-width: 0; }

.detail-gallery__stage {
	aspect-ratio: 4 / 3;
	margin: 0;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-lg);
	background: var(--c-surface-alt);
	overflow: hidden;
}

.detail-gallery__stage--empty {
	display: grid;
	place-items: center;
	background: linear-gradient(135deg, var(--c-line) 0%, var(--c-surface-alt) 100%);
}

.detail-gallery__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Thumbnail: maksimal --thumbs-max (4, diset dari detail-gallery.php)
   sejajar dengan lebar sama. Kalau gambarnya lebih banyak, strip
   thumbnail bisa digeser (swipe/trackpad, scroll-snap) dan ikut
   bergeser sendiri saat autoplay (single.js). */
.detail-gallery__nav {
	--thumbs-visible: var(--thumbs-max, 4);
	--thumb-gap: var(--sp-3);

	margin-top: var(--sp-3);
}

/* Lebih dari --thumbs-max gambar: tampilkan potongan thumbnail
   berikutnya (±1/3) sebagai tanda strip masih bisa digeser.
   Potongannya dipudarkan lewat mask — di kanan selama masih ada
   lanjutan, pindah ke kiri saat strip di ujung (.is-at-end, single.js). */
@property --thumbs-fade-l {
	syntax: "<number>";
	inherits: false;
	initial-value: 1;
}

@property --thumbs-fade-r {
	syntax: "<number>";
	inherits: false;
	initial-value: 1;
}

.detail-gallery__nav--peek {
	--thumbs-visible: calc(var(--thumbs-max, 4) + 0.4);
}

.detail-gallery__nav--peek .detail-gallery__thumbs {
	/* Lebar area potongan: dari tepi thumbnail utuh terakhir sampai ujung. */
	--thumbs-edge: calc(100% - var(--thumbs-max, 4) * var(--thumb-w) - (var(--thumbs-max, 4) - 1) * var(--thumb-gap));
	--thumbs-fade-r: 0.2;

	-webkit-mask-image: linear-gradient(to right, rgb(0 0 0 / var(--thumbs-fade-l)), #000 var(--thumbs-edge), #000 calc(100% - var(--thumbs-edge)), rgb(0 0 0 / var(--thumbs-fade-r)));
	mask-image: linear-gradient(to right, rgb(0 0 0 / var(--thumbs-fade-l)), #000 var(--thumbs-edge), #000 calc(100% - var(--thumbs-edge)), rgb(0 0 0 / var(--thumbs-fade-r)));
	transition:
		--thumbs-fade-l var(--dur) var(--ease),
		--thumbs-fade-r var(--dur) var(--ease);
}

.detail-gallery__nav--peek .detail-gallery__thumbs.is-at-end {
	--thumbs-fade-l: 0.2;
	--thumbs-fade-r: 1;
}

.detail-gallery__thumbs {
	position: relative; /* acuan offsetLeft thumbnail di single.js */
	display: grid;
		--thumb-w: calc((100% - (var(--thumbs-visible) - 1) * var(--thumb-gap)) / var(--thumbs-visible));

	grid-auto-columns: var(--thumb-w);
	grid-auto-flow: column;
	gap: var(--thumb-gap);
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}

.detail-gallery__thumbs::-webkit-scrollbar { display: none; }
/* Saat ditarik dengan mouse (single.js): snap dimatikan sementara
   supaya geseran mengikuti kursor, lalu dirapatkan lagi saat dilepas. */
.detail-gallery__thumbs.is-dragging {
	cursor: grabbing;
	scroll-snap-type: none;
	user-select: none;
}

.detail-gallery__thumbs.is-dragging .detail-gallery__thumb { cursor: grabbing; }
.detail-gallery__thumb {
	aspect-ratio: 1;
	padding: 0;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-sm);
	background: var(--c-surface-alt);
	overflow: hidden;
	cursor: pointer;
	scroll-snap-align: start;
	transition:
		border-color var(--dur-fast) var(--ease),
		opacity var(--dur-fast) var(--ease);
}

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

.detail-gallery__thumb:not(.is-active) { opacity: 0.6; }

@media (hover: hover) {
	.detail-gallery__thumb:hover { opacity: 1; }
}

.detail-gallery__thumb.is-active {
	border-width: 2px;
	border-color: var(--c-accent);
	opacity: 1;
}

/* Outline ke dalam — di luar akan terpotong overflow strip. */
.detail-gallery__thumb:focus-visible {
	outline: 2px solid var(--c-accent);
	outline-offset: -2px;
}

/* Fade singkat saat gambar utama berganti (class dipasang single.js). */
.detail-gallery__img.is-changing {
	animation: galleon-gallery-fade var(--dur-slow) var(--ease-out);
}

@keyframes galleon-gallery-fade {
	from { opacity: 0.35; }
	to   { opacity: 1; }
}

/* ==========================================================================
   2. DETAIL — PANEL INFORMASI

   Menempel saat scroll di layar lebar, jadi tombol kontak tetap terlihat
   selama pengunjung membaca deskripsi di bawah. Header halaman ini
   sticky (tidak transparan), jadi panel menempel tepat di bawahnya.
   ========================================================================== */

.detail-info {
	position: sticky;
	top: calc(var(--header-h) + var(--sp-5));
	min-width: 0;
}

.detail-info__cat {
	margin: 0 0 var(--sp-3);
	font-family: var(--font-display);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-wider);
	text-transform: uppercase;
	color: var(--c-accent-text);
}

/* Satu tingkat di bawah judul section — nama produk bisa sangat panjang
   dan panelnya hanya separuh lebar. */
.detail-info__title {
	margin: 0 0 var(--sp-4);
	font-size: var(--fs-xl);
	font-weight: var(--fw-black);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tight);
	color: var(--c-ink);
	text-wrap: balance;
}

.detail-info__lead {
	margin: 0 0 var(--sp-6);
	font-size: var(--fs-md);
	line-height: var(--lh-body);
	color: var(--c-text-muted);
}

.detail-info__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	margin-bottom: var(--sp-6);
}

/* Tombol boleh menyusut sampai batas terbaca, lalu membungkus —
   tanpa ini dua tombol berdampingan memaksa panel melebar. */
.detail-info__actions .btn {
	flex: 1 1 auto;
	min-width: 180px;
}

.detail-info__terms {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--sp-3);
	padding-top: var(--sp-5);
	border-top: 1px solid var(--c-line);
	font-size: var(--fs-sm);
}

.detail-info__terms-label {
	font-family: var(--font-display);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--c-text-muted);
}

.detail-info__terms-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
}

.detail-info__terms-list a {
	border-bottom: 1px solid var(--c-line-strong);
	font-weight: var(--fw-semibold);
	color: var(--c-ink);
	text-decoration: none;
}

@media (hover: hover) {
	.detail-info__terms-list a:hover { border-color: var(--c-accent); }
}

/* --- Responsive layout detail ---
   ≤768px: satu kolom; sticky dilepas supaya panel tidak ikut tertahan.
   ≤480px: stage galeri persegi, tombol selebar panel. */
@media (max-width: 768px) {
	.detail-top {
		grid-template-columns: 1fr;
		gap: var(--sp-7);
	}

	.detail-info { position: static; }
}

@media (max-width: 480px) {
	.detail-top { margin-block: var(--sp-5) var(--sp-8); }

	.detail-gallery__nav { --thumb-gap: var(--sp-2); }
	.detail-gallery__stage { aspect-ratio: 1; }

	.detail-info__actions .btn {
		flex: 1 1 100%;
		min-width: 0;
	}
}


/* ==========================================================================
   3. DETAIL — SECTION ISI

   Keunggulan produk & scope proyek sama-sama berasal dari WYSIWYG dan
   diperlakukan sama: daftar bertitik jadi grid centang.
   ========================================================================== */

.detail-section { margin-bottom: var(--sp-section); }

.detail-section__title {
	margin: 0 0 var(--sp-5);
	padding-bottom: var(--sp-4);
	border-bottom: 1px solid var(--c-line);
	font-size: var(--fs-lg);
	font-weight: var(--fw-black);
	letter-spacing: var(--ls-snug);
}

/* --- Isi WYSIWYG (keunggulan produk & scope proyek) --- */
.product-benefits__content > * + *,
.project-scope__content > * + * { margin-top: var(--sp-4); }

.product-benefits__content p,
.project-scope__content p {
	max-width: 68ch;
	font-size: var(--fs-base);
	line-height: var(--lh-body);
	color: var(--c-text-muted);
}

.product-benefits__content ul,
.project-scope__content ul {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: var(--sp-4);
}

.product-benefits__content li,
.project-scope__content li {
	font-size: var(--fs-sm);
	line-height: var(--lh-body);
}

.product-benefits__content ul li,
.project-scope__content ul li {
	position: relative;
	padding-left: var(--sp-7);
}

/* Centang dibuat dari border, bukan file ikon */
.product-benefits__content ul li::before,
.project-scope__content ul li::before {
	content: "";
	position: absolute;
	top: 0.4em;
	left: 0;
	width: 16px;
	height: 9px;
	border-bottom: 2px solid var(--c-accent);
	border-left: 2px solid var(--c-accent);
	transform: rotate(-45deg);
}

.product-benefits__content ol,
.project-scope__content ol { padding-inline-start: var(--sp-6); }

.product-benefits__content ol li,
.project-scope__content ol li {
	margin-bottom: var(--sp-3);
	list-style: decimal;
}

/* --- Data proyek ---
   Tabel definisi: label & isi sejajar dalam kolom, mudah dipindai. */
.project-facts {
	margin: 0 0 var(--sp-6);
	padding: var(--sp-5);
	border-radius: var(--radius);
	background: var(--c-surface-alt);
}

.project-facts__row {
	display: grid;
	grid-template-columns: minmax(0, 90px) minmax(0, 1fr);
	align-items: baseline;
	gap: var(--sp-4);
}

.project-facts__row + .project-facts__row {
	margin-top: var(--sp-3);
	padding-top: var(--sp-3);
	border-top: 1px solid var(--c-line);
}

.project-facts dt {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--c-text-muted);
}

.project-facts dd {
	margin: 0;
	font-size: var(--fs-base);
	font-weight: var(--fw-semibold);
	color: var(--c-ink);
}

/* Label & isi ditumpuk — kolom 90px terlalu sempit untuk alamat
   panjang di layar sekecil ini. */
@media (max-width: 480px) {
	.project-facts__row {
		grid-template-columns: 1fr;
		gap: var(--sp-1);
	}
}


/* ==========================================================================
   4. ARTIKEL

   Lebar baca dibatasi .container--narrow (base.css) — sekitar 70
   karakter per baris adalah batas nyaman untuk teks panjang.
   ========================================================================== */

.article-head {
	padding-block: var(--sp-7) var(--sp-6);
	text-align: center;
}

.article-head .breadcrumbs ol { justify-content: center; }

.article-head__cat {
	margin: var(--sp-6) 0 var(--sp-4);
	font-family: var(--font-display);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-wider);
	text-transform: uppercase;
}

.article-head__cat a {
	color: var(--c-accent-text);
	text-decoration: none;
}

@media (hover: hover) {
	.article-head__cat a:hover { text-decoration: underline; }
}

.article-head__title {
	margin: 0 0 var(--sp-5);
	font-size: var(--fs-2xl);
	font-weight: var(--fw-black);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tight);
	color: var(--c-ink);
	text-wrap: balance;
}

.article-head__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--sp-3);
	margin: 0;
	font-size: var(--fs-sm);
	color: var(--c-text-muted);
}

.article-head__sep { opacity: 0.5; }

/* --- Gambar utama --- */
.article-media {
	margin: 0 0 var(--sp-8);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
	overflow: hidden;
}

.article-media img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* --- Kaki artikel: tag kiri, tombol berbagi kanan --- */
.article-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-5);
	margin-block: var(--sp-8) var(--sp-section);
	padding-top: var(--sp-6);
	border-top: 1px solid var(--c-line);
}

.article-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
}

.article-tag {
	display: inline-block;
	padding: var(--sp-1) var(--sp-4);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-pill);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	color: var(--c-text-muted);
	text-decoration: none;
	transition:
		border-color var(--dur-fast) var(--ease),
		color var(--dur-fast) var(--ease);
}

@media (hover: hover) {
	.article-tag:hover {
		border-color: var(--c-accent);
		color: var(--c-accent-text);
	}
}

/* --- Berbagi --- */
.article-share {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-4);
}

.article-share__label {
	margin: 0;
	font-family: var(--font-display);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-wide);
	text-transform: uppercase;
	color: var(--c-text-muted);
}

.article-share__list {
	display: flex;
	gap: var(--sp-2);
}

.article-share__link {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--c-line);
	border-radius: 50%;
	background: transparent;
	color: var(--c-text-muted);
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color var(--dur-fast) var(--ease),
		border-color var(--dur-fast) var(--ease),
		color var(--dur-fast) var(--ease),
		transform var(--dur) var(--ease-out);
}

@media (hover: hover) {
	.article-share__link:hover {
		border-color: var(--c-ink);
		background: var(--c-ink);
		color: var(--c-accent);
		transform: translateY(-3px);
	}
}

/* Umpan balik setelah tautan disalin */
.article-share__link.is-copied {
	border-color: var(--c-accent);
	background: var(--c-accent);
	color: var(--c-ink);
}

/* Artikel / produk / proyek terkait — kartu dari components.css. */
.related-section { background: var(--c-surface-alt); }

@media (max-width: 768px) {
	.article-head { padding-block: var(--sp-6) var(--sp-5); }

	.article-media { border-radius: var(--radius); }

	.article-foot {
		flex-direction: column;
		align-items: flex-start;
	}
}


/* ==========================================================================
   5. MODAL PENAWARAN

   Elemen <dialog> bawaan — backdrop, jebakan fokus, dan Escape sudah
   ditangani browser; yang diatur di sini hanya tampilannya.
   ========================================================================== */

.quote-modal {
	--modal-pad: var(--sp-6);

	width: min(100%, 720px);
	max-height: 90dvh;
	padding: 0;
	border: 0;
	border-radius: var(--radius-lg);
	background: var(--c-surface);
	box-shadow: var(--shadow-lg);
	overflow: hidden;
}

.quote-modal::backdrop {
	background: rgb(var(--c-ink-rgb) / 0.62);
	backdrop-filter: blur(3px);
}

.quote-modal[open] { animation: galleon-enter var(--dur-slow) var(--ease-out) both; }

.quote-modal__panel {
	display: flex;
	flex-direction: column;
	max-height: 90dvh;
}

.quote-modal__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--sp-4);
	padding: var(--modal-pad);
	border-bottom: 1px solid var(--c-line);
}

.quote-modal__eyebrow {
	margin: 0 0 var(--sp-2);
	font-family: var(--font-display);
	font-size: var(--fs-xs);
	font-weight: var(--fw-bold);
	letter-spacing: var(--ls-wider);
	text-transform: uppercase;
	color: var(--c-accent-text);
}

.quote-modal__title {
	margin: 0;
	font-size: var(--fs-lg);
	font-weight: var(--fw-black);
	letter-spacing: var(--ls-snug);
	color: var(--c-ink);
}

.quote-modal__close {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--c-line);
	border-radius: 50%;
	background: transparent;
	color: var(--c-text-muted);
	cursor: pointer;
	transition:
		background-color var(--dur-fast) var(--ease),
		border-color var(--dur-fast) var(--ease),
		color var(--dur-fast) var(--ease);
}

@media (hover: hover) {
	.quote-modal__close:hover {
		border-color: var(--c-ink);
		background: var(--c-ink);
		color: var(--c-on-dark);
	}
}

/* Digulir sendiri kalau formnya lebih tinggi dari layar */
.quote-modal__body {
	flex: 1;
	padding: var(--modal-pad);
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* Modal lebih sempit dari halaman Contact — form satu kolom supaya
   field-nya tidak terlalu kurus. */
.quote-modal .form-grid { grid-template-columns: 1fr; }

/* Kunci scroll halaman di belakang modal */
body.modal-open { overflow: hidden; }

/* Layar penuh di HP. */
@media (max-width: 480px) {
	.quote-modal {
		--modal-pad: var(--sp-5);

		width: 100%;
		max-height: 100dvh;
		border-radius: 0;
	}

	.quote-modal__panel { max-height: 100dvh; }
}