/* ==========================================================================
   Pulse Locations — pulse-locations.css
   Palette: yellow #F7E017, charcoal #33333B / #26262C, cream #FDFBEF
   Fonts:   Petrona (headings, serif) / Jost (body, sans)
   Landing page (/locations/) + single clinic page
   ========================================================================== */

:root {
	--pl-yellow:     #F7E017;
	--pl-dark:       #33333B;
	--pl-dark-2:     #26262C;
	--pl-cream:      #FDFBEF;
	--pl-line:       #ECE8DC;
	--pl-line-2:     #E3DFD2;
	--pl-body:       #4A4A52;
	--pl-muted:      #5C5C64;
	--pl-muted-2:    #6E6E76;
	--pl-muted-3:    #8A8A92;
	--pl-green:      #3F8F5B;
	--pl-gray:       #A8A498;
	--pl-photo-bg:   #F4F1E8;
	--pl-serif:      'Petrona', Georgia, serif;
	--pl-sans:       'Jost', -apple-system, BlinkMacSystemFont, sans-serif;
	--pl-maxw:       1200px;
}

.pl-landing,
.pl-detail {
	font-family: var(--pl-sans);
	color: var(--pl-body);
	-webkit-font-smoothing: antialiased;
}

.pl-landing a:not(.pl-btn),
.pl-detail a:not(.pl-btn) {
	color: var(--pl-dark);
	text-decoration: none;
}

.pl-landing h1, .pl-landing h2, .pl-landing h3, .pl-landing h4,
.pl-detail h1, .pl-detail h2, .pl-detail h3, .pl-detail h4 {
	font-family: var(--pl-serif);
	font-weight: 400;
	color: #26262C;
}

/* Buttons ------------------------------------------------------------- */

.pl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 16px 26px;
	font-family: var(--pl-sans);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
}

/* Compound .pl-btn.pl-btn--* selectors (not just .pl-btn--*) so these outrank the
   base "a { color }" rule above on specificity — otherwise dark-on-dark/cream-on-cream
   buttons render with unreadable text. */
