/* ============================================================
   HOLIDAY HOUSE FRANCE — APPROVED MOBILE PROPERTY STYLING
   ============================================================
   PROTECTED FILE.

   This stylesheet contains the approved mobile-phone layout for
   the PUBLIC property page. It is deliberately loaded AFTER the
   main site stylesheet so these rules win on phones.

   DO NOT move these rules back into css/style.css.
   DO NOT alter this file for desktop, owner-panel, admin or
   general site changes.

   Only edit this file when a MOBILE PROPERTY PAGE change has
   specifically been requested and approved.
   ============================================================ */

@media (max-width:700px) {
  /* Final approved mobile journey */
  .public-property-layout {
    display:flex !important;
    flex-direction:column !important;
    gap:0 !important;
  }

  .public-property-main,
  .public-booking-card {
    display:contents !important;
  }

  .mobile-order-highlights{order:10 !important}
  .mobile-order-about{order:20 !important}
  .mobile-order-accommodation{order:30 !important}
  .mobile-order-bedrooms{order:40 !important}
  .mobile-order-facilities{order:50 !important}
  .mobile-order-rates-calendar{order:60 !important}
  .mobile-order-enquiry{order:70 !important}
  .mobile-order-location{order:80 !important}
  .mobile-order-nearby{order:90 !important}
  .mobile-order-nearby-facilities{order:100 !important}
  .mobile-order-host{order:110 !important}
  .mobile-order-book-direct{order:120 !important}
  .mobile-order-reviews{order:130 !important}
  .mobile-order-registration{order:140 !important}

  /* Compact vertical rhythm between mobile sections.
     The main stylesheet deliberately gives desktop content blocks 28px
     padding + 28px margin; that is far too loose on a phone. */
  body:not(.owner-portal) .public-property .property-content-block{
    padding-bottom:14px !important;
    margin-bottom:14px !important;
  }
  body:not(.owner-portal) .public-property .why-love-section{
    padding-bottom:10px !important;
    margin-bottom:12px !important;
  }
  body:not(.owner-portal) .public-property .rates-calendar-layout{
    margin-bottom:0 !important;
  }
  body:not(.owner-portal) .public-property .property-enquiry{
    margin-top:10px !important;
    margin-bottom:14px !important;
  }
  body:not(.owner-portal) .public-property .location-premium-section{
    margin-top:14px !important;
  }
  body:not(.owner-portal) .public-property .nearby-facilities-section,
  body:not(.owner-portal) .public-property .property-reviews-section{
    margin-top:0 !important;
  }

  /* Keep Availability and Enquiry visually together. */
  .mobile-order-rates-calendar{margin-bottom:0 !important}
  .mobile-order-enquiry{margin-top:10px !important}
  .mobile-order-location{margin-top:14px !important}

  /* Sidebar pieces become normal full-width cards in mobile flow. */
  .booking-direct-content,
  .property-enquiry,
  .host-mobile-group{
    width:100% !important;
    box-sizing:border-box !important;
  }
  .booking-direct-content,
  .host-mobile-group{
    margin-top:20px !important;
    padding:20px !important;
    border:1px solid var(--line) !important;
    border-radius:var(--radius) !important;
    background:#fff !important;
  }

  /* Gallery: the phone lightbox deliberately has no fullscreen control. */
  .gallery-fullscreen{display:none !important}
  .gallery-lightbox-tools .gallery-close{
    width:38px !important;
    height:38px !important;
  }
  .gallery-count-badge{
    left:10px !important;
    bottom:10px !important;
    padding:6px 9px !important;
    font-size:.65rem !important;
  }
  .gallery-caption{display:none !important}
  .gallery-lightbox-dialog figcaption{justify-content:center !important}

  /* Compact highlights / facts area approved for phones. */
  .why-love-grid{gap:8px !important}
  .why-love-card{min-height:0 !important}

  /* Accommodation cards stay neat and centred in two columns on phones. */
  .accommodation-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    justify-content:center !important;
  }

  /* Reviews are the social-proof finale, immediately before registration. */
  .property-reviews-section{
    padding-top:4px !important;
    margin-top:8px !important;
  }
  .reviews-grid{grid-template-columns:1fr !important}
  .reviews-heading{
    align-items:flex-start !important;
    flex-direction:column !important;
  }

  /* Keep the registration footer restrained at the very bottom. */
  .property-registration-line{margin-top:22px !important}
}

@media (max-width:600px) {
  .public-property{font-size:14px}
  .public-property .container{width:min(100% - 24px,1180px)}
  .public-property .property-summary{padding:30px 0 22px}
  .public-property .property-content-section{padding:32px 0 42px}
  .public-property .property-summary h1{font-size:2.1rem}
  .public-property .property-content-block h2,
  .public-property .nearby-facilities-heading h2,
  .public-property .reviews-heading h2{font-size:1.85rem}
}

