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

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

   Urutan isi:
     1. Detail: layout & galeri
     2. Detail: panel informasi
     3. Detail: section isi
     4. Produk: keunggulan
     5. Proyek: data & scope
     6. Artikel
     7. Modal penawaran
   ========================================================================== */


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

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

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

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

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

.detail-gallery__stage--empty {
	display: grid;
	place-items: center;
	background: linear-gradient(135deg, #EDEAE4 0%, #F7F6F3 100%);
}

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

/* Jumlah kolom mengikuti lebar tersedia lewat auto-fill, jadi tidak
   perlu breakpoint terpisah — yang disetel hanya lebar minimumnya. */
.detail-gallery__thumbs {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(var(--thumb-min), 1fr));
	gap: var(--sp-3);
	margin-top: var(--sp-3);
}

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

.detail-gallery__thumb img {
	display: block;
	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-color: var(--c-accent);
	border-width: 2px;
	opacity: 1;
}

.detail-gallery__thumb:focus-visible {
	outline: 2px solid var(--c-accent);
	outline-offset: 2px;
}


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

   Menempel saat scroll di layar lebar, jadi tombol kontaknya tetap
   terlihat selama pengunjung membaca deskripsi di bawah.
   ========================================================================== */

.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);
}

/* Judul memakai clamp, bukan token tetap — nama produk bisa sangat
   panjang dan di kolom sempit ukuran tetap membuatnya jadi lima baris. */
.detail-info__title {
	margin: 0 0 var(--sp-4);
	font-size: clamp(1.5rem, 1.2vw + 1.1rem, 2rem);
	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 {
	color: var(--c-ink);
	font-weight: var(--fw-semibold);
	text-decoration: none;
	border-bottom: 1px solid var(--c-line-strong);
}

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


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

.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);
}

/* --- Responsive: layout dua kolom --- */
@media (max-width: 900px) {
	.detail-top {
		grid-template-columns: 1fr;
		gap: var(--sp-7);
	}

	/* Sticky dilepas: di satu kolom tidak ada ruang untuk menempel,
	   dan menyisakannya membuat panel ikut tertahan saat digulir. */
	.detail-info { position: static; }
}

@media (max-width: 600px) {
	.detail-top {
		--thumb-min: 56px;

		margin-block: var(--sp-5) var(--sp-8);
	}

	.detail-gallery__stage { aspect-ratio: 1; }

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


/* ==========================================================================
   4. PRODUK — KEUNGGULAN

   Isinya HTML dari WYSIWYG. Daftar bertitik jadi grid centang.
   ========================================================================== */

.product-benefits__content > * + * { margin-top: var(--sp-4); }

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

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

.product-benefits__content ul li {
	position: relative;
	margin: 0;
	padding-left: var(--sp-7);
	list-style: none;
	font-size: var(--fs-sm);
	line-height: var(--lh-body);
}

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

.product-benefits__content ol {
	margin: 0;
	padding-inline-start: var(--sp-6);
}

.product-benefits__content ol li {
	margin-bottom: var(--sp-3);
	list-style: decimal;
	font-size: var(--fs-sm);
	line-height: var(--lh-body);
}


/* ==========================================================================
   5. PROYEK — DATA & SCOPE
   ========================================================================== */

/* Tabel definisi, bukan daftar biasa. Label dan isinya sejajar
   dalam kolom, jadi mudah dipindai. */
.project-facts {
	margin: 0 0 var(--sp-6);
	padding: var(--sp-5);
	background: var(--c-surface-alt);
	border-radius: var(--radius);
}

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

.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);
}

/* Scope pekerjaan — perlakuan sama dengan keunggulan produk */
.project-scope__content > * + * { margin-top: var(--sp-4); }

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

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

.project-scope__content ul li {
	position: relative;
	margin: 0;
	padding-left: var(--sp-7);
	list-style: none;
	font-size: var(--fs-sm);
	line-height: var(--lh-body);
}

.project-scope__content ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.4em;
	width: 16px;
	height: 9px;
	border-left: 2px solid var(--c-accent);
	border-bottom: 2px solid var(--c-accent);
	transform: rotate(-45deg);
}

.project-scope__content ol {
	margin: 0;
	padding-inline-start: var(--sp-6);
}

.project-scope__content ol li {
	margin-bottom: var(--sp-3);
	list-style: decimal;
	font-size: var(--fs-sm);
	line-height: var(--lh-body);
}

@media (max-width: 420px) {
	/* Label dan isi ditumpuk — di layar sesempit ini, kolom 90px
	   menyisakan terlalu sedikit ruang untuk alamat yang panjang. */
	.project-facts__row {
		grid-template-columns: 1fr;
		gap: var(--sp-1);
	}
}


/* ==========================================================================
   6. ARTIKEL

   Lebar baca dibatasi container--narrow. Teks panjang di lebar penuh
   membuat mata sulit menemukan awal baris berikutnya — sekitar 65
   karakter per baris adalah batas nyaman.
   ========================================================================== */

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

.article-head .breadcrumbs { justify-content: 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);
	overflow: hidden;
	box-shadow: var(--shadow-lg);
}

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

.article-body { max-width: none; }

/* --- Kaki artikel --- */
.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);
	text-decoration: none;
	color: var(--c-text-muted);
	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);
	margin: 0;
	padding: 0;
}

.article-share__list li { list-style: none; }

.article-share__link {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--c-line);
	border-radius: 50%;
	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 {
		transform: translateY(-3px);
		background: var(--c-ink);
		border-color: var(--c-ink);
		color: var(--c-accent);
	}
}

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

.related-section { background: var(--c-surface-alt); }

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

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

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


/* ==========================================================================
   7. MODAL PENAWARAN

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

.quote-modal {
	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: rgba(26, 25, 23, 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(--sp-6);
	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;
	place-items: center;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	padding: 0;
	background: transparent;
	border: 1px solid var(--c-line);
	border-radius: 50%;
	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 {
		background: var(--c-ink);
		border-color: var(--c-ink);
		color: var(--c-on-dark);
	}
}

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

/* Modal lebih sempit dari halaman Contact, jadi formnya 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; }

@media (max-width: 600px) {
	.quote-modal {
		width: 100%;
		max-height: 100dvh;
		border-radius: 0;
	}

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

	.quote-modal__head,
	.quote-modal__body { padding: var(--sp-5); }
}