/* =========================================================
   Portofolio Arsitektur — gaya studio minimalis (SIBAMBO-like)
   Semua selector di-namespace .pa- agar tidak bentrok dgn tema.
   ========================================================= */

:root {
	--pa-bg: #ffffff;
	--pa-bg-soft: #fbf1ef;
	--pa-ink: #1a1a1a;
	--pa-muted: #9a8d8b;
	--pa-line: #ece4e2;
	--pa-accent: #c19a9a;
	--pa-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
	--pa-display: var(--pa-font);
	--pa-maxw: 1240px;
}

/* ---- Reset lokal ---- */
.pa-wrap,
.pa-wrap * {
	box-sizing: border-box;
}

.pa-wrap {
	font-family: var(--pa-font);
	color: var(--pa-ink);
	max-width: var(--pa-maxw);
	width: 100%;
	margin-inline: auto;
	padding-inline: clamp(18px, 4vw, 40px);
	-webkit-font-smoothing: antialiased;
}

.pa-wrap img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* ---- Eyebrow (2026 - PROJECT DESIGN) ---- */
.pa-eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--pa-ink);
}

.pa-eyebrow__dash {
	color: var(--pa-muted);
	font-weight: 400;
}

.pa-eyebrow__year {
	color: var(--pa-ink);
}

/* =========================================================
   ARCHIVE / LISTING
   ========================================================= */
.pa-archive {
	padding-block: clamp(40px, 7vw, 90px);
}

.pa-archive__head {
	margin-bottom: clamp(34px, 5vw, 64px);
	border-bottom: 1px solid var(--pa-line);
	padding-bottom: 28px;
}

.pa-archive__title {
	font-family: var(--pa-display);
	font-weight: 600;
	font-size: clamp(40px, 8vw, 92px);
	line-height: .98;
	letter-spacing: -.02em;
	margin: 0;
	text-transform: uppercase;
	overflow-wrap: break-word;
	word-break: break-word;
}

.pa-grid-list {
	display: grid;
	gap: clamp(34px, 5vw, 64px) clamp(28px, 4vw, 56px);
}

.pa-cols-1 { grid-template-columns: 1fr; max-width: 760px; }
.pa-cols-2 { grid-template-columns: repeat(2, 1fr); }
.pa-cols-3 { grid-template-columns: repeat(3, 1fr); }

/* ---- Kartu ---- */
.pa-card {
	background: var(--pa-bg-soft);
	padding: 0 0 4px;
	border-radius: 2px;
	overflow: hidden;
}

.pa-card__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 11;
	overflow: hidden;
	background: #e8e0de;
}

.pa-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .9s cubic-bezier(.2, .8, .2, 1);
}

.pa-card:hover .pa-card__media img {
	transform: scale(1.04);
}

.pa-card__noimg {
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #e9e1df, #d9cfcd);
}

.pa-card__wm {
	position: absolute;
	left: 50%;
	bottom: 16px;
	transform: translateX(-50%);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .32em;
	color: rgba(255, 255, 255, .82);
	text-transform: uppercase;
	pointer-events: none;
	text-shadow: 0 1px 8px rgba(0, 0, 0, .25);
}

.pa-card__head {
	position: relative;
	padding: 26px clamp(18px, 3vw, 30px) 18px;
}

.pa-card__head .pa-eyebrow {
	margin-bottom: 12px;
}

.pa-card__title {
	font-family: var(--pa-display);
	font-weight: 500;
	font-size: clamp(26px, 3vw, 34px);
	line-height: 1.05;
	letter-spacing: -.01em;
	margin: 0 0 8px;
	overflow-wrap: break-word;
	word-break: break-word;
}

.pa-card__title a {
	color: inherit;
	text-decoration: none;
}

.pa-card__type {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .12em;
	color: var(--pa-muted);
	margin: 0;
	text-transform: uppercase;
}

/* ---- Tombol pill ---- */
.pa-btn {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 12px 22px;
	border: 1px solid var(--pa-accent);
	border-radius: 999px;
	color: var(--pa-ink);
	text-decoration: none;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	transition: background .25s ease, color .25s ease;
}

.pa-card__head .pa-btn {
	position: absolute;
	right: clamp(18px, 3vw, 30px);
	top: 26px;
}

.pa-btn svg {
	width: 16px;
	height: 16px;
}

.pa-btn:hover {
	background: var(--pa-ink);
	color: #fff;
	border-color: var(--pa-ink);
}

/* ---- Grid spesifikasi di kartu ---- */
.pa-card__specs {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2px 26px;
	padding: 6px clamp(18px, 3vw, 30px) 26px;
	border-top: 1px solid var(--pa-line);
	margin-top: 10px;
}

.pa-spec {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 0;
	border-bottom: 1px solid var(--pa-line);
	min-width: 0;
}

.pa-card__specs .pa-spec:nth-last-child(-n+2) {
	border-bottom: 0;
}

.pa-spec__ic {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	flex: none;
	border: 1px solid #d6cac8;
	border-radius: 50%;
	color: var(--pa-ink);
}

.pa-ic {
	width: 19px;
	height: 19px;
}

.pa-spec__txt {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.pa-spec__label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--pa-ink);
}

