/* ========================================
   HOMEPAGE — Black textured + carousels
   ======================================== */

/* Textured dark background (no photo) */
body.acasa .main-content::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(1200px 800px at 15% 20%, rgba(255,255,255,.035) 0%, transparent 60%),
    radial-gradient(900px 600px at 85% 70%, rgba(255,255,255,.03) 0%, transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,.02), rgba(255,255,255,.0) 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.015) 0 2px, transparent 2px 6px),
    linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,.2));
  background-attachment: fixed;
}

/* Sections transparent so the site bg shows through */
.page-hero, .services-preview, .map-section, footer, footer .footer-container { background: transparent !important; }

/* ----------------------------------------
   TOP INTRO (title + subtitle + CTA)
----------------------------------------- */
.page-hero{ padding: 60px 0 24px; position: relative; z-index:1; }
.page-hero h1{ margin-bottom: 14px; text-align:center; }
.page-hero .subtitle{
  text-align:center; max-width: 860px; margin: 0 auto 22px;
  color: var(--light-grey); font-size: 1.1rem;
}
.page-hero .cta-button{ display:block; width:max-content; margin:0 auto; }

/* Full-bleed image under CTA (mobile-only; hidden on desktop) */
.hero-image-full{ margin:0; }
.hero-image-full img{
  width:100%; height:auto; display:block; object-fit:cover; border-radius:0;
}
/* Hide the image on desktop */
@media (min-width:1025px){
  .hero-image-full{ display:none; }
}

/* ----------------------------------------
   GENERIC CAROUSEL (touch-friendly)
   We’ll strip the “box” look on homepage below.
----------------------------------------- */
.swipe-carousel{
  position: relative;
  background: rgba(255,255,255,.03);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: var(--border-radius-xl);
  padding: 14px 50px;
  box-shadow: var(--shadow-medium);
  overflow: visible; /* make sure arrows are never clipped */
}
.swipe-carousel .track{
  display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
  -ms-overflow-style: none;            /* IE/Edge legacy */
}
.swipe-carousel .track::-webkit-scrollbar{ display:none; }  /* Chrome/Edge/Safari */

.swipe-carousel .slide{
  flex:0 0 100%; scroll-snap-align:center; position:relative;
  border-radius: var(--border-radius-large); overflow:hidden;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
}
.swipe-carousel .slide img{
  width:100%; height:100%; object-fit:cover; display:block;
  filter: brightness(.95) contrast(1.05);
}

/* arrows */
.swipe-carousel .nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:50%;
  border:1px solid rgba(255,255,255,.18); background:rgba(0,0,0,.45);
  color:#fff; font-size:22px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition: var(--transition-medium); z-index:2;
}
.swipe-carousel .nav:hover{ transform:translateY(-50%) scale(1.06); box-shadow: var(--shadow-white); }
.swipe-carousel .nav:disabled{ opacity:.4; cursor:not-allowed; }
.swipe-carousel .prev{ left:10px; } .swipe-carousel .next{ right:10px; }

/* dots */
.swipe-carousel .dots{
  display:flex; gap:6px; justify-content:center; margin-top: 10px;
}
.swipe-carousel .dot{
  width:10px; height:10px; border-radius:50%;
  background:rgba(255,255,255,.22);
  border:1px solid rgba(255,255,255,.28);
  cursor:pointer; transition:var(--transition-fast);
}
.swipe-carousel .dot.active{ background: var(--silver); box-shadow:0 0 8px rgba(255,255,255,.35); }

/* reviews slides */
.slide.review{ padding: 24px; display:grid; align-content:center; }
.slide.review p{ color: var(--off-white); font-size: 1.02rem; margin: 8px 0 10px; }
.slide.review .author{ color: var(--light-grey); font-size: .95rem; }
.slide.review .stars{ letter-spacing:.15em; }

/* ----------------------------------------
   HOMEPAGE: remove “box” around carousels
   (borderless, edge-to-edge images)
----------------------------------------- */
body.acasa .swipe-carousel{
  background: none; border: none; padding: 0; box-shadow: none;
  overflow: visible; /* keep from clipping arrows in borderless look */
}
body.acasa .swipe-carousel .track{ gap:0; }
body.acasa .swipe-carousel .slide{
  border:none; border-radius:0; background:none; overflow:hidden;
}
body.acasa .swipe-carousel .slide img{ border-radius:0; }