.pl-btn.pl-btn--primary   { background: var(--pl-yellow); color: var(--pl-dark-2); }
.pl-btn.pl-btn--outline   { border-color: var(--pl-dark); color: var(--pl-dark); font-weight: 500; }
.pl-btn.pl-btn--dark      { background: var(--pl-dark); color: var(--pl-cream); padding: 14px 22px; font-size: 14px; }
.pl-btn.pl-btn--ghost     { border-color: #D9D5C8; color: var(--pl-dark); padding: 14px 22px; font-size: 14px; }
.pl-btn.pl-btn--outline-dark  { border-color: var(--pl-dark-2); color: var(--pl-dark-2); }
.pl-btn.pl-btn--outline-light { border-color: #6E6E76; color: var(--pl-cream); }

/* Status dot ------------------------------------------------------------ */

.pl-status { display: flex; align-items: center; gap: 9px; }
.pl-status-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.pl-status--open .pl-status-dot { background: var(--pl-green); }
.pl-status--closed .pl-status-dot { background: var(--pl-gray); }

/* Areas grid (shared by landing + detail) -------------------------------- */

.pl-areas-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 12px 24px;
	font-size: 16px;
	color: var(--pl-body);
}

/* CTA bands (shared) ----------------------------------------------------- */

.pl-cta {
	max-width: var(--pl-maxw);
	margin: 0 auto;
	padding: 56px 32px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	flex-wrap: wrap;
}

.pl-cta h3 { margin: 0 0 12px; }
.pl-cta p { margin: 0; }
.pl-cta-actions { display: flex; gap: 14px; flex-shrink: 0; flex-wrap: wrap; }

.pl-cta--yellow { background: var(--pl-yellow); text-align: center; flex-direction: column; }
.pl-cta--yellow h3 { font-size: 40px; max-width: 26ch; }
.pl-cta--yellow p { color: var(--pl-body); margin-bottom: 6px; }

.pl-cta--dark { background: var(--pl-dark-2); }
.pl-cta--dark h3 { color: var(--pl-cream); font-size: 38px; max-width: 26ch; }
.pl-cta--dark p { color: #B6B6BE; }

.pl-underline-link { font-size: 15px; font-weight: 500; border-bottom: 1px solid var(--pl-yellow); padding-bottom: 2px; }

/* ==========================================================================
   LANDING PAGE — /locations/
   ========================================================================== */

.pl-landing { background: var(--pl-cream); }

.pl-hero {
	max-width: 760px;
	margin: 0 auto;
	padding: 64px 32px 48px;
	text-align: center;
}

.pl-hero-title { font-size: 54px; line-height: 1.08; margin: 0 0 20px; text-wrap: pretty; }
.pl-hero-sub { font-size: 19px; line-height: 1.6; color: var(--pl-muted); margin: 0 0 32px; }
.pl-hero-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.pl-split {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
}

.pl-split-panel {
	position: relative;
	min-height: 480px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	background: var(--pl-photo-bg);
}

.pl-split-photo { position: absolute; inset: 0; }
.pl-split-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pl-split-card {
	position: relative;
	margin: 24px;
	background: var(--pl-cream);
	padding: 32px 30px 30px;
}

.pl-split-card h2 { font-size: 32px; margin: 0 0 16px; }

.pl-split-details {
	display: flex;
	flex-direction: column;
	gap: 10px;
	font-size: 16px;
	line-height: 1.5;
	margin-bottom: 22px;
}

.pl-phone-link { font-weight: 500; }
.pl-split-actions { display: flex; gap: 12px; flex-wrap: wrap; }

.pl-insurance-strip {
	background: var(--pl-yellow);
	padding: 32px 32px 24px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	text-align: center;
}

.pl-insurance-strip-label { font-size: 15px; font-weight: 600; color: var(--pl-dark-2); }

.pl-insurance-strip-logos { width: 100%; max-width: var(--pl-maxw); }

.pl-areas {
	max-width: var(--pl-maxw);
	margin: 0 auto;
	padding: 64px 32px;
}

.pl-areas h3 { font-size: 32px; margin: 0 0 30px; }

.pl-faq-grid {
	max-width: var(--pl-maxw);
	margin: 0 auto;
	padding: 0 32px 64px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
}

.pl-faq-item h4 { font-size: 22px; margin: 0 0 10px; }
.pl-faq-item p { font-size: 16px; line-height: 1.6; color: var(--pl-muted); margin: 0; }

/* ==========================================================================
   SINGLE CLINIC PAGE
   ========================================================================== */

.pl-detail { background: var(--pl-cream); }

.pl-breadcrumb {
	max-width: var(--pl-maxw);
	margin: 0 auto;
	padding: 28px 32px 0;
	font-size: 14px;
	color: var(--pl-muted-3);
	display: flex;
	gap: 8px;
}

.pl-breadcrumb a { color: var(--pl-muted-3); }
.pl-breadcrumb-current { color: var(--pl-body); }

.pl-detail-hero {
	max-width: var(--pl-maxw);
	margin: 0 auto;
	padding: 40px 32px 64px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: center;
}

.pl-detail-hero--no-photo { grid-template-columns: 1fr; }
.pl-detail-hero--no-photo .pl-detail-hero-copy { max-width: 70ch; }

.pl-eyebrow { font-size: 12px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--pl-muted-3); }
.pl-detail-hero-copy h1 { font-size: 48px; line-height: 1.08; margin: 18px 0 20px; text-wrap: pretty; }
.pl-detail-hero-intro { font-size: 18px; line-height: 1.65; color: var(--pl-muted); margin: 0 0 30px; max-width: 50ch; }
.pl-detail-hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; }

.pl-detail-hero-photo { height: 420px; position: relative; background: var(--pl-photo-bg); }
.pl-detail-hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pl-detail-info {
	max-width: var(--pl-maxw);
	margin: 0 auto;
	padding: 48px 32px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
	border-top: 1px solid var(--pl-line);
	border-bottom: 1px solid var(--pl-line);
}

