/* =================================================================
   SEARCH RESULTS PAGE  (body.lux-search-results-page)
   Brings the [mphb_search_results] listing in line with the front
   page, accommodation, and payment pages: warm paper canvas, a
   pre-filled search bar in place of the plain title, a responsive
   grid of floating cards, a tamed "summary + amenities" line, and the
   total price folded into each card's Book button.

   Card frame / image / title / price come from css/cards.css and
   css/buttons.css — this file adds the page-level layout and the bits
   cards.css doesn't reach (search bar, info line, cart, reserve
   section). The Book-button price is moved in by js/search-results.js.
   Enqueued standalone (filemtime cache-busting) — see functions.php.
   ================================================================= */

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

/* The plain "Search Results" page title is replaced by the hero + bar. */
.lux-search-results-page .entry-header { display: none; }

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

/* Kill the article's top gap so the hero sits flush under the header.
   Full-width pages get `.hentry { margin-top: 3.75em }` from the parent
   theme (the home page avoids it via `.post-thumbnail + .main-wrapper`,
   which doesn't apply here). Horizontal padding is kept for the cards. */
.lux-search-results-page .content-area.full-width .site-main > .hentry {
  margin-top: 0;
  padding-top: 0;
}

/* -----------------------------------------------------------------
   HERO  (full-bleed image at the top, like the home page)
   Injected before the search bar; the bar overlaps its lower edge.
   ----------------------------------------------------------------- */
.lux-search-results-page .lux-search-hero {
  position: relative;
  min-height: 42vh;
  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;   /* flush under the header (the .hentry gap is zeroed above) */
}
.lux-search-results-page .lux-search-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(22,40,42,.20), rgba(22,40,42,0) 55%);
}

/* -----------------------------------------------------------------
   PRE-FILLED SEARCH BAR (top of page)
   [mphb_availability_search] laid out as one horizontal bar; the
   field styling (heights, rounding, focus) comes from css/search.css.
   ----------------------------------------------------------------- */
.lux-search-results-page .lux-search-bar {
  position: relative;
  z-index: 2;
  max-width: 1040px;
  margin: 1.25rem auto 2.5rem;
}
/* When a hero precedes it, pull the bar up so it overlaps the image. */
.lux-search-results-page .lux-search-hero + .lux-search-bar {
  margin-top: -5rem;
}
.lux-search-results-page .lux-search-bar .mphb_sc_search-wrapper { margin: 0; }
.lux-search-results-page .lux-search-bar .mphb_sc_search-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 1rem 1.25rem;
  margin: 0;
  padding: 1.25rem 1.5rem;
  background: var(--lux-card);
  border: 1px solid var(--lux-line);
  border-radius: 8px;
  box-shadow: var(--lux-shadow);
}
.lux-search-results-page .lux-search-bar .mphb_sc_search-form > p { margin: 0; }
.lux-search-results-page .lux-search-bar .mphb_sc_search-check-in-date,
.lux-search-results-page .lux-search-bar .mphb_sc_search-check-out-date { flex: 1 1 180px; }
.lux-search-results-page .lux-search-bar .mphb_sc_search-adults,
.lux-search-results-page .lux-search-bar .mphb_sc_search-children { flex: 0 1 130px; }
.lux-search-results-page .lux-search-bar .mphb_sc_search-submit-button-wrapper {
  flex: 0 0 auto;
  margin-left: auto;
}
.lux-search-results-page .lux-search-bar .mphb_sc_search-form input,
.lux-search-results-page .lux-search-bar .mphb_sc_search-form select { width: 100%; }
.lux-search-results-page .lux-search-bar .mphb_sc_search-form label {
  display: block;
  margin-bottom: .4rem;
}
.lux-search-results-page .lux-search-bar .mphb_sc_search-form br { display: none; }
.lux-search-results-page .lux-search-bar .mphb-required-fields-tip { display: none; }

/* -----------------------------------------------------------------
   RESULTS INFO  (count headline + date-range caption)
   ----------------------------------------------------------------- */
