/* ==========================================================================
   ATEH LAW — About page components
   Colours come from the tokens in style.css.
   ========================================================================== */

/* --- Dark page hero (shared by all interior pages) -----------------------
   Gaps are set as a rhythm on the modules themselves rather than zeroing them
   and re-adding per element — a single-class rule can't beat a two-class
   reset, which silently collapses every gap.
   Design: space-y-4 (16px), with pt-4 (16px) extra above the button row.
   ------------------------------------------------------------------------ */
.ateh-pagehero .et_pb_module { margin-bottom: 16px !important; }
.ateh-pagehero .et_pb_module:last-child { margin-bottom: 0 !important; }

/* On the dark hero the eyebrow rule and text go light, not gold. */
.ateh-eyebrow--light .et_pb_text_inner { color: var(--ateh-silver) !important; }
.ateh-eyebrow--light .et_pb_text_inner::before { background: var(--ateh-white); }

.ateh-pagehero .ateh-pagehero__title h1 {
	font-family: var(--ateh-font-body);
	font-size: clamp(36px, 3.2vw, 60px);
	font-weight: 800;
	letter-spacing: -0.025em;
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--ateh-white);
	padding: 0;
}
/* pt-4 on the button row means 32px below the subtext, not 16px.
   The Practice Areas hero uses pt-2, so 24px there. */
.ateh-pagehero .ateh-pagehero__sub { margin-bottom: 32px !important; }
.ateh-pagehero--pa .ateh-pagehero__sub,
.ateh-pagehero--tight .ateh-pagehero__sub { margin-bottom: 24px !important; }
/* Its body copy is text-base like the rest; set here rather than per module. */
.ateh-pagehero--pa .ateh-pagehero__sub p,
.ateh-pagehero--tight .ateh-pagehero__sub p { color: var(--ateh-silver); }
.ateh-pagehero .ateh-pagehero__sub p {
	max-width: 672px;
	margin: 0;
	font-size: 16px !important;
	line-height: 1.625;
}
/* Page-hero buttons are px-6 py-3; the commitment CTA is px-8 py-4. */
.ateh-pagehero__actions p { gap: 12px; }
.ateh-pagehero .ateh-cta { padding: 12px 24px; }
.ateh-commit .ateh-cta { padding: 16px 32px; }

/* ==========================================================================
   LEADERSHIP SPOTLIGHT
   ========================================================================== */

/* The row itself is the white card. */
/* The design splits this 5/12 : 7/12 with a fixed 48px gap, which Divi's
   percentage gutters can't express — hence the calc() widths. */
.et_pb_row.ateh-leadcard {
	background: var(--ateh-surface);
	border: 1px solid var(--ateh-border);
	box-shadow: var(--ateh-shadow);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 48px;
}
.ateh-leadcard .et_pb_column { float: none; margin: 0 !important; }
.ateh-leadcard__portrait { width: calc((100% - 48px) * 5 / 12) !important; }
.ateh-leadcard__bio      { width: calc((100% - 48px) * 7 / 12) !important; }

/* --- Portrait with the navy name plate ---------------------------------- */
.ateh-leadcard__portrait { position: relative; }
.ateh-leadcard__img {
	border: 1px solid var(--ateh-border);
	padding: 8px;
	background: var(--ateh-white);
	box-shadow: var(--ateh-shadow);
	margin-bottom: 0 !important;
}
.ateh-leadcard__img .et_pb_image_wrap { display: block; width: 100%; }
.ateh-leadcard__img img {
	width: 100%;
	height: 480px;
	object-fit: cover;
	object-position: top center;
	display: block;
}
.ateh-leadcard__badge {
	position: absolute;
	left: 24px;
	right: 24px;
	bottom: 24px;
	background: var(--ateh-navy);
	border: 1px solid var(--ateh-navy-darkest);
	box-shadow: 0 18px 40px -12px rgba(15, 23, 42, 0.55);
	padding: 16px;
	margin: 0 !important;
}
.ateh-leadcard__badge p {
	margin: 0;
	display: flex;
	flex-direction: column;
	line-height: 1.2;
}
.ateh-leadcard__badge strong {
	font-family: var(--ateh-font-body);
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.025em;
	text-transform: uppercase;
	color: var(--ateh-white);
}
.ateh-leadcard__badge span {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ateh-silver);
	margin-top: 5px;
}

/* --- Bio column ----------------------------------------------------------
   Design uses space-y-6 (24px) between every block in this column. The name
   and its credential line are a space-y-1 (4px) pair, handled below.
   ------------------------------------------------------------------------ */
.ateh-leadcard__bio .et_pb_module { margin-bottom: 24px !important; }
.ateh-leadcard__bio .et_pb_module:last-child { margin-bottom: 0 !important; }
.ateh-leadcard__bio .ateh-leadcard__name { margin-bottom: 4px !important; }