.pl-info-label { font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pl-muted-3); margin: 0 0 14px; }
.pl-info-address { font-family: var(--pl-serif); font-size: 22px; line-height: 1.45; color: #26262C; margin: 0 0 12px; }

.pl-hours-list { display: flex; flex-direction: column; gap: 8px; font-size: 16px; color: var(--pl-body); }
.pl-hours-list > span:not(.pl-status) { display: flex; justify-content: space-between; max-width: 260px; }
.pl-hours-list .pl-status { margin-top: 6px; font-weight: 500; color: #26262C; }

.pl-contact-list { display: flex; flex-direction: column; gap: 10px; font-size: 16px; color: var(--pl-body); }
.pl-contact-phone { font-family: var(--pl-serif); font-size: 22px; }

.pl-gallery { max-width: var(--pl-maxw); margin: 0 auto; padding: 56px 32px 0; }
.pl-gallery h3 { font-size: 28px; margin: 0 0 24px; }
.pl-gallery-grid { display: grid; gap: 16px; height: 300px; }
.pl-gallery-item { position: relative; height: 300px; min-width: 0; overflow: hidden; background: var(--pl-photo-bg); }
.pl-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pl-services {
	max-width: var(--pl-maxw);
	margin: 0 auto;
	padding: 56px 32px 48px;
	text-align: center;
}

.pl-services h3 { font-size: 32px; text-align: center; margin: 0 0 28px; }

.pl-chip-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.pl-chip { border: 1px solid var(--pl-line-2); padding: 16px 28px; font-size: 18px; color: var(--pl-body); }

.pl-insurance-panel {
	max-width: var(--pl-maxw);
	margin: 72px auto 0;
	background: var(--pl-photo-bg);
	padding: 48px 40px;
	text-align: center;
}

.pl-insurance-panel h3 { font-size: 32px; text-align: center; margin: 0 0 14px; }
.pl-insurance-panel > p { font-size: 18px; line-height: 1.6; color: var(--pl-muted); margin: 0 auto 32px; max-width: 50ch; }
.pl-insurance-panel-logos { margin: 0 auto 32px; }

.pl-nearby-areas {
	max-width: var(--pl-maxw);
	margin: 0 auto;
	padding: 40px 32px 56px;
	display: grid;
	grid-template-columns: 0.8fr 2fr;
	gap: 48px;
	border-top: 1px solid var(--pl-line);
}

.pl-nearby-areas h3 { font-size: 26px; margin: 0 0 10px; }
.pl-nearby-areas p { font-size: 15px; line-height: 1.6; color: var(--pl-muted-2); margin: 0; }
.pl-nearby-areas .pl-areas-grid { grid-template-columns: repeat(3, 1fr); }

.pl-detail-faqs {
	max-width: var(--pl-maxw);
	margin: 0 auto;
	padding: 0 32px 64px;
	display: grid;
	grid-template-columns: 0.8fr 2fr;
	gap: 48px;
}

.pl-detail-faqs h3 { font-size: 26px; margin: 0; }

.pl-accordion details { border-top: 1px solid var(--pl-line); padding: 20px 0; }
.pl-accordion details:last-child { border-bottom: 1px solid var(--pl-line); }
.pl-accordion summary { display: flex; justify-content: space-between; gap: 24px; font-size: 18px; color: #26262C; list-style: none; cursor: pointer; }
.pl-accordion summary::-webkit-details-marker { display: none; }
.pl-accordion-plus { color: var(--pl-gray); }
.pl-accordion details[open] .pl-accordion-plus { transform: rotate(45deg); }
.pl-accordion p { font-size: 16px; line-height: 1.65; color: var(--pl-muted); margin: 14px 0 0; max-width: 62ch; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 900px) {
	.pl-hero-title { font-size: 40px; }
	.pl-detail-hero,
	.pl-nearby-areas,
	.pl-detail-faqs { grid-template-columns: 1fr; }
	.pl-detail-hero-photo { height: 320px; }
	.pl-faq-grid { grid-template-columns: 1fr; }
	.pl-detail-info { grid-template-columns: 1fr; gap: 32px; }
	.pl-areas-grid,
	.pl-nearby-areas .pl-areas-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 580px) {
	.pl-hero-title { font-size: 32px; }
	.pl-detail-hero-copy h1 { font-size: 34px; }
	.pl-split { grid-template-columns: 1fr; }
	.pl-split-panel { min-height: 380px; }
	.pl-gallery-grid { grid-template-columns: 1fr !important; height: auto; }
	.pl-gallery-item { height: 220px; }
	.pl-cta { flex-direction: column; text-align: center; }
	.pl-cta-actions { justify-content: center; }
	.pl-areas-grid,
	.pl-nearby-areas .pl-areas-grid { grid-template-columns: 1fr 1fr; }
}