/* =====================================================================
   IDENTIDAD VISUAL v2 — pantalla de LISTADO (muestra, Fase 2)
   ---------------------------------------------------------------------
   Minimalista, sobrio, base neutra, verde lima solo como acento de acción.
   Scopeado a html.ar-listings-page para NO afectar al resto de pantallas.
   Consume los tokens --ui-* de ar-tokens.css. Carga la última en search.blade
   para ganar a la cascada legacy (ar-public/ar-layout) en esta pantalla.
   No toca el slider vivo (.ar-card-slider-*), PhotoSwipe, menú ni JS.
   ===================================================================== */

/* ---- Contenedor y base tipográfica del contenido del listado --------- */
html.ar-listings-page .site-main {
    max-width: calc(var(--ui-container) + var(--ui-gutter) * 2);
    margin: 0 auto;
    padding: var(--ui-space-6) var(--ui-gutter) var(--ui-space-16);
    background: var(--ui-bg);
    font-family: var(--ui-font);
    color: var(--ui-text);
    font-size: var(--ui-text-base);
    line-height: var(--ui-leading-normal);
    -webkit-font-smoothing: antialiased;
}
html.ar-listings-page body { background: var(--ui-bg-subtle); }

/* ---- Breadcrumb ------------------------------------------------------ */
html.ar-listings-page .ar-breadcrumb {
    font-size: var(--ui-text-sm);
    color: var(--ui-text-muted);
    margin: 0 0 var(--ui-space-5);
    gap: var(--ui-space-2);
}
html.ar-listings-page .ar-breadcrumb a {
    color: var(--ui-text-soft);
    text-decoration: none;
    font-weight: var(--ui-w-medium);
}
html.ar-listings-page .ar-breadcrumb a:hover { color: var(--ui-accent); }

/* ---- Buscador superior (sobrio, no protagonista) -------------------- */
html.ar-listings-page .ar-top-search {
    background: var(--ui-bg);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius);
    box-shadow: var(--ui-shadow-sm);
    padding: var(--ui-space-3) var(--ui-space-4);
    margin-bottom: var(--ui-space-6);
}

/* ---- Cabecera de resultados: H1 + contador + orden ------------------ */
html.ar-listings-page .ar-results-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--ui-space-3);
    margin: 0 0 var(--ui-space-5);
    padding-bottom: var(--ui-space-4);
    border-bottom: 1px solid var(--ui-border);
}
html.ar-listings-page .ar-results-head h1,
html.ar-listings-page .ar-results-head .ar-results-title {
    font-size: var(--ui-text-2xl);
    font-weight: var(--ui-w-semi);
    letter-spacing: var(--ui-tracking-tight);
    color: var(--ui-text-strong);
    line-height: var(--ui-leading-tight);
    margin: 0;
}
html.ar-listings-page .ar-results-head .ar-results-count,
html.ar-listings-page .ar-results-head small {
    color: var(--ui-text-muted);
    font-weight: var(--ui-w-regular);
    font-size: var(--ui-text-sm);
}

/* ---- Selector de orden (input/select coherente) -------------------- */
html.ar-listings-page .ar-sort,
html.ar-listings-page select {
    height: var(--ui-control-h);
    font-size: var(--ui-text-md);
    color: var(--ui-text);
    background: var(--ui-bg);
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius);
    padding: 0 38px 0 14px;
    cursor: pointer;
    transition: border-color var(--ui-transition), box-shadow var(--ui-transition);
}
html.ar-listings-page .ar-sort:focus,
html.ar-listings-page select:focus { outline: none; border-color: var(--ui-accent); box-shadow: var(--ui-focus); }

/* ---- Inputs / filtros: chips de filtro ------------------------------ */
html.ar-listings-page .ar-filter-check {
    display: inline-flex;
    align-items: center;
    gap: var(--ui-space-2);
    border: 1px solid var(--ui-border-strong);
    border-radius: var(--ui-radius);          /* sobrio, coherente con cards (no pill) */
    padding: 8px 14px;
    font-size: var(--ui-text-sm);
    color: var(--ui-text-soft);
    background: var(--ui-bg);
    cursor: pointer;
    transition: all var(--ui-transition);
}

