/* -----------------------------------------------------------------
   12. COMPACT SUITES GRID
   The suites are a cluster of cottages on one plot, so they shouldn't
   eat the same space as the big villa cards. Group them under a single
   "Kalami" heading + intro paragraph, then list them as small cards in
   a tight grid. The villas keep the full-size treatment.

   TO ACTIVATE — two steps in the builder:
   1. Put ALL the suites in ONE accommodation/rooms shortcode (filter to
      the Suites category) so they share a single wrapper and flow into
      the grid together. Above it, add a Text block with the "Kalami"
      heading and the intro sentence.
   2. Give that suites row a class so this CSS only touches the suites,
      not the villas: in WPBakery, edit the Row → General → "Extra class
      name" and enter:  lux-suites
   ----------------------------------------------------------------- */

/* Lay the suite cards out as a tight, wrapping grid (3-up → 2-up → 1-up).
   align-items:start sizes each card to its content (no stretched empty
   space below the price). display:grid wins even if cards were stacking. */
.lux-suites .mphb_sc_rooms-wrapper {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: 1.5rem;
  margin-top: 1.25rem;
}
@media (max-width: 62em) { .lux-suites .mphb_sc_rooms-wrapper { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 40em) { .lux-suites .mphb_sc_rooms-wrapper { grid-template-columns: 1fr; } }

/* Neutralise the stacked-list divider the theme adds between rooms */
.lux-suites .mphb_sc_rooms-wrapper .mphb-room-type:not(:first-of-type) {
  border-top: 0 !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Shrink each suite card; softly rounded corners suit the smaller size. */
.lux-suites .mphb-room-type {
  margin: 0 !important;
  padding-bottom: 1.5rem;
  border-radius: 0;
}
/* Tighter inner inset than the villa cards */
.lux-suites .mphb-room-type > * {
  margin-left: 1.25rem !important;
  margin-right: 1.25rem !important;
}
.lux-suites .mphb-room-type > *:has(img) {
  margin: 0 !important;
}

/* A consistent photo height keeps the grid tidy. Force it through the
   gallery/slider wrappers too, since these suites use galleries. */
.lux-suites .mphb-room-type > *:has(img),
.lux-suites .mphb-room-type .mphb-flexslider,
.lux-suites .mphb-room-type .flex-viewport,
.lux-suites .mphb-room-type ul.slides,
.lux-suites .mphb-room-type ul.slides > li {
  height: 210px !important;
}
.lux-suites .mphb-room-type img {
  height: 210px !important;
  width: 100% !important;
  object-fit: cover !important;
}

/* Smaller name */
.lux-suites .mphb-room-type-title {
  font-size: 1.2rem !important;
  margin-top: 1.1rem !important;
  margin-bottom: .4rem !important;
  padding-bottom: .4rem !important;
}

/* Hide the per-suite description — the shared intro covers it */
.lux-suites .mphb-room-type-excerpt { display: none !important; }

/* Guests · bedrooms · bathrooms summary under the title (printed by
   lux_loop_room_summary). Used on both the Suites and Villas cards;
   matches the single accommodation page styling. */
.lux-suites .lux-loop-summary,
.lux-villas .lux-loop-summary {
  display:    flex;
  flex-wrap:  wrap;
  align-items: center;
  font-size:  .72rem;
  color:      #9b958c;   /* a touch lighter than --lux-muted */
  /* only set top/bottom; the section's `> *` rule keeps the left/right inset
     (1.25rem suites, 2rem villas) so the line starts level with the title. */
  margin-top:    0 !important;
  margin-bottom: .2rem !important;
}
.lux-suites .lux-loop-summary-sep,
.lux-villas .lux-loop-summary-sep {
  color:  var(--lux-line);
  margin: 0 .4rem;
}

/* Location line (pin + place name) under the summary. */
.lux-suites .lux-loop-location,
.lux-villas .lux-loop-location {
  display:     flex;
  align-items: center;
  gap:         .3rem;
  font-size:   .72rem;
  color:       #9b958c;
  margin-top:    0 !important;
  margin-bottom: .2rem !important;
}
.lux-suites .lux-loop-location__icon,
.lux-villas .lux-loop-location__icon {
  width:      12px;
  height:     12px;
  flex:       0 0 auto;
  color:      var(--lux-accent);   /* brass pin */
}

/* Compact price — only set top/bottom; the > * rule handles left/right */
.lux-suites .mphb-price { font-size: 1.15rem; }
.lux-suites .mphb-regular-price {
  margin-top: .4rem !important;
  margin-bottom: 0 !important;
}

/* BEDROOMS + PERSONS as a small icon row.
   Requires details="true" on the suites shortcode AND the data to exist as
   MotoPress attributes. Slugs assumed: "bedrooms" and "persons".
   To create "persons": Accommodation → Attributes → Add New → title "Persons",
   then add terms like "2-4", "4-6", "6-8". Assign the right term to each suite.
   If your slugs differ, inspect a card (<li class="mphb-room-type-XXXX">)
   and update the selectors below. */
.lux-suites .mphb-loop-room-type-attributes {
  display: flex !important;
  flex-wrap: wrap;
  gap: .35rem 1.2rem;
  padding: 0;
  list-style: none;
  width: auto;
  margin-top: .6rem !important;
  margin-bottom: .1rem !important;
}
/* Hide every attribute by default… */
.lux-suites .mphb-loop-room-type-attributes > li { display: none !important; }
/* …then show only bedrooms + persons */
.lux-suites .mphb-loop-room-type-attributes > li.mphb-room-type-bedrooms,
.lux-suites .mphb-loop-room-type-attributes > li.mphb-room-type-persons {
  display: inline-flex !important;
  align-items: center;
  color: var(--lux-muted);
  font-size: .85rem;
  padding: 0;
}
.lux-suites .mphb-loop-room-type-attributes .mphb-attribute-title { display: none !important; }
.lux-suites .mphb-loop-room-type-attributes .mphb-attribute-value { display: inline !important; }

/* Brass icons before each value */
.lux-suites .mphb-room-type-bedrooms::before,
.lux-suites .mphb-room-type-persons::before {
  font-family: FontAwesome !important;
  font-weight: normal;
  color: var(--lux-accent);
  display: inline !important;
  width: auto !important;
  padding: 0 .4rem 0 0 !important;
  text-align: left !important;
}
.lux-suites .mphb-room-type-bedrooms::before { content: "\f236" !important; }  /* bed   */
.lux-suites .mphb-room-type-persons::before  { content: "\f0c0" !important; }  /* users */

/* Append " persons" text after the value so "2-4" reads as "2-4 persons" */
.lux-suites .mphb-room-type-persons .mphb-attribute-value::after {
  content: " persons";
}

/* Suites don't need a button — the whole card is clickable. Hide it here
   only; villas and city flats keep their View Details button. */
.lux-suites .mphb-view-details-button,
.lux-suites .mphb-view-details-button-wrapper {
  display: none !important;
}