/* ----------------------------------------
   LAYOUT for THREE SLIDESHOWS
----------------------------------------- */
.homepage-slideshows{ padding: 26px 0 6px; display:grid; gap:24px; }
.slideshow-block{ position:relative; }

/* Desktop: 3 in a row and uniform heights */
@media (min-width:1024px){
  .homepage-slideshows{
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    align-items: start;
  }
  .homepage-slideshows .swipe-carousel .slide{ height: 280px; }

  /* DESKTOP IMAGE FIT: show entire image without cropping for Photos & Gallery */
  .homepage-slideshows .slideshow-block[data-type="photos"] .slide img,
  .homepage-slideshows .slideshow-block[data-type="gallery"] .slide img{
    object-fit: contain; object-position: center center; background: transparent;
  }

  /* Reviews need a bit more room for text */
  .slideshow-block[data-type="reviews"] .slide{
    height: 280px; padding: 28px;
    background: rgba(255,255,255,.03);
    border: 1px solid rgba(255,255,255,.08);
    border-radius: var(--border-radius-large);
  }
}

/* Tablet/phone: stack vertically */
@media (max-width:1023.98px){
  .homepage-slideshows .swipe-carousel .slide{ min-height: 260px; }
  .homepage-slideshows .slideshow-block[data-type="photos"] .slide img,
  .homepage-slideshows .slideshow-block[data-type="gallery"] .slide img{
    object-fit: cover; object-position: center center;
  }
}