/* Caja de búsqueda superior y sus controles: radio sobrio (no pill).
   Valor real verificado: el legacy ya no gana; se baja a 8px y se cubren todos
   los controles internos para que ninguno quede pill. */
html.ar-listings-page .ar-top-search .ar-search-input-wrap,
html.ar-listings-page .ar-top-search .ar-search-input,
html.ar-listings-page .ar-top-search .ar-search-button-light,
html.ar-listings-page .ar-top-search .ar-ui-button,
html.ar-listings-page .ar-top-search .ar-filters-toggle,
html.ar-listings-page .ar-top-search button,
html.ar-listings-page .ar-top-search .ar-btn,
html.ar-listings-page .ar-search-input-wrap,
html.ar-listings-page .ar-search-input {
    border-radius: 8px !important;
}
html.ar-listings-page .ar-filter-modal { border-radius: var(--ui-radius-lg); }
html.ar-listings-page .ar-filter-modal__head,
html.ar-listings-page .ar-filter-modal__footer { border-radius: 0; }
html.ar-listings-page .ar-filter-check:hover { border-color: var(--ui-accent-line); background: var(--ui-bg-hover); }
html.ar-listings-page .ar-filter-check input:checked + *,
html.ar-listings-page .ar-filter-check--active {
    color: var(--ui-accent-strong);
}
html.ar-listings-page .ar-filter-check:has(input:checked) {
    background: var(--ui-accent-soft);
    border-color: var(--ui-accent-line);
    color: var(--ui-accent-strong);
    font-weight: var(--ui-w-medium);
}

/* ---- Lista de resultados (rejilla de cards) ------------------------- */
html.ar-listings-page .ar-results-list {
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-5);
}

/* =====================================================================
   CARD — móvil vertical (<768) / tablet+escritorio horizontal (≥768)
   ===================================================================== */
html.ar-listings-page .ar-list-card {
    display: grid;
    grid-template-columns: 1fr;           /* MÓVIL: vertical, foto arriba */
    gap: 0;
    background: var(--ui-bg);
    border: 1px solid var(--ui-border);
    border-radius: var(--ui-radius-lg);
    overflow: hidden;
    margin: 0;
    min-height: 0;
    box-shadow: var(--ui-shadow-sm);
    transition: border-color var(--ui-transition), box-shadow var(--ui-transition), transform var(--ui-transition);
}
html.ar-listings-page .ar-list-card:hover {
    border-color: var(--ui-border-strong);
    box-shadow: var(--ui-shadow-hover);
    transform: translateY(-2px);
}

/* Foto. La foto/visor del slider se constriñen al ANCHO de su celda (100%):
   el slider dejaba el contenedor más ancho que la columna (la flecha next se
   salía y la altura por aspect-ratio se inflaba). */
html.ar-listings-page .ar-card-photo-wrap {
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}
html.ar-listings-page .ar-card-photo {
    position: relative;
    display: block;
    overflow: hidden;
    width: 100% !important;
    max-width: 100% !important;
    background: var(--ui-bg-subtle);
    aspect-ratio: 16 / 10;                  /* MÓVIL: foto panorámica más compacta */
}
html.ar-listings-page .ar-card-photo .ar-card-slider-viewport {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
}
/* Cadena de alto del slider: cada nivel rellena el contenedor de la foto.
   Claves: el <picture> es display:inline por defecto (no resuelve height:100%
   del <img>), y un bloque legacy @media(>=768) bloqueaba .ar-card-photo img a
   236px (height/min/max !important). Se fuerza picture block + img sin tope. */
html.ar-listings-page .ar-card-photo .ar-card-slider-viewport,
html.ar-listings-page .ar-card-photo .ar-card-slider-track,
html.ar-listings-page .ar-card-photo .ar-card-slider-slide {
    height: 100% !important;
}
html.ar-listings-page .ar-card-photo picture {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}
html.ar-listings-page .ar-card-photo img,
html.ar-listings-page .ar-card-photo .ar-card-slider-image,
html.ar-listings-page .ar-card-photo [data-card-main-photo] {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: cover !important;
    display: block;
}