.lux-search-results-page .mphb_sc_search_results-info {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  text-align: center;
  margin: 0 0 2rem;
}
.lux-search-results-page .lux-results-count {
  font-family: "Playfair Display", serif;
  font-size: 1.6rem;
  line-height: 1.2;
  color: var(--lux-primary);
}
.lux-search-results-page .lux-results-count strong {
  font-weight: 600;
  color: var(--lux-accent);
}
.lux-search-results-page .lux-results-dates {
  font-family: "Poppins", sans-serif;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--lux-muted);
}

/* -----------------------------------------------------------------
   GRID OF RESULT CARDS
   The wrapper holds the info line, the reservation cart, then the
   room-type cards. Grid the cards; span the info line / cart / errors.
   ----------------------------------------------------------------- */
.lux-search-results-page .mphb_sc_search_results-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 2rem;
  align-items: start;
  margin-top: 1rem;
}
.lux-search-results-page .mphb_sc_search_results-info,
.lux-search-results-page .mphb-reservation-cart,
.lux-search-results-page .mphb-errors-wrapper,
.lux-search-results-page .mphb-recommendation,
.lux-search-results-page .mphb-recommendation-title {
  grid-column: 1 / -1;
}

/* Drop the theme's stacked-list divider/margins between cards. */
.lux-search-results-page .mphb_sc_search_results-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) {
  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), but drop the page-heading rules that try to
   centre/uppercase it (the title also carries `entry-title`).
   The bar itself is cards.css's `border-bottom` on the inline-block
   <h2>; the stray centred bar was a heading `::after`, killed here.
   ----------------------------------------------------------------- */
.lux-search-results-page .mphb_sc_search_results-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-top: 1.5rem;
  margin-bottom: .6rem;
  padding-bottom: .5rem;
}
.lux-search-results-page .mphb_sc_search_results-wrapper .mphb-room-type-title::after {
  content: none;
  display: none;
}

/* -----------------------------------------------------------------
   SUMMARY (under the title) + AMENITIES (after the excerpt)
   ----------------------------------------------------------------- */
.lux-search-results-page .lux-search-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: .78rem;
  letter-spacing: .02em;
  color: #9b958c;
  /* left/right inset (2rem) comes from the cards.css `> *` rule */
  margin-top: 0 !important;
  margin-bottom: .7rem !important;
}
.lux-search-results-page .lux-search-summary-sep {
  color: var(--lux-line);
  margin: 0 .5rem;
}

.lux-search-results-page .lux-search-amenities {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;                 /* don't stretch the first tag taller */
  gap: .4rem .5rem;
  padding: 0;
  margin: .2rem 2rem 1.2rem !important;   /* match the card's 2rem inset */
}
.lux-search-results-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;
  margin: 0;                               /* neutralise parent `ul li + li` top margin */
  line-height: 1;
}

/* -----------------------------------------------------------------
   PRICE — the amount + trip length are folded into the Book button by
   js/search-results.js, which then removes this loose line. The rule
   below only styles the no-JS fallback ("£… for N nights").
   ----------------------------------------------------------------- */
.lux-search-results-page .mphb-regular-price {
  margin: 0 2rem .5rem !important;
}
.lux-search-results-page .mphb-price-period {
  border-bottom: 0;
  cursor: default;
}
/* The amount + nights inside the Book button: "Book · £1,269 (4 nights)" */
.lux-btn-price { font-weight: 600; }
.lux-btn-price::before {
  content: "·";
  margin: 0 .45em;
  opacity: .6;
}
.lux-btn-nights {
  font-weight: 400;
  font-size: .92em;
  opacity: .8;
  margin-left: .4em;
}

/* -----------------------------------------------------------------
   PER-CARD RESERVE SECTION  (Book / quantity / Remove / Confirm).
   The mphb JS toggles .mphb-rooms-added to reveal Remove + Confirm —
   we only reskin; the plugin's show/hide rules still apply.
   ----------------------------------------------------------------- */
