/* ==========================================================================
   /about — seções específicas desta página que não pertencem a
   experience.css (hero, cta e dr-exp-body genéricos são reaproveitados de
   lá). Só tokens de theme.json/design-system.css, prefixo dr-, sem hex novo.
   ========================================================================== */

/* --- Hero: só o CTA "Book Your Ride" ganha mais respiro horizontal (pedido
 * explícito — ficar mais "premium"). Escopado só a este botão (classe extra
 * no wrapper), não ao .dr-button--primary compartilhado, que outras páginas
 * (Experience, Medical Mobility, home) também usam sem essa alteração. ---- */

.dr-about-hero__cta > .wp-block-button__link {
	padding-inline: calc(var(--dr-btn-padding-x) * 1.4);
}

/* --- CTA final: linha de credibilidade discreta antes do botão + tags de
 * serviço depois dele, pra seção não terminar "seca" só no botão. -------- */

.dr-about-cta__location {
	color: color-mix(in srgb, var(--dr-color-text-inverse) 72%, transparent);
	font-size: var(--dr-font-size-200);
	margin-block-start: var(--dr-space-3);
}

.dr-about-cta__tags {
	color: color-mix(in srgb, var(--dr-color-text-inverse) 62%, transparent);
	font-size: var(--dr-font-size-100);
	letter-spacing: var(--dr-letter-spacing-wide);
	margin-block-start: var(--dr-space-4);
	text-transform: uppercase;
}

/* Botão principal da CTA final ~9% maior — é a ação principal da página,
 * merece mais destaque que o .dr-cta-section__button--primary padrão
 * (compartilhado com home/experience/legal/help). */
.dr-about-cta__button > .wp-block-button__link {
	font-size: calc(var(--dr-btn-font-size) * 1.09);
	height: calc(var(--dr-btn-height) * 1.09);
	min-height: calc(var(--dr-btn-height) * 1.09);
	padding-inline: calc(var(--dr-btn-padding-x) * 1.09);
}

/* --- Ícones da página inteira em dourado (mesmo par premium-subtle/
 * premium-strong já usado em .dr-service-offering-card__mark noutras
 * páginas), não o accent (petrol) padrão de .dr-benefit-card__icon.
 * Escopado a .dr-about-page pra não mudar o componente compartilhado nas
 * outras páginas que também usam .dr-benefit-card__icon (ex.: home). ---- */

.dr-about-page .dr-benefit-card__icon {
	background: var(--dr-color-premium-subtle);
	color: var(--dr-color-premium-strong);
}

/* --- Intro: foto+texto (.dr-about-intro vem de experience.css) + 2x2 de
 * .dr-benefit-card (mesmos 4 diferenciais que antes ficavam numa seção
 * própria — movidos pra cá pra não duplicar conteúdo na página) --------- */

/* Ícone ilustrado (Clear Communication) é um desenho multi-parte com fill
 * próprio, não um stroke-icon de currentColor como os outros 3 — em 24px
 * (tamanho padrão dos outros) os detalhes ficam ilegíveis, então cresce um
 * pouco só este dentro do mesmo círculo de 52px (--dr-control-height-lg). */
.dr-benefit-card__icon--illustrated svg {
	height: 34px;
	width: 34px;
}

.dr-about-intro__eyebrow {
	margin: 0;
}

/* Mesmo tamanho dos outros títulos de seção da página (.dr-section-heading h2
 * em main.css) — este título não fica dentro de um .dr-section-heading
 * porque a coluna de texto aqui tem layout próprio (2x2 de highlights +
 * mídia ao lado), então repete os mesmos tokens em vez de herdar a classe. */
.dr-about-intro__heading {
	font-size: var(--dr-display-2) !important;
	letter-spacing: var(--dr-tracking-display-2);
	line-height: var(--dr-leading-display-2);
	margin: var(--dr-space-2) 0 0;
}

/* Mesmo tamanho do subtítulo/lead das outras seções da página (.dr-section-
 * heading > p.has-large-font-size em main.css) — mesmo motivo do heading
 * acima: este parágrafo não é filho direto de .dr-section-heading, então
 * repete o token em vez de herdar a classe. */
.dr-about-intro__lead {
	color: var(--dr-color-text-muted);
	font-size: clamp(var(--dr-font-size-300), 1.3vw, var(--dr-font-size-400)) !important;
	margin-block-start: var(--dr-space-3);
	max-width: 52ch;
}

.dr-about-intro__highlights {
	display: grid;
	gap: var(--dr-space-3);
	grid-template-columns: repeat(2, minmax(0, 1fr));
	margin-block-start: clamp(var(--dr-space-4), 4vw, var(--dr-space-5));
}

@media (min-width: 64rem) {
	.dr-about-intro__highlights {
		margin-block-start: 0;
	}
}

@media (max-width: 30rem) {
	.dr-about-intro__highlights {
		grid-template-columns: 1fr;
	}
}

.dr-about-intro__highlights .dr-benefit-card {
	padding: var(--dr-space-3);
}

.dr-about-intro__highlights .dr-benefit-card__title {
	font-size: var(--dr-font-size-300);
}

/* --- Safety + Purpose: foto+texto+lista de ícones, mesmo padrão nas duas
 * (photo+eyebrow+heading+lead+icon-list+CTA), lados alternados pra dar ritmo
 * visual — Safety é mídia-esquerda/texto-direita, Purpose volta pro padrão
 * texto-esquerda/mídia-direita do .dr-about-intro. Regras comuns aqui,
 * só o grid-template-areas de cada uma muda. -------------------------- */

