/**
 * Blog listing.
 *
 * Attached to core/query (inc/assets.php, MIRAIGO_CORE_BLOCK_STYLES), the one
 * block every listing view renders: templates/home.html, archive.html,
 * search.html and index.html, all through patterns/blog-listing.php. It
 * styles the cards, the pager and the sidebar, the same "one anchor block"
 * shape core-post.css uses for the article.
 *
 * Structure: a main column (featured card + 2-up grid + pager) beside a
 * 416px sidebar from 1024px; below that the sidebar drops under the pager.
 * The gaps below are the nearest spacing step to the measured values, noted
 * where it matters.
 */

/* -------------------------------------------------------------- layout -- */

/*
 * 1159px column + 84px gap + 416px sidebar = 1660px (x162 to x1820). Four
 * selectors deep to beat core's `.is-layout-constrained > .alignwide` cap.
 */
.is-layout-constrained > div.wp-block-group.alignwide.blog-layout {
	max-inline-size: var(--wp--custom--width--blog-layout);
}

.blog-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--60);
	align-items: start;
}

.blog-layout > * {
	margin-block: 0;
}

@media (min-width: 1024px) {

	.blog-layout {
		grid-template-columns: minmax(0, 1fr) var(--wp--custom--width--blog-sidebar);
	}
}

/* --------------------------------------------------------------- cards -- */

.blog-list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wp--preset--spacing--55) var(--wp--preset--spacing--50);
}

.blog-list > li {
	margin: 0;
}

@media (min-width: 768px) {

	.blog-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* 559×327 photo, 30px corners, pill on top. */
.blog-entry {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	block-size: 100%;
	color: var(--wp--preset--color--text-primary);
}

.blog-entry > * {
	margin-block: 0;
}

figure.blog-entry__media {
	align-self: stretch;
	aspect-ratio: var(--wp--custom--blog--card-ratio);
	margin: 0;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--blog-card);
}

.blog-entry__media img {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

/*
 * Category pills: colour by category, from the
 * `is-term-<slug>` class miraigo_tag_category_pills() adds. Four styles are
 * shared among the six categories: red for
 * Venta directa y OTAs, dark for Software hotelero and IA para hoteles,
 * outlined for Novedades y casos de éxito, and the default white with red
 * text for Motor de reserva, Comparativas and any category added later.
 *
 * 20px Bold, not 15px Light: brand red with white is
 * 4.19:1, which only passes WCAG AA as large text (≥18.66px bold).
 * subtitle-sm is a fixed size, so it never drops under that on mobile.
 */
.blog-entry__category {
	position: absolute;
	inset-block-start: var(--wp--preset--spacing--35);
	inset-inline-start: var(--wp--preset--spacing--35);
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--20);
	margin: 0;
}

.blog-entry__category .wp-block-post-terms__separator {
	display: none;
}

.blog-entry__category a {
	display: inline-block;
	border: var(--wp--custom--border--hairline) solid transparent;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--background-primary);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--35);
	font-size: var(--wp--preset--font-size--subtitle-sm);
	font-weight: 700;
	line-height: 1.2;
	color: var(--wp--preset--color--text-brand);
	text-decoration: none;
}

.blog-entry__category a.is-term-venta-directa-y-otas {
	background-color: var(--wp--preset--color--background-brand);
	color: var(--wp--preset--color--text-inverse);
}

.blog-entry__category a:is(.is-term-software-hotelero, .is-term-ia-para-hoteles) {
	background-color: var(--wp--preset--color--background-inverse);
	color: var(--wp--preset--color--text-inverse);
}

.blog-entry__category a.is-term-novedades-y-casos-de-exito {
	border-color: var(--wp--preset--color--text-dark);
	color: var(--wp--preset--color--text-primary);
}

/*
 * Mobile pills: 15px instead of the desktop 20px Bold, tucked closer into
 * the corner of a ~205px photo. At
 * 15px white on brand red (4.19:1) and brand red on white fail AA, so both
 * use `brand-hover` (5.2:1) — the same call as the article hero pill.
 */
