/*
Theme Name: Granular
Theme URI: https://example.com/
Author: Gabi
Author URI: https://example.com/
Description: Tema WordPress gerado a partir do design Figma "Site Granular" (seção Post). Layout responsivo para páginas de post/projeto, com colunas de imagens e conteúdo, tags e créditos.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: granular
*/

/* ==========================================================================
   1. Custom properties (tokens extraídos do Figma)
   ========================================================================== */
:root {
	--gr-color-bg: #5310d1;       /* Roxos/forte */
	--gr-color-surface: #6f55f2;  /* Roxos/medio - placeholder de imagens / tag selecionada */
	--gr-color-accent: #ea99df;   /* Quentes/rosa pluma */
	--gr-color-lilac: #e5d9fc;    /* Roxos/claro - tag hover / borda da tag selecionada */
	--gr-color-white: #ffffff;

	--gr-font-display: "Compagnon", "Courier New", monospace; /* logo, títulos, tags, labels */
	--gr-font-body: "Bricolage Grotesque", system-ui, sans-serif; /* corpo de texto: peso Light (300) */
	--gr-font-meta: "Bricolage Grotesque", system-ui, sans-serif; /* créditos: antes Archivo, agora Bricolage Grotesque Light */

	--gr-gap: 8px;
	--gr-gap-lg: 24px;
	--gr-container-padding: 48px;
	--gr-header-height: 96px;
}

@media (max-width: 782px) {
	:root {
		--gr-container-padding: 24px;
		--gr-header-height: 96px;
	}
}

/* ==========================================================================
   2. Fontes
   ========================================================================== */
/*
 * "Compagnon" é uma fonte comercial, incluída em /assets/fonts/.
 */
@font-face {
	font-family: "Compagnon";
	src: url("assets/fonts/Compagnon-Light.woff2") format("woff2"),
		url("assets/fonts/Compagnon-Light.woff") format("woff");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Compagnon";
	src: url("assets/fonts/Compagnon-Roman.woff2") format("woff2"),
		url("assets/fonts/Compagnon-Roman.woff") format("woff");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Compagnon";
	src: url("assets/fonts/Compagnon-Italic.woff2") format("woff2"),
		url("assets/fonts/Compagnon-Italic.woff") format("woff");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Compagnon";
	src: url("assets/fonts/Compagnon-Medium.woff2") format("woff2"),
		url("assets/fonts/Compagnon-Medium.woff") format("woff");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Compagnon";
	src: url("assets/fonts/Compagnon-Bold.woff2") format("woff2"),
		url("assets/fonts/Compagnon-Bold.woff") format("woff");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* ==========================================================================
   3. Reset básico
   ========================================================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--gr-color-bg);
	color: var(--gr-color-white);
	font-family: var(--gr-font-body);
	font-size: 16px;
	line-height: 1.5;
	font-optical-sizing: auto;
}

img {
	max-width: 100%;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* ==========================================================================
   4. Header do site
   ========================================================================== */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--gr-header-height);
	padding: 8px var(--gr-container-padding);
	background: var(--gr-color-bg);
}

.site-logo {
	font-family: var(--gr-font-display);
	font-weight: 500;
	font-size: 2.125rem; /* 34px */
	letter-spacing: -0.02em;
	color: var(--gr-color-accent);
	white-space: nowrap;
}

.primary-nav {
	display: none;
}

.primary-nav ul {
	display: flex;
	align-items: center;
	gap: 32px;
}

.primary-nav a {
	font-family: var(--gr-font-display);
	font-weight: 500;
	font-size: 1.25rem; /* 20px */
	letter-spacing: -0.02em;
	color: var(--gr-color-accent);
}

.menu-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 37px;
	height: 43px;
	padding: 0;
	background: transparent;
	border: 0;
	cursor: pointer;
}

.menu-toggle svg {
	width: 100%;
	height: 100%;
}

@media (min-width: 783px) {
	.primary-nav {
		display: block;
	}
	.menu-toggle {
		display: none;
	}
}

/* Menu mobile (drawer simples) */
.primary-nav.is-open {
	display: block;
	position: absolute;
	top: var(--gr-header-height);
	left: 0;
	right: 0;
	background: var(--gr-color-bg);
	padding: 16px var(--gr-container-padding) 24px;
}

