/* Laingdon Hotel: phone layout. Only applies on screens narrower than 760px.
   Desktop is untouched. Restacks the fixed 1000px design into one column. */
@media (max-width: 760px) {
  html, body { overflow-x: hidden; }
  #wrapper { width: 100% !important; margin: 0 auto !important; }

  /* Header: keep the banner (it already shows the address); one tap-to-call line under it */
  #wrapper #header, header-component #header, rooms-header #header { width: 100% !important; max-width: 100% !important;
    height: auto !important; margin: 6px 0 0 !important; background: transparent !important; }
  #header > img { display: none !important; }
  /* the whole desktop banner, just smaller (asset with the finished curved top) */
  #header::before { content: ""; display: block; width: 100%; aspect-ratio: 1000 / 171;
    background: url(../images/mainbanner.svg) center / 100% 100% no-repeat; }
  /* slim bar under it: Book Online left, tap-to-call phone right */
  .homepageContactBar { position: static !important; display: flex !important; justify-content: space-between; align-items: center;
    height: auto !important; padding: 5px 12px !important; background: #5f2029 !important; box-sizing: border-box;
    width: 98.2% !important; margin: -1px auto 0 !important; border-radius: 0; }
  .homepageContactBar > span, .homepageContactBar a:not([href^="tel:"]):not(.mobileBook) { display: none !important; }
  .homepageContactBar a[href^="tel:"] { order: 2; font-size: 18px !important; color: #fff !important; }
  .homepageContactBar a.mobileBook { order: 1; display: inline-block !important; background: #CCA349; color: #fff !important;
    padding: 5px 12px; border-radius: 4px; font-size: 15px !important; text-shadow: 1px 1px 2px rgba(0,0,0,.45) !important; }
  #intb a[href*="reservationkey"] { display: none !important; }

  /* Decorative strips, spacers, side ornaments and the right-hand column */
  #header2, #header4, #head_left, #head_right, #head-mid-left, #space1,
  #inta, #inte, #intc, #intLeftDecoration, #intRightDecoration { display: none !important; }

  /* Photo strip under the header: just the slideshow, full width */
  #header3 { height: auto !important; width: 100% !important; }
  #head_mid { width: 98.2% !important; margin: 0 auto !important; height: auto !important; float: none !important; box-sizing: border-box; border-width: 6px !important; }
  #head-mid-right { float: none !important; width: 100% !important; height: auto !important; }
  #head-mid-right .slider-container { gap: 0 !important; --swiffy-slider-item-gap: 0px; }
  #head-mid-right .slider-container > li { flex: 0 0 100% !important; width: 100% !important; }
  #head-mid-right .slider-container img { width: 100% !important; height: auto !important; }

  /* Menu */
  #menu, #menuroom { width: 98.2% !important; margin: 0 auto !important; height: auto !important; background: #5f2029 !important;
    font-size: 17px !important; letter-spacing: 0 !important; padding: 8px 6px 24px; box-sizing: border-box; line-height: 1.9; text-align: center;
    /* scalloped bottom corners, same curve as the desktop menu bar */
    -webkit-mask-image: radial-gradient(circle 44px at 6px calc(100% + 22px), transparent 43px, #000 44px), radial-gradient(circle 44px at calc(100% - 6px) calc(100% + 22px), transparent 43px, #000 44px);
    -webkit-mask-composite: source-in;
    mask-image: radial-gradient(circle 44px at 6px calc(100% + 22px), transparent 43px, #000 44px), radial-gradient(circle 44px at calc(100% - 6px) calc(100% + 22px), transparent 43px, #000 44px);
    mask-composite: intersect; }
  #menu menu-links, #menuroom menu-links { letter-spacing: 0 !important; }

  /* Main content: one centered column */
  #int, #intWidePage { width: 100% !important; height: auto !important; }
  #intb { width: 100% !important; float: none !important; box-sizing: border-box; padding: 18px 16px !important;
    background: #f7f0d2 !important; height: auto !important; }
  #intb h1 { font-size: 22px !important; line-height: 30px !important; text-align: center; }
  #intb h2 { text-align: center; }

  /* Side column: stacked under the text, one item per row, only the useful items */
  #intd { width: 100% !important; float: none !important; background: transparent !important; height: auto !important;
    padding: 18px 16px 10px !important; box-sizing: border-box; text-align: center; margin: 6px 0 0 !important;
    border-top: 2px dotted #5e1f29; }
  #intd > *, #intd_top > * { margin-left: auto !important; margin-right: auto !important; }
  #intd img, .centeritem { max-width: 320px; width: 100%; height: auto; margin: 0 auto 14px !important; display: block; }
  #intd_top { height: auto !important; margin: 0 !important; }
  #intd table { margin: 0 auto 14px !important; max-width: 400px; width: 100% !important; }
  #intd_weather { margin: 0 auto 14px !important; width: auto !important; display: inline-block; }
  #intd #intdbot2:not(:has(.sl-cam-embed)) { display: none !important; }   /* extra room photos: already in the gallery */
  #intd #intdbot2:has(.sl-cam-embed) { width: 100% !important; height: auto !important; margin: 0 !important; padding: 0 !important; float: none !important; display: flex; justify-content: center; }
  .sl-cam-embed { width: 320px !important; max-width: 100%; height: 220px !important; padding-bottom: 0 !important; margin: 0 auto 10px !important; left: auto !important; }
  #intd { padding-bottom: 4px !important; }
  .sidebox { margin: 0 auto !important; max-width: 320px; padding: 14px 12px; background: #f7f0d2; border: 1px solid #d9c98f; }
  .sidebox img { display: none !important; }                 /* the page is full of photos already */
  .photo, .photo-pair { margin: 12px 0 !important; }
  .cta { display: block !important; text-align: center; }

  /* Homepage video */
  #video-wrapper { height: auto !important; width: 98.2% !important; margin: 0 auto !important; background: #5f2029 !important;
    border: 10px solid #5f2029 !important; border-top-width: 2px !important; box-sizing: border-box; font-size: 0; }
  #video-wrapper + #menu, #menu { margin-top: 0 !important; }
  iframe { width: 100% !important; max-width: 100% !important; }
  #video-wrapper iframe { display: block; height: calc((98.2vw - 20px) * 0.5625) !important; }

  /* Contact and room pages (wide layouts) */
  #intbWide, #contactWide, #contactWidetext, #widetext, #mapbox, #underMap, #underMapLeft, #undermapright, #buttonArea {
    width: 100% !important; float: none !important; box-sizing: border-box; margin-left: 0 !important; height: auto !important; }
  #mapbox iframe { height: 300px !important; }
  /* Room slideshow: keep photo proportions */
  rooms-slider, rooms-slider > div, rooms-slider .swiffy-slider, rooms-slider .slider-container { width: 100% !important; height: auto !important; }
  rooms-slider img { width: 100% !important; height: auto !important; object-fit: contain; }
  rooms-slider .slider-container > li { flex: 0 0 100% !important; width: 100% !important; }
  #underMap table { width: 100% !important; }
  #underMapLeft, #undermapright { padding: 0 16px !important; border-left: 0 !important; }
  .headline { font-size: 40px !important; line-height: 44px !important; }
  #widetext, #contactWidetext { padding: 6px 0; }

  /* Photos page gallery: three thumbnails per row */
  #intWidePhoto, #vlightbox1 { width: 100% !important; float: none !important; box-sizing: border-box; padding: 0 8px; text-align: center; }
  #vlightbox1 .vlightbox1 { width: 30% !important; margin: 1% !important; }
  #vlightbox1 .vlightbox1 img { width: 100% !important; height: auto !important; }
  #widetext .headline { font-size: 34px !important; line-height: 38px !important; }

  /* Footer */
  #footer_spacer { width: 100% !important; }
  img, table { max-width: 100%; }
}