/* =========================================================
   About page (page-sobre.php) — layout editorial moderno.
   Conteúdo definido no template (PHP); design aqui. Reusa os
   tokens da marca (Atelier 14).

   Estrutura:
     .cos-sobre__hero      → texto + foto (2 colunas, empilha)
     .cos-sobre__manifesto → história (coluna larga, recuada)
     .cos-sobre__pillars   → 3 pilares (grelha)
     .cos-sobre__cta       → ligação de fecho à loja
   ========================================================= */

.cos-sobre {
	max-width: 1240px;
	margin: 0 auto;
	padding: clamp(40px, 6vw, 88px) var(--gutter) clamp(72px, 9vw, 128px);
}

/* ── Hero ─────────────────────────────────────────────── */
.cos-sobre__hero {
	display: grid;
	grid-template-columns: 1fr minmax(0, 46%);
	align-items: center;
	gap: clamp(32px, 6vw, 88px);
}
.cos-sobre__eyebrow {
	display: block;
	margin-bottom: 18px;
}
.cos-sobre__title {
	font-family: var(--sans);
	font-weight: 400;
	text-transform: uppercase;
	font-size: clamp(32px, 5vw, 60px);
	line-height: 1.02;
	letter-spacing: 0.01em;
	color: var(--ink);
	margin: 0;
}
.cos-sobre__intro {
	max-width: 46ch;
	margin: clamp(20px, 2.5vw, 28px) 0 0;
	font-size: clamp(16px, 1.5vw, 19px);
	line-height: 1.6;
	color: var(--stone);
}
.cos-sobre__hero-media {
	margin: 0;
}
.cos-sobre__img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 2px;
}

/* ── Manifesto ────────────────────────────────────────── */
.cos-sobre__manifesto {
	max-width: 760px;
	margin: clamp(64px, 10vw, 140px) 0 0 auto; /* recuado à direita */
	display: grid;
	gap: 1.25em;
}
.cos-sobre__manifesto p {
	margin: 0;
	font-size: clamp(18px, 2vw, 24px);
	line-height: 1.5;
	color: var(--ink);
}

/* Assinatura da fundadora — cargo em mono (eyebrow), nome em sans maiúsculas,
   alinhado ao sistema tipográfico do tema. */
.cos-sobre__signature {
	margin-top: clamp(12px, 2vw, 24px) !important;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.cos-sobre__signature-role {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--stone);
}
.cos-sobre__signature-name {
	font-family: var(--sans);
	font-weight: 600;
	font-size: clamp(16px, 1.8vw, 20px);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--ink);
}

/* ── Pilares ──────────────────────────────────────────── */
.cos-sobre__pillars {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(28px, 4vw, 56px);
	margin-top: clamp(64px, 9vw, 120px);
	padding-top: clamp(36px, 5vw, 56px);
	border-top: 1px solid var(--line);
}
.cos-sobre__pillar-num {
	display: block;
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: 0.08em;
	color: var(--stone);
	margin-bottom: 16px;
}
.cos-sobre__pillar-title {
	font-family: var(--sans);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	font-size: clamp(15px, 1.6vw, 18px);
	line-height: 1.2;
	color: var(--ink);
	margin: 0 0 10px;
}
.cos-sobre__pillar-text {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--stone);
}

/* ── Fecho / CTA ──────────────────────────────────────── */
.cos-sobre__cta {
	margin-top: clamp(56px, 8vw, 96px);
}
.cos-sobre__cta-link {
	display: inline-flex;
	width: auto;
	gap: 10px;
}

/* ── Responsivo ───────────────────────────────────────── */
@media (max-width: 900px) {
	.cos-sobre__hero {
		grid-template-columns: 1fr;
		gap: clamp(28px, 6vw, 40px);
	}
	/* Foto primeiro, depois o texto. */
	.cos-sobre__hero-media {
		order: -1;
	}
	.cos-sobre__manifesto {
		margin-left: 0;
	}
	.cos-sobre__pillars {
		grid-template-columns: 1fr;
		gap: 32px;
	}
}