/* Flechas de foto: prev izq / next der, centradas. Visibles en hover (desktop)
   y siempre en táctil. (La regla legacy que las mostraba se perdió al consolidar
   las cards; aquí se restauran ambas.) */
html.ar-listings-page .ar-photo-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px; height: 34px;
    border: 0; border-radius: var(--ui-radius-pill);
    background: rgba(20, 24, 28, .48);
    color: #fff; font-size: 20px; line-height: 1;
    z-index: 3; cursor: pointer;
    opacity: 0;
    transition: opacity var(--ui-transition), background var(--ui-transition);
}
/* !important para ganar al bloque legacy @media(hover:none) que ponía
   left/right en .next y la sacaba de la foto (quedaba clipada). */
html.ar-listings-page .ar-photo-arrow.prev { left: 10px !important; right: auto !important; }
html.ar-listings-page .ar-photo-arrow.next { right: 10px !important; left: auto !important; }
html.ar-listings-page .ar-photo-arrow:hover { background: rgba(20, 24, 28, .7); }
html.ar-listings-page .ar-card-photo:hover .ar-photo-arrow,
html.ar-listings-page .ar-list-card:hover .ar-photo-arrow { opacity: 1; }
/* Táctil: ambas flechas SIEMPRE visibles sobre la foto */
@media (hover: none) {
    html.ar-listings-page .ar-photo-arrow,
    html.ar-listings-page .ar-card-photo .ar-photo-arrow.prev,
    html.ar-listings-page .ar-card-photo .ar-photo-arrow.next {
        opacity: 1 !important;
        background: rgba(20, 24, 28, .5) !important;
    }
}
html.ar-listings-page .ar-card-photo-count {
    background: rgba(20, 24, 28, .55); color: #fff;
    font-size: var(--ui-text-xs); border-radius: var(--ui-radius-pill);
    padding: 3px 9px;
}

/* Favorito sobre la foto */
html.ar-listings-page .ar-fav-button {
    position: absolute; top: var(--ui-space-3); right: var(--ui-space-3);
    width: 38px; height: 38px; border-radius: var(--ui-radius-pill);
    background: rgba(255, 255, 255, .92); border: 1px solid var(--ui-border);
    box-shadow: var(--ui-shadow-sm); color: var(--ui-text-soft);
    display: inline-flex; align-items: center; justify-content: center; z-index: 2;
    transition: color var(--ui-transition), transform var(--ui-transition);
}
html.ar-listings-page .ar-fav-button:hover { transform: scale(1.06); color: var(--ui-accent); }

/* Cuerpo */
html.ar-listings-page .ar-card-body {
    display: flex; flex-direction: column; gap: var(--ui-space-2);
    padding: var(--ui-space-4);
    min-width: 0;
}
html.ar-listings-page .ar-card-title {
    font-size: var(--ui-text-lg);
    font-weight: var(--ui-w-semi);
    color: var(--ui-text-strong);
    line-height: var(--ui-leading-tight);
    letter-spacing: var(--ui-tracking-tight);
    text-decoration: none;
}
html.ar-listings-page .ar-card-title:hover { color: var(--ui-accent); }
html.ar-listings-page .ar-card-location {
    font-size: var(--ui-text-sm);
    color: var(--ui-text-muted);
    margin: 0;
}
html.ar-listings-page .ar-card-description {
    font-size: var(--ui-text-base);
    color: var(--ui-text-soft);
    line-height: var(--ui-leading-relaxed);
    margin: var(--ui-space-1) 0 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
}
html.ar-listings-page .ar-card-features {
    display: flex; flex-wrap: wrap; gap: var(--ui-space-2) var(--ui-space-4);
    font-size: var(--ui-text-sm); color: var(--ui-text-soft);
    margin-top: var(--ui-space-1);
}
html.ar-listings-page .ar-card-features svg { color: var(--ui-text-muted); }

