@charset "UTF-8";
/*****************************************************
/// Lomi ga (responsive tweaks)
******************************************************/

/* ≤1300px: container breathing room */
@media (max-width: 1300px) {
  #pageWrapper { margin: 0; }
  .container,
  .container-lg { max-width: 100%; padding: 0 20px; }
}

/* ≤700px: bring display sizes down */
@media (max-width: 700px) {
  h1 { font-size: 40px; }
}

/* ≤500px: compact, readable scale */
@media (max-width: 500px) {
  h1 { font-size: 32px; font-weight: 800; }
  h1 small { font-size: 12px; }
  h2 { font-size: 28px; font-weight: 900; }
  h3 { font-size: 24px; font-weight: 600; }
  h4 { font-size: 20px; font-weight: 500; }
  p  { font-size: 14px; line-height: 1.7; }
}



/* ======================================================================
   PATCH 2025-09-02 — Responsive Layout Refinements
   - Mobile header row (burger | logo | lang) <= 768px
   - 2-column main menu (tablet) 768–991.98px
   - Safe-area insets for top & bottom bars
   - Tap-target & type clamps
   ====================================================================== */

@media (max-width: 768px) {
	
	.mainNavWrap { display: grid;
    grid-template-columns: 56px 1fr auto;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    z-index: 1000;
  }
  .MainMenuBtnWrap {
    position: static;
    width: auto;
    height: auto;
    border: none;
    box-shadow: none;
    right: auto;
    top: auto;
  }
  .logoMobile { position: static; transform: none; }
  .logoMobile img { width: 64px; height: auto; }

  .langWrap {
    position: static; left: auto; top: auto;
    width: auto; height: 44px;
    display: inline-flex; align-items: center;
  }
  .lang-active { line-height: 1; padding: 8px 10px !important; font-size: 18px; }
  .language { right: 0; top: 100%; margin-top: 6px; }
}

/* 2) 2-column main menu on tablets for better scanning */
@media (min-width: 768px) and (max-width: 991.98px) {
  .MainMenuLinks {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }
  .MainMenuLinks a {
    font-size: clamp(20px, 2.5vw, 28px);
    padding-bottom: 14px;
  }
}

/* 3) Safe-area insets (iOS notch) */
@supports (padding: max(0px)) {
  .mainNavWrap {
    padding-right: max(12px, env(safe-area-inset-right));
    padding-left:  max(12px, env(safe-area-inset-left));
  }
  @media (max-width: 880px) {
    .floatMenuWrap { padding-bottom: max(0px, env(safe-area-inset-bottom)); }
  }
}

/* 4) Tap targets & type clamps */
.MainMenuLinks a { font-size: clamp(18px, 2.8vw, 36px); }
.floatMenuLinks .icon { width: 36px; height: 36px; }

@media (max-width: 880px) {
  .floatMenuLinks a, .floatMenuLinks button { min-height: 44px; }
}













/* =========================================================
   RWD OVERLAY (safe, additive) — paste last
   Targets: header/nav, floatMenu, hero, breadcrumbs, forms, map
   Breakpoints: 48em (768), 62em (992)
========================================================= */

/* 1) Fluid container spacing & type */
:root{
  --page-pad: clamp(12px, 3vw, 32px);
  --gap-1: .5rem; --gap-2: .75rem; --gap-3: 1rem; --gap-4: 1.5rem;
}
/*.sectionWrap, .container, .container-lg { padding-left: var(--page-pad); padding-right: var(--page-pad); }
*/
.siteSeoContent h1 { font-size: clamp(1.4rem, 2vw + 1rem, 2.2rem); line-height: 1.15; }
.siteSeoContent h2 { font-size: clamp(1rem, 1.1vw + .9rem, 1.1rem); line-height: 1.3; }

