/*
Theme Name: México Diseña — Base México Escribe
Text Domain: mexico-disena-base-escribe
Description: Tema base de México Diseña derivado de la arquitectura visual de México Escribe.
Version: 1.2.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
*/

html {
	scroll-behavior: smooth;
}

.home-carousel {
	position: relative;
	overflow: hidden;
}
.carousel-controls {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin: -4px 0 12px;
}
.carousel-button {
	width: 38px;
	height: 38px;
	display: grid;
	place-items: center;
	border: 1px solid #161716;
	background: #f7f7f3;
	color: #161716;
	cursor: pointer;
}
.carousel-track {
	display: flex !important;
	width: 100% !important;
	max-width: 100% !important;
	overflow-x: auto !important;
	overflow-y: hidden !important;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track > * { scroll-snap-align: start; }
.carousel-authors > .author-card,
.carousel-works > .work-card {
	flex: 0 0 20% !important;
	width: 20% !important;
	max-width: 20% !important;
	min-width: 20% !important;
	box-sizing: border-box;
}
.carousel-authors .portrait-frame,
.carousel-works .book-cover {
	width: 100% !important;
	max-width: 100% !important;
	overflow: hidden !important;
}
.carousel-authors .portrait-frame { aspect-ratio: 1 / 1 !important; }
.carousel-works .book-cover { aspect-ratio: 3 / 4.15 !important; }
.carousel-authors .portrait-frame img,
.carousel-works .book-cover img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	object-fit: cover !important;
}
.carousel-authors .portrait-frame img { filter: grayscale(100%) contrast(1.02); }
.archive-card-section { padding-block: 34px 72px; }
.archive-card-grid {
	display: grid !important;
	grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
	border-top: 1px solid #161716;
	border-left: 1px solid #161716;
}
.archive-card {
	min-width: 0;
	border-right: 1px solid #161716;
	border-bottom: 1px solid #161716;
	padding: 14px;
}
.archive-card > a { display: block; }
.archive-card-media {
	width: 100%;
	max-width: 100%;
	overflow: hidden;
	background: #dedfd9;
}
.archive-author-media { aspect-ratio: 1 / 1; }
.archive-work-media {
	aspect-ratio: 3 / 4.15;
	display: grid;
	place-items: center;
}
.archive-author-media img,
.archive-work-media img {
	display: block;
	width: 100% !important;
	height: 100% !important;
	max-width: 100% !important;
	object-fit: cover;
}
.archive-author-media img { filter: grayscale(100%) contrast(1.02); }
.archive-work-placeholder {
	width: 100%;
	height: 100%;
	display: grid;
	place-items: center;
	padding: 18px;
	text-align: center;
	font-weight: 600;
	background: #d9d9d4;
}
.archive-card h2 {
	margin: 12px 0 4px;
	font-family: "IBM Plex Sans", sans-serif;
	font-size: 1rem;
	line-height: 1.08;
	font-weight: 600;
	letter-spacing: -.02em;
}
.archive-card p {
	margin: 0;
	color: #62645f;
	font-size: .76rem;
	line-height: 1.38;
}
@media (max-width: 1100px) {
	.carousel-authors > .author-card,
	.carousel-works > .work-card {
		flex-basis: 33.333% !important;
		width: 33.333% !important;
		max-width: 33.333% !important;
		min-width: 33.333% !important;
	}
	.archive-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}
@media (max-width: 980px) { .mobile-nav.is-open { display: flex; } }
@media (max-width: 700px) {
	.carousel-authors > .author-card,
	.carousel-works > .work-card {
		flex-basis: 50% !important;
		width: 50% !important;
		max-width: 50% !important;
		min-width: 50% !important;
	}
	.archive-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 440px) {
	.carousel-authors > .author-card,
	.carousel-works > .work-card {
		flex-basis: 82% !important;
		width: 82% !important;
		max-width: 82% !important;
		min-width: 82% !important;
	}
}