/* =========================================================================
   Be Kind Tattooing — contact.css
   "Get in touch" · contact links + address/hours · wide studio photo
   ========================================================================= */

.contact { padding-block: var(--bk-section-y) 0; }

.contact__title {
	color: var(--bk-sage);
	font-size: clamp(2.75rem, 1.6rem + 4vw, 4.5rem);
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.contact__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2rem, 5vw, 4rem);
	margin-bottom: var(--bk-section-y);
}

.contact__intro { color: var(--bk-body); max-width: 44ch; margin-bottom: var(--bk-space-4); }

.contact__links { list-style: none; display: grid; gap: var(--bk-space-2); margin: 0; padding: 0; }
.contact__links a { display: inline-flex; align-items: center; gap: 0.75rem; color: var(--bk-charcoal); }
.contact__links a:hover { color: var(--bk-green); text-decoration: none; }
.contact__links .bk-icon { color: var(--bk-mustard); width: 1.4rem; height: 1.4rem; flex: none; }
.contact__links strong { font-weight: 500; text-decoration: underline; text-underline-offset: 2px; }

.contact__col--info { display: grid; gap: var(--bk-space-3); align-content: start; }
.contact__block { display: flex; gap: 0.85rem; }
.contact__icon { flex: none; }
.contact__icon .bk-icon { color: var(--bk-mustard); width: 1.4rem; height: 1.4rem; }
.contact__address { font-style: normal; color: var(--bk-body); line-height: 1.6; }
.contact__hours { color: var(--bk-body); line-height: 1.8; }

/* Full-bleed studio photo */
.contact__photo img {
	display: block;
	width: 100%;
	height: clamp(280px, 42vw, 560px);
	object-fit: cover;
}

/* Request a booking (Tattoo / Piercing / Removal tabs + forms) */
.contact-booking { padding-block: var(--bk-section-y); }
.contact-booking__title { color: var(--bk-sage); margin: 0 0 var(--bk-space-4); }
.contact-booking__tabs { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0 0 var(--bk-space-4); }
.contact-booking__tab {
	padding: 0.62em 1.6em;
	border: 1px solid var(--bk-line);
	border-radius: var(--bk-radius-pill);
	background: #ffffff;
	color: var(--bk-body);
	font-weight: 500;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.contact-booking__tab:hover { border-color: var(--bk-charcoal); }
.contact-booking__tab.is-active { background: var(--bk-charcoal); color: #ffffff; border-color: var(--bk-charcoal); }
.contact-booking__panel[hidden] { display: none; }
.contact-booking__panel-title { color: var(--bk-green); margin: 0 0 var(--bk-space-3); }

@media (max-width: 768px) {
	.contact__grid { grid-template-columns: 1fr; gap: var(--bk-space-4); }
	.contact-booking__tab { flex: 1 1 auto; text-align: center; }
}