.ateh-leadcard__name h2 {
	font-family: var(--ateh-font-body);
	font-size: clamp(30px, 2.6vw, 48px);
	font-weight: 800;
	letter-spacing: -0.045em;
	line-height: 1.05;
	text-transform: uppercase;
	color: var(--ateh-navy);
	padding: 0 0 4px;
}
/* space-y-6 (24px) between the bio column's blocks. */
.ateh-leadcard__creds p {
	margin: 0;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ateh-slate-400);
	line-height: 1.7;
}

/* Quote block with the gold rule */
.ateh-leadcard__bio .ateh-leadcard__quote {
	background: var(--ateh-white);
	border: 1px solid var(--ateh-border);
	border-left: 4px solid var(--ateh-gold);
	padding: 20px;
	margin-bottom: 24px !important;
}
.ateh-leadcard__quote p.ateh-quote {
	margin: 0 0 4px;
	font-size: 24px;
	line-height: 1.35;
	color: var(--ateh-navy);
}
.ateh-leadcard__quoteattr {
	margin: 0 !important;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ateh-slate-400);
}
.ateh-leadcard__bio .ateh-leadcard__body { margin-bottom: 24px !important; }
.ateh-leadcard__body p { margin: 0; font-size: 16px !important; line-height: 1.625; }

/* Credential chips, two per row */
.ateh-leadcard__bio .ateh-leadcard__chips { margin-bottom: 24px !important; }
.ateh-leadcard__chips p {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
}
.ateh-leadcard__chips .ateh-ico {
	background: var(--ateh-white);
	border: 1px solid var(--ateh-border);
	padding: 12px;
	font-size: 12px;
	font-weight: 500;
	color: var(--ateh-slate-600);
	line-height: 1.4;
}
.ateh-leadcard__chips .ateh-ico::before {
	color: var(--ateh-gold);
	font-size: 14px;
	margin-right: 10px;
}

.ateh-leadcard__actions p { gap: 16px; }
.ateh-cta--outline {
	background: var(--ateh-white);
	border-color: var(--ateh-border);
	color: var(--ateh-navy);
}
.ateh-cta--outline:hover {
	background: var(--ateh-silver-pale);
	border-color: var(--ateh-slate-400);
}

/* ==========================================================================
   OUR COMMITMENT
   ========================================================================== */

.et_pb_row.ateh-commit__grid {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 24px;
}
.ateh-commit__grid .et_pb_column {
	float: none;
	margin: 0 !important;
	width: calc((100% - 48px) / 3) !important;
}

/* Commitment heading is text-4xl (36px), not the 48px used elsewhere. */
.ateh-commit .ateh-section-title h2 { font-size: 36px; }

.ateh-commitcard {
	background: var(--ateh-silver-pale);
	border: 1px solid var(--ateh-border);
	padding: 32px !important;
	transition: var(--ateh-transition);
}
.ateh-commitcard:hover {
	border-color: var(--ateh-gold);
	box-shadow: var(--ateh-shadow-hover);
	transform: translateY(-3px);
}
.ateh-commitcard .et_pb_module { margin-bottom: 0 !important; }

.ateh-commitcard .ateh-commitcard__icon { margin-bottom: 16px !important; }
.ateh-commitcard__icon p { margin: 0; line-height: 1; }
.ateh-commitcard__icon.ateh-ico::before {
	margin: 0;
	font-size: 19px;
	color: var(--ateh-white);
	background: var(--ateh-navy);
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
}
.ateh-commitcard__title h3 {
	font-family: var(--ateh-font-body);
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -0.025em;
	text-transform: uppercase;
	color: var(--ateh-navy);
	padding: 0 0 16px;
}
.ateh-commitcard__body p {
	margin: 0;
	font-size: 12px;
	line-height: 1.625;
	color: var(--ateh-slate-500);
}

.ateh-commit__cta .ateh-btnrow p { justify-content: center; }

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

@media (max-width: 980px) {
	.ateh-leadcard__portrait,
	.ateh-leadcard__bio { width: 100% !important; }
	.ateh-commit__grid .et_pb_column { width: 100% !important; }
	.ateh-leadcard__portrait { margin-bottom: 34px !important; }
	.ateh-leadcard__img img { height: 420px; }
	.ateh-leadcard__badge { left: 24px; right: 24px; bottom: 24px; }
	.ateh-commit__grid .et_pb_column { margin-bottom: 22px !important; }
}

@media (max-width: 767px) {
	.ateh-leadcard__chips p { grid-template-columns: 1fr; }
	.ateh-leadcard__actions p .ateh-cta,
	.ateh-pagehero__actions p .ateh-cta { width: 100%; }
	.ateh-leadcard__img img { height: 340px; }
}