/* ==========================================================================
   Componentes reutilizados entre páginas
   ========================================================================== */

/* ---------- Visibilidade por breakpoint ---------- */
@media (min-width: 768px) {
	.show-mobile { display: none !important; }
}
@media (max-width: 767px) {
	.hide-mobile { display: none !important; }
}

/* ---------- Seções ---------- */
.section { padding: var(--section-y) var(--gutter); background: var(--white); }
.section--tint { background: var(--gray-blue); border-top: 1px solid var(--border-divider); padding-block: 92px; }
@media (max-width: 767px) { .section--tint { padding-block: 44px; } }
.section--gray { background: var(--gray-light); }
.section--navy { background: var(--navy); }

.eyebrow {
	margin: 0 0 16px;
	font-size: 11.5px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--cyan);
}

.eyebrow-pill {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 28px;
	padding: 9px 18px;
	border: 1px solid rgba(0, 160, 227, .55);
	border-radius: var(--radius-pill);
	color: var(--cyan-light);
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .16em;
	text-transform: uppercase;
}
.eyebrow-pill span { width: 6px; height: 6px; border-radius: var(--radius-pill); background: var(--cyan); flex: none; }

.h2 {
	margin: 0;
	font-size: 40px;
	line-height: 1.15;
	font-weight: 800;
	letter-spacing: -.02em;
	color: var(--navy);
	text-wrap: balance;
}
.h2--light { color: var(--white); }

.lead { margin: 0; font-size: 16px; line-height: 1.7; color: var(--text-secondary); }

.section-head { margin-bottom: 48px; }
.section-head--split {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 40px;
}
.section-head--split .h2 { max-width: 640px; }
.section-head__aside { margin: 0; max-width: 360px; font-size: 15px; line-height: 1.7; color: var(--text-secondary); }
.section-head__title--wide { max-width: 700px; margin-bottom: 44px; }

@media (max-width: 1023px) {
	.h2 { font-size: 32px; }
}
@media (max-width: 767px) {
	.eyebrow { font-size: 10.5px; letter-spacing: .16em; margin-bottom: 12px; }
	.eyebrow-pill { font-size: 9.5px; letter-spacing: .14em; gap: 8px; padding: 7px 14px; margin-bottom: 20px; }
	.eyebrow-pill span { width: 5px; height: 5px; }
	.h2 { font-size: 26px; line-height: 1.18; }
	.lead { font-size: 14px; }
	.section-head { margin-bottom: 28px; }
	.section-head--split { display: block; }
	.section-head__title--wide { margin-bottom: 24px; }
}

/* ---------- CTA de texto ---------- */
.text-cta {
	display: inline-block;
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--cyan);
}
.text-cta:hover { color: var(--navy); }
.text-cta span[aria-hidden="true"] { display: inline-block; transition: transform var(--transition); }
.text-cta:hover span[aria-hidden="true"] { transform: translateX(3px); }
.text-cta--light { color: var(--cyan-light); }
.text-cta--light:hover { color: var(--white); }
@media (max-width: 767px) { .text-cta { font-size: 12px; } }

.btn--lg { font-size: 15px; letter-spacing: .02em; padding: 19px 38px; }
.btn--outline-light.btn--lg { border-width: 1.5px; border-color: rgba(255, 255, 255, .4); padding: 17.5px 32px; }
@media (max-width: 767px) {
	.btn--lg { font-size: 14.5px; padding: 17px; }
	.btn--outline-light.btn--lg { padding: 15.5px; }
}

/* ---------- Placeholder de foto ---------- */
.ph {
	display: flex;
	align-items: flex-end;
	padding: 16px;
	border-radius: var(--radius-card);
	background: repeating-linear-gradient(135deg, #E9EEF3 0 10px, #F3F6F9 10px 20px);
	font: 600 10.5px/1.5 var(--font-mono);
	letter-spacing: .06em;
	color: #7C8B99;
	text-transform: none;
}
.ph--dark {
	background: repeating-linear-gradient(135deg, #12466B 0 12px, #0E3F62 12px 24px);
	border: 1px solid rgba(255, 255, 255, .14);
	color: #7FA8C4;
}
.photo { width: 100%; object-fit: cover; border-radius: var(--radius-card); }
/* O recuo das classes de área (.hero__photo, .history__photo…) é do placeholder; a foto real ocupa a área toda. */
img.photo { padding: 0; }

/* ---------- Avatar de autor (iniciais, sem Gravatar) ---------- */
.author-avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--navy);
	color: var(--white);
	font: 700 15px/1 var(--font);
	letter-spacing: .02em;
}

/* ---------- Ficha técnica ---------- */
.spec {
	margin: 0;
	font: 600 12px/1.9 var(--font-mono);
	color: var(--text-secondary);
}

/* ---------- Marcador cápsula ---------- */
.capsule-mark {
	display: block;
	width: 40px;
	height: 14px;
	border-radius: var(--radius-pill);
	background: var(--cyan);
	margin-bottom: 22px;
}
@media (max-width: 767px) {
	.capsule-mark { width: 32px; height: 12px; margin-bottom: 14px; }
}

/* ---------- Chip ---------- */
.chip {
	display: inline-block;
	background: var(--gray-light);
	color: var(--navy);
	font-size: 10.5px;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 6px 12px;
	border-radius: var(--radius-pill);
}

