/* Shared demo responsive helper styles */
html,body{height:100%}
/* Layout containers */
.container{max-width:1100px;margin:22px auto;padding:0 18px}

/* Make image galleries stack on smaller screens */
.gallery{display:grid;grid-template-columns:2fr 1fr;gap:12px}
.gallery img{width:100%;height:100%;object-fit:cover;border-radius:10px}

/* Booking / two-column areas */
.two-col{display:grid;grid-template-columns:1fr 360px;gap:18px}

/* Demo nav adjustments */
#demo-nav{display:flex;align-items:center;gap:8px}
#demo-nav a{color:#174a8a;text-decoration:none}

/* Responsive breakpoints */
@media (max-width:1000px){
  .container{padding:0 14px}
  .gallery{grid-template-columns:1fr}
  .two-col{grid-template-columns:1fr}
  .title-row{flex-direction:column;align-items:flex-start}
  .hero-r{flex:0 0 320px}
}

@media (max-width:700px){
  .prop-list{grid-template-columns:repeat(2,1fr)}
  .pg3{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:520px){
  .prop-list{grid-template-columns:1fr}
  .pg3,.pg4{grid-template-columns:1fr}
  header{padding:12px}
  nav{padding:0 12px}
  /* make demo nav easier to use on small screens */
  #demo-nav{left:10px;right:10px;bottom:10px;padding:8px 10px;border-radius:8px;overflow:auto;justify-content:flex-start}
  #demo-nav a{white-space:nowrap}
  /* ensure forms and inputs fit */
  input,select,textarea{font-size:15px}
}

@media print{#demo-nav{display:none}}