/**
 * Checkit · fichas resultados responsive (móvil / tablet / smart)
 * Cargar AL FINAL en alojamientos, vuelos, traslados y catálogo.
 * Corrige grillas de 3 columnas que se salían de pantalla.
 */

:root {
  --ck-ink: #0f172a;
  --ck-navy: #0f2744;
  --ck-accent: #f26422;
  --ck-muted: #64748b;
  --ck-line: #e2e8f0;
  --ck-radius: 14px;
  --ck-shadow: 0 10px 30px -5px rgba(15, 39, 68, 0.08), 0 4px 12px -2px rgba(15, 39, 68, 0.04);
}

/* Contenedores: nunca scroll horizontal por fichas */
.page-alojamiento-resultados,
.page-vuelos-resultados,
.page-traslados-resultados,
.page-resultados,
.vdv-results-shell,
.vdv-avail-layout,
.c-aloj-layout,
.c-aloj-vdv-list,
.c-flight-results,
.c-resultados-zone,
.c-resultados__list {
  max-width: 100%;
  box-sizing: border-box;
}

.page-alojamiento-resultados *,
.page-vuelos-resultados *,
.page-traslados-resultados *,
.page-resultados * {
  box-sizing: border-box;
}

/* Tablet: foto + contenido más anchos (antes 160–200px se veía apretado) */
@media (max-width: 1100px) and (min-width: 861px) {
  .page-alojamiento-resultados .ck-result-card .ck-result-card__grid,
  .page-alojamiento-resultados .ck-hotel-card.ck-result-card .c-aloj-vdv-card__layout {
    grid-template-columns: minmax(220px, 38%) minmax(0, 1fr) minmax(168px, 200px) !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .page-alojamiento-resultados .vdv-avail-layout,
  .page-alojamiento-resultados .vdv-col-right,
  .page-alojamiento-resultados .c-aloj-vdv-list {
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .page-alojamiento-resultados article.ck-hotel-card.ck-result-card,
  .page-alojamiento-resultados article.ck-result-card {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Móvil + tablet chica: UNA columna (foto → info → precio) · fichas a casi full-bleed */
@media (max-width: 860px) {
  html,
  body.page-alojamiento-resultados,
  body.page-vuelos-resultados,
  body.page-traslados-resultados,
  body.page-resultados {
    overflow-x: clip;
  }

  .page-alojamiento-resultados .vdv-avail-layout,
  .page-alojamiento-resultados .c-aloj-layout,
  .page-alojamiento-resultados .vdv-col-right,
  .page-alojamiento-resultados .c-aloj-vdv-list,
  .page-vuelos-resultados .vdv-results-layout,
  .page-vuelos-resultados .c-flight-results,
  .page-traslados-resultados .vdv-results-layout {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: clip !important;
    padding-left: max(4px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(4px, env(safe-area-inset-right, 0px)) !important;
  }

  .page-alojamiento-resultados .c-aloj-main,
  .page-alojamiento-resultados .vdv-results-shell,
  .page-alojamiento-resultados .page-content,
  .page-alojamiento-resultados .c-resultados-zone {
    padding-left: max(4px, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(4px, env(safe-area-inset-right, 0px)) !important;
  }

  /* Alojamientos: stack vertical — casi full width en smart */
  .page-alojamiento-resultados article.ck-hotel-card.ck-result-card,
  .page-alojamiento-resultados article.ck-result-card,
  .page-alojamiento-resultados .ck-hotel-card {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 12px !important;
    border-radius: 16px !important;
    overflow: hidden !important;
  }

  .page-alojamiento-resultados .ck-result-card .ck-result-card__grid,
  .page-alojamiento-resultados .ck-hotel-card.ck-result-card .c-aloj-vdv-card__layout,
  .page-alojamiento-resultados .ck-hotel-card .c-aloj-vdv-card__layout,
  .page-alojamiento-resultados .ck-hotel-card.ck-result-card.c-aloj-vdv-card--compact .c-aloj-vdv-card__layout,
  .page-alojamiento-resultados .ck-hotel-card.ck-result-card.c-aloj-vdv-card--compare .c-aloj-vdv-card__layout,
  .page-alojamiento-resultados .ck-hotel-card.ck-result-card.c-aloj-vdv-card--map .c-aloj-vdv-card__layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 0 !important;
    min-height: 0 !important;
    height: auto !important;
  }

  .page-alojamiento-resultados .ck-result-card .ck-result-card__media,
  .page-alojamiento-resultados .ck-hotel-card .c-aloj-vdv-card__media,
  .page-alojamiento-resultados .ck-card-thumb-wrap {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    aspect-ratio: 16 / 9;
    border-radius: 0 !important;
  }

  .page-alojamiento-resultados .ck-result-card .ck-result-card__media img,
  .page-alojamiento-resultados .ck-hotel-card .c-aloj-vdv-card__media img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    object-fit: cover !important;
  }

  .page-alojamiento-resultados .ck-result-card .ck-result-card__body,
  .page-alojamiento-resultados .ck-hotel-card .c-aloj-vdv-card__main {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    padding: 18px 18px 14px !important;
    overflow: visible !important;
  }

  .page-alojamiento-resultados .ck-result-card .ck-hotel-title,
  .page-alojamiento-resultados .ck-result-card .c-extended__title,
  .page-alojamiento-resultados .ck-result-card .dev-hotel-title-name,
  .page-alojamiento-resultados .ck-result-card .ck-location-text {
    max-width: 100% !important;
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal !important;
    -webkit-line-clamp: unset !important;
  }

  .page-alojamiento-resultados .ck-result-card .dev-hotel-title-name {
    display: block !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .page-alojamiento-resultados .ck-result-card .ck-result-card__aside,
  .page-alojamiento-resultados .ck-hotel-card .c-aloj-vdv-card__price {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    border-left: 0 !important;
    border-top: 1px solid var(--ck-line) !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: flex-end !important;
    justify-content: space-between !important;
    text-align: left !important;
    padding: 14px 18px 18px !important;
    background: #fff !important;
  }

  .page-alojamiento-resultados .ck-result-card .ck-result-card__price-block {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    align-items: stretch !important;
  }

  .page-alojamiento-resultados .ck-result-card .ck-price-amount,
  .page-alojamiento-resultados .ck-result-card .c-price__primary {
    font-size: clamp(20px, 5.8vw, 24px) !important;
    overflow-wrap: anywhere;
  }

  .page-alojamiento-resultados .ck-result-card .ck-btn-select,
  .page-alojamiento-resultados .ck-result-card .c-extended__button {
    width: 100% !important;
    min-height: 46px !important;
  }

  .page-alojamiento-resultados .ck-provider-badge {
    left: 12px !important;
    bottom: 12px !important;
    padding: 6px 12px !important;
    font-size: 0.72rem !important;
  }

  .page-alojamiento-resultados .ck-card-rooms-matrix,
  .page-alojamiento-resultados .ck-amenities-row,
  .page-alojamiento-resultados .ck-room-highlight {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .page-alojamiento-resultados .ck-card-room-type li {
    flex-wrap: wrap;
    gap: 4px 8px;
  }

  /* Vuelos */
  .page-vuelos-resultados .c-flight-card,
  .page-vuelos-resultados .c-flight-skel {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 12px !important;
    padding: 14px !important;
    overflow: hidden !important;
  }

  .page-vuelos-resultados .c-flight-card__logo {
    width: 72px !important;
    min-width: 72px !important;
  }

  .page-vuelos-resultados .c-flight-card__body,
  .page-vuelos-resultados .c-flight-card__price {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  .page-vuelos-resultados .c-flight-card__body h3,
  .page-vuelos-resultados .c-flight-card__body p,
  .page-vuelos-resultados .c-flight-card__cities,
  .page-vuelos-resultados .c-flight-card__times {
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal !important;
  }

  .page-vuelos-resultados .c-flight-card__price {
    grid-column: 1 / -1 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    text-align: left !important;
  }

  .page-vuelos-resultados .c-flight-card__price .c-button {
    flex: 1 1 100% !important;
    width: 100% !important;
    min-height: 44px !important;
  }

  .page-vuelos-resultados .ck-flight-summary__layout,
  .page-vuelos-resultados .ck-flight-selected__body {
    grid-template-columns: 1fr !important;
  }

  /* Traslados / shell genérico */
  .page-traslados-resultados .c-transfer-card,
  .vdv-results-shell .c-extended-card {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .vdv-results-shell .c-extended-card__price {
    grid-column: 1 / -1 !important;
    width: 100% !important;
  }

  /* Catálogo paquetes */
  .page-resultados .c-result-card,
  .c-resultados-zone__grid .c-result-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }
}

/* Smartphones angostos */
@media (max-width: 480px) {
  .page-alojamiento-resultados .ck-result-card .ck-result-card__body,
  .page-alojamiento-resultados .ck-hotel-card .c-aloj-vdv-card__main,
  .page-alojamiento-resultados .ck-result-card .ck-result-card__aside {
    padding: 12px !important;
  }

  .page-alojamiento-resultados .ck-result-card .ck-hotel-title,
  .page-alojamiento-resultados .ck-result-card .c-extended__title {
    font-size: 15px !important;
  }

  .page-vuelos-resultados .c-flight-card {
    padding: 12px !important;
    border-radius: var(--ck-radius) !important;
  }
}