/* ==========================================================================
   Category listings (Hotels, Villas, Hideaways, and the other catalogues)

   A restyle only. The markup and the wording are unchanged; every rule here
   targets classes the view already had.

   Brings the listings onto the same footing as the rest of the site: the
   sandy beige ground, an Amatic SC heading in brand purple, and open
   listings - rounded photos with the text sitting directly on the page,
   rather than each entry boxed in a panel.
   ========================================================================== */

.listing {
  --ls-purple: #7f3f98;
  --ls-ink:    #2b2530;
  --ls-soft:   #6d6577;
  --ls-line:   #e7e2ec;
  --ls-sand:   #faf7f2;

  background-color: var(--ls-sand);
  padding: 0 0 72px;
  color: var(--ls-ink);
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ---------------------------------------------------------------- head -- */

.listing h1 {
  margin: 0;
  padding: 72px 0 10px;
  font-family: "Amatic SC", cursive;
  font-size: clamp(3rem, 7vw, 5rem);
  font-weight: 700;
  line-height: 1.02;
  color: var(--ls-purple);
}

/* The optional intro line under the title. */
.listing .index > .row > p {
  max-width: 780px;
  margin: 0 auto !important;
  padding-bottom: 40px !important;
  color: var(--ls-soft);
  font-size: 1.0625rem;
  line-height: 1.7;
}

/* ---------------------------------------------------------------- grid -- */

.listing .index-grid {
  display: grid;
  /* Three per row rather than four: the cards are open now and the names are
     larger, so they need the extra width to breathe. */
  grid-template-columns: repeat(3, 1fr);
  gap: 30px 28px;
}

/* The view emits Bootstrap columns; inside a grid they are just cells. */
.listing .index-grid > [class*="col-"] {
  width: auto;
  max-width: none;
  flex: none;
  padding: 0;
}

/* ------------------------------------------------------------ listings -- */

/* Open listings: no border, no white panel, no shadow. The photo carries the
   structure and the text sits directly on the page, as on Where to Eat. */
.listing .index-grid > div {
  display: flex;
  flex-direction: column;
  background: transparent;
  border: 0;
  transition: transform .18s ease;
}
.listing .index-grid > div:hover { transform: translateY(-3px); }

/* The photo takes the rounding the box used to provide, at a consistent
   shape so a grid of mixed source ratios still lines up. */
.listing .index-grid img.gallery-4 {
  display: block;
  width: 100% !important;
  height: auto !important;      /* the site CSS pins this per breakpoint */
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 0;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(43, 37, 48, .05), 0 6px 16px rgba(43, 37, 48, .07);
  transition: box-shadow .18s ease;
}
@supports not (aspect-ratio: 4 / 3) {
  .listing .index-grid img.gallery-4 { height: 230px !important; }
}
.listing .index-grid > div:hover img.gallery-4 {
  box-shadow: 0 4px 10px rgba(43, 37, 48, .09), 0 16px 34px rgba(43, 37, 48, .13);
}

.listing .index-grid article { padding: 14px 2px 0; }

.listing .index-grid article h3 {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.22;
  letter-spacing: -.01em;
  color: var(--ls-ink);
  transition: color .16s ease;
}
.listing .index-grid a:hover h3 { color: var(--ls-purple); }

.listing .index-grid article p {
  margin: 6px 0 0;
  color: var(--ls-soft);
  font-size: .9375rem;
  line-height: 1.55;
}

/* Season rates, readable rather than fine print. */
.listing .index-grid ul {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--ls-ink);
}
.listing .index-grid ul li { display: flex !important; gap: 9px; margin-top: 5px; }
.listing .index-grid ul li span { width: auto !important; }
.listing .index-grid ul li span:first-child {
  flex: 0 0 auto;
  color: var(--ls-purple);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding-top: 3px;
}
.listing .index-grid ul li span:last-child { font-weight: 700; }

.listing a { text-decoration: none; }

/* ---------------------------------------------------------- pagination -- */

.pagination-links {
  padding: 8px 0 56px;
  background-color: #faf7f2;
}
.pagination-links a,
.pagination-links strong {
  display: inline-block;
  min-width: 38px;
  margin: 0 3px;
  padding: 8px 10px;
  border: 1px solid #e7e2ec;
  border-radius: 10px;
  background: #fff;
  color: #2b2530;
  font-size: .875rem;
  text-decoration: none;
}
.pagination-links a:hover { border-color: #7f3f98; color: #7f3f98; }
.pagination-links strong { background: #7f3f98; border-color: #7f3f98; color: #fff; }

/* ---------------------------------------------------------- responsive -- */

@media (max-width: 1000px) { .listing .index-grid { grid-template-columns: repeat(2, 1fr); gap: 26px 22px; } }
@media (max-width: 560px)  {
  .listing .index-grid { grid-template-columns: 1fr; gap: 26px; }
  .listing h1 { padding-top: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .listing .index-grid > div { transition: none; }
  .listing .index-grid > div:hover { transform: none; }
}