/**
 * Section: Primer Camara — Banner do curso introdutório
 * Arquivo: sections/primer-camara/style.css
 *
 * Desenvolvido por: Roger Alves
 * Data da Modificacao: 2026-06-22
 *
 * Todos os direitos reservados.
 *
 * Nota: esta seção usa cores fixas (fundo azul escuro) e deve
 * ter aparência idêntica em modo claro e modo escuro.
 */

/* ── Seção: fundo azul escuro degradê radial ── */

.primer-camara-section {
	background: radial-gradient(ellipse at 50% 60%, #163555 0%, #0A1C30 65%);
	overflow: hidden;
}

/* ── Layout interno: imagem à esquerda, texto à direita ── */

.primer-camara-container {
	display: grid;
	grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: center;
	padding-top: clamp(3rem, 7vw, 5rem);
	padding-bottom: clamp(3rem, 7vw, 5rem);
}

/* ── Imagem ── */

.primer-camara-img-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
}

.primer-camara-img-wrap img {
	width: 100%;
	max-width: 300px;
	border-radius: var(--radius-md, 12px);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
	transform: rotate(-2deg);
	transition: transform 300ms ease, box-shadow 300ms ease;
	/* Aplica tom sepia suave para harmonizar com a paleta */
	filter: sepia(0.18) saturate(0.9) brightness(0.97);
}

.primer-camara-img-wrap img:hover {
	transform: rotate(0deg) translateY(-6px);
	box-shadow: 0 28px 70px rgba(0, 0, 0, 0.6);
}

/* ── Conteúdo textual ── */

.primer-camara-copy {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/* Kicker */

.primer-camara-kicker {
	display: inline-block;
	font-family: var(--font-body);
	font-size: 0.7rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #F0C040;
	margin: 0;
	padding: 0;
}

/* Título */

.primer-camara-title {
	font-family: var(--font-headings);
	font-size: clamp(1.6rem, 3.5vw, 2.8rem);
	font-weight: 700;
	line-height: 1.2;
	color: #ffffff;
	margin: 0;
}

/* Descrição */

.primer-camara-desc {
	font-size: 1rem;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.78);
	max-width: 580px;
	margin: 0;
}

/* Botão amarelo */

.primer-camara-btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	align-self: flex-start;
	margin-top: 0.5rem;
	padding: 0.7em 1.6em;
	background: #F0C040;
	color: #0A1C30;
	font-family: var(--font-body);
	font-size: 0.9rem;
	font-weight: 800;
	letter-spacing: 0.02em;
	border-radius: 2rem;
	text-decoration: none;
	box-shadow: 0 4px 20px rgba(240, 192, 64, 0.35);
	transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.primer-camara-btn:hover {
	background: #f5ce5a;
	box-shadow: 0 6px 28px rgba(240, 192, 64, 0.5);
	transform: translateY(-2px);
	color: #0A1C30;
}

.primer-camara-btn svg {
	flex-shrink: 0;
	transition: transform 0.2s ease;
}

.primer-camara-btn:hover svg {
	transform: translateX(4px);
}

/* ── Dark mode: sem alterações (seção é sempre escura) ── */

[data-gpm-theme="dark"] .primer-camara-section {
	background: radial-gradient(ellipse at 50% 60%, #163555 0%, #0A1C30 65%);
}

/* ── Responsive ── */

@media (max-width: 760px) {
	.primer-camara-container {
		grid-template-columns: 1fr;
	}

	.primer-camara-img-wrap img {
		max-width: 200px;
		transform: none;
	}

	.primer-camara-btn {
		align-self: stretch;
		justify-content: center;
	}
}