/*
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 */

	/* Ícone de seta do componente "link" do Figma (node 84:68/84:69),
	   exportado do próprio arquivo. Usado via CSS mask + currentColor
	   para acompanhar a cor do texto (branco no padrão, rosa no hover). */
	--gr-icon-arrow-out: url("data:image/svg+xml,%3Csvg%20width='14'%20height='14'%20viewBox='0%200%2014%2014'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3E%3Cpath%20d='M13.2803%200.75C13.2803%200.335786%2012.9445%200%2012.5303%200L5.78027%20-5.96046e-08C5.36606%20-5.96046e-08%205.03027%200.335786%205.03027%200.75C5.03027%201.16421%205.36606%201.5%205.78027%201.5L11.7803%201.5V7.5C11.7803%207.91421%2012.1161%208.25%2012.5303%208.25C12.9445%208.25%2013.2803%207.91421%2013.2803%207.5V0.75ZM0.530273%2012.75L1.0606%2013.2803L13.0606%201.28033L12.5303%200.75L11.9999%200.21967L-5.66244e-05%2012.2197L0.530273%2012.75Z'%20fill='white'/%3E%3C/svg%3E");

	--gr-gap: 8px;
	--gr-gap-lg: 24px;
	--gr-gap-gallery: 16px; /* espaço entre as fotos da galeria — 8px no Figma (retângulos lisos), ampliado para fotos reais */
	--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)
   ========================================================================== */
/*
 * No mobile o Figma intercala imagens e texto numa ordem própria
 * (imagem grande → título/ano/tags → demais imagens → texto → links →
 * créditos), diferente da simples divisão em 2 colunas do desktop. Para
 * respeitar as duas ordens sem duplicar HTML, ".post-gallery" e
 * ".post-content-col" só existem como agrupadores visuais no desktop:
 * no mobile viram "display: contents" (o navegador ignora a caixa e
 * trata os filhos como itens diretos do grid do ".post-layout"), e cada
 * seção ganha um "order" próprio para cair na sequência do protótipo.
 */
.post-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--gr-gap-lg); /* 24px entre seções no mobile */
	padding: 40px var(--gr-container-padding) 80px;
	max-width: 1440px;
	margin: 0 auto;
}

.post-gallery,
.post-content-col {
	display: contents;
}

.post-gallery-featured {
	order: 1;
}
.post-header {
	order: 2;
}
.post-gallery-rest {
	order: 3;
}
.post-entry-content {
	order: 4;
}
.post-links {
	order: 5;
}
.post-credits {
	order: 6;
}

/* 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. */
.post-gallery-featured img,
.post-gallery-rest img {
	width: 100%;
	height: auto;
	border-radius: 0;
}

.post-gallery-rest {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--gr-gap-gallery);
}

/* 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-layout {
		grid-template-columns: 2fr 1fr;
		gap: 40px;
		padding-top: 40px;
	}

	/* No desktop as imagens ficam numa coluna e o texto na outra —
	   volta a valer o agrupamento normal (sem "contents"/"order"). */
	.post-gallery {
		display: flex;
		flex-direction: column;
		gap: var(--gr-gap-gallery); /* 16px entre a imagem grande e a grade */
	}

	.post-content-col {
		display: flex;
		flex-direction: column;
		gap: 24px;
	}

	.post-gallery-rest {
		grid-template-columns: 1fr 1fr;
	}
}

.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;
}

/* Links dentro do corpo de texto (componente "link" do Figma, node
   84:68) e a seção de links entre o texto e os créditos (node 84:69):
   texto sublinhado em Compagnon Medium 14px + seta diagonal, branco no
   estado padrão e Quentes/rosa pluma no hover. A seta usa CSS mask com
   currentColor para acompanhar a cor do texto automaticamente. */
.post-entry-content a:not(:has(img)),
.post-links a {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	color: var(--gr-color-white);
	font-family: var(--gr-font-display);
	font-weight: 500;
	font-size: 0.875rem; /* 14px */
	text-decoration: underline;
	text-underline-position: from-font;
	text-decoration-skip-ink: none;
	transition: color 120ms ease;
}

.post-entry-content a:not(:has(img))::after,
.post-links a::after {
	content: "";
	align-self: center;
	width: 12px;
	height: 12px;
	flex: 0 0 12px;
	background-color: currentColor;
	-webkit-mask-image: var(--gr-icon-arrow-out);
	mask-image: var(--gr-icon-arrow-out);
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.post-entry-content a:not(:has(img)):hover,
.post-entry-content a:not(:has(img)):focus-visible,
.post-links a:hover,
.post-links a:focus-visible {
	color: var(--gr-color-accent);
}

/* ---- Seção de links (entre o corpo do texto e os créditos) ---- */
/* Lista de links: no Figma eles quebram em linha (não empilhados) —
   3 por linha no espaço da coluna de texto, com 16px de espaço
   horizontal e 12px entre as linhas quando quebra. */
.post-links {
	display: flex;
	flex-wrap: wrap;
	column-gap: 16px;
	row-gap: 12px;
}

/* ---- 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;
}