.lux-search-results-page .mphb-reserve-room-section {
  margin: auto 2rem 1.4rem;   /* margin-top:auto pins the Book button to the card foot */
  display: flex;
  flex-direction: column;
  gap: .75rem;
}
.lux-search-results-page .mphb-rooms-quantity-wrapper {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0;
  font-size: .85rem;
  color: var(--lux-muted);
}
.lux-search-results-page .mphb-rooms-quantity {
  height: 44px;
  width: auto;
  min-width: 72px;
  padding: 0 .8em;
}
.lux-search-results-page .mphb-reserve-room-section .mphb-book-button,
.lux-search-results-page .mphb-reserve-room-section .mphb-confirm-reservation {
  width: 100%;
  text-align: center;
  margin: 0;
}
.lux-search-results-page .mphb-confirm-reservation {
  background-color: var(--lux-accent);
  border-color: var(--lux-accent);
}
.lux-search-results-page .mphb-confirm-reservation:hover,
.lux-search-results-page .mphb-confirm-reservation:focus {
  background-color: var(--lux-accent-deep);
  border-color: var(--lux-accent-deep);
}
.lux-search-results-page .mphb-rooms-reservation-message-wrapper {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  margin: 0;
}
.lux-search-results-page .mphb-remove-from-reservation {
  float: none !important;
  font-family: "Poppins", sans-serif;
  font-size: .66rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--lux-muted);
}
.lux-search-results-page .mphb-remove-from-reservation:hover { color: var(--lux-primary); }
.lux-search-results-page .mphb-rooms-reservation-message {
  margin: 0;
  font-size: .82rem;
  color: var(--lux-accent-deep);
}

/* -----------------------------------------------------------------
   RESERVATION CART  (running summary above the grid).
   Hidden while empty — the plugin JS reveals it (total + Confirm)
   once a room is added.
   ----------------------------------------------------------------- */
.lux-search-results-page .mphb-reservation-cart.mphb-empty-cart {
  display: none !important;
}
.lux-search-results-page .mphb-reservation-cart {
  background: var(--lux-card);
  border: 1px solid var(--lux-line);
  border-radius: 3px;
  box-shadow: var(--lux-shadow);
  padding: 1.1rem 1.5rem;
  margin: 0 0 .5rem !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
}
.lux-search-results-page .mphb-reservation-cart .mphb-reservation-details {
  float: none !important;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .25rem 1.25rem;
  margin: 0;
}
.lux-search-results-page .mphb-reservation-cart p { margin: 0; }
.lux-search-results-page .mphb-cart-total-price-title {
  font-family: "Poppins", sans-serif;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--lux-muted);
  margin-right: .4rem;
}
.lux-search-results-page .mphb-cart-total-price-value {
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: 1.4rem;
  color: var(--lux-accent);
}
.lux-search-results-page .mphb-reservation-cart .mphb-confirm-reservation {
  float: none !important;
  width: auto;
  margin: 0;
}

/* -----------------------------------------------------------------
   NO RESULTS / ERRORS
   ----------------------------------------------------------------- */
.lux-search-results-page .mphb-errors-wrapper {
  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-search-results-page .mphb_sc_search_results-wrapper {
    grid-template-columns: 1fr;
  }
  .lux-search-results-page .lux-search-hero { min-height: 30vh; }
  .lux-search-results-page .lux-search-hero + .lux-search-bar { margin-top: -2.5rem; }
  .lux-search-results-page .lux-search-bar { margin-left: 1rem; margin-right: 1rem; }
  .lux-search-results-page .lux-search-bar .mphb_sc_search-form { padding: 1.1rem; }
  .lux-search-results-page .lux-search-bar .mphb_sc_search-submit-button-wrapper {
    flex: 1 1 100%;
    margin-left: 0;
  }
  .lux-search-results-page .lux-search-bar .mphb_sc_search-form input[type="submit"] { width: 100%; }
  .lux-search-results-page .mphb-reservation-cart {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .lux-search-results-page .mphb-reservation-cart .mphb-reservation-details {
    justify-content: center;
  }
}