/* ============================================================
   Halaman: Kontak (/kontak)
   Dependensi: asset/e-office/public.css (shared)
   Layout: banner pengelola col-12, lalu list kontak kiri + peta kanan
   ============================================================ */

/* ===== Hero ===== */
.contact-hero { background: var(--pixel-primary); }
.contact-hero .hero-inner { width: min(1180px, calc(100% - 40px)); margin: auto; padding: 36px 0 38px; }
.contact-hero .hero-copy { max-width: 760px; }
.eyebrow { margin: 0 0 8px; color: rgba(255,255,255,.72); font-size: 10px; font-weight: 400; letter-spacing: .13em; text-transform: uppercase; }
.contact-hero h1 { margin: 0; color: var(--white); font-size: clamp(32px, 4vw, 44px); font-weight: 400; line-height: 1.15; letter-spacing: -.035em; }

/* ===== Container col-12 ===== */
.page-kontak { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 44px 0 76px; }

/* ===== Pengelola Layanan (tanpa card) ===== */
.pengelola-banner { padding: 10px 0 6px; }
.pengelola-banner small { display: block; margin-bottom: 3px; color: var(--pixel-muted); font-size: 10.5px; font-weight: 400; letter-spacing: .12em; text-transform: uppercase; }
.pengelola-banner strong { display: block; color: var(--pixel-heading); font-size: 21px; font-weight: 400; line-height: 1.4; }

/* ===== Layout dua kolom ===== */
.contact-page { margin-top: 22px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 40px; align-items: start; }

/* ===== List kontak (satu card, baris + divider) ===== */
.contact-list { border: 1px solid var(--pixel-border); border-radius: 14px; background: var(--white); box-shadow: 0 6px 18px rgba(62,77,108,.05); overflow: hidden; }
.contact-row { display: flex; align-items: center; gap: 16px; padding: 18px 22px; }
.contact-row + .contact-row { border-top: 1px solid #eef0f4; }
.contact-row .cr-icon { flex: 0 0 38px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; color: var(--pixel-primary); background: var(--pixel-primary-soft); font-size: 16px; }
.contact-row .cr-label { display: block; color: var(--pixel-muted); font-size: 11px; font-weight: 400; letter-spacing: .06em; text-transform: uppercase; }
.contact-row .cr-value { display: block; color: var(--pixel-heading); font-size: 13.5px; font-weight: 300; line-height: 1.5; overflow-wrap: anywhere; }
.contact-row a.cr-value { color: var(--pixel-primary); text-decoration: none; }
.contact-row a.cr-value:hover { text-decoration: underline; }

/* ===== Peta (heading floating di atas iframe) ===== */
.map-block { position: relative; }
.map-float-head {
	position: absolute;
	z-index: 2;
	top: 16px;
	left: 16px;
	max-width: 340px;
	padding: 14px 18px;
	border: 1px solid rgba(228,231,234,.9);
	border-radius: 12px;
	background: rgba(255,255,255,.94);
	box-shadow: 0 12px 28px rgba(62,77,108,.16);
	backdrop-filter: blur(6px);
}
.map-float-head h2 { margin: 0 0 2px; color: var(--pixel-heading); font-size: 15px; font-weight: 400; }
.map-float-head p { margin: 0; color: var(--pixel-muted); font-size: 12px; font-weight: 300; line-height: 1.5; }
.map-block iframe { display: block; width: 100%; height: 420px; border: 1px solid var(--pixel-border); border-radius: 14px; }

/* ===== Responsive ===== */
@media (max-width: 960px) {
	.contact-page { grid-template-columns: 1fr; gap: 30px; }
	.map-block iframe { height: 340px; }
}
@media (max-width: 640px) {
	.contact-hero .hero-inner, .page-kontak { width: min(100% - 28px, 1120px); }
	.contact-hero .hero-inner { padding: 30px 0 32px; }
	.contact-hero h1 { font-size: 32px; }
	.page-kontak { padding: 30px 0 56px; }
	.pengelola-banner { padding: 20px 22px; }
	.pengelola-banner strong { font-size: 16px; }
	.contact-row { padding: 15px 16px; }
}