/* ==========================================================================
   TARJETA DE TOUR COMERCIAL (.vxm-home-card)

   La imprime template-parts/front/tour-card-home.php. Nacio para las filas de
   tours de la portada, pero ahora tambien la usa el shortcode [vxm_tours], que
   puede ir en cualquier pagina o entrada.

   Por eso vive en su propio archivo y ya no dentro de front-page.css: aquel
   solo se encola con is_front_page(), asi que la tarjeta salia sin estilos en
   cuanto se usaba fuera del home. Este archivo se encola en la portada Y
   cuando la pagina contiene el shortcode.

   Clases propias a proposito: .vxm-tour-card la estiliza archive-tour.css, que
   se encola en TODO el sitio, asi que reusar ese nombre habria obligado a
   sobrescribir 26 reglas.

   La rejilla de 3 columnas sigue siendo .vxm-tour-grid (tour-components.css).
   ========================================================================== */

.vxm-home-card {
    display: flex;
    flex-direction: column;
    background: var(--vxm-white);
    border: 1px solid var(--vxm-gray-200);
    border-radius: 14px;
    padding: 10px 10px 0;
    box-shadow: var(--vxm-shadow-sm);
    transition: transform var(--vxm-transition), box-shadow var(--vxm-transition);
}

.vxm-home-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--vxm-shadow-lg);
}

/* --- Imagen ---------------------------------------------------------- */

/* La foto va embebida dentro del padding de la tarjeta, no a ras del borde:
   es lo que le da el aire de la referencia. */
.vxm-home-card__media {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
}

.vxm-home-card__media-link {
    display: block;
}

.vxm-home-card__img {
    display: block;
    width: 100%;
    height: 250px;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.vxm-home-card:hover .vxm-home-card__img {
    transform: scale(1.05);
}

/* Tour sin imagen destacada: reserva el hueco en vez de descuadrar la fila. */
.vxm-home-card__img--empty {
    background: var(--vxm-gray-100);
}

.vxm-home-card__sale {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--vxm-error);
    color: var(--vxm-white);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* --- Cinta de premio -------------------------------------------------- */

/* Banderola colgando de la esquina superior derecha. El pico de abajo lo hace
   el clip-path, no un pseudo-elemento: así el fondo sigue siendo un solo bloque
   y no hay que recalcular nada si cambia el ancho. */
.vxm-home-card__ribbon {
    position: absolute;
    top: 0;
    right: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    width: 78px;
    padding: 8px 6px 16px;
    background: var(--vxm-secondary-light);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%);
    text-align: center;
    text-decoration: none;
    transition: filter var(--vxm-transition);
}

/* Solo cuando lleva enlace (hay perfil de Tripadvisor en el Customizer).
   Se oscurece con filter en vez de cambiar de color: el logotipo va en negro
   y sobre el turquesa oscuro del tema no se leería. */
a.vxm-home-card__ribbon:hover {
    filter: brightness(0.9);
}

.vxm-home-card__ribbon-year {
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
    color: var(--vxm-primary);
}

.vxm-home-card__ribbon-logo {
    display: block;
    width: 64px;
    height: auto;
}

/* --- Cuerpo ----------------------------------------------------------- */

.vxm-home-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 14px 8px 16px;
}

/* Categoría a la izquierda, nivel a la derecha, con un filete entre ambos. */
.vxm-home-card__topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.vxm-home-card__cat {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--vxm-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vxm-home-card__cat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(20, 127, 121, 0.1);
}

.vxm-home-card__level {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    padding-left: 10px;
    border-left: 1px solid var(--vxm-gray-200);
    font-size: 0.74rem;
    color: var(--vxm-gray-600);
    white-space: nowrap;
}

.vxm-home-card__level strong {
    font-weight: 600;
    color: var(--vxm-primary);
}

.vxm-home-card__level svg {
    color: var(--vxm-secondary);
}

.vxm-home-card__title {
    margin: 0 0 8px;
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.32;
}

.vxm-home-card__title a {
    color: var(--vxm-primary);
    text-decoration: none;
}

.vxm-home-card__title a:hover {
    color: var(--vxm-secondary);
}

/* Dos líneas fijas para que las tres tarjetas de una fila mantengan la misma
   altura de bloque de texto aunque los excerpts sean distintos. */
.vxm-home-card__excerpt {
    margin: 0 0 16px;
    font-size: 0.86rem;
    line-height: 1.6;
    color: var(--vxm-gray-600);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- Datos y precio ---------------------------------------------------- */

/* margin-top: auto empuja este bloque y los botones al fondo: las tarjetas de
   una misma fila acaban con los botones alineados aunque el título ocupe una
   línea más en una de ellas. */
.vxm-home-card__info {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid var(--vxm-gray-200);
}

.vxm-home-card__facts {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.vxm-home-card__facts span {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--vxm-gray-600);
}

.vxm-home-card__facts strong {
    font-weight: 600;
    color: var(--vxm-primary);
}

.vxm-home-card__facts svg {
    flex: 0 0 auto;
    color: var(--vxm-secondary);
}

/* Valoración: misma fila que el resto de datos, pero es un enlace al perfil de
   Tripadvisor cuando hay uno configurado. */
.vxm-home-card__rating {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--vxm-gray-600);
    text-decoration: none;
}

a.vxm-home-card__rating:hover strong {
    color: var(--vxm-secondary);
    text-decoration: underline;
}

.vxm-home-card__rating strong {
    font-weight: 600;
    color: var(--vxm-primary);
}

/* Ambas reglas van ancladas a __facts porque .vxm-home-card__facts span y
   .vxm-home-card__facts svg, definidas arriba, tienen más especificidad y
   pintarían las estrellas del turquesa de los iconos. */