/* ---------- Card de post ---------- */
.posts-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.post-card { display: flex; flex-direction: column; }
.post-card__cover { display: block; margin-bottom: 20px; border-radius: var(--radius-card); overflow: hidden; }
.post-card__cover img, .post-card__cover .ph { height: 200px; width: 100%; object-fit: cover; transition: transform 300ms ease-out; }
.post-card__cover:hover img { transform: scale(1.03); }
.post-card__meta { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.post-card__title { margin: 0 0 10px; font-size: 18.5px; line-height: 1.35; font-weight: 800; }
.post-card__title a { color: var(--navy); }
.post-card__title a:hover { color: var(--cyan); }
.post-card__excerpt { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--text-secondary); }

@media (max-width: 1023px) {
	.posts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.posts-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
	.post-card__cover { margin-bottom: 14px; }
	.post-card__cover img, .post-card__cover .ph { height: 170px; }
	.post-card__meta { gap: 10px; margin-bottom: 10px; font-size: 11.5px; }
	.post-card__meta .chip { font-size: 9.5px; padding: 5px 10px; }
	.post-card__title { font-size: 17px; margin: 0; }
}

/* ---------- Faixa de CTA ---------- */
.cta-band {
	background: var(--cyan);
	padding: 66px var(--gutter);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 48px;
}
.cta-band__title { margin: 0 0 10px; font-size: 34px; line-height: 1.2; font-weight: 800; letter-spacing: -.02em; color: var(--white); }
.cta-band__text { margin: 0; font-size: 16px; font-weight: 500; color: #EAF7FE; }
.cta-band .btn { white-space: nowrap; padding: 20px 40px; }
@media (max-width: 767px) {
	.cta-band { display: block; padding: 40px 20px; }
	.cta-band__title { font-size: 24px; }
	.cta-band__text { font-size: 14px; line-height: 1.6; margin-bottom: 22px; }
	.cta-band .btn { display: flex; padding: 17px; }
}

/* ---------- Aviso para administradores ---------- */
.section-hint { padding: 0 var(--gutter); }
.admin-hint {
	margin: 24px 0;
	padding: 16px 20px;
	border: 2px dashed var(--cyan);
	border-radius: var(--radius-block);
	background: var(--gray-blue);
	font-size: 14px;
	line-height: 1.6;
	color: var(--navy);
}

/* ---------- Campos de formulário ---------- */
.input {
	width: 100%;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.4;
	color: var(--navy);
	background: var(--white);
	border: 1px solid var(--border-input);
	border-radius: var(--radius-card);
	padding: 15px 18px;
	transition: border-color var(--transition), box-shadow var(--transition);
}
.input::placeholder { color: var(--placeholder); }
.input:hover { border-color: #BFCCD8; }
.input:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(0, 160, 227, .18); }
.input--pill { border-radius: var(--radius-pill); padding: 15px 24px; }
select.input {
	appearance: none;
	font-weight: 600;
	color: var(--text-secondary);
	padding-right: 44px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23003459' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 18px center;
}
select.input:valid { color: var(--navy); }
textarea.input { resize: vertical; min-height: 104px; line-height: 1.7; }
.input[aria-invalid="true"] { border-color: #C62828; }

.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-message { margin: 14px 0 0; padding: 12px 16px; border-radius: var(--radius-card); font-size: 13.5px; line-height: 1.55; font-weight: 600; }
.form-message--success { background: #E7F6EC; color: #145A2E; }
.form-message--error { background: #FDECEC; color: #8E1C1C; }

/* ---------- Caixa de CTA navy ---------- */
.cta-box { background: var(--navy); border-radius: var(--radius-block); padding: 40px 44px; }
.cta-box__inner { display: flex; justify-content: space-between; align-items: center; gap: 36px; }
.cta-box__title { margin: 0 0 8px; font-size: 23px; font-weight: 800; letter-spacing: -.01em; color: var(--white); }
.cta-box__text { margin: 0; max-width: 520px; font-size: 15px; line-height: 1.6; color: var(--text-on-navy); }
.cta-box__actions { display: flex; flex-wrap: wrap; gap: 12px; flex: none; }
.cta-box__actions .btn { padding: 18px 34px; font-size: 14.5px; white-space: nowrap; }
.cta-box--stack .cta-box__inner { display: block; }
.cta-box--stack .cta-box__text { margin-bottom: 20px; }
@media (max-width: 1023px) {
	.cta-box__inner { display: block; }
	.cta-box__text { margin-bottom: 20px; }
}
@media (max-width: 767px) {
	.cta-box { padding: 26px 22px; }
	.cta-box__title { font-size: 19px; }
	.cta-box__text { font-size: 13.5px; margin-bottom: 18px; }
	.cta-box__actions { flex-direction: column; gap: 10px; }
	.cta-box__actions .btn { padding: 15px; white-space: normal; }
}

/* ---------- Cards laterais ---------- */
.side-card { border: 1px solid var(--border); border-radius: var(--radius-card); padding: 26px 24px; }
.side-card--gray { background: var(--gray-light); border-color: var(--gray-light); }
.side-card__eyebrow { margin: 0 0 18px; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--cyan); }
.side-card__title { margin: 0 0 10px; font-size: 16px; font-weight: 800; color: var(--navy); }
.side-card__text { margin: 0 0 18px; font-size: 13.5px; line-height: 1.65; color: var(--text-secondary); }
.side-card .btn { font-size: 13.5px; padding: 14px; }
.btn--block { display: flex; width: 100%; }
.btn--sm { font-size: 12px; padding: 9px 18px; letter-spacing: 0; }