/* =================================================================
   ACCOMMODATION CATEGORY ARCHIVE  (body.lux-accommodation-category-page)
   /accommodation-category/villas , /suites , /city-flats — taxonomy
   archives for `mphb_room_type_category`.

   The parent theme renders these via archive.php -> content.php, which
   dumps each room type's FULL content (gallery + description) in a tall
   stack — far too heavy. The child theme's
   taxonomy-mphb_room_type_category.php replaces that with a hero + a
   responsive grid of the SAME luxury cards used on the search-results
   page, via the [mphb_rooms] shortcode (.mphb_sc_rooms-wrapper).

   Card frame / image / title / price come from css/cards.css +
   css/buttons.css; this file adds the page-level layout (hero, grid)
   and reskins the summary line + amenity chips (reused, classes shared
   with the search page: lux-search-summary / lux-search-amenities).
   Enqueued standalone (filemtime cache-busting) — see functions.php.
   ================================================================= */

/* ---- Canvas: warm paper, floating cards (matches the front page) ---- */
.lux-accommodation-category-page .main-wrapper,
.lux-accommodation-category-page .content-area,
.lux-accommodation-category-page .site-main {
  background: transparent !important;
}

/* Guard against the full-bleed hero introducing a horizontal scrollbar. */
body.lux-accommodation-category-page { overflow-x: hidden; }

/* -----------------------------------------------------------------
   HERO  (full-bleed image with the category name overlaid)
   Mirrors the home / search hero so the page reads as part of the set.
   ----------------------------------------------------------------- */
.lux-accommodation-category-page .lux-cat-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 46vh;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* Break out of the centered content column to span the viewport. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 0;
}
.lux-accommodation-category-page .lux-cat-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(22,40,42,.10), rgba(22,40,42,.55));
}
.lux-accommodation-category-page .lux-cat-hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem 2.6rem;
  color: #fff;
  text-align: center;
}
/* Same luxury heading treatment as the front-page section titles
   (.lux-section__title in layout.css): uppercase, wide tracking, weight
   500, brass underline. Kept white + shadowed for legibility on the photo. */
.lux-accommodation-category-page .lux-cat-title {
  font-weight: 500;
  font-size: clamp(1.7rem, 3.4vw, 2.5rem);
  text-transform: uppercase;
  letter-spacing: .22em;
  line-height: 1.2;
  margin: 0;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0,0,0,.45);
}
.lux-accommodation-category-page .lux-cat-title::after {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  margin: .7em auto 0;
  background: var(--lux-accent);
}
.lux-accommodation-category-page .lux-cat-desc {
  max-width: 640px;
  margin: .9rem auto 0;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255,255,255,.92);
  text-shadow: 0 1px 10px rgba(0,0,0,.3);
}
.lux-accommodation-category-page .lux-cat-desc p:last-child { margin-bottom: 0; }

/* No-image fallback header: a clean centered title on warm paper. */
.lux-accommodation-category-page .lux-cat-header {
  text-align: center;
  margin: 2.8em 0 1.4em;
}
.lux-accommodation-category-page .lux-cat-header .lux-cat-title {
  color: var(--lux-primary);
  text-shadow: none;
}
.lux-accommodation-category-page .lux-cat-header .lux-cat-desc {
  color: var(--lux-muted);
  text-shadow: none;
  margin-top: .8rem;
}

/* -----------------------------------------------------------------
   LISTING — center the grid in the same 1100px column as the hero.
   ----------------------------------------------------------------- */
.lux-accommodation-category-page .lux-cat-listing {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2.4rem 1.5rem 1rem;
}

/* GRID OF CARDS — identical to the search-results grid. */
.lux-accommodation-category-page .mphb_sc_rooms-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 2rem;
  align-items: start;
  margin-top: 0;
}

/* Drop the theme's stacked-list divider/margins between cards. */
.lux-accommodation-category-page .mphb_sc_rooms-wrapper .mphb-room-type {
  margin: 0 !important;
  display: flex;
  flex-direction: column;
}
.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;
}

/* CARD TITLE — keep the site-wide brass underline (left-aligned, the
   width of the words); drop the page-heading rules that try to
   centre/uppercase it (the title also carries `entry-title`).

   NOTE specificity: the card title carries `entry-title`, and the parent
   theme has `body.archive .site-main .entry-title { margin:0; padding:.71em 0 0 }`
   (0,3,1) — it matches here (this is a taxonomy *archive*) but NOT on the
   search page (a regular page), which is why the title lost its 2rem inset
   and read flush-left. The `body … .site-main …` prefix below (0,4,1) beats
   it and restores the same 2rem inset + spacing as every other card child. */
body.lux-accommodation-category-page .site-main .mphb_sc_rooms-wrapper .mphb-room-type-title {
  display: inline-block;
  text-align: left;
  text-transform: none;
  letter-spacing: .01em;
  border-bottom: 1px solid var(--lux-accent);
  margin: 1.5rem 2rem .6rem;   /* sides = the 2rem card inset (cards.css `> *`) */
  padding: 0 0 .5rem;          /* brass-underline gap; kills the parent's top pad */
}
body.lux-accommodation-category-page .site-main .mphb_sc_rooms-wrapper .mphb-room-type-title::after {
  content: none;
  display: none;
}

/* SUMMARY (under the title) + AMENITIES (after the excerpt).
   Same classes the search page emits — reused via lux_render_search_*. */
.lux-accommodation-category-page .lux-search-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: .78rem;
  letter-spacing: .02em;
  color: #9b958c;
  margin-top: 0 !important;
  margin-bottom: .7rem !important;
}
.lux-accommodation-category-page .lux-search-summary-sep {
  color: var(--lux-line);
  margin: 0 .5rem;
}
.lux-accommodation-category-page .lux-search-amenities {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem .5rem;
  padding: 0;
  margin: .2rem 2rem 1.2rem !important;   /* match the card's 2rem inset */
}
.lux-accommodation-category-page .lux-search-amenity {
  font-family: "Poppins", sans-serif;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--lux-muted);
  background: var(--lux-paper);
  border: 1px solid var(--lux-line);
  border-radius: 2px;
  padding: .35em .7em;
  line-height: 1;
}

/* PRICE — pin it to the foot of the card, above the View button.
   ("Prices start at:" stays — no dates are chosen on a browse page.) */
.lux-accommodation-category-page .mphb_sc_rooms-wrapper .mphb-regular-price {
  margin-top: auto;
}

/* VIEW DETAILS button — full-width foot of the card. */
.lux-accommodation-category-page .mphb_sc_rooms-wrapper .mphb-view-details-button {
  width: 100%;
  text-align: center;
}

/* NO RESULTS message. */
.lux-accommodation-category-page .mphb-rooms-not-found {
  text-align: center;
  color: var(--lux-muted);
  background: var(--lux-card);
  border: 1px solid var(--lux-line);
  border-radius: 3px;
  padding: 1.5rem;
}

/* -----------------------------------------------------------------
   RESPONSIVE
   ----------------------------------------------------------------- */
@media (max-width: 48em) {
  .lux-accommodation-category-page .mphb_sc_rooms-wrapper {
    grid-template-columns: 1fr;
  }
  .lux-accommodation-category-page .lux-cat-hero { min-height: 34vh; }
  .lux-accommodation-category-page .lux-cat-listing { padding: 1.8rem 1rem 1rem; }
}