/* LA PENICHE — unified phone layout */
@media (max-width: 700px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  .container { width: calc(100% - 32px) !important; }
  .site-header .header-inner,
  .extras-header-inner,
  .detail-header-inner,
  .rooms-header-inner,
  .gift-header-inner,
  .faq-header-inner,
  .private-header-inner,
  .legal-header-inner {
    width: calc(100% - 24px) !important;
    min-height: 68px;
    height: 68px;
    margin: 0 auto;
    gap: 10px;
  }
  .brand { width: auto !important; }
  .site-logo,
  .extras-logo,
  .detail-logo,
  .rooms-header img,
  .gift-logo,
  .private-logo,
  .privatisez-logo,
  .legal-header .site-logo {
    width: 160px !important;
    max-width: 62vw !important;
    height: auto;
  }
  .mobile-toggle { width: 38px !important; height: 38px !important; flex: 0 0 38px; }
  .rooms-back, .extras-back, .detail-back, .gift-back, .private-back, .faq-back, .legal-back {
    font-size: .62rem !important;
    white-space: nowrap;
  }

  /* Home and shared content */
  .hero { min-height: 620px !important; padding: 110px 0 54px !important; text-align: center; }
  .hero > .container { display: flex; justify-content: center; }
  .hero h1 { max-width: 100%; font-size: clamp(3.2rem, 16vw, 5.2rem) !important; text-align: center; }
  .intro, .section, .cards, .feature, .cta { padding: 68px 0 !important; }
  .grid-2 { text-align: center; }
  .intro h2, .section h2, .cards-head h2, .feature h2, .cta h2 { text-align: center; }
  .intro-copy p, .section p, .card p { margin-left: auto; margin-right: auto; }
  .cards-head { margin-bottom: 34px; }
  .cards-grid { grid-template-columns: 1fr !important; gap: 18px; }
  .card { min-height: 340px !important; padding: 22px !important; }
  .card-actions { width: 100%; flex-direction: column; align-items: stretch; }
  .card-actions .card-button { width: 100%; }
  .feature img { height: 290px !important; }
  .reviews-section { padding: 58px 0 64px !important; text-align: center; }
  .reviews-head { text-align: center; }
  .reviews-head h2 { font-size: clamp(2.3rem, 11vw, 4rem) !important; }
  .review-card { width: 100%; max-width: 100%; min-height: 0 !important; padding: 24px 18px !important; text-align: center; }
  .review-meta { justify-content: center; }
  .review-card p { text-align: center; }
  .reviews-controls { justify-content: center; }
  .footer { padding: 42px 0 22px !important; text-align: center; }
  .footer-grid-icons { grid-template-columns: 1fr !important; justify-items: center; gap: 26px !important; }
  .footer-social-links, .footer-contact-links { justify-content: center !important; }
  .footer-bottom { margin-top: 28px !important; }
  .whatsapp-float { right: 12px !important; bottom: 12px !important; width: 50px !important; height: 50px !important; }

  /* Gallery */
  .photos-page { padding: 88px 0 44px !important; text-align: center; }
  .photos-container { width: calc(100% - 32px) !important; }
  .photos-page h1 { font-size: clamp(3rem, 16vw, 5rem) !important; text-align: center; }
  .photos-intro { margin: 0 auto 38px !important; font-size: 1rem !important; }
  .photos-grid { grid-template-columns: 1fr !important; gap: 18px !important; }
  .photos-group-title { margin: 2.3rem 0 1rem !important; text-align: center; }
  .photo-card figcaption { text-align: center; }

  /* Extras and detail pages */
  .extras-main, .detail-main, .gift-main, .faq-main, .private-main, .rooms-main, .room-detail-main { text-align: center; }
  .extras-title, .detail-title, .rooms-container > h1, .gift-title { text-align: center; }
  .extras-grid { grid-template-columns: 1fr !important; gap: 38px !important; }
  .extras-card, .extra-card { text-align: center; }
  .detail-content { text-align: center; }
  .detail-content ul { text-align: left; display: inline-block; max-width: 100%; }
  .detail-content .detail-footnote { text-align: center; }
  .detail-notice, .booking-notice { text-align: center; }
  .detail-actions, .room-detail-actions, .private-actions { justify-content: center; }
  .detail-button, .room-button, .private-button, .download-button { width: 100%; justify-content: center; }
  .rooms-grid, .room-gallery { grid-template-columns: 1fr !important; }
  .room-card { min-height: 360px !important; }
  .room-card-content { text-align: center; }
  .gift-offers { grid-template-columns: 1fr !important; text-align: center; }
  .gift-offer { text-align: center; }
  .gift-offer ul { display: inline-block; text-align: left; }
  .gift-buy { width: 100%; }

  /* FAQ, private hire and legal pages */
  .faq-intro, .faq-item, .faq-contact, .private-choice-card, .legal-content { text-align: center; }
  .faq-item summary { text-align: center; }
  .faq-answer { padding-left: 0 !important; padding-right: 0 !important; }
  .faq-contact-actions { justify-content: center; }
  .private-choice-grid { grid-template-columns: 1fr !important; }
  .private-choice-card { min-height: 230px !important; align-items: center; }
  .private-choice-action { align-self: center !important; }
  .legal-content ul, .legal-content ol { text-align: left; display: inline-block; max-width: 100%; }
}

