/* ============================================
   styles-home.css — Homepage only styles
   ============================================ */

/* ── HERO ── */
.hero {
  position: relative;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  border-radius: 14px;
  max-width: 1368px;
  width: calc(100% - 32px);
  margin: 16px auto;
}
.hero-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background-color: var(--wp--preset--color--contrast) !important;
  opacity: 0.8;
}
.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 52px 24px;
}
.hero-content h1 {
  font-size: clamp(26px, 4.5vw, 50px);
  font-weight: 800;
  line-height: 1.2;
  color: #fff;
  margin-bottom: 20px;
}
.hero-city {
  font-size: clamp(32px, 5vw, 56px);
  font-weight: 800;
  color: #fff;
  letter-spacing: 1px;
  margin-bottom: 10px;
}
.hero-phone {
  font-size: clamp(28px, 5vw, 52px);
  font-weight: 900;
  color: #fff;
  letter-spacing: 1px;
  display: block;
  margin-top: 4px;
  transition: opacity 0.2s;
}
.hero-phone:hover { opacity: 0.85; }
.hero-wa-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
  background: #25d366;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  padding: 13px 28px;
  border-radius: 40px;
  transition: background 0.2s, transform 0.2s;
}
.hero-wa-btn:hover { background: #1ebe5c; transform: translateY(-2px); }
.hero-wa-btn svg { width: 22px; height: 22px; fill: #fff; flex-shrink: 0; }

/* ── SERVICE CARDS ── */
.services {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 16px;
  background: #000;
  max-width: 1400px;
  margin: 0 auto;
}
.service-card {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  min-height: 480px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.service-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card-gold::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(180,130,0,0.55);
}
.card-red::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(160,20,20,0.60);
}
.service-card-body {
  position: relative;
  z-index: 2;
  padding: 36px 36px 40px;
  text-align: center;
}
.service-card-body h2 {
  font-size: clamp(28px, 3.5vw, 44px);
  font-weight: 800;
  color: #fff;
  margin-bottom: 16px;
  line-height: 1.1;
}
.service-card-body p {
  font-size: 16px;
  color: rgba(255,255,255,0.9);
  line-height: 1.6;
  margin-bottom: 28px;
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
}
.btn-learn {
  display: inline-block;
  background: rgba(30,30,30,0.85);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  padding: 12px 36px;
  border-radius: 40px;
  border: 1px solid rgba(255,255,255,0.2);
  backdrop-filter: blur(6px);
  transition: background 0.2s;
}
.btn-learn:hover { background: rgba(50,50,50,0.95); }

/* ── REVIEWS ── */
.reviews-section { background: #000; padding: 56px 20px; overflow: hidden; }
.reviews-header { text-align: center; margin-bottom: 36px; }
.reviews-stars-big { font-size: 44px; color: #f5ba00; letter-spacing: 6px; margin-bottom: 10px; }
.google-logo {
  font-size: 32px; font-weight: 700; letter-spacing: -1px;
  margin: 0 auto 4px;
  display: flex; justify-content: center; align-items: center;
}
.g-blue  { color: #4285f4; }
.g-red   { color: #ea4335; }
.g-yellow{ color: #fbbc05; }
.g-green { color: #34a853; }

.reviews-slider-wrap { overflow: hidden; position: relative; }
.reviews-slider-wrap::before,
.reviews-slider-wrap::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 60px; z-index: 2; pointer-events: none;
}
.reviews-slider-wrap::before { left: 0; background: linear-gradient(to right, #000, transparent); }
.reviews-slider-wrap::after  { right: 0; background: linear-gradient(to left, #000, transparent); }

.reviews-track {
  display: flex; gap: 16px;
  animation: slideReviews 50s linear infinite;
  width: max-content;
}
.reviews-track:hover { animation-play-state: paused; }
@keyframes slideReviews {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.review-card {
  background: #fff; border-radius: 8px; padding: 20px;
  width: 300px; flex-shrink: 0; color: #111;
}
.review-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.review-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px; color: #fff; flex-shrink: 0;
}
.av-blue   { background: #4285f4; }
.av-red    { background: #ea4335; }
.av-green  { background: #34a853; }
.av-purple { background: #9c27b0; }
.av-teal   { background: #009688; }
.av-orange { background: #ff5722; }
.av-indigo { background: #3f51b5; }
.av-amber  { background: #ff8f00; }
.av-grey   { background: #607d8b; }
.av-pink   { background: #e91e63; }
.review-meta { flex: 1; min-width: 0; }
.review-name { font-weight: 600; font-size: 14px; color: #111; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.review-when { font-size: 12px; color: #777; }
.review-google-icon {
  width: 18px; height: 18px; flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Cpath fill='%234285F4' d='M24 9.5c3.54 0 6.71 1.22 9.21 3.6l6.85-6.85C35.9 2.38 30.47 0 24 0 14.62 0 6.51 5.38 2.56 13.22l7.98 6.19C12.43 13.72 17.74 9.5 24 9.5z'/%3E%3Cpath fill='%2334A853' d='M46.98 24.55c0-1.57-.15-3.09-.38-4.55H24v9.02h12.94c-.58 2.96-2.26 5.48-4.78 7.18l7.73 6c4.51-4.18 7.09-10.36 7.09-17.65z'/%3E%3Cpath fill='%23FBBC05' d='M10.53 28.59c-.48-1.45-.76-2.99-.76-4.59s.27-3.14.76-4.59l-7.98-6.19C.92 16.46 0 20.12 0 24c0 3.88.92 7.54 2.56 10.78l7.97-6.19z'/%3E%3Cpath fill='%23EA4335' d='M24 48c6.48 0 11.93-2.13 15.89-5.81l-7.73-6c-2.15 1.45-4.92 2.3-8.16 2.3-6.26 0-11.57-4.22-13.47-9.91l-7.98 6.19C6.51 42.62 14.62 48 24 48z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.review-stars { color: #f5ba00; font-size: 15px; letter-spacing: 1px; margin-bottom: 8px; display: flex; align-items: center; gap: 4px; }
.review-verified { width: 16px; height: 16px; background: #4285f4; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.review-verified::after { content: '✓'; color: #fff; font-size: 10px; font-weight: 700; }
.review-text { font-size: 13.5px; color: #333; line-height: 1.6; margin-bottom: 12px; }
.review-readmore { font-size: 13px; color: #555; font-weight: 500; cursor: pointer; }

/* ── MOBILE CALLOUT ── */
.mobile-callout {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 16px; padding: 16px;
  background: #000; max-width: 1400px; margin: 0 auto;
}
.mobile-callout img { width: 100%; height: auto; display: block; border-radius: 14px; }

/* ── VISIT SECTION (homepage) ── */
.visit-section {
  background: #000; padding: 20px 20px 40px;
  display: flex; gap: 60px; align-items: center;
  max-width: 1400px; margin: 0 auto;
}
.visit-photo { flex: 0 0 54%; border-radius: 14px; overflow: hidden; }
.visit-photo img { width: 100%; height: 460px; object-fit: cover; display: block; }
.visit-content { flex: 1; }
.visit-content h2 { font-size: 42px; font-weight: 800; color: #fff; margin-bottom: 18px; }
.visit-content p { font-size: 16px; color: #ccc; line-height: 1.7; margin-bottom: 28px; }
.btn-visit {
  display: inline-block;
  background: rgba(255,255,255,0.1); color: #fff;
  font-size: 15px; font-weight: 600;
  padding: 12px 32px; border-radius: 40px;
  border: 1px solid rgba(255,255,255,0.25);
  transition: background 0.2s;
}
.btn-visit:hover { background: rgba(255,255,255,0.18); }

/* ── POPUP ── */
.popup-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.8); z-index: 9998;
  align-items: center; justify-content: center;
}
.popup-overlay.active { display: flex; }
.popup-box {
  position: relative; max-width: 540px; width: 92%;
  border-radius: 10px; overflow: hidden;
  animation: zoomIn 0.35s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes zoomIn {
  from { transform: scale(0.75); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}
.popup-box img { width: 100%; display: block; }
.popup-close {
  position: absolute; top: 10px; right: 12px;
  width: 32px; height: 32px;
  background: rgba(0,0,0,0.65); color: #fff;
  border: none; border-radius: 50%; font-size: 17px;
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
}
.popup-close:hover { background: #000; }

/* ── RESPONSIVE (homepage extras) ── */
@media (max-width: 900px) {
  .services { grid-template-columns: 1fr; }
  .service-card { min-height: 360px; }
  .mobile-callout { grid-template-columns: 1fr; }
  .visit-section { flex-direction: column; gap: 28px; }
  .visit-photo { flex: none; width: 100%; }
  .visit-photo img { height: 280px; }
}