/* =================================================================
   SHARED COMPONENTS
   Reusable pieces used by more than one page stylesheet, defined once
   here instead of being copied per page. Page sheets keep only their
   intentional deltas (e.g. a different top margin). Enqueued after
   base.css and before the page-design partials, so a page sheet can
   still override a component when it genuinely needs to.

   See css/README notes / CLAUDE.md. Add a block here only when the rule
   is *identical* across pages; keep purposeful differences in the page
   sheet (e.g. the hero treatments differ by design and are NOT shared).
   ================================================================= */

/* -----------------------------------------------------------------
   CARD GRID  (search results + accommodation category archives)
   The two listings use the same responsive card grid; only the
   wrapper class and the grid's top margin differ (the margin stays a
   per-page delta in each sheet). Card frame/image/title/price come
   from css/cards.css.
   ----------------------------------------------------------------- */
.lux-search-results-page .mphb_sc_search_results-wrapper,
.lux-accommodation-category-page .mphb_sc_rooms-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 2rem;
  align-items: start;
}

/* Drop the parent theme's stacked-list divider + margins between cards
   (the parent renders these as a vertical list with a top border/margin
   on each item). !important overrides that inline-ish parent rule. */
.lux-search-results-page .mphb_sc_search_results-wrapper .mphb-room-type,
.lux-accommodation-category-page .mphb_sc_rooms-wrapper .mphb-room-type {
  margin: 0 !important;
  display: flex;
  flex-direction: column;
}
.lux-search-results-page .mphb_sc_search_results-wrapper .mphb-room-type:not(:first-of-type),
.lux-accommodation-category-page .mphb_sc_rooms-wrapper .mphb-room-type:not(:first-of-type) {
  border-top: 0 !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}