/* Samudra Beach Resorts — base document styles.
   Component styling is authored inline on the elements themselves,
   as exported from the design. */

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html,body{margin:0;padding:0;background:#29090b;}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
::selection{background:#c6a15b;color:#1c0507;}
input,select,textarea{font-family:inherit;}
input::placeholder,textarea::placeholder{color:rgba(243,237,226,.4);}
input:focus,select:focus,textarea:focus{outline:none;border-color:#c6a15b !important;}
select{appearance:none;-webkit-appearance:none;}
input[type=date]::-webkit-calendar-picker-indicator{filter:invert(78%) sepia(28%) saturate(560%) hue-rotate(1deg) brightness(92%);opacity:.6;cursor:pointer;transition:opacity .25s;}
input[type=date]::-webkit-calendar-picker-indicator:hover{opacity:1;}
input[type=date]::-webkit-datetime-edit{color:#f3ede2;}
[data-bcell]:hover{background:rgba(243,237,226,.055);}
/* Mobile/tablet fixes: fixed 1fr-1fr grids never collapse on their own (no auto-fit),
   and each also sits inside a parent auto-fit grid that re-introduces a second column
   partway through the tablet range, cramping them a second time. Force one column for
   the whole mobile+tablet span; only the desktop-width parent grid gets to go 2-up.
   Selected via [data-mobile-1col] rather than an inline-style substring match: the
   about-stats grid carries data-reveal, whose JS rewrites the style attribute (via
   el.style.opacity = ...) and can reformat "1fr 1fr" with different spacing, which
   would silently break a style*="..." selector. */
@media (max-width:1024px){
  [data-mobile-1col],
  [data-booking-form]{ grid-template-columns:1fr !important; }
  [data-booking-form] [style*="span 2"]{ grid-column:span 1 !important; }
}
/* Room-card text panels lean on the sibling video column for one-side spacing
   (padding-left/right:0) on the desktop 2-up layout; once the room-card grid itself
   collapses to one column (~742px), that zero side needs real padding back. */
@media (max-width:760px){
  #rooms article > div:has(h3){ padding-left:clamp(24px,5vw,40px) !important; padding-right:clamp(24px,5vw,40px) !important; }
}
/* Gallery's featured tile keeps grid-row:span 2 even once the mosaic auto-collapses to
   a single column below ~502px, stretching it into a portrait sliver instead of a tile. */
@media (max-width:520px){
  #gallery [data-lb-id="lb1"]{ grid-row:span 1 !important; }
}