@media (max-width: 767.98px) {

	.blog-entry__category {
		inset-block-start: var(--wp--preset--spacing--25);
		inset-inline-start: var(--wp--preset--spacing--25);
		max-inline-size: calc(100% - 2 * var(--wp--preset--spacing--25));
	}

	.blog-entry__category a {
		padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
		font-size: var(--wp--preset--font-size--button-md);
		font-weight: 600;
		color: var(--wp--custom--color--brand-hover);
	}

	.blog-entry__category a.is-term-venta-directa-y-otas {
		background-color: var(--wp--custom--color--brand-hover);
		color: var(--wp--preset--color--text-inverse);
	}

	.blog-entry__category a:is(.is-term-software-hotelero, .is-term-ia-para-hoteles) {
		color: var(--wp--preset--color--text-inverse);
	}

	.blog-entry__category a.is-term-novedades-y-casos-de-exito {
		color: var(--wp--preset--color--text-primary);
	}
}

/* Link states on this page go through `:where()`, so they stay at (0,1,1): same as
   the base rule they follow, under the per-term pills (stylelint no-descending-specificity). */
.blog-entry__category a:where(:hover) {
	text-decoration: underline;
}

/* An entry without a featured image: the pill joins the flow. */
.blog-entry:not(:has(.blog-entry__media)) .blog-entry__category {
	position: static;
}

/* Calendar glyph, then the date, 39px under the photo. */
.blog-entry__date {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	margin-block-start: var(--wp--preset--spacing--50);
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 300;
}

.blog-entry__date::before {
	content: "";
	inline-size: 16px;
	block-size: 15px;
	flex: none;
	background-color: currentcolor;
	-webkit-mask: url(../../icons/calendar.svg) no-repeat center / contain;
	mask: url(../../icons/calendar.svg) no-repeat center / contain;
}

/* 22px SemiBold / 1.3. */
h2.blog-entry__title {
	margin-block-start: var(--wp--preset--spacing--35);
	font-size: var(--wp--preset--font-size--body-xl);
	font-weight: 600;
	line-height: 1.3;
}

.blog-entry__title a {
	color: inherit;
	text-decoration: none;
}

.blog-entry__title a:where(:hover) {
	text-decoration: underline;
}

/* 16px Light, clamped so one long excerpt cannot unbalance a row. */
.blog-entry__excerpt {
	margin-block-start: var(--wp--preset--spacing--25);
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 300;
}

.blog-entry__excerpt .wp-block-post-excerpt__excerpt {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
}

/*
 * "Leer más", 18px SemiBold over a 109px rule that
 * runs past the words. The rule is the border; the tail is padding.
 */
.blog-entry__more.wp-block-read-more {
	margin-block-start: var(--wp--preset--spacing--25);
	border-block-end: var(--wp--custom--border--hairline) solid var(--wp--preset--color--text-link);
	padding-block-end: 0.1em;
	padding-inline-end: var(--wp--custom--blog--read-more-tail);
	font-size: var(--wp--preset--font-size--body-md);
	font-weight: 600;
	color: inherit;
	text-decoration: none;
}

.blog-entry__more.wp-block-read-more:hover {
	border-block-end-color: var(--wp--preset--color--border-brand);
}

.blog-entry a:where(:focus-visible) {
	outline: var(--wp--custom--focus--ring);
	outline-offset: var(--wp--custom--focus--offset);
}

/* ------------------------------------------------------------ featured -- */

/*
 * The first card of every page spans both columns, 1159×729,
 * with the copy laid over the photo. One grid cell, photo on every row, the
 * copy in the bottom rows. `aspect-ratio` is a floor: `min-block-size:
 * min-content` is what makes it one, because with `overflow: hidden` the
 * browser drops aspect-ratio's automatic minimum and clips the title, date
 * and excerpt on mobile. Below 768px the card
 * is portrait (`featured-ratio-mobile`) so the copy over the photo reads.
 *
 * The photo gets the theme's photo scrim, not an opaque overlay, so the
 * entry's image shows.
 */
.blog-list > li:first-child {
	grid-column: 1 / -1;
	margin-block-end: var(--wp--preset--spacing--30);
}

.blog-list > li:first-child .blog-entry {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: minmax(var(--wp--preset--spacing--60), 1fr) repeat(4, auto);
	aspect-ratio: var(--wp--custom--blog--featured-ratio);
	min-block-size: min-content;
	overflow: hidden;
	border-radius: var(--wp--custom--radius--blog-card);
	background-color: var(--wp--preset--color--background-inverse);
	color: var(--wp--preset--color--text-inverse);
}