.dr-about-safety,
.dr-about-purpose {
	display: grid;
	gap: var(--dr-space-5);
	grid-template-columns: 1fr;
}

/* Mesmo motivo do .dr-about-intro em experience.css: neutraliza a margem de
   blockGap do core pra não desalinhar a mídia esticada. */
.dr-about-safety > *,
.dr-about-purpose > * {
	margin: 0;
}

/* Texto vem primeiro no DOM nas duas (ordem de leitura correta no mobile —
   mesmo motivo do .dr-about-intro em experience.css); grid-template-areas
   resolve a posição visual de cada uma no desktop sem depender da ordem
   das tags. */
@media (min-width: 64rem) {
	.dr-about-safety,
	.dr-about-purpose {
		gap: var(--dr-space-6);
		grid-template-columns: 2fr 3fr;
	}

	.dr-about-safety {
		grid-template-areas: "media text";
	}

	.dr-about-purpose {
		grid-template-areas: "text media";
		grid-template-columns: 3fr 2fr;
	}

	.dr-about-safety__text,
	.dr-about-purpose__text {
		grid-area: text;
	}

	.dr-about-safety__media,
	.dr-about-purpose__media {
		grid-area: media;
	}
}

.dr-about-safety__media,
.dr-about-purpose__media {
	border-radius: var(--dr-radius-4);
	overflow: hidden;
}

.dr-about-safety__media img,
.dr-about-purpose__media img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.dr-about-safety__eyebrow,
.dr-about-purpose__eyebrow {
	margin: 0;
}

.dr-about-safety__heading,
.dr-about-purpose__heading {
	font-size: var(--dr-display-2) !important;
	letter-spacing: var(--dr-tracking-display-2);
	line-height: var(--dr-leading-display-2);
	margin: var(--dr-space-2) 0 0;
}

/* Mesmo tamanho do subtítulo/lead das outras seções da página, mesmo motivo
 * do .dr-about-intro__lead acima. */
.dr-about-safety__lead,
.dr-about-purpose__lead {
	color: var(--dr-color-text-muted);
	font-size: clamp(var(--dr-font-size-300), 1.3vw, var(--dr-font-size-400)) !important;
	margin-block-start: var(--dr-space-3);
	max-width: 48ch;
}

.dr-about-safety__list,
.dr-about-purpose__list {
	display: grid;
	gap: var(--dr-space-3);
	list-style: none;
	margin: clamp(var(--dr-space-4), 4vw, var(--dr-space-5)) 0 0;
	padding: 0;
}

.dr-about-safety__list li,
.dr-about-purpose__list li {
	align-items: center;
	color: var(--dr-color-text);
	display: flex;
	gap: var(--dr-space-3);
}

.dr-about-safety__list .dr-benefit-card__icon,
.dr-about-purpose__list .dr-benefit-card__icon {
	flex-shrink: 0;
}

.dr-about-safety__cta,
.dr-about-purpose__cta {
	margin-block-start: var(--dr-space-4);
}

/* --- Fundador: foto + nome/cargo à esquerda, texto à direita (mesmo grid de
 * 2 colunas usado em Safety/Purpose). --------------------------------- */

.dr-about-founder__grid {
	display: grid;
	gap: var(--dr-space-5);
	grid-template-columns: 1fr;
	position: relative;
}

.dr-about-founder__grid > * {
	margin: 0;
}

@media (min-width: 64rem) {
	.dr-about-founder__grid {
		gap: var(--dr-space-6);
		grid-template-areas: "media text";
		grid-template-columns: 2fr 3fr;
	}

	.dr-about-founder__media {
		grid-area: media;
	}

	.dr-about-founder__text {
		grid-area: text;
	}
}

.dr-about-founder__media img {
	aspect-ratio: 1;
	border-radius: var(--dr-radius-4);
	display: block;
	object-fit: cover;
	width: 100%;
}

.dr-about-founder__name {
	color: var(--dr-color-text);
	font-weight: var(--dr-font-weight-semibold);
	margin-block-start: var(--dr-space-3);
}

.dr-about-founder__title {
	color: var(--dr-color-text-muted);
	font-weight: var(--dr-font-weight-regular);
}

.dr-about-founder__eyebrow {
	margin: 0;
}

.dr-about-founder__heading {
	font-size: var(--dr-display-2) !important;
	letter-spacing: var(--dr-tracking-display-2);
	line-height: var(--dr-leading-display-2);
	margin: var(--dr-space-2) 0 0;
}

.dr-about-founder__quote {
	color: var(--dr-color-text-muted);
	margin-block-start: var(--dr-space-4);
	max-width: 60ch;
}

.dr-about-founder__quote strong {
	color: var(--dr-color-text);
}

/* --- Pilares: reaproveita o grid/card de .dr-exp-highlights (experience.css)
 * + o ícone circular de .dr-benefit-card__icon (mesmo padrão do 2x2 da
 * intro). Fundo diferenciado (bg-subtle) pra separar visualmente esta
 * seção das que têm fundo branco antes/depois dela. Seção puxada pra cima
 * (menos espaço acima) já que a intro logo acima não tem mais o botão que
 * antes preenchia esse respiro. ------------------------------------------ */

.dr-about-pillars {
	background: var(--dr-color-bg-subtle);
	padding-block-start: clamp(var(--dr-space-4), 4vw, var(--dr-space-6));
}

.dr-about-pillars__eyebrow {
	margin: 0;
}

.dr-exp-highlights .dr-benefit-card__icon {
	margin-block-end: var(--dr-space-2);
}