/*
Theme Name: Bogotan Flaneur Child
Theme URI: https://bogotanflaneurtours.com
Author: Camilo Moreno Caro
Author URI: https://camilomoreno.co
Description: Tema hijo de Storefront compartido por las dos instalaciones de bogotanflaneurtours.com (principal EN y /es). Base neutra: el diseño parte de ser un espejo de producción (Storefront + customizer); los cambios visuales se trabajan aquí sobre esa base.
Template: storefront
Version: 0.9.13
Requires at least: 6.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bogotan-flaneur
*/

/*
 * Metadatos de las entradas: visibles en escritorio, ocultos en móvil
 * (breakpoint handheld de Storefront). La imagen queda como primer
 * elemento en la vista móvil.
 */
@media (max-width: 767px) {
	.entry-meta {
		display: none;
	}
}

/*
 * Tures como tarjetas wide en escritorio (>=992px): una por fila a
 * ancho completo, imagen-banner con altura fija y recorte centrado.
 * El titulo y el boton "anadir al carrito" aparecen al pasar el mouse
 * (mecanismo de hover del padre, conservado). Movil intacto.
 */
@media (min-width: 992px) {
	/* Geometria wide para los listados de productos (home/tienda). */
	ul.products {
		display: block !important;
	}
	ul.products li.product {
		float: none !important;
		width: 100% !important;
		margin-right: 0 !important;
		margin-bottom: 35px;
	}
	ul.products li.product img {
		width: 100%;
		height: 400px;
		object-fit: cover;
	}
	/* Relacionados, upsells y cross-sells (pagina de producto y carrito)
	   vuelven a su grilla de 3 columnas original de Storefront. */
	section.related ul.products li.product,
	section.upsells ul.products li.product,
	section.cross-sells ul.products li.product {
		float: left !important;
		width: 29.4117647059% !important;
		margin-right: 5.8823529412% !important;
	}
	section.related ul.products li.product:nth-child(3n),
	section.upsells ul.products li.product:nth-child(3n),
	section.cross-sells ul.products li.product:nth-child(3n) {
		margin-right: 0 !important;
	}
	section.related ul.products li.product img,
	section.upsells ul.products li.product img,
	section.cross-sells ul.products li.product img {
		height: auto;
	}
	/* El boton de carrito en relacionados/upsells/cross-sells se elimina
	   (ver regla global al final del archivo): estorbaba en las tarjetas
	   chicas y el flujo real es clic -> pagina del tour -> carrito. */
	/* Clic en cualquier parte de la tarjeta -> producto (el enlace del
	   loop se estira sobre toda la tarjeta con ::after). El boton de
	   carrito queda por encima (z-index 2) y es la unica zona que no
	   navega. El reveal del titulo y del boton en hover lo trae
	   main.css del padre; aqui solo geometria y areas de clic. */
	ul.products li.product {
		position: relative;
	}
	ul.products li.product > a.woocommerce-LoopProduct-link::after {
		content: "";
		position: absolute;
		inset: 0;
		z-index: 1;
	}
	ul.products li.product .button {
		z-index: 2;
	}
}

/*
 * Blog en mosaico: 2 columnas en escritorio, tarjetas de portada +
 * titulo; toda la tarjeta es clicable hacia la entrada (stretched
 * link sobre la portada). El contenido/excerpt no se imprime (se
 * quito storefront_post_content del loop). Una columna en movil.
 */
body.blog .site-main,
body.archive .site-main {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 35px;
}
body.blog .site-main .pagination,
body.archive .site-main .pagination {
	grid-column: 1 / -1;
}
body.blog .site-main .hentry,
body.archive .site-main .hentry {
	margin: 0;
	position: relative;
	display: flex;
	flex-direction: column;
}
.bft-portada {
	display: block;
	margin: 0 0 0.8em;
	position: relative;
}
.bft-portada::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
.hentry .bft-portada img {
	display: block;
	width: 100%;
	height: auto;
	margin-bottom: 0;
}
/* El padre esconde entry-header (.hentry .entry-header{display:none}
   en css/main.css) y le ponia un margen de 1.618em a la imagen
   destacada: esa era la barra sobrante bajo la portada. En el
   mosaico el titulo SI se muestra, compacto y sin la linea. */
body.blog .site-main .hentry .entry-header,
body.archive .site-main .hentry .entry-header {
	display: block;
	border-bottom: 0;
	margin-bottom: 0;
	padding: 0 1.2em 1.2em;
}
body.blog .site-main .hentry .entry-title,
body.archive .site-main .hentry .entry-title {
	font-size: 1.4rem;
	margin-bottom: 0;
}
body.blog .site-main .hentry .entry-header,
body.archive .site-main .hentry .entry-header {
	padding: 0 1.2em 1.2em;
}
/* Dentro del mosaico los metadatos (autor/fecha/comentarios-link)
   sobran: la tarjeta es portada + titulo. Fuera del mosaico (pagina
   de la entrada) siguen visibles en escritorio. */
body.blog .site-main .hentry .entry-meta,
body.archive .site-main .hentry .entry-meta {
	display: none;
}
@media (max-width: 767px) {
	body.blog .site-main,
	body.archive .site-main {
		grid-template-columns: 1fr;
	}
}

/*
 * Enlace invisible sobre el logo del header en movil (<992px, mismo
 * breakpoint en que main.css del padre pinta el logo de fondo).
 * Centrado: no interfiere con la hamburguesa ni el selector de idioma.
 */
@media (max-width: 991px) {
	.bft-logo-link {
		position: fixed;
		top: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 140px;
		height: 45px;
		display: block;
		overflow: hidden;
		text-indent: -9999px;
		z-index: 100000;
	}
}

/*
 * Amarillo unificado al de la ilustracion del home (#ffba00): la
 * pantalla de carga, el chip de idioma y el menu fijo movil traian
 * #f4b900 del tema y creaban cortes visibles contra el header y la
 * ilustracion. El footer sigue siendo morado (#6e00c8, del customizer).
 */
.mainLoader,
.customFooter__language,
.customFooter__movil {
	background-color: #ffba00 !important;
}

/*
 * Banda de "Derechos reservados" (customFooter__bottom) traia un morado
 * distinto (#6500b7 hardcoded en el tema) y marcaba una costura contra
 * el cuerpo del footer. Unificada al morado oficial del footer
 * (#6e00c8, que vive en el customizer). El footer NO es amarillo.
 */
.customFooter__bottom {
	background-color: #6e00c8 !important;
}

/*
 * Relacionados/upsells/cross-sells sin boton de carrito: la tarjeta
 * entera navega a la pagina del tour, donde esta el carrito. Fuera de
 * los media queries para aplicar igual en movil y escritorio.
 */
section.related ul.products li.product .button,
section.upsells ul.products li.product .button,
section.cross-sells ul.products li.product .button {
	display: none !important;
}