/* Badges */
html.ar-listings-page .ar-card-badges { display: flex; flex-wrap: wrap; gap: var(--ui-space-2); }
html.ar-listings-page .ar-card-badges > * {
    font-size: var(--ui-text-xs); font-weight: var(--ui-w-medium);
    color: var(--ui-accent-strong); background: var(--ui-accent-soft);
    border: 1px solid var(--ui-accent-line); border-radius: var(--ui-radius-pill);
    padding: 3px 10px;
}

/* Pie de card: precio + acción */
html.ar-listings-page .ar-card-bottom {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--ui-space-3); margin-top: auto; padding-top: var(--ui-space-2);
}
html.ar-listings-page .ar-card-price {
    font-size: var(--ui-text-xl); font-weight: var(--ui-w-bold);
    color: var(--ui-text-strong); line-height: 1;
}
html.ar-listings-page .ar-card-price small,
html.ar-listings-page .ar-card-price span { font-size: var(--ui-text-sm); font-weight: var(--ui-w-regular); color: var(--ui-text-muted); }
html.ar-listings-page .ar-card-price--empty { font-size: var(--ui-text-sm); font-weight: var(--ui-w-regular); color: var(--ui-text-muted); }

/* ---- ≥768: card HORIZONTAL (foto izquierda, contenido derecha) ------ */
@media (min-width: 768px) {
    html.ar-listings-page .ar-list-card {
        grid-template-columns: 260px minmax(0, 1fr);
    }
    /* La foto RELLENA su columna completa (sin hueco): el wrap es el item de
       grid (se estira al alto de la card) y la foto se posiciona absoluta
       cubriéndolo. Robusto frente a la resolución de % en items estirados y a
       cualquier altura legacy. */
    html.ar-listings-page .ar-card-photo-wrap {
        position: relative;
        min-height: 100%;
    }
    html.ar-listings-page .ar-card-photo {
        position: absolute !important;
        inset: 0 !important;
        height: auto !important;
        max-height: none !important;
        min-height: 0 !important;
        aspect-ratio: auto !important;
    }
    html.ar-listings-page .ar-card-body {
        padding: var(--ui-space-5) var(--ui-space-6);
        gap: var(--ui-space-3);
    }
    html.ar-listings-page .ar-card-description { -webkit-line-clamp: 3; }
}

@media (min-width: 1024px) {
    html.ar-listings-page .ar-list-card { grid-template-columns: 320px minmax(0, 1fr); }
    html.ar-listings-page .ar-card-body { padding: var(--ui-space-6) var(--ui-space-8); }
    html.ar-listings-page .ar-card-title { font-size: var(--ui-text-xl); }
}

/* =====================================================================
   AJUSTES MÓVIL (<768): compacto pero legible.
   - Márgenes laterales menores (aprovechar ancho)
   - Sin descripción (prioriza compacidad)
   - Card de menor altura (foto 16/10, padding y gaps reducidos)
   ===================================================================== */
@media (max-width: 767px) {
    /* Márgenes laterales reducidos (gutter real 8px) para aprovechar el ancho. */
    html.ar-listings-page .site-main {
        padding-left: 8px !important;
        padding-right: 8px !important;
        padding-top: var(--ui-space-3) !important;
    }
    html.ar-listings-page .ar-results-list { gap: var(--ui-space-3); }

    html.ar-listings-page .ar-results-list .ar-list-card .ar-card-description { display: none !important; }

    /* Card más baja: foto 16/9 (forzado: un legacy ≤1000 fijaba 255px). */
    html.ar-listings-page .ar-card-photo {
        aspect-ratio: 16 / 9 !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
    }
    html.ar-listings-page .ar-card-body {
        padding: 10px var(--ui-space-3);
        gap: 4px;
    }
    html.ar-listings-page .ar-card-title { font-size: var(--ui-text-base); line-height: 1.2; }
    html.ar-listings-page .ar-card-location { font-size: var(--ui-text-xs); }
    html.ar-listings-page .ar-card-features { font-size: var(--ui-text-xs); gap: 2px var(--ui-space-3); margin-top: 0; }
    html.ar-listings-page .ar-card-badges { display: none; }
    html.ar-listings-page .ar-card-bottom { padding-top: 2px; }
    html.ar-listings-page .ar-card-price { font-size: var(--ui-text-lg); }
}