/* ---------------- GLOBAL PAGE CENTERING (DESKTOP & TABLET) ---------------- */

.page .site-main,
.page .content-area,
.page .entry-content,
.page .hentry {
  max-width: 1200px;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 40px;
  padding-right: 40px;
  box-sizing: border-box;
}

/* Center all page titles (About, Amenities, Gallery, Location, etc.) */
.page .entry-title,
.page .wp-block-post-title {
  text-align: center;
  margin-bottom: 40px;
}

/* Center Columns blocks on larger screens */
.page .wp-block-columns {
  margin-left: auto !important;
  margin-right: auto !important;
  justify-content: center !important;
  gap: 3rem !important;
  max-width: 1100px;
  align-items: flex-start;
}

/* ---------------- IMAGES ON DESKTOP/TABLET ---------------- */

/* Images that sit in columns next to text */
.page .wp-block-columns .wp-block-column img {
  width: 85% !important;
  max-width: 350px !important;
  height: auto !important;
  margin: 0 auto 1.5rem auto !important;
  display: block;
  border-radius: 10px;
}

/* Keep column text left-aligned */
.page .wp-block-columns .wp-block-column p {
  text-align: left;
}

/* Center galleries on larger screens */
.page .wp-block-gallery {
  margin-left: auto !important;
  margin-right: auto !important;
  max-width: 1100px;
  justify-content: center !important;
}

.page .wp-block-gallery img {
  width: 100% !important;
  height: auto !important;
  border-radius: 8px;
  object-fit: cover;
}

/* ================= MOBILE TWEAKS ================= */

@media (max-width: 768px) {

  /* Less side padding so it does not feel cramped */
  .page .site-main,
  .page .content-area,
  .page .entry-content,
  .page .hentry {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Stack columns (normal) but with smaller gaps */
  .page .wp-block-columns {
    flex-direction: column !important;
    align-items: stretch !important;
    max-width: 100% !important;
    gap: 1.5rem !important;
  }

  /* Slightly smaller body text + tighter spacing between paragraphs */
  .page .entry-content p {
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 0.9rem;
  }

  /* Mobile images inside columns a bit smaller with less bottom margin */
  .page .wp-block-columns .wp-block-column img {
    width: 100% !important;
    max-width: 280px !important;
    margin: 0 auto 1rem auto !important;
  }

  /* --- Make the 4-photo strip into a 2-column grid on mobile --- */
  .page .wp-block-gallery.has-nested-images {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    max-width: 100% !important;
    gap: 0.75rem !important;
  }

  .page .wp-block-gallery.has-nested-images figure.wp-block-image {
    width: 48% !important;
    margin: 0 !important;
  }

  .page .wp-block-gallery.has-nested-images img {
    width: 100% !important;
    height: auto !important;
    border-radius: 8px;
  }

  /* Slightly tighter title spacing on mobile */
  .page .entry-title,
  .page .wp-block-post-title {
    margin-bottom: 24px;
  }
}