/* =========================
   Rent & Read - override.css
   Purpose: Center tiles grid with equal left/right gutters and tidy headings
   ========================= */

/* 1) Tiles: switch to CSS Grid for stable centering & equal gutters */
section.tiles {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5em; /* card spacing */
  margin: 0 auto 2.5em; /* center the whole block */
  padding: 0 2.5em; /* equal left/right gutters */
}

/* Reset legacy flex spacing that pushed cards to the right */
section.tiles article {
  margin: 0 !important;
  width: auto !important; /* let the grid control width */
}

/* Make tile images responsive */
section.tiles .image img {
  width: 100%;
  height: auto;
  display: block;
}

/* 2) Headings: ensure the feature heading centers properly */
.h2 {
  margin: 0 0 1em 0 !important; /* remove left offset from theme */
  text-align: center;
}

/* 3) Responsive breakpoints (match theme breakpoints) */
@media (max-width: 980px) {
  section.tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 576px) {
  section.tiles {
    grid-template-columns: 1fr;
    gap: 1.25em;
    padding: 0 1.25em; /* slightly smaller gutters on phones */
  }
}

/* Optional: tighten header whitespace (uncomment if needed)
#header { padding: 0.5em 0; }
#header .logo { margin: 0; }
#header nav { top: 0.3em; }
*/

/* 2) ทำรูปเท่ากันทุกการ์ด */
.tiles article .image {
  width: 100%;
  height: 300px; /* ความสูงบังคับเท่ากัน */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tiles article .image img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* ครอบพื้นที่ทั้งหมด โดยไม่บี้ภาพ */
}