/* =========================
   GLOBAL RESET
========================= */
* { box-sizing: border-box; }

main h1{
  text-align:center;
  font-size:2em;
  margin:0 0 5px 0;
}

.tagline{
  font-size:1em;
  color:#555;
  text-align:center;
  margin:0;
}

/* =========================
   CONTAINER
========================= */
.container{
  max-width:1200px;
  margin:0 auto;
  padding:0;
}

/* =========================
   OUTER GRID (cards)
========================= */
.box-container{
  display:grid;
  grid-template-columns: 1fr;
  gap:16px;
  padding:10px;
  justify-items: stretch;
}

@media (min-width:768px){
  .box-container{
    grid-template-columns: 1fr 1fr;
    padding:20px;
  }
}

/* =========================
   CARD
========================= */
.box{
  width:100%;
  margin:0;
  padding:15px;
  border:1px solid #ddd;
  border-radius:10px;
  background:#fff;
  box-shadow:0 4px 8px rgba(0,0,0,0.1);
  display:flex;
  flex-direction:column;
  overflow-x:hidden;              /* prevents right overflow */
}

.box p{
  font-size:1em;
  margin:5px 0 10px;
}

.box p:first-child{ font-weight:bold; }

/* =========================
   INNER GRID (keep 2×2 everywhere)
========================= */
.box-content{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* minmax prevents overflow */
  gap:8px;
  padding:10px;
}

.box-content-row{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* minmax prevents overflow */
  gap:8px;
  padding:10px;
}

/* =========================
   INNER BOXES
   Key change: remove forced square sizing that causes unused space/overflow
========================= */
.inner-box{
  border:1px solid #ccc;
  border-radius:5px;
  display:flex;
  justify-content:center;
  align-items:center;
  box-shadow:0 4px 6px rgba(0,0,0,0.1);
  text-align:center;
  padding:8px;

  width:100%;
  min-width:0;                    /* IMPORTANT in grid to avoid overflow */
}

/* Images inside inner boxes */
.inner-box img{
  max-width:100%;
  height:auto;
  border-radius:5px;
}

/* Pricing */
.discounted-price{
  display:block;
  color:#d32f2f;
  font-size:0.8em;
}

.inner-box p{
  font-size:0.8em;
  margin:5px 0 10px;
}

.rent-info{ text-align:center; }
.rent-info p{
  font-size:0.8em;
  margin:10px 5px 5px;
}
.rent-info p:first-child{ font-weight:bold; }

/* Icons */
.call-icon,.location-icon,.whatsapp-icon{
  margin-right:15px;
  font-size:1em;
  text-decoration:none;
}
.call-icon{ color:#ff0000; }
.location-icon{ color:#0000FF; }
.whatsapp-icon{ color:#25D366; }
.call-icon:hover,.location-icon:hover,.whatsapp-icon:hover{ color:#25D366; }
.call-icon:last-child,.location-icon:last-child{ margin-right:0; }

/* Dropdown: avoid pushing layout */
select,.elegant-dropdown{
  max-width:100%;
  width:100%;
}

/* =========================
   MOBILE TWEAKS (do NOT change layout)
========================= */
@media (max-width:767px){
  .box-container{ padding-top:6px; }
  .box-content{ padding:8px; gap:6px; }
  .box-content-row{ padding:8px; gap:6px; }

  /* give inner boxes a consistent height without forcing squares */
  .inner-box{ min-height: 130px; }
}