/* Home page styles */
.hero { 
  position: relative; 
  background: var(--color-white); 
  padding: var(--space-6) var(--space-4); 
  border-radius: var(--radius-2); 
  box-shadow: inset 0 0 0 1px var(--color-dark), var(--shadow-1); 
  text-align: center; 
  overflow: hidden;
  height: 550px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-2px, -2px);
  transition: transform 300ms ease-out, box-shadow 300ms ease-out;
}

.hero:hover {
  transform: translate(-1px, -1px);
  box-shadow: inset 0 0 0 1px var(--color-dark), var(--shadow-2);
}

/* Hero Video Background */
.hero-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  z-index: 0;
  object-fit: cover;
}

/* Dark overlay for text readability */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(15, 42, 46, 0.50);
  z-index: 2;
}

/* Hero content above video */
.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 800px;
  padding: var(--space-2);
}

.hero h1 { margin-top: 0; font-size: var(--fs-h1); margin-bottom: var(--space-1); color: var(--color-white); }
.hero .hero-lead { margin: 0; color: var(--color-white); }
.hero .hero-owner { margin-top: 4px; color: var(--color-white); }
.hero .hero-form { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); margin-top: var(--space-2); }
.hero .hero-form .row { display: flex; gap: var(--space-1); align-items: center; justify-content: center; }

/* Hero ID Search Form */
#searchByIdForm { display: flex; align-items: center; gap: 8px; background: var(--color-white); padding: 6px 6px 6px 12px; border: 1px solid var(--color-dark); border-radius: var(--radius-r); box-shadow: var(--shadow-1); }
#searchByIdForm .input-prefix { color: var(--color-grey-2); font-size: var(--fs-p); font-weight: 500; transition: color 300ms ease-out; }
#searchByIdForm input { border: none; outline: none; background: transparent; padding: 6px 6px 6px 4px; font-size: var(--fs-p); margin-left: 4px; }
#searchByIdForm input:focus ~ .input-prefix,
#searchByIdForm:focus-within .input-prefix { color: var(--color-accent-1); }
#searchByIdForm button { margin: 0; padding: 0; min-height: unset; width: 40px; height: 40px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; }
#searchByIdForm button img { width: 20px; height: 20px; }

/* SVG hover effect for search button */
#searchByIdForm button img {
  transition: filter 300ms ease-out;
}

#searchByIdForm button:hover img {
  filter: brightness(0) invert(1);
}

/* Advanced Search Button */
#openSearchHome { font-size: var(--fs-p); }
#openSearchHome img { width: 24px; height: 24px; transition: filter 300ms ease-out; }

#openSearchHome:hover img {
  filter: brightness(0) invert(1);
}

/* Property Cards */
.card .card-description { margin-bottom: var(--space-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card .price .price-type { margin-left: 8px; font-weight: 400; font-size: 14px; }

/* Overlay Modal Styles */
.overlay-header .overlay-close img { width: 24px; height: 24px; }
.overlay-header h3 { margin: 0; font-size: var(--fs-h3); }
.overlay-footer .btn img { width: 20px; height: 20px; }

/* Grid responsiveness is handled globally in main.css */

/* Services Section */
.services-section {
  background: var(--color-white);
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  padding: var(--space-8) 0;
  margin-top: var(--space-8);
}

.services-showcase {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--space-3);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: center;
}

.services-content {
  padding: 0;
}

.services-content h2 {
  font-size: var(--fs-h2);
  margin: 0 0 var(--space-3);
  color: var(--color-dark);
}

.services-content p {
  font-size: var(--fs-p);
  line-height: 1.8;
  color: var(--color-grey-1);
  margin: 0 0 var(--space-3);
}

.services-image {
  position: relative;
  height: 100%;
  min-height: 400px;
  overflow: hidden;
}

.services-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: var(--radius-2);
  border: 1px solid var(--color-dark);
  box-shadow: var(--shadow-2);
}

/* Hero responsive heights */
@media (max-width: 1279px) {
  .hero {
    height: 500px;
  }
}

@media (max-width: 799px) {
  .hero {
    height: auto;
    min-height: 400px;
    padding: var(--space-5) var(--space-3);
  }
  
  /* Mobile search form adjustments */
  #searchByIdForm {
    width: 100%;
  }
  
  #searchByIdForm input {
    flex: 1;
  }
  
  #searchByIdForm button {
    margin-left: auto;
  }
}

/* Responsive for Services Section */
@media (max-width: 1279px) {
  .services-showcase {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
  
  .services-image {
    min-height: 300px;
  }
}

@media (max-width: 799px) {
  .services-image {
    min-height: 250px;
  }
}