/* === Refugio: Lodge large photos override ===
   This sheet forces the Lodge section to render a big, 3‑column responsive grid.
   It tries several common Lodge selectors so it works without touching HTML structure. */

:root {
  --lodge-gap: 24px;
  --lodge-radius: 14px;
  --lodge-height: 340px;
}

/* Container turns into a grid */
#lodge .grid, #lodge .gallery, #lodge .photos, #lodge .images,
section.lodge .grid, section.lodge .gallery, section.lodge .photos, section.lodge .images,
.lodge-grid, .lodge .grid, .lodge .gallery, .section-lodge .grid, .section-lodge .gallery,
[data-section="lodge"] .grid, [data-section="lodge"] .gallery, [data-section="lodge"] {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(280px, 1fr)) !important;
  gap: var(--lodge-gap) !important;
  align-items: start !important;
}

/* If the Lodge container is not explicitly marked, target a section that contains many lodge-like images */
section[id*="lodge"], section[class*="lodge"] {
  /* ensure section doesn't constrain width */
  width: 100%;
}

/* Images: full-bleed inside their grid cell */
#lodge img, section.lodge img, .lodge-grid img, .section-lodge img,
[data-section="lodge"] img, section[id*="lodge"] img, section[class*="lodge"] img {
  width: 100% !important;
  height: var(--lodge-height) !important;
  object-fit: cover !important;
  object-position: center center !important;
  border-radius: var(--lodge-radius) !important;
  display: block !important;
  background: #111; /* avoids layout shift while loading */
}

/* Remove accidental small max-widths from cards or figures within Lodge */
#lodge .card, section.lodge .card, .lodge-grid .card, [data-section="lodge"] .card,
#lodge figure, section.lodge figure, .lodge-grid figure, [data-section="lodge"] figure {
  max-width: none !important;
  width: 100% !important;
}

/* Nice breathing room for the whole section */
#lodge, section.lodge, .section-lodge, [data-section="lodge"] {
  padding-left: max(env(safe-area-inset-left), 16px);
  padding-right: max(env(safe-area-inset-right), 16px);
}

/* Responsive breakpoints */
@media (max-width: 1200px) {
  #lodge .grid, #lodge .gallery, #lodge .photos, #lodge .images,
  section.lodge .grid, section.lodge .gallery, section.lodge .photos, section.lodge .images,
  .lodge-grid, .lodge .grid, .lodge .gallery, .section-lodge .grid, .section-lodge .gallery,
  [data-section="lodge"] .grid, [data-section="lodge"] .gallery, [data-section="lodge"] {
    grid-template-columns: repeat(2, minmax(260px, 1fr)) !important;
  }
  :root { --lodge-height: 300px; }
}
@media (max-width: 640px) {
  #lodge .grid, #lodge .gallery, #lodge .photos, #lodge .images,
  section.lodge .grid, section.lodge .gallery, section.lodge .photos, section.lodge .images,
  .lodge-grid, .lodge .grid, .lodge .gallery, .section-lodge .grid, .section-lodge .gallery,
  [data-section="lodge"] .grid, [data-section="lodge"] .gallery, [data-section="lodge"] {
    grid-template-columns: 1fr !important;
  }
  :root { --lodge-height: 260px; }
}

/* Ensure images don't shrink due to flex parents */
#lodge *, section.lodge * { min-width: 0; }