/* Esperanza frontend responsive card consistency, 13 October 2026.
   Scoped to listing/showcase grids only. Hero layouts and editorial sections
   retain their existing design. */

/* Allow every card to shrink within its grid track, including long names. */
:where(.curated-journey-grid, .nairobi-excursion-grid,
       .destination-tab-content, .accommodation-grid, .journal-editorial-grid,
       .tours-results-grid, .hotel-results-grid, .destination-results-grid,
       .experience-catalog-grid, .holiday-deal-grid, .wildlife-grid,
       .home-holiday-deal-grid) > * {
  min-width: 0;
  max-width: 100%;
}
:where(.journey-card, .curated-journey-card, .nairobi-excursion-card, .destination-card,
       .accommodation-card, .story-card--editorial, .tour-result-card,
       .hotel-result-card, .destination-result-card,
       .experience-catalog-card, .holiday-deal-card, .wildlife-card) {
  min-width: 0;
  overflow-wrap: anywhere;
}
/* The original tours stylesheet switched from one very wide card to two
   suddenly at 880px. Let actual available width determine the columns. */
.tours-results-grid, .hotel-results-grid,
.destination-results-grid, .experience-catalog-grid, .holiday-deal-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 268px), 1fr));
  align-items: stretch;
}
/* Never stretch a lone listing result across an excessively wide column. */
.tours-results-grid > .tour-result-card,
.hotel-results-grid > .hotel-result-card,
.destination-results-grid > .destination-result-card,
.experience-catalog-grid > .experience-catalog-card,
.holiday-deal-grid > .holiday-deal-card {
  width: 100%;
  max-width: 500px;
  justify-self: center;
}

@media (max-width: 980px) {
  .tours-results-grid, .hotel-results-grid, .destination-results-grid,
  .experience-catalog-grid, .holiday-deal-grid {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  }
  .journey-card-media, .journey-media, .home-holiday-deal-media, .market-package-media,
  .nairobi-excursion-media, .accommodation-media, .destination-card-media {
    height: auto;
    aspect-ratio: 16 / 10;
  }
  .journey-card-media img, .journey-media img, .home-holiday-deal-media img,
  .nairobi-excursion-media img,
  .accommodation-media img, .destination-card-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .journey-card h3, .curated-journey-card h3, .home-holiday-deal-card h3, .nairobi-excursion-card h3,
  .accommodation-card h3, .destination-card h3 {
    font-size: clamp(19px, 2.5vw, 22px);
  }
}

/* A phone should show one readable, compact card per row, not an oversized
   600px panel, while small tablet grids can remain two columns. */
@media (max-width: 680px) {
  .curated-journey-grid, .nairobi-excursion-grid,
  .accommodation-grid, .journal-editorial-grid,
  .tours-results-grid, .hotel-results-grid,
  .destination-results-grid, .experience-catalog-grid,
  .holiday-deal-grid, .wildlife-grid,
  .home-holiday-deal-grid, .market-package-grid, .market-destination-grid {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }
  .curated-journey-grid > .curated-journey-card,
  .nairobi-excursion-grid > .nairobi-excursion-card,
  .accommodation-grid > .accommodation-card,
  .journal-editorial-grid > .story-card,
  .tours-results-grid > .tour-result-card,
  .hotel-results-grid > .hotel-result-card,
  .destination-results-grid > .destination-result-card,
  .experience-catalog-grid > .experience-catalog-card,
  .holiday-deal-grid > .holiday-deal-card,
  .wildlife-grid > .wildlife-card,
  .home-holiday-deal-grid > .home-holiday-deal-card,
  .market-package-grid > .market-package-card,
  .market-destination-grid > .market-destination-card {
    width: 100%;
    max-width: 450px;
    justify-self: center;
  }
  /* Homepage destination cards have their own stronger historical rules. */
  .destination-showcase-section .destination-tab-content {
    grid-template-columns: minmax(0, 1fr) !important;
    justify-items: center;
  }
  .destination-showcase-section .destination-tab-content > .destination-card {
    max-width: 450px !important;
    height: auto !important;
  }
  .destination-showcase-section .destination-card-media {
    height: auto !important;
    aspect-ratio: 16 / 10;
  }
  .market-destination-card {
    height: auto !important;
    aspect-ratio: 4 / 3;
    max-height: 300px;
  }
  .destination-showcase-section .destination-card-content {
    min-height: 0 !important;
  }
  .journey-media, .home-holiday-deal-media,
  .journey-card-media, .journey-media, .home-holiday-deal-media, .market-package-media,
  .nairobi-excursion-media, .accommodation-media, .destination-card-media,
  .tour-result-media, .hotel-result-media,
  .experience-catalog-card-media, .holiday-deal-card-image {
    height: auto;
    aspect-ratio: 16 / 10;
  }
  :where(.journey-card, .curated-journey-card, .nairobi-excursion-card, .destination-card,
         .accommodation-card, .tour-result-card, .hotel-result-card,
         .destination-result-card, .experience-catalog-card,
         .holiday-deal-card) :is(h2,h3) {
    font-size: clamp(19px, 5vw, 22px);
    line-height: 1.25;
  }
  /* Unpictured records stay compact text cards, with no ghost image. */
  :where(.journey-card, .curated-journey-card, .nairobi-excursion-card, .destination-card,
         .accommodation-card, .tour-result-card, .hotel-result-card,
         .destination-result-card, .experience-catalog-card,
         .holiday-deal-card).has-no-cover :is(.journey-card-media,
         .nairobi-excursion-media, .destination-card-media,
         .accommodation-media, .tour-result-media, .hotel-result-media,
         .destination-result-media, .experience-catalog-card-media,
         .holiday-deal-card-image) {
    display: none !important;
  }
}

@media (max-width: 420px) {
  .curated-journey-grid, .nairobi-excursion-grid,
  .tours-results-grid, .hotel-results-grid,
  .destination-results-grid, .experience-catalog-grid,
  .accommodation-grid, .holiday-deal-grid {
    gap: 14px;
  }
  :where(.journey-card, .nairobi-excursion-card, .accommodation-card,
         .tour-result-card, .hotel-result-card, .destination-result-card,
         .experience-catalog-card, .holiday-deal-card) :is(.card-body,
         .curated-card-body, .nairobi-excursion-body,
         .accommodation-body, .tour-result-body, .hotel-result-body,
         .destination-result-body, .experience-catalog-card-body,
         .holiday-deal-card-body) {
    padding: 15px;
  }
}