.blog-list > li:first-child figure.blog-entry__media {
	position: relative;
	grid-row: 1 / -1;
	grid-column: 1;
	aspect-ratio: auto;
	border-radius: 0;
}

.blog-list > li:first-child .blog-entry__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--wp--custom--scrim--photo);
}

.blog-list > li:first-child .blog-entry > :not(.blog-entry__media, .blog-entry__category) {
	position: relative;
	grid-column: 1;
	max-inline-size: var(--wp--custom--width--blog-featured-copy);
	margin-inline: var(--wp--preset--spacing--50);
}

.blog-list > li:first-child .blog-entry__category {
	grid-row: 1;
	grid-column: 1;
	align-self: start;
}

.blog-list > li:first-child .blog-entry__date {
	grid-row: 2;
	margin-block-start: 0;
}

/* 40px SemiBold / 1.06. */
.blog-list > li:first-child h2.blog-entry__title {
	grid-row: 3;
	margin-block-start: var(--wp--preset--spacing--30);
	font-size: var(--wp--preset--font-size--featured-title);
	line-height: 1.06;
}

/* 16px Regular / 1.35. */
.blog-list > li:first-child .blog-entry__excerpt {
	grid-row: 4;
	margin-block-start: var(--wp--preset--spacing--30);
	font-weight: 400;
	line-height: 1.35;
}

.blog-list > li:first-child .blog-entry__more.wp-block-read-more {
	grid-row: 5;
	justify-self: start;
	margin-block: var(--wp--preset--spacing--35) var(--wp--preset--spacing--55);
	border-block-end-color: currentcolor;
}

@media (max-width: 767.98px) {

	.blog-list > li:first-child .blog-entry {
		aspect-ratio: var(--wp--custom--blog--featured-ratio-mobile);
	}

	.blog-list > li:first-child .blog-entry > :not(.blog-entry__media, .blog-entry__category) {
		margin-inline: var(--wp--preset--spacing--40);
	}
}

/* ---------------------------------------------------------------- pager -- */

/* 54px discs, current one brand red. */
.blog-pager {
	margin-block-start: var(--wp--preset--spacing--60);
}

.blog-pager .wp-block-query-pagination-numbers {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wp--preset--spacing--25);
}

.blog-pager .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-inline-size: var(--wp--custom--blog--pager-size);
	block-size: var(--wp--custom--blog--pager-size);
	margin: 0;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--gray-100);
	font-size: var(--wp--preset--font-size--body-sm);
	font-weight: 300;
	color: var(--wp--preset--color--text-link);
	text-decoration: none;
}

.blog-pager .page-numbers.current {
	background-color: var(--wp--preset--color--background-brand);
}

.blog-pager .page-numbers.dots {
	background-color: transparent;
}

.blog-pager a.page-numbers:hover {
	background-color: var(--wp--preset--color--gray-200);
}

.blog-pager a.page-numbers:focus-visible {
	outline: var(--wp--custom--focus--ring);
	outline-offset: var(--wp--custom--focus--offset);
}

/* -------------------------------------------------------------- sidebar -- */

/*
 * Column at x1405, 416px. Below 1024px it sits under the pager at the same
 * measure rather than stretching a 3-up photo grid across a tablet.
 */
.blog-sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--55);
	inline-size: 100%;
	max-inline-size: var(--wp--custom--width--blog-sidebar);
	margin-inline: auto;
}

.blog-sidebar > * {
	margin-block: 0;
}

@media (min-width: 1024px) {

	.blog-sidebar {
		margin-inline: 0;
	}
}

.blog-sidebar__section > * {
	margin-block: 0;
}

.blog-sidebar__section > * + * {
	margin-block-start: var(--wp--preset--spacing--25);
}

/* 20px Medium. */
h2.blog-sidebar__heading {
	font-size: var(--wp--preset--font-size--subtitle-sm);
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0;
	color: var(--wp--preset--color--text-dark);
}