/* 2) Header/nav cluster becomes flexible */
.mainNavWrap{ display:flex; align-items:center; flex-wrap:wrap; gap: var(--gap-2) var(--gap-3); }
.mainNavigation{ flex: 1 1 320px; min-width: 280px; }
.floatMenuWrap{ flex: 0 0 auto; margin-left: auto; }
.logoMobile{ order:-1; flex: 1 1 160px; display:block; }
@media (min-width:62em){ .logoMobile{ display:none; } }

/* 3) Mobile menu panel ties to aria-hidden (no JS changes) */
#MainMenu{
  position: fixed; inset: 0; z-index: 9990;
  background: rgba(255,255,255,.96);
  transform: translateY(-4%); opacity: 0; pointer-events: none;
  transition: transform .25s ease, opacity .25s ease;
}
#MainMenu[aria-hidden="false"]{ transform: translateY(0); opacity: 1; pointer-events:auto; }

/* 4) Float tool bar: ensure content isn’t covered on mobile */
@media (max-width:55em){
  body{ padding-bottom: 68px; } /* matches ~60px bar + breathing */
}

/* 5) Language switcher minimal width protection */
.langWrap{ max-width: 100%; }
.langWrap .lang-active span{ display:none; } /* hide extra label on tight widths */
@media (min-width:48em){ .langWrap .lang-active span{ display:block; } }

/* 6) Hero slider: stable height + cover images */
.slider-container{ min-height: clamp(260px, 45vh, 560px); }
.intro-slide, .intro-slide-img{ width:100%; /*height:100%;*/ height:800px; object-fit: cover; }

/* 7) SEO header two-col → one-col on tablet 
.siteSeoContent{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--gap-3); align-items:end; }*/
@media (max-width:62em){ .siteSeoContent{ grid-template-columns: 1fr; gap: var(--gap-2); } }

/* 8) Breadcrumbs wrap nicely */
.breadcrumb ol{ display:flex; flex-wrap:wrap; column-gap:.75rem; row-gap:.25rem; }
.breadcrumb li{ white-space: nowrap; }

/* 9) Forms: halves become fluid; rows wrap predictably */
.form-body, .form-row{ display:flex; flex-wrap:wrap; gap: var(--gap-3); }
.form-group.full{ flex: 1 1 100%; }
.form-group.half{ flex: 1 1 clamp(260px, 40%, 520px); }
@media (max-width:48em){ .form-group.half{ flex-basis: 100%; } }
.date-row{ display:flex; gap: var(--gap-3); flex-wrap:wrap; }
.date-row .form-group{ flex: 1 1 260px; }

/* Panel head/buttons flow on small screens */
.panel-contact .panel-head{ display:flex; align-items:center; justify-content:space-between; gap: var(--gap-2); flex-wrap:wrap; }

/* 10) Cards/amenities grid: keep 2+ per row on phones */
.amenitiesGrid #htmlSliderWrapper{ display:flex; flex-wrap:wrap; gap: var(--gap-3); }
.amenitiesGrid .customSlider__slide{ flex: 1 1 clamp(220px, 45%, 360px); }

/* 11) Map: keep UI usable on phones (clusters stack) */
@media (max-width:48em){
  .map-ui{ position:absolute; left:0; right:0; top:0; display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; padding:.5rem; z-index:5; }
  .map-ui .ui-cluster.tl,
  .map-ui .ui-cluster.br{ position: static !important; }
  .zoom-box{ display:flex; align-items:center; gap:.5rem; }
  #uiZoomSlider{ width:min(55vw, 320px); }
}

/* 12) Utilities for cramped viewports */
@media (max-width:48em){
  .pageHeader .siteSeoContent{ margin-top: .5rem; }
  .print-download a, .print-download button{ min-width: 44px; min-height: 44px; }
  .btn-cta{ width:100%; justify-content:center; }
}

/* 13) Keep language menu’s [hidden] scoped (no global side effects) */
.langWrap .language[hidden]{ display:none !important; }