.vxm-home-card__facts .vxm-home-card__stars {
    display: inline-flex;
    align-items: center;
    gap: 1px;
}

.vxm-home-card__facts .vxm-home-card__stars svg {
    color: var(--vxm-warning);
}

.vxm-home-card__price {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex: 0 0 auto;
    padding-left: 14px;
    border-left: 1px solid var(--vxm-gray-200);
    text-align: right;
}

.vxm-home-card__price-label {
    font-size: 0.76rem;
    color: var(--vxm-gray-600);
}

.vxm-home-card__price-row {
    display: flex;
    align-items: baseline;
    gap: 5px;
}

.vxm-home-card__price-amount {
    font-size: 1.7rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--vxm-primary);
}

/* El símbolo va volado y pequeño, como en la referencia: la cifra es lo que
   tiene que leerse de un vistazo. */
.vxm-home-card__price-symbol {
    margin-right: 1px;
    font-size: 0.95rem;
    font-weight: 600;
    vertical-align: super;
}

.vxm-home-card__price-per {
    font-size: 0.72rem;
    color: var(--vxm-gray-600);
}

.vxm-home-card__price-old {
    font-size: 0.78rem;
    color: var(--vxm-gray-400);
    text-decoration: line-through;
}

/* --- Botones ----------------------------------------------------------- */

.vxm-home-card__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 14px;
}

.vxm-home-card__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 11px 12px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: background var(--vxm-transition), color var(--vxm-transition), border-color var(--vxm-transition);
}

.vxm-home-card__btn svg {
    flex: 0 0 auto;
}

.vxm-home-card__btn--ghost {
    border-color: var(--vxm-secondary);
    background: transparent;
    color: var(--vxm-secondary);
}

.vxm-home-card__btn--ghost:hover {
    background: var(--vxm-secondary);
    color: var(--vxm-white);
}

.vxm-home-card__btn--solid {
    background: var(--vxm-secondary);
    color: var(--vxm-white);
}

.vxm-home-card__btn--solid:hover {
    background: var(--vxm-secondary-dark);
    color: var(--vxm-white);
}

/* --- Responsive --------------------------------------------------------- */

/* A dos columnas la tarjeta se estrecha y "Activity Level: Challenging" ya no
   cabe junto a la categoría: pasa a su propia línea. */
@media (max-width: 1100px) {
    .vxm-home-card__topbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .vxm-home-card__level {
        padding-left: 0;
        border-left: 0;
    }
}

@media (max-width: 600px) {
    .vxm-home-card__img {
        height: 210px;
    }

    .vxm-home-card__info {
        flex-direction: row;
        align-items: center;
    }

    .vxm-home-card__price-amount {
        font-size: 1.5rem;
    }

    /* Dos botones redondos no caben en un móvil estrecho sin partir el texto. */
    .vxm-home-card__actions {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   SHORTCODE [vxm_tours]

   La seccion que envuelve la fila cuando la tarjeta se usa fuera de la
   portada. No lleva .vxm-container a proposito: el shortcode va dentro del
   contenido de la pagina, que ya tiene su propio ancho y sus margenes.
   ========================================================================== */

.vxm-tours-shortcode {
    margin: var(--vxm-space-xl) 0;
}

.vxm-tours-shortcode .vxm-section-title,
.vxm-tours-shortcode .vxm-section-text {
    text-align: center;
}

/* --------------------------------------------------------------------------
   COLUMNAS REALMENTE IGUALES

   .vxm-tour-grid usa repeat(N, 1fr), y 1fr es la abreviatura de
   minmax(auto, 1fr). Ese "auto" impide que una columna baje del ancho minimo
   de su contenido, asi que la tarjeta con el texto mas largo reclama mas de
   un tercio y aplasta a las demas: la primera salia estrecha y partia
   "6 dias / 4 noches", "Tour valorado" y "5,200 m" en dos lineas cada uno.

   Con minmax(0, 1fr) los tercios son exactos y el texto se parte dentro de la
   tarjeta, que es lo que se quiere.

   Va acotado a .vxm-tours-shortcode porque .vxm-tour-grid tambien la usan el
   catalogo (archive-tour.php), las paginas de destino (page.php) y la portada
   (popular-tours.php), y ahi no se ha pedido tocar nada.

   OJO con los cortes responsive: estos selectores tienen mas especificidad
   (0,2,0) que los de .vxm-tour-grid en tour-components.css (0,1,0), asi que
   ganarian tambien dentro de sus media queries. Por eso hay que repetir aqui
   los tres cortes; si no, la fila se quedaria en 3 columnas en movil.
   -------------------------------------------------------------------------- */

.vxm-tours-shortcode .vxm-tour-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.vxm-tours-shortcode .vxm-tour-grid--cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.vxm-tours-shortcode .vxm-tour-grid--cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* La tarjeta es un item de grid: sin min-width 0 su contenido podria volver a
   empujar la columna por encima del tercio. */
.vxm-tours-shortcode .vxm-home-card {
    min-width: 0;
}

@media (max-width: 1024px) {
    .vxm-tours-shortcode .vxm-tour-grid--cols-4 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 960px) {
    .vxm-tours-shortcode .vxm-tour-grid,
    .vxm-tours-shortcode .vxm-tour-grid--cols-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 600px) {
    .vxm-tours-shortcode .vxm-tour-grid,
    .vxm-tours-shortcode .vxm-tour-grid--cols-2,
    .vxm-tours-shortcode .vxm-tour-grid--cols-4 {
        grid-template-columns: minmax(0, 1fr);
    }
}