/* ----------------------------------------
   NEW: WIDE SLIDESHOW above map
----------------------------------------- */
.slideshow-wide{ padding: 22px 0 10px; position: relative; z-index:1; }
.slideshow-wide .slideshow-title{
  text-align:center; margin: 0 0 14px;
  background: linear-gradient(135deg, var(--white), var(--silver));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.slideshow-wide .swipe-carousel .slide{ height: clamp(220px, 40vw, 520px); }
.slideshow-wide .swipe-carousel .slide img{ object-fit: cover; object-position: center; }
.slideshow-wide .swipe-carousel .slide img{ border-radius: var(--border-radius-large); }
.slideshow-wide .swipe-carousel .prev{ left:12px; }
.slideshow-wide .swipe-carousel .next{ right:12px; }

/* ----------------------------------------
   SERVICES
----------------------------------------- */
.services-preview{ padding: 70px 0 90px; }
.services-preview h2{
  text-align:center; margin-bottom: 50px;
  background: linear-gradient(135deg, var(--white), var(--silver));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.services-grid{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 28px;
}
.service-card{
  background: rgba(255,255,255,.03);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(18px);
  padding: 38px 28px; border-radius: var(--border-radius-xl);
  text-align: center; border: 1px solid rgba(153,153,153,.14);
  transition: var(--transition-slow);
}
.service-card:hover{
  transform: translateY(-6px);
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.22);
  box-shadow: var(--shadow-glow);
}
.service-card h3{ color: var(--silver); margin-bottom: 12px; font-weight: var(--font-weight-bold); }
.service-card p{ color: var(--light-grey); line-height: 1.75; }

/* ----------------------------------------
   MAP (full color)
----------------------------------------- */
.map-section{ padding: 60px 0; }
.map-section h2{ text-align:center; margin-bottom: 22px; }
.map-wrap{
  border-radius: var(--border-radius-xl);
  border: 1px solid rgba(255,255,255,.12);
  overflow: hidden; background: rgba(255,255,255,.03);
  box-shadow: var(--shadow-medium);
}
.map-wrap iframe{ width:100%; height: 420px; display:block; border:0; }

/* ----------------------------------------
   RESPONSIVE tweaks
----------------------------------------- */
@media (max-width:1024px){ .page-hero{ padding: 36px 0 14px; } }
@media (max-width:768px){
  .page-hero .subtitle{ font-size:1rem; }
  .map-wrap iframe{ height: 360px; }
}
@media (max-width:480px){ .map-wrap iframe{ height: 320px; } }

/* ===== Desktop: show portrait gallery images side-by-side ===== */
@media (min-width:1024px) {
.slideshow-wide .swipe-carousel .track{
  overflow-x: visible; display: flex; flex-wrap: wrap; gap: 20px; scroll-snap-type: none;
  justify-content:center; /* center the row */
}
.slideshow-wide .swipe-carousel .slide{
  flex: 0 0 auto; width: auto; height: auto; border-radius: var(--border-radius-large); overflow: hidden;
}
.slideshow-wide .swipe-carousel .slide img{
  display: block; width: auto; height: 480px; object-fit: cover;
}
.slideshow-wide .swipe-carousel .nav,
.slideshow-wide .swipe-carousel .dots{ display: none; }
}

/* ===== MOBILE FIX: show full portrait image in wide slideshow ===== */
@media (max-width: 768px) {
.slideshow-wide .swipe-carousel .slide{ height: auto !important; }
.slideshow-wide .swipe-carousel .slide img{
  width: 100%; height: auto; object-fit: contain; background: #000; border-radius: var(--border-radius-large);
}
.slideshow-wide .swipe-carousel .dots{ margin-top: 12px; }
}

/* ========================================
 NEW • DESKTOP‑ONLY POLISH (no mobile changes)
 ======================================== */

/* Hide helper class on small screens */
.desktop-only{ display:none; }
@media (min-width:1024px){ .desktop-only{ display:block; } }

/* 1) Feature Rail — three glass stat cards */
@media (min-width:1024px){
.feature-rail{
  margin-top: 18px; margin-bottom: 10px;
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.feature-card{
  display:flex; align-items:center; gap:16px;
  padding:18px 20px;
  background: rgba(255,255,255,.04);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(20px);
  border:1px solid rgba(255,255,255,.10);
  border-radius: 16px;
  box-shadow: var(--shadow-light);
  transition: transform var(--transition-medium), box-shadow var(--transition-medium), border-color var(--transition-medium);
}
.feature-card:hover{
  transform: translateY(-4px);
  border-color: rgba(255,255,255,.18);
  box-shadow: var(--shadow-medium);
}
.feature-card .icon{
  width:42px; height:42px; display:grid; place-items:center; flex:0 0 42px;
  border-radius: 12px; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.10);
}
.feature-card .icon svg{ width:22px; height:22px; color:#fff; opacity:.9; }
.feature-card .meta h3{
  margin:0; font-size:1.15rem; line-height:1.1;
  background: linear-gradient(135deg, var(--white), var(--silver));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text;
}
.feature-card .meta p{ margin:2px 0 0; font-size:.95rem; color:rgba(255,255,255,.78); }
}

/* 2) Desktop grid accent behind the three carousels */
@media (min-width:1024px){
.homepage-slideshows{
  position:relative; isolation:isolate;
}
.homepage-slideshows::before{
  content:""; position:absolute; inset:-10px -20px -14px; z-index:-1;
  background:
    radial-gradient(1200px 600px at 10% 20%, rgba(255,255,255,.06) 0%, transparent 60%),
    radial-gradient(900px 500px at 80% 80%, rgba(255,255,255,.05) 0%, transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 8px);
  border:1px solid rgba(255,255,255,.08);
  border-radius: 24px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04), 0 10px 40px rgba(0,0,0,.35);
}
}

/* 3) Desktop hover captions on Photos & Gallery */
@media (min-width:1024px){
.slideshow-block[data-type="photos"] .slide::after,
.slideshow-block[data-type="gallery"] .slide::after{
  content:""; position:absolute; inset:0; opacity:0; transition:opacity var(--transition-medium);
  background: linear-gradient(180deg, rgba(0,0,0,0) 60%, rgba(0,0,0,.55) 100%);
}
.slideshow-block[data-type="photos"] .slide:hover::after,
.slideshow-block[data-type="gallery"] .slide:hover::after{ opacity:1; }
.slideshow-block[data-type="photos"] .slide::before,
.slideshow-block[data-type="gallery"] .slide::before{
  content:attr(data-caption);
  position:absolute; left:14px; bottom:12px; right:14px;
  font-size:.95rem; color:#fff; opacity:0; transform: translateY(6px);
  transition: all var(--transition-medium);
  text-shadow: 0 2px 10px rgba(0,0,0,.6);
}
.slideshow-block[data-type="photos"] .slide:hover::before,
.slideshow-block[data-type="gallery"] .slide:hover::before{
  opacity:1; transform: translateY(0);
}
}
/* To set a caption, add data-caption="text" on <article class="slide"> (desktop only effect). */

/* 4) Desktop-only subtle inner shadow on wide partner gallery */
@media (min-width:1024px){
.slideshow-wide{ position:relative; }
.slideshow-wide::after{
  content:""; position:absolute; inset:0 -10px; pointer-events:none;
  box-shadow: inset 0 60px 80px -60px rgba(0,0,0,.6), inset 0 -60px 80px -60px rgba(0,0,0,.6);
}
}