/* ============================================================
 * page-location-v4.css
 * Loaded only on the Location (v4) page template.
 *
 * Typography per MDR-OCA-LocationsTemplate-v3 spec:
 *   H1 main             Montserrat 700 / 46 / 58 / uppercase / #243952
 *   Body intro paragraph Montserrat 400 / 17 / 27 / #506272 (Paynes Gray)
 *   H2 description      Montserrat 700 / 32 / 38 / uppercase / #506272
 *   Divider             1px #647C90
 *   Practice-area cards Reused from .mdl-pi-v4 .mdl-pi-card -- only the
 *                       grid is overridden here to 2-column (Figma shows 2).
 *   Sidebar             Reused from .mdl-cri-v4 .mdl-cri-sidebar, made sticky.
 *   Testimonials        Reused from front-page .mdl-testimonials (untouched).
 *   Strategic CTA       Reused from home-v4.css .mdl-cta (untouched).
 * ============================================================ */

/* ---------- Page container --------------------------------- */
.mdl-home-v4.mdl-location-v4 .mdl-loc-v4 {
	background: #fff;
	padding: 60px 0 96px;
}
.mdl-home-v4.mdl-location-v4 .mdl-loc-v4__layout {
	max-width: 1366px;
	margin: 0 auto;
	padding: 0 32px;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 379px;   /* matches CRI / testimonials grid */
	gap: 64px;
	align-items: start;
}
.mdl-home-v4.mdl-location-v4 .mdl-loc-v4__main { min-width: 0; }

/* ---------- H1 (Figma: Montserrat 700 / 46 / 58 / Prussian) ------ */
.mdl-home-v4.mdl-location-v4 .mdl-loc-v4__title {
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	font-size: 46px;
	line-height: 58px;
	text-transform: uppercase;
	letter-spacing: 0;
	color: var(--mdl-prussian, #243952);
	margin: 0 0 24px;
}

/* ---------- Intro body  (the_content) ----------------------- *
 * Targets paragraphs in the editor output so anything the user
 * types in Gutenberg gets the right Figma P2 spec. Headings &
 * lists they add will still inherit theme defaults. */
.mdl-home-v4.mdl-location-v4 .mdl-loc-v4__intro,
.mdl-home-v4.mdl-location-v4 .mdl-loc-v4__intro p {
	font-family: "Montserrat", sans-serif;
	font-weight: 400;
	font-size: 17px;
	line-height: 27px;
	color: var(--mdl-paynes, #506272);
}
.mdl-home-v4.mdl-location-v4 .mdl-loc-v4__intro p {
	margin: 0 0 16px;
}
.mdl-home-v4.mdl-location-v4 .mdl-loc-v4__intro p:last-child {
	margin-bottom: 0;
}
/* Heading spacing inside location editor content (the_content output).
 * User-typed H2/H3 need clear breathing room above the previous paragraph
 * so the section break is visually obvious, not glued to the paragraph. */
.mdl-home-v4.mdl-location-v4 .mdl-loc-v4__intro h2,
.mdl-home-v4.mdl-location-v4 .mdl-loc-v4__intro h3,
.mdl-home-v4.mdl-location-v4 .mdl-loc-v4__main h2,
.mdl-home-v4.mdl-location-v4 .mdl-loc-v4__main h3 {
	margin-top: 40px !important;     /* clear breathing room above heading */
	margin-bottom: 16px !important;
}
/* But NOT the injected FAQ/CTA headings — those manage their own spacing and
   the broad h2 rule was adding a 40px gap that made the CTA card tall. */
.mdl-home-v4.mdl-location-v4 .mdl-loc-v4__main .mdl-pi-h2,
.mdl-home-v4.mdl-location-v4 .mdl-loc-v4__main .mdl-ready-cta__title {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}
.mdl-home-v4.mdl-location-v4 .mdl-loc-v4__faq-wrap .mdl-pi-h2 {
	margin-bottom: 18px !important;  /* keep the FAQ heading's own spacing */
}
.mdl-home-v4.mdl-location-v4 .mdl-loc-v4__intro h2:first-child,
.mdl-home-v4.mdl-location-v4 .mdl-loc-v4__intro h3:first-child {
	margin-top: 0 !important;         /* but don't push the first heading down */
}
.mdl-home-v4.mdl-location-v4 .mdl-loc-v4__intro h2 + p,
.mdl-home-v4.mdl-location-v4 .mdl-loc-v4__intro h3 + p {
	margin-top: 0;                    /* tight spacing between heading and its paragraph */
}

/* ---------- Divider (Figma: 1px #647C90) -------------------- */
.mdl-home-v4.mdl-location-v4 .mdl-loc-v4__rule {
	border: 0;
	border-top: 1px solid #647C90;
	margin: 32px 0;
}

/* ---------- H2 "Types of Personal Injury..." --------------- *
 * Figma: Montserrat 700 / 32 / 38 / uppercase / #506272.       */
.mdl-home-v4.mdl-location-v4 .mdl-loc-v4__subhead {
	font-family: "Montserrat", sans-serif;
	font-weight: 700;
	font-size: 32px;
	line-height: 38px;
	text-transform: uppercase;
	letter-spacing: 0;
	color: #506272;
	margin: 0 0 16px;
}

/* ---------- Intro line under the H2 ------------------------- */
.mdl-home-v4.mdl-location-v4 .mdl-loc-v4__sub-intro {
	font-family: "Montserrat", sans-serif;
	font-weight: 400;
	font-size: 17px;
	line-height: 27px;
	color: var(--mdl-paynes, #506272);
	margin: 0 0 28px;
}

/* ---------- Practice-area card grid -- override PI default --- *
 * Personal Injury uses .mdl-pi-crisis__grid { grid-template-columns:
 * repeat(3, 1fr) }. Figma shows a 2-up grid on the Location page,
 * so we override only inside .mdl-location-v4. */
.mdl-home-v4.mdl-location-v4 .mdl-pi-crisis__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}
/* Make the cards a little taller per the 150px Figma spec, while
 * still scaling responsively. */
.mdl-home-v4.mdl-location-v4 .mdl-pi-card {
	min-height: 150px;
}

/* Practice-area icon: identical to PI page (.mdl-pi-v4 .mdl-pi-card__icon).
 * Repeated here at higher specificity so every icon renders at EXACTLY
 * 88 x 88 with object-fit: contain - regardless of the source image's
 * intrinsic dimensions (a 100x40 SVG and a 256x256 PNG will both render
 * identically). filter:brightness(0)invert(1) re-colors any source to
 * pure white so the card visual stays consistent. */
.mdl-home-v4.mdl-location-v4 .mdl-pi-card__icon {
	width: 88px !important;
	height: 88px !important;
	min-width: 88px !important;
	max-width: 88px !important;
	min-height: 88px !important;
	max-height: 88px !important;
	object-fit: contain !important;
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	filter: brightness(0) invert(1);
	opacity: 0.85;
	flex: 0 0 auto;
}
/* Match the PI card layout: icon on top, title centered below, arrow
 * pinned to bottom-right. Repeated here so the cascade is bullet-proof
 * regardless of whether personal-injury-v4.css is enqueued. */
.mdl-home-v4.mdl-location-v4 .mdl-pi-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 16px;
	padding: 18px 24px;
	color: #fff !important;
	text-decoration: none !important;
}
.mdl-home-v4.mdl-location-v4 .mdl-pi-card__title {
	font-family: "Montserrat", sans-serif;
	font-weight: 600;
	font-size: 22px;
	line-height: 1.25;
	letter-spacing: 0;
	text-transform: uppercase;
	text-align: center;
	color: #fff;
	margin: 0;
}

/* ---------- Sticky sidebar --------------------------------- *
 * Same override as the testimonials page: position:sticky + opt out
 * of CRI's `align-self: stretch; min-height: 100%`. Wide screens only. */
@media (min-width: 961px) {
	.mdl-home-v4.mdl-location-v4 .mdl-cri-sidebar {
		position: sticky;
		top: 90px;
		align-self: start;
		min-height: 0;
	}
}

/* ---------- Responsive ------------------------------------ */
@media (max-width: 960px) {
	.mdl-home-v4.mdl-location-v4 .mdl-loc-v4__layout {
		grid-template-columns: 1fr;
		gap: 32px;
		padding: 0 20px;
	}
}
@media (max-width: 640px) {
	.mdl-home-v4.mdl-location-v4 .mdl-loc-v4 { padding: 40px 0 56px !important; }
	.mdl-home-v4.mdl-location-v4 .mdl-loc-v4__title {
		font-size: 30px;
		line-height: 38px;
	}
	.mdl-home-v4.mdl-location-v4 .mdl-loc-v4__intro,
	.mdl-home-v4.mdl-location-v4 .mdl-loc-v4__intro p,
	.mdl-home-v4.mdl-location-v4 .mdl-loc-v4__sub-intro {
		font-size: 15px;
		line-height: 24px;
	}
	.mdl-home-v4.mdl-location-v4 .mdl-loc-v4__subhead {
		font-size: 22px;
		line-height: 28px;
	}
	.mdl-home-v4.mdl-location-v4 .mdl-pi-crisis__grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}
}