.pa-spec__val {
	font-size: 14px;
	color: #5e5654;
	overflow-wrap: break-word;
	word-break: break-word;
}

/* =========================================================
   SINGLE / DETAIL
   ========================================================= */
.pa-single {
	padding-block: clamp(20px, 4vw, 40px) clamp(50px, 8vw, 110px);
}

.pa-single__hero {
	position: relative;
	margin-bottom: clamp(40px, 6vw, 80px);
	border-radius: 2px;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	background: #e8e0de;
}

.pa-single__hero img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pa-single__body {
	display: grid;
	grid-template-columns: 250px 1fr;
	gap: clamp(30px, 6vw, 90px);
	align-items: start;
}

.pa-single__main {
	min-width: 0;
}

/* Sidebar info */
.pa-single__aside {
	position: sticky;
	top: 30px;
	display: flex;
	flex-direction: column;
	gap: 26px;
	min-width: 0;
}

.pa-info {
	display: flex;
	flex-direction: column;
	gap: 5px;
	min-width: 0;
}

.pa-info__label {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--pa-ink);
}

.pa-info__val {
	font-size: 16px;
	color: #5e5654;
	overflow-wrap: break-word;
	word-break: break-word;
}

/* Main */
.pa-single__title {
	font-family: var(--pa-display);
	font-weight: 600;
	font-size: clamp(46px, 8vw, 104px);
	line-height: .94;
	letter-spacing: -.025em;
	text-transform: uppercase;
	margin: 0 0 clamp(36px, 5vw, 60px);
	overflow-wrap: break-word;
	word-break: break-word;
}

.pa-single__specs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 8px 30px;
	padding: 30px 0;
	border-top: 1px solid var(--pa-line);
	border-bottom: 1px solid var(--pa-line);
	margin-bottom: clamp(36px, 5vw, 56px);
	min-width: 0;
}

.pa-spec--lg {
	border-bottom: 0 !important;
	padding: 10px 0;
}

.pa-spec--lg .pa-spec__ic {
	width: 44px;
	height: 44px;
}

.pa-spec--lg .pa-ic {
	width: 21px;
	height: 21px;
}

/* Konten deskripsi */
.pa-single__content {
	max-width: 760px;
	font-size: 17px;
	line-height: 1.75;
	color: #3a3432;
	overflow-wrap: break-word;
	word-break: break-word;
}

.pa-single__content p {
	margin: 0 0 1.2em;
}

.pa-single__content h2,
.pa-single__content h3 {
	font-family: var(--pa-display);
	letter-spacing: -.01em;
	margin: 1.6em 0 .5em;
}

/* Galeri */
.pa-gallery-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
	margin: clamp(40px, 6vw, 70px) 0 0;
}

.pa-gallery-grid__item {
	display: block;
	overflow: hidden;
	border-radius: 2px;
	aspect-ratio: 4 / 3;
	background: #e8e0de;
}

.pa-gallery-grid__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .9s cubic-bezier(.2, .8, .2, 1);
}

.pa-gallery-grid__item:hover img {
	transform: scale(1.05);
}

.pa-single__back {
	margin-top: clamp(40px, 6vw, 70px);
}

/* =========================================================
   PAGINATION & UTIL
   ========================================================= */
.pa-pagination {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-top: clamp(40px, 6vw, 70px);
}

.pa-pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 42px;
	height: 42px;
	padding: 0 12px;
	border: 1px solid var(--pa-line);
	border-radius: 999px;
	text-decoration: none;
	color: var(--pa-ink);
	font-size: 14px;
	font-weight: 600;
	transition: background .2s ease, color .2s ease;
}

.pa-pagination .page-numbers.current,
.pa-pagination .page-numbers:hover {
	background: var(--pa-ink);
	color: #fff;
	border-color: var(--pa-ink);
}

.pa-empty {
	font-family: var(--pa-font);
	color: var(--pa-muted);
	padding: 40px 0;
}

/* Aksesibilitas: fokus terlihat */
.pa-wrap a:focus-visible,
.pa-btn:focus-visible {
	outline: 2px solid var(--pa-ink);
	outline-offset: 3px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 980px) {
	.pa-wrap { overflow-x: hidden; }
	.pa-cols-3 { grid-template-columns: repeat(2, 1fr); }
	.pa-single__body {
		grid-template-columns: 1fr;
		gap: 34px;
	}
	.pa-single__aside {
		position: static;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 22px 40px;
	}
}

@media (max-width: 680px) {
	.pa-cols-2,
	.pa-cols-3 { grid-template-columns: 1fr; }
	.pa-card__head .pa-btn {
		position: static;
		margin-top: 16px;
	}
	.pa-card__specs { grid-template-columns: 1fr; }
	.pa-card__specs .pa-spec:nth-last-child(-n+2) {
		border-bottom: 1px solid var(--pa-line);
	}
	.pa-card__specs .pa-spec:last-child { border-bottom: 0; }
	.pa-gallery-grid { grid-template-columns: 1fr; }
}

/* Hormati preferensi gerak minimal */
@media (prefers-reduced-motion: reduce) {
	.pa-card__media img,
	.pa-gallery-grid__item img,
	.pa-btn,
	.pa-pagination .page-numbers {
		transition: none;
	}
}