@media (max-width:480px) {
  /* Arrival/departure stay side-by-side where space permits. */
  .property-enquiry .enquiry-date-grid,
  .property-enquiry .booking-date-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

/* ============================================================
   Mobile refinements — 21 Aug 2026
   Reviews finale + review score header + accommodation width
   ============================================================ */
@media (max-width:700px) {
  /* Accommodation: use the full available mobile width, with centred tiles. */
  .mobile-order-accommodation .premium-fact-strip.centered{
    width:100% !important;
    max-width:none !important;
    margin-left:auto !important;
    margin-right:auto !important;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    justify-content:stretch !important;
    align-items:stretch !important;
  }
  .mobile-order-accommodation .premium-fact-strip.centered .fact-item{
    width:100% !important;
    min-width:0 !important;
    max-width:none !important;
    box-sizing:border-box !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center !important;
  }

  /* Reviews heading: labels on the left, score occupying the two-row right column. */
  .property-reviews-section .reviews-heading{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    grid-template-rows:auto auto !important;
    column-gap:12px !important;
    row-gap:0 !important;
    align-items:center !important;
    margin-bottom:14px !important;
  }
  .property-reviews-section .reviews-heading > div:first-child{
    display:grid !important;
    grid-template-rows:auto auto !important;
    grid-column:1 !important;
    grid-row:1 / span 2 !important;
    min-width:0 !important;
  }
  .property-reviews-section .reviews-heading .eyebrow{
    grid-row:1 !important;
    margin-bottom:5px !important;
  }
  .property-reviews-section .reviews-heading h2{
    grid-row:2 !important;
    margin:0 !important;
  }
  .property-reviews-section .reviews-score{
    grid-column:2 !important;
    grid-row:1 / span 2 !important;
    align-self:center !important;
    justify-self:end !important;
    margin:0 !important;
  }
}

/* ============================================================
   Mobile refinements — 21 Aug 2026 (spacing / full-width pass)
   ============================================================ */
@media (max-width:700px) {
  /* The desktop grid leaves align-items:start behind when it becomes flex.
     Stretch every mobile-flow section to the full available width. */
  body:not(.owner-portal) .public-property .public-property-layout{
    align-items:stretch !important;
  }

  /* Accommodation summary: full-width, evenly divided 2 x 3 grid. */
  body:not(.owner-portal) .public-property .mobile-order-accommodation{
    width:100% !important;
    box-sizing:border-box !important;
  }
  body:not(.owner-portal) .public-property .mobile-order-accommodation .premium-fact-strip.centered{
    width:100% !important;
    max-width:none !important;
    margin:14px 0 0 !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }

  /* Rates -> Availability: remove the desktop/tablet breathing room. */
  body:not(.owner-portal) .public-property .rates-calendar-layout{
    width:100% !important;
    padding:0 !important;
    gap:14px !important;
    border-top:0 !important;
  }
  body:not(.owner-portal) .public-property .rates-calendar-layout > .property-content-block{
    padding-bottom:0 !important;
    margin-bottom:0 !important;
    border-bottom:0 !important;
  }
  body:not(.owner-portal) .public-property .rates-calendar-layout .privacy-note{
    margin-bottom:0 !important;
  }

  /* Calendar -> enquiry: keep the sections close together. */
  body:not(.owner-portal) .public-property .mobile-order-rates-calendar{
    margin-bottom:0 !important;
  }
  body:not(.owner-portal) .public-property .property-enquiry.mobile-order-enquiry{
    margin-top:14px !important;
    padding-top:0 !important;
    border-top:0 !important;
  }

  /* Enquiry date and guest selectors: identical two-column sizing. */
  body:not(.owner-portal) .public-property .property-enquiry .enquiry-date-grid{
    width:100% !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:9px !important;
  }
  body:not(.owner-portal) .public-property .property-enquiry .enquiry-date-grid > label{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    overflow:hidden !important;
  }
  body:not(.owner-portal) .public-property .property-enquiry .enquiry-date-grid input[type="date"],
  body:not(.owner-portal) .public-property .property-enquiry .enquiry-date-grid input[type="number"]{
    width:100% !important;
    min-width:0 !important;
    max-width:100% !important;
    inline-size:100% !important;
    min-inline-size:0 !important;
    box-sizing:border-box !important;
  }

  /* Facilities: slimmer full-width rows. */
  body:not(.owner-portal) .public-property .mobile-order-facilities,
  body:not(.owner-portal) .public-property .mobile-order-facilities .amenities-grid{
    width:100% !important;
  }
  body:not(.owner-portal) .public-property .mobile-order-facilities .amenities-grid .feature-item{
    width:100% !important;
    min-height:42px !important;
    padding:7px 10px !important;
    box-sizing:border-box !important;
  }
  body:not(.owner-portal) .public-property .mobile-order-facilities .amenities-grid .feature-icon{
    width:30px !important;
    height:30px !important;
  }

  /* Explore Nearby -> Nearby Facilities: small gap, no separator line. */
  body:not(.owner-portal) .public-property .mobile-order-nearby{
    padding-bottom:0 !important;
    margin-bottom:14px !important;
    border-bottom:0 !important;
  }
  body:not(.owner-portal) .public-property .nearby-facilities-section.mobile-order-nearby-facilities{
    padding-bottom:0 !important;
    margin-bottom:0 !important;
    border-bottom:0 !important;
  }

  /* Nearby Facilities -> Listed by: small gap, no separator line. */
  body:not(.owner-portal) .public-property .host-mobile-group{
    margin-top:14px !important;
  }

  /* Listed-by/host card -> Book Direct: small gap. */
  body:not(.owner-portal) .public-property .booking-direct-content{
    margin-top:14px !important;
  }
}