/* ---- Base layout (matches home page) ---- */
:root{
  --maxw: 1100px;       /* same content width as home */
  --gutter: 16px;       /* side padding */
  --radius: 10px;       /* rounded corners like home */
  --shadow: 0 6px 16px rgba(0,0,0,.08);
}

*{ box-sizing:border-box; margin:0; padding:0; }
body{
  font-family:"Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  line-height:1.6;
  color:#222;
  background:#fff;
}

/* Centered page container like home */
.container{
  max-width: var(--maxw);
  padding: 0 var(--gutter);
  margin: 0 auto;
}

/* Section spacing to match home */
.section{ margin: 28px 0; }
.section h2{ margin: 0 0 12px; font-size: 1.35rem; }

/* ---- Image components (match look, no overflow) ---- */

/* Scroll gallery (hero/packages/boats) */
.scroll-gallery{
  display:grid;
  grid-auto-flow:column;
  gap:12px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding-bottom:6px; /* small space under images */
}
.scroll-item{
  scroll-snap-align:start;
  min-width:100%;              /* one per swipe on phone (like home) */
  max-width:100%;
}

/* Keep aspect like home hero; crop gently if too tall */
.scroll-gallery .media{
  position:relative;
  aspect-ratio: 16 / 9;        /* SAME feel as home hero */
  width:100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
}
.scroll-gallery img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}

/* Photo grid (food/extras) */
.photo-grid{
  display:grid;
  gap:12px;
  grid-template-columns: repeat(3, 1fr);  /* desktop = 3 columns like home cards */
}
.photo-grid .card{
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
  background:#fff;
}
.photo-grid .media{
  position:relative;
  aspect-ratio: 4 / 3;         /* card image ratio like home tiles */
  width:100%;
}
.photo-grid img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}

/* Optional text under images (consistent padding) */
.card-body{ padding:12px; }

/* ---- Responsive: mirror home page breakpoints ---- */
@media (max-width: 1024px){
  .photo-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .scroll-item{ min-width:100%; }              /* one full-width slide */
  .photo-grid{ grid-template-columns: 1fr; }   /* stack like home on phone */
  .section{ margin:22px 0; }
}