/*
Theme Name:   Astra Child - Status Queer
Theme URI:    https://statusqueer.org
Description:  Tema hijo de Astra para Status Queer. Contiene la plantilla personalizada de entradas individuales (Archivo de la Memoria Trans).
Author:       Status Queer
Template:     astra
Version:      1.0.5
Text Domain:  astra-child
*/

/* ==========================================================================
   Variables de la plantilla de entrada individual.
   Cambia estos valores para reajustar la paleta y las medidas del post.
   ========================================================================== */

body.single-post {
	--sq-fondo: #ffffff;
	--sq-ancho: 900px;
	--sq-margen: 1.5rem;
	--sq-espacio: 3.5rem;
	--sq-tinta: #000;
	--sq-tenue: #4a4a4a;
	--sq-linea: rgba(0, 0, 0, 0.15);
}

/* --------------------------------------------------------------------------
   Fondo de la pagina de entrada

   Astra pinta su propio fondo en varios contenedores, asi que se neutralizan
   para que el color se vea de borde a borde. Solo afecta a las entradas.
   -------------------------------------------------------------------------- */

body.single-post,
body.single-post #page,
body.single-post #content,
body.single-post .site-content,
body.single-post .ast-container {
	background-color: var(--sq-fondo);
}

/* --------------------------------------------------------------------------
   Contenedor de Astra

   En pantallas anchas Astra hace .ast-container flexible para repartir
   contenido y barra lateral en columnas. Sin barra lateral, el articulo queda
   como unico item flexible: se encoge a su contenido y se pega a la izquierda,
   lo que anula cualquier centrado propio. Aqui vuelve a ser un bloque normal.
   -------------------------------------------------------------------------- */

body.single-post #content > .ast-container {
	display: block;
	width: 100%;
	max-width: 100%;
	padding: 0;
}

body.single-post .sq-single {
	width: 100%;
	margin: 0;
}

/* --------------------------------------------------------------------------
   Envoltura unica

   Todo el articulo comparte este contenedor, de modo que imagen, titulo,
   datos, contenido y secciones arrancan siempre en el mismo margen.
   -------------------------------------------------------------------------- */

.sq-single {
	color: var(--sq-tinta);
}

.sq-single .sq-envoltura {
	box-sizing: border-box;
	width: 100%;
	max-width: var(--sq-ancho);
	margin-inline: auto;
	padding: 2.5rem var(--sq-margen) var(--sq-espacio);
}

.sq-single .sq-envoltura > * {
	box-sizing: border-box;
	max-width: 100%;
}

.sq-single h1,
.sq-single h2,
.sq-single h3,
.sq-single h4,
.sq-single strong,
.sq-single b {
	color: var(--sq-tinta);
	font-weight: 700;
}

/* Astra enmarca con sombra mediante .ast-article-single, que WordPress añade
   a este mismo articulo, asi que se repite la clase para poder ganarle. */
.sq-single img,
.sq-single figure,
.ast-article-single.sq-single img,
.ast-article-single.sq-single figure {
	box-shadow: none;
	border: 0;
	border-radius: 0;
	background: none;
	padding: 0;
}

.sq-single figure {
	margin: 0;
}

/* --------------------------------------------------------------------------
   1. Imagen destacada
   -------------------------------------------------------------------------- */

.sq-single .sq-destacada {
	margin-bottom: 2.5rem;
}

.sq-single .sq-destacada img {
	display: block;
	width: 100%;
	height: auto;
}

/* --------------------------------------------------------------------------
   2. Titulo centrado
   -------------------------------------------------------------------------- */

.sq-single h1.sq-titulo {
	margin: 0 0 1.5rem;
	padding: 0;
	font-size: clamp(1.9rem, 4.5vw, 3rem);
	line-height: 1.15;
	text-align: center;
}

/* --------------------------------------------------------------------------
   3. Datos: "Matias, Quito" y la fecha, a la izquierda
   -------------------------------------------------------------------------- */

.sq-single .sq-datos {
	margin-bottom: var(--sq-espacio);
	padding-bottom: 1.75rem;
	border-bottom: 1px solid var(--sq-linea);
	text-align: left;
}

.sq-single .sq-datos__linea {
	margin: 0 0 0.35rem;
	font-size: 1.05rem;
	line-height: 1.5;
}

.sq-single .sq-datos__linea:last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   4. Contenido
   -------------------------------------------------------------------------- */

.sq-single .sq-contenido {
	margin-bottom: var(--sq-espacio);
	font-size: 1.0625rem;
	line-height: 1.75;
	text-align: left;
}

.sq-single .sq-contenido > * + * {
	margin-top: 1.25em;
}

.sq-single .sq-contenido img {
	height: auto;
}

.sq-single .sq-contenido blockquote {
	margin-inline: 0;
	padding-left: 1.5rem;
	border-left: 3px solid var(--sq-tinta);
	font-style: italic;
}

/* --------------------------------------------------------------------------
   5 y 6. Secciones de imagenes y videos
   -------------------------------------------------------------------------- */

.sq-single .sq-seccion {
	margin-bottom: var(--sq-espacio);
}

.sq-single .sq-seccion__titulo {
	margin: 0 0 1.5rem;
	padding: 0 0 0.75rem;
	border-bottom: 1px solid var(--sq-linea);
	font-size: 1.25rem;
	font-weight: 700;
	text-align: left;
}

/* Imagenes extra */

.sq-single .sq-galeria {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sq-single .sq-galeria__item {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sq-single .sq-galeria__item a,
.sq-single .sq-galeria__item img {
	display: block;
}

.sq-single .sq-galeria__item img {
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	transition: opacity 0.25s ease;
}

/* Con una sola imagen se muestra completa, sin recorte de miniatura. */
.sq-single .sq-galeria--unica .sq-galeria__item img {
	aspect-ratio: auto;
	max-height: 80vh;
	object-fit: contain;
	object-position: left center;
}

.sq-single .sq-galeria__item a:hover img,
.sq-single .sq-galeria__item a:focus-visible img {
	opacity: 0.82;
}

.sq-single .sq-galeria__pie {
	margin-top: 0.5rem;
	font-size: 0.9rem;
	color: var(--sq-tenue);
}

/* Videos extra */

.sq-single .sq-videos {
	display: grid;
	gap: 2rem;
}

.sq-single .sq-video__marco {
	position: relative;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background-color: #000;
}

.sq-single .sq-video__marco iframe,
.sq-single .sq-video__marco video,
.sq-single .sq-video__marco embed,
.sq-single .sq-video__marco object {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Un video vertical no debe deformarse para llenar el marco 16:9. */
.sq-single .sq-video__marco video {
	object-fit: contain;
}

.sq-single .sq-video__titulo {
	margin: 0.75rem 0 0;
	font-size: 0.95rem;
	color: var(--sq-tenue);
}

/* --------------------------------------------------------------------------
   Pie del articulo
   -------------------------------------------------------------------------- */

.sq-single .sq-pie {
	padding-top: 1.75rem;
	border-top: 1px solid var(--sq-linea);
	font-size: 0.9rem;
	color: var(--sq-tenue);
	text-align: left;
}

.sq-single .sq-pie a {
	color: var(--sq-tenue);
}

@media (max-width: 600px) {
	body.single-post {
		--sq-espacio: 2.5rem;
		--sq-margen: 1.25rem;
	}

	.sq-single .sq-envoltura {
		padding-top: 1.5rem;
	}
}