/* Outlined pill, black disc with the glyph. */
.blog-sidebar__search .wp-block-search__inside-wrapper {
	box-sizing: border-box;
	block-size: var(--wp--custom--control--min-target);
	border: var(--wp--custom--border--hairline) solid var(--wp--preset--color--text-dark);
	border-radius: var(--wp--custom--radius--pill);
	padding: 0;
}

.blog-sidebar__search .wp-block-search__inside-wrapper:focus-within {
	outline: var(--wp--custom--focus--ring);
	outline-offset: var(--wp--custom--focus--offset);
}

.blog-sidebar__search .wp-block-search__input {
	min-inline-size: 0;
	border: 0;
	background: transparent;
	padding-inline: var(--wp--preset--spacing--35);
	font-size: var(--wp--preset--font-size--body-md);
	font-weight: 300;
	color: var(--wp--preset--color--text-primary);
}

.blog-sidebar__search .wp-block-search__input:focus {
	outline: none;
}

.blog-sidebar__search .wp-block-search__input::placeholder {
	color: var(--wp--preset--color--text-secondary);
	opacity: 1;
}

.blog-sidebar__search .wp-block-search__inside-wrapper .wp-block-search__button {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	block-size: auto;
	margin: calc(-1 * var(--wp--custom--border--hairline));
	margin-inline-start: 0;
	border: 0;
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--text-dark);
	padding: 0;
	color: var(--wp--preset--color--text-inverse);
}

.blog-sidebar__search .wp-block-search__button svg {
	display: none;
}

.blog-sidebar__search .wp-block-search__button::before {
	content: "";
	inline-size: 20px;
	block-size: 20px;
	background-color: currentcolor;
	-webkit-mask: url(../../icons/search.svg) no-repeat center / contain;
	mask: url(../../icons/search.svg) no-repeat center / contain;
}

/* 18px Regular disc list. */
ul.blog-sidebar__categories {
	margin: 0;
	padding-inline-start: var(--wp--preset--spacing--35);
	list-style: disc;
	font-size: var(--wp--preset--font-size--body-md);
	line-height: 1.5;
	color: var(--wp--preset--color--text-dark);
}

.blog-sidebar__categories a {
	color: inherit;
	text-decoration: none;
}

.blog-sidebar__categories a:where(:hover) {
	text-decoration: underline;
}

/*
 * The footer's three accounts as red badges with a
 * white glyph. The <img> stays for its alt (the link's name) but is not
 * painted; the badge is the link, the glyph a mask. Facebook's asset is
 * already a disc with the "f" cut out, so it is painted whole, no plate.
 */
.blog-sidebar__social {
	gap: var(--wp--preset--spacing--30);
}

.blog-sidebar__social figure {
	margin: 0;
	line-height: 0;
}

.blog-sidebar__social a {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: var(--wp--custom--footer--social-size);
	block-size: var(--wp--custom--footer--social-size);
	border-radius: var(--wp--custom--radius--pill);
	background-color: var(--wp--preset--color--background-brand);
	--miraigo-social-glyph: none;
}

.blog-sidebar__social a:where(:focus-visible) {
	outline: var(--wp--custom--focus--ring);
	outline-offset: var(--wp--custom--focus--offset);
}

.blog-sidebar__social img {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	opacity: 0;
}

.blog-sidebar__social a::before {
	content: "";
	inline-size: var(--wp--custom--footer--social-glyph);
	block-size: var(--wp--custom--footer--social-glyph);
	background-color: var(--wp--preset--color--text-inverse);
	-webkit-mask: var(--miraigo-social-glyph) no-repeat center / contain;
	mask: var(--miraigo-social-glyph) no-repeat center / contain;
}

.blog-sidebar__social a:has(img[src*="/instagram.svg"]) {
	--miraigo-social-glyph: url(../../icons/instagram.svg);
}

.blog-sidebar__social a:has(img[src*="/linkedin.svg"]) {
	--miraigo-social-glyph: url(../../icons/linkedin.svg);
}

.blog-sidebar__social a:has(img[src*="/facebook.svg"]) {
	--miraigo-social-glyph: url(../../icons/facebook.svg);
	background-color: transparent;
}

.blog-sidebar__social a:has(img[src*="/facebook.svg"])::before {
	inline-size: 100%;
	block-size: 100%;
	background-color: var(--wp--preset--color--background-brand);
}