/* =========================================================================
   FaunaPress - responsive.css
   Mobile-first: main.css define el estilo base (320px+). Aqui solo se
   anaden/ajustan reglas para pantallas mayores. Breakpoints probados:
   320, 375, 390, 430, 768, 1024, 1280, 1440, 1920.
   ========================================================================= */

/* ---- >= 480px: pequenos ajustes de tipografia y grids de 2 columnas ---- */
@media (min-width: 480px) {
	.categories-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ---- >= 600px: cards en 2 columnas ---- */
@media (min-width: 600px) {
	.article-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.related-posts-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ---- >= 768px (tablet): navegacion horizontal, layout de 2 columnas ---- */
@media (min-width: 768px) {

	.menu-toggle {
		display: none;
	}
	.main-navigation {
		order: 2;
		width: auto;
	}
	.main-navigation ul {
		display: flex !important;
		flex-direction: row;
		gap: 4px;
		position: static;
	}
	.main-navigation ul ul {
		position: absolute;
		background: var(--fp-bg);
		border: 1px solid var(--fp-border);
		border-radius: 8px;
		padding: 8px;
		min-width: 200px;
		box-shadow: var(--fp-shadow);
		display: none !important;
	}
	.main-navigation li {
		position: relative;
	}
	.main-navigation li:hover > ul,
	.main-navigation li:focus-within > ul {
		display: flex !important;
		flex-direction: column;
	}
	.main-navigation ul li a {
		padding: 10px 12px;
		border-radius: 6px;
	}
	/* El submenu desplegable siempre tiene fondo claro (var(--fp-bg)),
	   asi que sus enlaces usan el color de texto normal del sitio en
	   lugar del color de texto de la cabecera (que puede ser blanco). */
	.main-navigation ul ul li a {
		color: var(--fp-text);
	}
	.main-navigation ul li a:hover {
		background: var(--fp-bg-alt);
	}

	.header-search-form {
		position: absolute;
		right: 20px;
		top: 100%;
		width: 320px;
		background: var(--fp-bg);
		border: 1px solid var(--fp-border);
		border-radius: 8px;
		box-shadow: var(--fp-shadow);
	}

	.footer-widgets {
		grid-template-columns: repeat(3, 1fr);
	}

	.author-box {
		align-items: flex-start;
	}
}

/* ---- Cabecera: opcion "menu debajo de la cabecera" (solo aplica en desktop,
       en movil el menu ya se colapsa en el boton hamburguesa) ---- */
@media (min-width: 768px) {
	.site-header.menu-below .site-header-inner {
		flex-wrap: wrap;
	}
	.site-header.menu-below .main-navigation {
		order: 3;
		width: 100%;
		border-top: 1px solid var(--fp-border);
		margin-top: 10px;
		padding-top: 10px;
	}
	.site-header.menu-below.has-bg-image .main-navigation {
		border-top-color: rgba(255, 255, 255, 0.25);
	}
	.site-header.menu-below .main-navigation ul {
		justify-content: center;
	}
}

/* ---- >= 1024px (desktop pequeno): sidebar en 2 columnas ---- */
@media (min-width: 1024px) {

	.layout-with-sidebar {
		grid-template-columns: minmax(0, 1fr) 320px;
		align-items: start;
	}
	.sidebar-position-left {
		order: -1;
	}

	.article-grid {
		grid-template-columns: repeat(3, 1fr);
	}
	.featured-grid {
		grid-template-columns: repeat(3, 1fr);
	}
	.related-posts-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.categories-grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.faunapress-infocard {
		float: right;
		margin-left: 2em;
	}
}

/* ---- >= 1280px: layout de sidebar mas holgado ---- */
@media (min-width: 1280px) {
	.layout-with-sidebar {
		grid-template-columns: minmax(0, 1fr) 360px;
		gap: 56px;
	}
}

/* ---- >= 1440px / 1920px: contenedor un poco mas ancho en pantallas grandes ---- */
@media (min-width: 1440px) {
	:root {
		--fp-container: 1280px;
	}
}
@media (min-width: 1920px) {
	:root {
		--fp-container: 1360px;
	}
}

/* ---- Evitar overflow horizontal accidental en cualquier tamano ---- */
img, video, iframe, table, pre {
	max-width: 100%;
}
.table-scroll-wrapper {
	max-width: 100%;
}