/* ==========================================================================
   Salient Child — Custom CSS
   Estilo minimalista de portfólio/galeria, inspirado no visual clean
   do site original (tipografia fina, muito espaço em branco, foco 100%
   nas imagens).
   ========================================================================== */

:root {
	--sc-bg: #ffffff;
	--sc-text: #111111;
	--sc-text-muted: #666666;
	--sc-accent: #111111;
	--sc-gutter: 24px;
}

/* Tipografia geral — leve e discreta, deixando a imagem ser protagonista */
body {
	background-color: var(--sc-bg);
	color: var(--sc-text);
	font-weight: 300;
	letter-spacing: 0.02em;
}

h1, h2, h3, .nectar-title {
	font-weight: 300;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* Header centralizado, estilo editorial (referência: studio-lewin.com) */
#header-outer,
#logo,
#logo a {
	background: transparent !important;
}

#header-outer {
	text-align: center;
}

#header-outer .container,
#header-outer .row {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

/* Nome "Jill Oliveira" em serifa, maiúsculo, espaçado —
   igual à referência: título grande centralizado no topo. */
#logo a,
.nectar-logo-text,
#logo .logo-elem {
	font-family: 'Cormorant Garamond', Georgia, 'Times New Roman', serif !important;
	font-weight: 500 !important;
	font-size: 34px !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	color: var(--sc-text) !important;
}

/* Tagline discreta, abaixo do nome */
#logo .tagline,
.site-description {
	display: block;
	font-family: inherit;
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: lowercase;
	color: var(--sc-text-muted);
	margin-top: 4px;
}

/* Menu centralizado, minúsculo, sans-serif — item ativo mais claro
   (cinza), itens inativos em preto, como na referência. */
#nav,
#nav ul {
	display: flex;
	justify-content: center;
	width: 100%;
}

#nav a {
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-weight: 400;
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: lowercase;
	color: var(--sc-text);
}

#nav li.current-menu-item > a,
#nav li.current_page_item > a {
	color: var(--sc-text-muted) !important;
}

/* Galeria estilo "masonry" (mosaico assimétrico), igual à referência:
   colunas com fotos de alturas variadas, respeitando a proporção
   natural de cada imagem — sem cortar (object-fit: cover) e sem
   grid rígido de linhas iguais. Implementado com CSS Columns,
   que funciona bem com conteúdo dinâmico (fotos de tamanhos diferentes
   sendo adicionadas ao longo do tempo, sem precisar recalcular grid). */
.sc-gallery-grid {
	column-count: 3;
	column-gap: var(--sc-gutter);
	padding: var(--sc-gutter);
}

.sc-gallery-grid figure,
.sc-gallery-grid a {
	display: block;
	break-inside: avoid;
	margin-bottom: var(--sc-gutter);
}

.sc-gallery-grid img {
	width: 100%;
	height: auto;
	display: block;
	transition: opacity 0.3s ease;
}

.sc-gallery-grid a:hover img {
	opacity: 0.85;
}

/* Legenda estilo editorial (opcional), como o card "ÍNDICE / TAKE A BOW /
   PHOTOGRAPHER" que aparece sobreposto em uma das fotos na referência. */
.sc-gallery-grid figure {
	position: relative;
}

.sc-gallery-caption {
	position: absolute;
	top: 24px;
	left: 24px;
	color: #fff;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

.sc-gallery-caption .sc-eyebrow {
	font-size: 11px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	opacity: 0.85;
}

.sc-gallery-caption .sc-title {
	font-size: 20px;
	font-weight: 600;
	text-transform: uppercase;
	margin: 4px 0 12px;
}

.sc-gallery-caption .sc-credit {
	font-size: 10px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	opacity: 0.85;
}

/* Rodapé discreto */
#footer-outer {
	font-size: 12px;
	color: var(--sc-text-muted);
	text-align: center;
}

/* Responsivo — reduz colunas e gutter em telas menores */
@media (max-width: 1024px) {
	.sc-gallery-grid {
		column-count: 2;
	}
}

@media (max-width: 600px) {
	:root {
		--sc-gutter: 12px;
	}
	.sc-gallery-grid {
		column-count: 1;
	}
	#logo a,
	.nectar-logo-text,
	#logo .logo-elem {
		font-size: 24px !important;
	}
}