.primary-nav.is-open ul {
	flex-direction: column;
	align-items: flex-start;
	gap: 16px;
}

/* ==========================================================================
   5. Layout do post (2 colunas no desktop / empilhado no mobile)
   ========================================================================== */
.post-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--gr-gap-lg);
	padding: 40px var(--gr-container-padding) 80px;
	max-width: 1440px;
	margin: 0 auto;
}

@media (min-width: 1024px) {
	.post-layout {
		grid-template-columns: 2fr 1fr;
		gap: 40px;
		padding-top: 40px;
	}
}

/* ---- Coluna de imagens ---- */
.post-gallery {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--gr-gap);
}

/* Cada imagem mantém sua proporção original (sem cortes) — só a
   largura é forçada a 100% da coluna; a altura acompanha o ratio
   nativo da imagem. O espaçamento entre elas continua o --gr-gap (8px)
   definido no grid acima. */
.post-gallery img {
	width: 100%;
	height: auto;
	border-radius: 0;
}

/* Placeholder exibido apenas quando o post ainda não tem imagens. */
.post-gallery__placeholder {
	width: 100%;
	aspect-ratio: 4 / 3;
	background: var(--gr-color-surface);
}

@media (min-width: 1024px) {
	.post-gallery {
		grid-template-columns: 1fr 1fr;
	}
	.post-gallery > :first-child {
		grid-column: 1 / -1;
	}
}

/* ---- Coluna de conteúdo ---- */
.post-content-col {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.post-header {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.post-title {
	font-family: var(--gr-font-display);
	font-weight: 400;
	font-size: 2.25rem; /* 36px mobile */
	line-height: 1.15;
	margin: 0;
}

@media (min-width: 1024px) {
	.post-title {
		font-size: 2.625rem; /* 42px desktop */
		line-height: 1;
	}
}

.post-year {
	font-family: var(--gr-font-display);
	font-weight: 700;
	font-size: 1.5rem; /* 24px */
	margin: 0;
}

.post-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--gr-gap);
}

.post-tags a {
	display: inline-flex;
	align-items: center;
	background: transparent;
	border: 1px solid var(--gr-color-white);
	border-radius: 8px;
	padding: 2px 12px 8px;
	font-family: var(--gr-font-display);
	font-weight: 500;
	font-size: 0.875rem; /* 14px */
	color: var(--gr-color-white);
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

/* Estado "hover" do componente de tag no Figma (Roxos/claro). */
.post-tags a:hover,
.post-tags a:focus-visible {
	background: var(--gr-color-lilac);
	border-color: var(--gr-color-lilac);
	color: var(--gr-color-bg);
}

/* Estado "selecionado" do componente de tag no Figma — aplicado ao
   clicar/segurar (:active) e também disponível como classe .is-active
   para marcar a tag atualmente selecionada em uma listagem/filtro. */
.post-tags a:active,
.post-tags a.is-active {
	background: var(--gr-color-surface);
	border-color: var(--gr-color-lilac);
	color: var(--gr-color-lilac);
}

.post-entry-content {
	font-family: var(--gr-font-body);
	font-weight: 300;
	font-size: 1rem;
	line-height: 1.5;
}

.post-entry-content p {
	margin: 0 0 8px;
}

.post-entry-content p:last-child {
	margin-bottom: 0;
}

/* ---- Créditos ---- */
.post-credits {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding-top: 16px;
	border-top: 1px solid var(--gr-color-white);
	font-size: 0.875rem; /* 14px */
}

.post-credits__row {
	display: flex;
	gap: 16px;
	align-items: baseline;
}

.post-credits__label {
	font-family: var(--gr-font-display);
	font-weight: 500;
	text-transform: uppercase;
	line-height: 1.15;
	width: 104px;
	flex: 0 0 104px;
}

.post-credits__names {
	font-family: var(--gr-font-meta);
	font-weight: 300;
	line-height: 1.2;
}

/* ==========================================================================
   6. Footer
   ========================================================================== */
.site-footer {
	padding: 24px var(--gr-container-padding) 40px;
	font-family: var(--gr-font-meta);
	font-size: 0.875rem;
	opacity: 0.8;
}