/* ==========================================================================
   FAQ + "Ready to discuss your case?" CTA inside the Location hub main column.
   They render above the practice-area cards, beside the office sidebar, so they
   must be compact and left-aligned (not the full-bleed centered band).
   ========================================================================== */
.mdl-home-v4.mdl-location-v4 .mdl-loc-v4__faq-wrap { margin: 8px 0 36px; }
.mdl-home-v4.mdl-location-v4 .mdl-loc-v4__faq-wrap .mdl-pi-faq {
	background: transparent;
	padding: 0;
}
.mdl-home-v4.mdl-location-v4 .mdl-loc-v4__faq-wrap .mdl-pi-faq__wrap {
	text-align: left;
	max-width: none;
	margin: 0;
	padding-left: 0;
	padding-right: 0;
	width: 100%;
}
.mdl-home-v4.mdl-location-v4 .mdl-loc-v4__faq-wrap .mdl-pi-h2 {
	text-align: left;
	margin: 0 0 18px;
}
.mdl-home-v4.mdl-location-v4 .mdl-loc-v4__faq-wrap .mdl-pi-faq__sub {
	text-align: left;
	margin: 0 0 18px;
	max-width: none;
}
.mdl-home-v4.mdl-location-v4 .mdl-loc-v4__faq-wrap .mdl-pi-faq__list { max-width: none; margin: 0; }

/* CTA spacing in the location column; visual design comes from the universal
   .mdl-ready-cta--card rules in personal-injury-v4.css (shared with service pages). */
.mdl-home-v4.mdl-location-v4 .mdl-loc-v4__cta-wrap { margin: 0 0 36px; }
.mdl-home-v4.mdl-location-v4 .mdl-loc-v4__cta-wrap .mdl-ready-cta.mdl-ready-cta--card { margin: 0; }