/* ==========================================================================
   1. HERO VIDEO COVER BANNER RULES (Custom Responsive Heights)
   ========================================================================== */

/* Laptops and Monitors */
@media (min-width: 768px) {
    [data-block-id] .wp-block-cover,
    #st-john-vi-vacation-rentals,
    .wp-block-cover.has-background-dim {
        min-height: 750px !important;
        height: 750px !important;
        padding-top: 40px !important;
        padding-bottom: 40px !important;
    }
    
    .wp-block-cover video.wp-block-cover__video {
        min-height: 750px !important;
        height: 100% !important;
        object-fit: cover !important;
    }
}

/* Smartphones and Tablets */
@media (max-width: 767px) {
    [data-block-id] .wp-block-cover,
    #st-john-vi-vacation-rentals,
    .wp-block-cover.has-background-dim {
        min-height: 480px !important;
        height: auto !important;
        padding-top: 50px !important;
        padding-bottom: 50px !important;
    }

    .wp-block-cover video.wp-block-cover__video {
        min-height: 480px !important;
        height: 100% !important;
        object-fit: cover !important;
    }
}

/* ==========================================================================
   2. VILLA GRID CONTAINER RULES (Locked 6 Columns Flat)
   ========================================================================== */

/* Universal Layout Foundations */
.st-john-master-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  max-width: 100% !important;
  width: 100% !important;
  margin: 0px auto;
  padding: 0px;
  box-sizing: border-box;
}

/* Desktop Monitor Horizontal Force Layout */
@media (min-width: 1025px) {
  .st-john-master-grid {
    grid-template-columns: repeat(6, 1fr) !important; 
    gap: 12px !important;
  }
}

/* Sandboxed Card Elements */
.st-john-master-grid .direct-villa-card {
  border: 1px solid #dcdfe5;
  border-radius: 12px;
  padding: 10px;
  background: #ffffff;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.07);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
  font-family: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  overflow: hidden;
}

.st-john-master-grid .direct-villa-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
}

/* Thumbnail Scale Layout Box */
.st-john-master-grid .villa-card-image {
  width: 100% !important; 
  max-width: 100% !important;
  height: 120px;
  object-fit: cover; 
  border-radius: 8px; 
  display: block;
  margin-bottom: 8px;
}

/* Clear Font Typography Dimensions */
.st-john-master-grid .villa-title {
  font-size: 12px !important; 
  font-weight: 700 !important; 
  color: #107774; 
  margin: 0 0 4px 0 !important; 
  line-height: 1.25 !important;
  min-height: 48px;
}

.st-john-master-grid .villa-price {
  font-size: 12px !important;
  font-weight: 700;
  color: #2b2b2b;
  margin: 0 0 4px 0 !important;
}

.st-john-master-grid .villa-description {
  font-size: 11px !important;
  color: #4a5568;
  line-height: 1.35 !important;
  margin: 0 0 8px 0 !important;
  min-height: 78px;
}

/* Alignment Bounds for Icon Rows */
.st-john-master-grid .villa-amenities-row {
  display: flex; 
  align-items: center; 
  justify-content: space-between; 
  margin-bottom: 10px; 
  border-top: 1px solid #f1f5f9; 
  padding-top: 6px;
}

.st-john-master-grid .amenity-item {
  display: flex; 
  align-items: center; 
  gap: 2px; 
  font-size: 10px !important; 
  color: #107774; 
  font-weight: 500;
}

.st-john-master-grid .amenity-icon {
  font-size: 11px !important; 
  display: inline-block; 
  line-height: 1;
}

/* Custom Teal Buttons Layout Style */
.st-john-master-grid .villa-btn {
  display: block; 
  text-align: center; 
  background: #107774; 
  color: #ffffff !important;
  font-size: 10.5px !important; 
  font-weight: 700; 
  padding: 8px 2px !important; 
  border-radius: 6px; 
  text-decoration: none;
  box-sizing: border-box;
  transition: background 0.15s ease-in-out;
  width: 100% !important;
}

.st-john-master-grid .villa-btn:hover {
  background: #0b5452;
  color: #ffffff !important;
}