/* Homepage mobile hero: remove oversized black margins and let the white section follow sooner. */
@media (max-width: 700px) {
  .hero {
    height: min(62svh, 520px) !important;
    min-height: 0 !important;
    padding: 0 !important;
  }
  .hero-video,
  .hero-video iframe {
    width: 100% !important;
    height: 100% !important;
  }
  .hero-video iframe {
    transform: scale(1.02) !important;
  }
  .intro {
    padding-top: 58px !important;
  }
}

/* Mobile hero video: fill the viewport width without black letterbox bands. */
@media (max-width: 700px) {
  .hero {
    height: min(78vw, 390px) !important;
    min-height: 260px !important;
    max-height: 390px !important;
    background: #080909 !important;
  }
  .hero-video iframe {
    transform: scale(1.5) !important;
  }
  .hero-play {
    display: grid;
    place-items: center;
    position: absolute;
    z-index: 4;
    top: 50%;
    left: 50%;
    width: 54px;
    height: 54px;
    padding: 0 0 0 3px;
    transform: translate(-50%, -50%);
    border: 0;
    border-radius: 50%;
    background: #c51f2f;
    color: #fff;
    box-shadow: 0 6px 18px rgba(0,0,0,.35);
    font-size: 1.25rem;
    line-height: 1;
  }
  .hero-play.is-hidden { display: none; }
}
@media (min-width: 701px) {
  .hero-play { display: none; }
}

/* Final iPhone hero correction: the video alone fills the hero, with no black bands. */
@media (max-width: 700px) {
  .hero {
    height: min(68vw, 420px) !important;
    min-height: 260px !important;
    max-height: 420px !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  .hero-video {
    position: absolute !important;
    inset: 0 !important;
    overflow: hidden !important;
  }
  .hero-video iframe {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 100% !important;
    height: 100% !important;
    transform: translate(-50%, -50%) scale(1.65) !important;
    transform-origin: center center !important;
  }
  .hero-play {
    display: grid !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    z-index: 10 !important;
    width: 58px !important;
    height: 58px !important;
    transform: translate(-50%, -50%) !important;
    background: #c51f2f !important;
    color: #fff !important;
    opacity: 1 !important;
  }
  .hero-play.is-hidden { display: none !important; }
}

/* Mobile homepage layout aligned with the group-site reference. */
@media (max-width: 700px) {
  .home-page .site-header {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: transparent !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    z-index: 20 !important;
  }
  .home-page .site-logo {
    filter: brightness(0) invert(1) !important;
  }
  .home-page .mobile-toggle {
    border-color: #fff !important;
    color: #fff !important;
    background: transparent !important;
  }
  .home-page .hero {
    height: 56.25vw !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .home-page .hero-video iframe {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
  }
  .home-page .hero-play {
    display: grid !important;
    top: 50% !important;
    left: 50% !important;
    width: 54px !important;
    height: 54px !important;
    background: #c51f2f !important;
    color: #fff !important;
  }
  .home-page .intro {
    padding-top: 64px !important;
  }
}