/*
 * Le Bon Repos — front page styles.
 * Loaded only on the front page via bonrepos-enhancements.php.
 */

/* ----- Reset Safar's container constraints on the home page so sections can be full-bleed ----- */
.lbr-home-page .site-content-inner.safar-container { max-width: none; padding: 0; }
.lbr-home-page .safar-main-content-inner { margin: 0; }
.lbr-home-page #primary { padding: 0; }
.lbr-home-page .safar-single-page { margin: 0; }
.lbr-home-page .post-thumbnail { display: none; } /* the auto-rendered featured image — replaced by hero */
.lbr-home-page .entry-content { margin: 0; padding: 0; }
.lbr-home-page .entry-content > p:empty { display: none; }
.lbr-home-page .entry-content > h2.entry-title { display: none; } /* hide page title */

/* ----- Type & color tokens (match Safar palette) ----- */
.lbr-section { padding: 90px 24px; }
.lbr-section--dark { background: #0d1f1c; color: #f4ebde; }
.lbr-section--soft { background: #FAF5F1; }
.lbr-container { max-width: 1180px; margin: 0 auto; }
.lbr-eyebrow {
  display: inline-block;
  letter-spacing: 4px;
  font-size: 12px;
  text-transform: uppercase;
  color: #C97A4F;
  margin: 0 0 14px;
  font-weight: 600;
}
.lbr-section--dark .lbr-eyebrow { color: #E8C896; }
.lbr-section h2 { font-family: Marcellus, Georgia, serif; font-size: 44px; line-height: 1.15; margin: 0 0 22px; color: #362618; }
.lbr-section--dark h2 { color: #fff; }
.lbr-section h3 { font-family: Marcellus, Georgia, serif; font-size: 28px; line-height: 1.2; margin: 0 0 14px; color: #362618; }
.lbr-section p { font-size: 17px; line-height: 1.7; color: #555E63; }
.lbr-section--dark p { color: #f4ebde; }
.lbr-section .lbr-lead { font-size: 19px; max-width: 760px; margin-left: auto; margin-right: auto; }

/* ----- Buttons ----- */
.lbr-btn {
  display: inline-block;
  padding: 14px 30px;
  margin: 6px 4px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 4px;
  border: 2px solid transparent;
  transition: all .2s ease;
  cursor: pointer;
}
.lbr-btn--primary { background: #C97A4F; color: #fff; border-color: #C97A4F; }
.lbr-btn--primary:hover { background: #B16638; border-color: #B16638; color: #fff; }
.lbr-btn--ghost { background: transparent; color: #fff; border-color: #fff; }
.lbr-btn--ghost:hover { background: #fff; color: #362618; }
.lbr-btn--dark { background: #362618; color: #fff; border-color: #362618; }
.lbr-btn--dark:hover { background: #1b1209; color: #fff; }
.lbr-link { color: #C97A4F; font-weight: 600; text-decoration: none; border-bottom: 2px solid #C97A4F; padding-bottom: 2px; }
.lbr-link:hover { color: #B16638; border-color: #B16638; }

/* ----- HERO ----- */
.lbr-hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: #0d1f1c center/cover no-repeat;
  color: #fff;
  padding: 80px 24px;
}
.lbr-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13,31,28,.45) 0%, rgba(13,31,28,.7) 100%);
}
.lbr-hero__inner { position: relative; max-width: 940px; }
.lbr-hero__eyebrow {
  letter-spacing: 6px;
  font-size: 13px;
  text-transform: uppercase;
  color: #E8C896;
  margin: 0 0 18px;
  font-weight: 600;
}
.lbr-hero h1 {
  font-family: Marcellus, Georgia, serif;
  color: #fff;
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.05;
  margin: 0 0 22px;
  font-weight: 400;
  text-shadow: 0 2px 30px rgba(0,0,0,.3);
}
.lbr-hero__sub {
  font-size: clamp(17px, 2vw, 21px);
  line-height: 1.55;
  max-width: 760px;
  margin: 0 auto 36px;
  color: #f4ebde;
  font-style: italic;
}
.lbr-hero__cta { margin-top: 8px; }
.lbr-hero__scroll {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: #fff;
  opacity: .7;
}
.lbr-hero__scroll::after {
  content: '';
  display: block;
  width: 1px;
  height: 40px;
  margin: 10px auto 0;
  background: #fff;
  animation: lbrScroll 2s ease-in-out infinite;
}
@keyframes lbrScroll {
  0%,100% { transform: scaleY(0); transform-origin: top; }
  50% { transform: scaleY(1); transform-origin: top; }
  50.01% { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ----- Promise strip (separate section, below booking, NO overlap) ----- */
.lbr-promises {
  background: #fff;
  padding: 60px 24px;
  border-bottom: 1px solid #EAEAEA;
}
.lbr-promises__grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 30px;
  text-align: center;
}
.lbr-promise {
  padding: 10px;
}
.lbr-promise__icon {
  font-size: 34px;
  margin-bottom: 14px;
  color: #C97A4F;
  display: block;
  line-height: 1;
}
.lbr-promise__title {
  font-family: Marcellus, Georgia, serif;
  font-size: 18px;
  font-weight: 400;
  color: #362618;
  margin: 0 0 6px;
  letter-spacing: .2px;
}
.lbr-promise__sub { font-size: 14px; color: #777; margin: 0; line-height: 1.5; }

/* ----- BOOKING WIDGET (floats over hero bottom) ----- */
.lbr-booking {
  max-width: 1100px;
  margin: -80px auto 0;
  background: #fff;
  padding: 36px 36px 26px;
  box-shadow: 0 14px 50px rgba(54,38,24,.15);
  border-radius: 10px;
  position: relative;
  z-index: 5;
}
.lbr-booking__title { text-align: center; margin: 0 0 22px; font-family: Marcellus, Georgia, serif; font-size: 28px; color: #362618; }
.lbr-booking .mphb_sc_search-form {
  display: grid;
  grid-template-columns: 1fr 1fr 0.7fr 0.7fr auto;
  gap: 14px;
  align-items: end;
}
.lbr-booking .mphb-required-fields-tip { display: none; }
.lbr-booking .mphb_sc_search-form > p { margin: 0; }
.lbr-booking .mphb_sc_search-form label {
  display: block;
  font-size: 11px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: #777;
  margin-bottom: 6px;
  font-weight: 600;
}
.lbr-booking .mphb_sc_search-form label abbr { display: none; }
.lbr-booking .mphb_sc_search-form input,
.lbr-booking .mphb_sc_search-form select {
  width: 100%;
  padding: 12px 14px;
  font-size: 15px;
  border: 1px solid #EAEAEA;
  border-radius: 6px;
  background: #fff;
  color: #362618;
  font-family: inherit;
}
.lbr-booking .mphb_sc_search-form input:focus,
.lbr-booking .mphb_sc_search-form select:focus { outline: 2px solid #C97A4F; outline-offset: -1px; }
.lbr-booking .mphb_sc_search-form input[type="submit"] {
  background: #C97A4F;
  color: #fff;
  border-color: #C97A4F;
  padding: 14px 28px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
}
.lbr-booking .mphb_sc_search-form input[type="submit"]:hover { background: #B16638; }

/* ----- WELCOME (about teaser) ----- */
.lbr-welcome { text-align: center; }
.lbr-welcome p { max-width: 800px; margin-left: auto; margin-right: auto; }

/* ----- FEATURED ROOMS (mphb_rooms shortcode override) -----
 * The shortcode renders Safar's wrapped MPHB markup:
 *   .mphb_sc_rooms-wrapper > .mphb-room-type
 *      > .safar-mphb-rooms-images-wrapper  (flexslider gallery)
 *      > .safar-mphb-rooms-info-wrapper    (title, attrs, price, CTAs)
 * Parent theme forces these two wrappers to width:50% (horizontal split).
 * On the home page we want a 3-up grid of vertical cards instead, so we
 * cancel the 50/50 split and re-style every internal piece to a clean,
 * scannable booking card. Mobile collapses to 1 column.
 */
.lbr-rooms { padding: 90px 24px; }
.lbr-rooms__head { text-align: center; max-width: 800px; margin: 0 auto 60px; }

/* Grid container — 3 columns on desktop, drops by breakpoint below.
 * Body.home fallback scope: if the .lbr-rooms wrapper got stripped from
 * the Elementor section (it lives only in markup, not in any template),
 * the rules still apply on the homepage. grid-auto-rows:1fr makes every
 * row exactly equal height, so cards in the same row are guaranteed to
 * have aligned tops AND bottoms regardless of content length. */
.lbr-rooms .mphb_sc_rooms-wrapper.mphb-room-types,
body.home .mphb_sc_rooms-wrapper.mphb-room-types {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  grid-auto-rows: 1fr !important;
  gap: 32px !important;
  max-width: 1240px;
  margin: 0 auto;
  align-items: stretch !important;
}

/* Card shell — !important on display/direction overrides parent theme's
 * `display: flex; flex-wrap: wrap; align-items: start` which would
 * otherwise lay out the image and info wrappers as flex-row and let the
 * image collapse to its natural width. */
.lbr-rooms .mphb_sc_rooms-wrapper .mphb-room-type,
body.home .mphb_sc_rooms-wrapper .mphb-room-type {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  /* align-self:stretch + height:100% + justify-content:flex-start are
   * belt-and-suspenders: the card fills its grid cell vertically AND
   * anchors its first child (the image) at the top. align-self alone
   * isn't enough on Chrome when a sibling grid item drives the row
   * height — without explicit height the shorter cards keep their
   * intrinsic content height and stick to the row's bottom edge. */
  align-self: stretch !important;
  height: 100% !important;
  min-height: 100% !important;
  justify-content: flex-start !important;
  background: #fff;
  border: 1px solid #EAEAEA;
  border-radius: 14px;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  position: relative;
  isolation: isolate;
}

/* Lock the image wrapper to the top and the info wrapper directly
 * underneath — regardless of which order the parent theme emits them
 * in the HTML — so the image is always the first visible block. */
.lbr-rooms .mphb_sc_rooms-wrapper .mphb-room-type .safar-mphb-rooms-images-wrapper { order: 0; }
.lbr-rooms .mphb_sc_rooms-wrapper .mphb-room-type .safar-mphb-rooms-info-wrapper   { order: 1; }
.lbr-rooms .mphb_sc_rooms-wrapper .mphb-room-type > *:first-child { margin-top: 0 !important; }
.lbr-rooms .mphb_sc_rooms-wrapper .mphb-room-type:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 45px rgba(54,38,24,.14);
  border-color: transparent;
}

/* ===== Cancel parent theme's 50/50 horizontal split ===== */
.lbr-rooms .mphb_sc_rooms-wrapper .mphb-room-type .safar-mphb-rooms-images-wrapper,
.lbr-rooms .mphb_sc_rooms-wrapper .mphb-room-type .safar-mphb-rooms-info-wrapper {
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block;
}

/* ===== Image / gallery zone =====
 * `flex-shrink: 0` keeps the image from being squeezed when one card's
 * info column is taller (e.g. a 2-line title) than its siblings.
 * `!important` on every height inside the FlexSlider tree overrides the
 * inline `height: XXXpx` that flexslider's `smoothHeight` writes on init.
 */
/* Position-absolute strategy: the wrapper is the only element with a
 * fixed height; the gallery and every nested layer fill it absolutely.
 * This makes FlexSlider's smoothHeight inline `style="height: …px"`
 * irrelevant — the visible box is always 280px. */
.lbr-rooms .mphb_sc_rooms-wrapper .safar-mphb-rooms-images-wrapper {
  position: relative;
  height: 280px !important;
  min-height: 280px !important;
  max-height: 280px !important;
  flex: 0 0 280px !important;
  overflow: hidden;
  background: #f4ebde;
}
.lbr-rooms .mphb_sc_rooms-wrapper .mphb-room-type-images,
.lbr-rooms .mphb_sc_rooms-wrapper .mphb-flexslider-gallery-wrapper.mphb-gallery-main-slider {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.lbr-rooms .mphb_sc_rooms-wrapper .mphb-flexslider-gallery-wrapper.mphb-gallery-main-slider .flex-viewport,
.lbr-rooms .mphb_sc_rooms-wrapper .mphb-flexslider-gallery-wrapper.mphb-gallery-main-slider .slides,
.lbr-rooms .mphb_sc_rooms-wrapper .mphb-flexslider-gallery-wrapper.mphb-gallery-main-slider .slides > li {
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
  border-radius: 0 !important;
}
.lbr-rooms .mphb_sc_rooms-wrapper .mphb-flexslider-gallery-wrapper .gallery-icon {
  height: 100% !important;
  display: block;
}
.lbr-rooms .mphb_sc_rooms-wrapper .mphb-flexslider-gallery-wrapper .gallery-item {
  border-radius: 0 !important;
  padding: 0 !important;
}
.lbr-rooms .mphb_sc_rooms-wrapper .mphb-flexslider-gallery-wrapper .gallery-item a {
  display: block;
  height: 100% !important;
  width: 100%;
}
.lbr-rooms .mphb_sc_rooms-wrapper .mphb-flexslider-gallery-wrapper img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .8s ease;
}
.lbr-rooms .mphb_sc_rooms-wrapper .mphb-room-type:hover .mphb-flexslider-gallery-wrapper .flex-active-slide img {
  transform: scale(1.05);
}

/* Hide the secondary thumbnail strip — keep only the dot pagination */
.lbr-rooms .mphb_sc_rooms-wrapper .mphb-gallery-thumbnail-slider { display: none !important; }

/* Carousel arrows — smaller, subtler, only show on hover */
.lbr-rooms .mphb_sc_rooms-wrapper .flex-direction-nav a {
  width: 36px !important;
  height: 36px !important;
  line-height: 36px !important;
  background: rgba(255,255,255,.92) !important;
  opacity: 0;
  transform: translateY(-50%);
  margin: 0 !important;
  top: 50%;
  box-shadow: 0 4px 12px rgba(0,0,0,.15);
  transition: opacity .25s ease, background-color .25s ease;
}
.lbr-rooms .mphb_sc_rooms-wrapper .mphb-room-type:hover .flex-direction-nav a { opacity: 1; }
.lbr-rooms .mphb_sc_rooms-wrapper .flex-direction-nav a:hover { background: #C97A4F !important; }
.lbr-rooms .mphb_sc_rooms-wrapper .flex-direction-nav a.flex-prev { inset-inline-start: 12px !important; }
.lbr-rooms .mphb_sc_rooms-wrapper .flex-direction-nav a.flex-next { inset-inline-end: 12px !important; }
.lbr-rooms .mphb_sc_rooms-wrapper .flex-direction-nav a::before { font-size: 18px !important; color: #362618; }
.lbr-rooms .mphb_sc_rooms-wrapper .flex-direction-nav a:hover::before { color: #fff; }

/* Floating price badge — top-right of the image */
.lbr-rooms .mphb_sc_rooms-wrapper .safar-mphb-rooms-images-wrapper::after { content: none; }

/* ===== Info zone ===== */
.lbr-rooms .mphb_sc_rooms-wrapper .safar-mphb-rooms-info-wrapper {
  padding: 24px 24px 22px !important;
  display: flex !important;
  flex-direction: column;
  flex: 1;
  gap: 0;
}

/* Title — the markup is `<h2 class="mphb-room-type-title"><a class="mphb-room-type-title">…`
 * so the class is on BOTH elements. Scope min-height to the h2 only;
 * style colour/decoration on the inner anchor. */
.lbr-rooms .mphb_sc_rooms-wrapper h2.mphb-room-type-title {
  margin: 0 0 8px !important;
  padding: 0 !important;
  font-family: Marcellus, Georgia, serif;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 400;
  min-height: calc(22px * 1.25 * 2); /* reserve 2 lines for cross-card alignment */
  display: flex;
  align-items: flex-start;
}
.lbr-rooms .mphb_sc_rooms-wrapper h2.mphb-room-type-title a.mphb-room-type-title {
  color: #362618;
  text-decoration: none;
  background: none;
  font-size: inherit;
  font-family: inherit;
  font-weight: inherit;
  line-height: inherit;
  min-height: 0;
  display: inline;
  padding: 0;
  margin: 0;
}
.lbr-rooms .mphb_sc_rooms-wrapper h2.mphb-room-type-title a.mphb-room-type-title:hover { color: #C97A4F; }

/* Excerpt — also reserved so the chip row sits at a consistent Y */
.lbr-rooms .mphb_sc_rooms-wrapper .safar-excerpt-content {
  margin: 0 0 18px;
  padding: 0;
  min-height: calc(14px * 1.55 * 2); /* 2 lines */
}
.lbr-rooms .mphb_sc_rooms-wrapper .safar-excerpt-content p {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: #777;
  font-style: italic;
}

/* Hide the "Détails" heading — it's redundant inside a card */
.lbr-rooms .mphb_sc_rooms-wrapper .mphb-room-type-details-title { display: none !important; }

/* ===== Attribute list → compact icon chips =====
 * Keep capacity, bedrooms, bathrooms, size only. Hide facilities, view, bed type
 * (those are visible on the room detail page).
 */
.lbr-rooms .mphb_sc_rooms-wrapper .mphb-loop-room-type-attributes {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 18px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
}
.lbr-rooms .mphb_sc_rooms-wrapper .mphb-loop-room-type-attributes li {
  list-style: none !important;
  margin: 0 !important;
  padding: 6px 12px !important;
  background: #FAF5F1;
  border-radius: 999px;
  font-size: 13px;
  line-height: 1.2;
  color: #362618;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  position: static !important;
}
.lbr-rooms .mphb_sc_rooms-wrapper .mphb-loop-room-type-attributes li::before { display: none !important; }

/* Hide attributes we don't surface in the card preview */
.lbr-rooms .mphb_sc_rooms-wrapper .mphb-loop-room-type-attributes .mphb-room-type-facilities,
.lbr-rooms .mphb_sc_rooms-wrapper .mphb-loop-room-type-attributes .mphb-room-type-view,
.lbr-rooms .mphb_sc_rooms-wrapper .mphb-loop-room-type-attributes .mphb-room-type-bed-type {
  display: none !important;
}

/* Inside-chip text */
.lbr-rooms .mphb_sc_rooms-wrapper .mphb-loop-room-type-attributes .mphb-attribute-title {
  font-weight: 500;
  color: #362618;
  font-size: 13px;
  margin-right: 2px;
}
.lbr-rooms .mphb_sc_rooms-wrapper .mphb-loop-room-type-attributes .mphb-attribute-value {
  font-weight: 700;
  color: #362618;
}
/* Replace verbose labels with short pictograms */
.lbr-rooms .mphb_sc_rooms-wrapper .mphb-loop-room-type-attributes li .mphb-attribute-title { font-size: 0; }
.lbr-rooms .mphb_sc_rooms-wrapper .mphb-loop-room-type-attributes li .mphb-attribute-title::before {
  font-size: 14px;
  margin-right: 4px;
  display: inline-block;
}
.lbr-rooms .mphb_sc_rooms-wrapper .mphb-room-type-total-capacity .mphb-attribute-title::before { content: '👥'; }
.lbr-rooms .mphb_sc_rooms-wrapper .mphb-room-type-bedrooms .mphb-attribute-title::before { content: '🛏'; }
.lbr-rooms .mphb_sc_rooms-wrapper .mphb-room-type-bathrooms .mphb-attribute-title::before { content: '🚿'; }
.lbr-rooms .mphb_sc_rooms-wrapper .mphb-room-type-size .mphb-attribute-title::before { content: '📐'; }

/* ===== Price + CTAs =====
 * Price block is intentionally hidden (rates are shown only inside the
 * Cubilis booking engine, never on the public site). Keep the styling
 * below for future re-enabling but force display:none for now. */
.lbr-rooms .mphb_sc_rooms-wrapper .mphb-regular-price,
.lbr-rooms .mphb_sc_rooms-wrapper .mphb-price-for-dates {
  display: none !important;
}
.lbr-rooms .mphb_sc_rooms-wrapper .mphb-regular-price--legacy {
  margin: auto 0 14px !important;
  padding: 14px 0 0 !important;
  border-top: 1px solid #EAEAEA;
  font-size: 14px;
  color: #777;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
}
.lbr-rooms .mphb_sc_rooms-wrapper .mphb-regular-price strong {
  display: none; /* "Prix à partir de:" — clutter, the period below conveys this */
}
.lbr-rooms .mphb_sc_rooms-wrapper .mphb-price {
  font-family: Marcellus, Georgia, serif;
  font-size: 28px;
  color: #C97A4F;
  font-weight: 600;
  letter-spacing: -.5px;
  white-space: nowrap;
}
.lbr-rooms .mphb_sc_rooms-wrapper .mphb-price .mphb-currency {
  font-size: 22px;
  margin-left: 1px;
  font-weight: 500;
}
.lbr-rooms .mphb_sc_rooms-wrapper .mphb-price-period {
  font-size: 13px;
  color: #777;
  font-style: italic;
}

/* CTA row — Réserver becomes the primary, View Details secondary */
.lbr-rooms .mphb_sc_rooms-wrapper .mphb-view-details-button-wrapper,
.lbr-rooms .mphb_sc_rooms-wrapper .mphb-to-book-btn-wrapper {
  margin: 0 !important;
  padding: 0 !important;
}
.lbr-rooms .mphb_sc_rooms-wrapper .mphb-to-book-btn-wrapper {
  order: 1; /* show first visually below price */
  /* margin-top:auto makes this element absorb the card's spare vertical
   * space, so the CTA pair stays anchored to the bottom across cards
   * with different excerpt lengths. Previously the hidden price block
   * played this role (margin: auto 0 14px); since we removed the price,
   * we move that flex-spacer responsibility onto the book button. */
  margin-top: auto !important;
  margin-bottom: 8px !important;
}
.lbr-rooms .mphb_sc_rooms-wrapper .mphb-view-details-button-wrapper { order: 2; }
.lbr-rooms .mphb_sc_rooms-wrapper .mphb-to-book-btn-wrapper br { display: none; }
.lbr-rooms .mphb_sc_rooms-wrapper .mphb-to-book-btn-wrapper form { margin: 0; display: block; }

/* Primary button — Réserver */
.lbr-rooms .mphb_sc_rooms-wrapper .mphb-book-button {
  display: block !important;
  width: 100%;
  background: #C97A4F !important;
  color: #fff !important;
  border: 2px solid #C97A4F !important;
  border-radius: 6px !important;
  padding: 13px 22px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
  text-align: center;
  font-family: inherit;
}
.lbr-rooms .mphb_sc_rooms-wrapper .mphb-book-button:hover {
  background: #B16638 !important;
  border-color: #B16638 !important;
}

/* Secondary button — Voir les détails */
.lbr-rooms .mphb_sc_rooms-wrapper .mphb-view-details-button {
  display: block !important;
  width: 100%;
  background: transparent !important;
  color: #362618 !important;
  border: 2px solid #EAEAEA !important;
  border-radius: 6px !important;
  padding: 11px 22px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none !important;
  text-align: center;
  transition: border-color .2s ease, color .2s ease, background-color .2s ease;
}
.lbr-rooms .mphb_sc_rooms-wrapper .mphb-view-details-button:hover {
  border-color: #362618 !important;
  background: #362618 !important;
  color: #fff !important;
}

/* ===== Responsive ===== */
@media (max-width: 1100px) {
  .lbr-rooms .mphb_sc_rooms-wrapper.mphb-room-types {
    grid-template-columns: repeat(2, 1fr);
    gap: 26px;
  }
}
@media (max-width: 700px) {
  .lbr-rooms { padding: 60px 18px; }
  .lbr-rooms__head { margin-bottom: 38px; }
  .lbr-rooms .mphb_sc_rooms-wrapper.mphb-room-types {
    grid-template-columns: 1fr;
    gap: 22px;
  }
  .lbr-rooms .mphb_sc_rooms-wrapper .safar-mphb-rooms-info-wrapper {
    padding: 20px 18px 18px !important;
  }
  .lbr-rooms .mphb_sc_rooms-wrapper .mphb-room-type-title { font-size: 20px; }
  .lbr-rooms .mphb_sc_rooms-wrapper .mphb-price { font-size: 24px; }
  /* Always-visible carousel arrows on touch where :hover doesn't fire */
  .lbr-rooms .mphb_sc_rooms-wrapper .flex-direction-nav a { opacity: 1; }
}

/* ----- RESTAURANT ----- */
.lbr-restaurant {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 70px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 100px 24px;
}
.lbr-restaurant__img img { width: 100%; height: auto; border-radius: 10px; box-shadow: 0 18px 50px rgba(54,38,24,.16); }
.lbr-restaurant__hours { list-style: none; padding: 0; margin: 0 0 30px; font-size: 16px; color: #362618; }
.lbr-restaurant__hours li { padding: 10px 0; border-bottom: 1px solid #EAEAEA; display: flex; justify-content: space-between; gap: 16px; }
.lbr-restaurant__hours li:last-child { border-bottom: none; }
.lbr-restaurant__hours strong { font-weight: 700; }

/* ----- MULLERTHAL parallax ----- */
.lbr-mullerthal {
  position: relative;
  background: #0d1f1c center/cover fixed;
  color: #fff;
  padding: 130px 24px;
  text-align: center;
  overflow: hidden;
}
.lbr-mullerthal::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,31,28,.55) 0%, rgba(13,31,28,.75) 100%); }
.lbr-mullerthal__inner { position: relative; max-width: 880px; margin: 0 auto; }
.lbr-mullerthal h2 { color: #fff; }
.lbr-mullerthal p { color: #f4ebde; font-size: 18px; max-width: 760px; margin: 0 auto 30px; }

/* ----- WELLNESS + ECO ----- */
.lbr-wellness {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 100px 24px;
}
.lbr-card {
  background: #fff;
  border: 1px solid #EAEAEA;
  border-radius: 10px;
  padding: 40px 36px;
  transition: transform .2s, box-shadow .2s;
}
.lbr-card:hover { transform: translateY(-3px); box-shadow: 0 12px 35px rgba(54,38,24,.1); }
.lbr-card--soft { background: #FAF5F1; border-color: transparent; }
.lbr-card__img { display: flex; align-items: center; gap: 26px; }
.lbr-card__img img { width: 110px; height: auto; flex-shrink: 0; }

/* ----- REVIEWS ----- */
.lbr-reviews { text-align: center; }
.lbr-reviews__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 28px;
  max-width: 1100px;
  margin: 50px auto 0;
}
.lbr-review {
  background: #fff;
  padding: 32px 28px;
  border-radius: 10px;
  text-align: left;
  border: 1px solid #EAEAEA;
  margin: 0;
  position: relative;
}
.lbr-review::before {
  content: '"';
  position: absolute;
  top: 10px;
  right: 22px;
  font-family: Marcellus, Georgia, serif;
  font-size: 80px;
  line-height: 1;
  color: #FAF5F1;
  z-index: 0;
}
.lbr-review p { font-size: 15.5px; line-height: 1.65; color: #362618; margin: 0 0 18px; position: relative; z-index: 1; font-style: italic; }
.lbr-review__stars { color: #C97A4F; font-size: 14px; letter-spacing: 2px; margin-right: 8px; }
.lbr-review__author { font-weight: 700; font-size: 14px; color: #362618; }

/* ----- MAP + CONTACT ----- */
.lbr-map-contact {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 0;
  background: #FAF5F1;
}
.lbr-map-contact iframe { width: 100%; height: 100%; min-height: 460px; border: 0; display: block; }
.lbr-map-contact__info { padding: 70px 50px; }
.lbr-map-contact__info p { font-size: 16px; line-height: 1.65; }
.lbr-map-contact__info a { color: #C97A4F; text-decoration: none; }
.lbr-map-contact__info a:hover { text-decoration: underline; }

/* ----- FINAL CTA ----- */
.lbr-cta { text-align: center; padding: 110px 24px; }
.lbr-cta__phone { font-size: 30px; font-family: Marcellus, Georgia, serif; margin: 22px 0 6px; }
.lbr-cta__phone a { color: #362618; text-decoration: none; }
.lbr-cta__phone a:hover { color: #C97A4F; }

/* ----- RESPONSIVE ----- */
@media (max-width: 1100px) {
  .lbr-booking { margin: -60px 18px 0; }
}
@media (max-width: 992px) {
  .lbr-section { padding: 70px 22px; }
  .lbr-section h2 { font-size: 34px; }
  .lbr-restaurant, .lbr-wellness { grid-template-columns: 1fr; gap: 40px; padding: 70px 22px; }
  .lbr-promises__grid { grid-template-columns: repeat(2, 1fr); gap: 30px; }
  .lbr-promises { padding: 50px 22px; }
  .lbr-booking { margin: -50px 18px 0; padding: 26px 22px; }
  .lbr-booking .mphb_sc_search-form { grid-template-columns: 1fr 1fr; }
  .lbr-booking .mphb_sc_search-form > p:last-child { grid-column: 1 / -1; }
  .lbr-map-contact { grid-template-columns: 1fr; }
  .lbr-map-contact__info { padding: 50px 30px; }
  .lbr-mullerthal { background-attachment: scroll; padding: 90px 22px; }
  .lbr-hero h1 { font-size: clamp(32px, 7vw, 52px); }
}
@media (max-width: 700px) {
  .lbr-booking { margin: -40px 14px 0; padding: 22px 18px; }
  .lbr-booking__title { font-size: 24px; }
  .lbr-booking .mphb_sc_search-form { grid-template-columns: 1fr 1fr; gap: 10px; }
  .lbr-booking .mphb_sc_search-form > p:nth-last-child(1),
  .lbr-booking .mphb_sc_search-form > p:nth-last-child(2) { grid-column: auto; }
  .lbr-promises { padding: 40px 18px; }
  .lbr-promise__icon { font-size: 28px; }
  .lbr-promise__title { font-size: 16px; }
  .lbr-promise__sub { font-size: 12px; }
}
@media (max-width: 600px) {
  .lbr-hero { min-height: 82vh; padding: 70px 20px; }
  .lbr-section { padding: 60px 18px; }
  .lbr-section h2 { font-size: 28px; }
  .lbr-promises__grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .lbr-booking .mphb_sc_search-form { grid-template-columns: 1fr; }
  .lbr-card__img { flex-direction: column; text-align: center; gap: 18px; }
  .lbr-card__img img { width: 90px; }
  .lbr-hero__cta .lbr-btn { display: block; margin: 8px 0; }
  .lbr-cta__phone { font-size: 22px; }
  .lbr-restaurant__hours { font-size: 14px; }
  .lbr-review { padding: 24px 20px; }
}
@media (max-width: 420px) {
  .lbr-promises__grid { grid-template-columns: 1fr; gap: 20px; }
  .lbr-hero__eyebrow { letter-spacing: 3px; font-size: 11px; }
  .lbr-hero__sub { font-size: 16px; }
  .lbr-btn { padding: 12px 22px; font-size: 13px; }
}

/* Slider arrows / elementor stuff that leaks into home on small: safety net */
.lbr-home-page .elementor img { max-width: 100%; height: auto; }

/* =====================================================================
 * Self-healing fallback for the homepage rooms grid.
 *
 * All the styling above is scoped under `.lbr-rooms` — a wrapper class
 * that lives only as a runtime artifact (either an Elementor "CSS
 * Classes" entry or a JS-injected div). When that wrapper is missing
 * (Elementor template re-saved, footer script deferred, etc.) every
 * card rule silently no-ops and the layout reverts to bare MPHB markup.
 *
 * The block below mirrors only the *critical* layout rules using
 * `body.home` as the scope, which WP core always sets on the front
 * page. Visual styling (colors, typography, hover) stays under
 * `.lbr-rooms` so this fallback layer only ensures correct geometry.
 *
 * No regression risk: `body.home` only matches the home document, and
 * the booking flow / single room page / archive use other body classes.
 * ===================================================================== */

/* Grid container — guarantee 3 equal columns with equal-height rows */
body.home .mphb_sc_rooms-wrapper.mphb-room-types {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  grid-auto-rows: 1fr !important;
  gap: 32px !important;
  max-width: 1240px;
  margin: 0 auto;
  align-items: stretch !important;
}
@media (max-width: 1100px) {
  body.home .mphb_sc_rooms-wrapper.mphb-room-types { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 700px) {
  body.home .mphb_sc_rooms-wrapper.mphb-room-types { grid-template-columns: 1fr !important; }
}

/* Card shell — fill grid cell entirely, anchor image at top */
body.home .mphb_sc_rooms-wrapper .mphb-room-type {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  align-self: stretch !important;
  justify-content: flex-start !important;
  height: 100% !important;
  min-height: 100% !important;
  background: #fff;
  border: 1px solid #EAEAEA;
  border-radius: 14px;
  overflow: hidden;
  position: relative;
  isolation: isolate;
}

/* Cancel parent theme's 50/50 horizontal split inside the card */
body.home .mphb_sc_rooms-wrapper .mphb-room-type .safar-mphb-rooms-images-wrapper,
body.home .mphb_sc_rooms-wrapper .mphb-room-type .safar-mphb-rooms-info-wrapper {
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Image zone — fixed 280px height so every card's image is identical */
body.home .mphb_sc_rooms-wrapper .safar-mphb-rooms-images-wrapper {
  position: relative;
  height: 280px !important;
  min-height: 280px !important;
  max-height: 280px !important;
  flex: 0 0 280px !important;
  order: 0 !important;
  overflow: hidden;
  background: #f4ebde;
}
body.home .mphb_sc_rooms-wrapper .mphb-room-type-images,
body.home .mphb_sc_rooms-wrapper .mphb-flexslider-gallery-wrapper.mphb-gallery-main-slider {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
}
body.home .mphb_sc_rooms-wrapper .mphb-flexslider-gallery-wrapper.mphb-gallery-main-slider .flex-viewport,
body.home .mphb_sc_rooms-wrapper .mphb-flexslider-gallery-wrapper.mphb-gallery-main-slider .slides,
body.home .mphb_sc_rooms-wrapper .mphb-flexslider-gallery-wrapper.mphb-gallery-main-slider .slides > li {
  height: 100% !important;
  min-height: 100% !important;
  max-height: 100% !important;
  margin: 0 !important;
}
body.home .mphb_sc_rooms-wrapper .mphb-flexslider-gallery-wrapper .gallery-icon { height: 100% !important; display: block; }
body.home .mphb_sc_rooms-wrapper .mphb-flexslider-gallery-wrapper .gallery-item a { display: block; height: 100% !important; width: 100%; }
body.home .mphb_sc_rooms-wrapper .mphb-flexslider-gallery-wrapper img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center;
}

/* Info zone — grow to fill remaining height so CTAs hit the bottom */
body.home .mphb_sc_rooms-wrapper .safar-mphb-rooms-info-wrapper {
  order: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  padding: 24px 24px 22px !important;
}

/* Push the book button + view-details pair to the bottom of the card */
body.home .mphb_sc_rooms-wrapper .mphb-to-book-btn-wrapper {
  margin-top: auto !important;
}
