/* === Unified Gallery Style Based on Bathroom === */

/* Portfolio layout & polish */
section.portfolio .portfolio-grid { display:grid; grid-template-columns: repeat(3, minmax(240px,1fr)); gap:28px; }
@media (max-width:1024px){ section.portfolio .portfolio-grid{ grid-template-columns: repeat(2, minmax(240px,1fr)); } }
@media (max-width:640px){ section.portfolio .portfolio-grid{ grid-template-columns: 1fr; } }
section.portfolio .card { border-radius:22px; overflow:hidden; box-shadow:0 10px 24px rgba(0,0,0,0.12); border:1px solid rgba(0,0,0,0.06); background:#fff; }
section.portfolio .card .thumb { height:190px; background-size:cover; background-position:center; border-bottom:1px solid rgba(0,0,0,0.06); }
section.portfolio .card h3 { font-size:1.05rem; padding:10px 14px 12px; margin:0; }
section.portfolio .card > a.card-link { display:block; text-decoration:none; color:inherit; border-radius:22px; overflow:hidden; }
section.portfolio .card:hover { transform: translateY(-4px) scale(1.02); box-shadow:0 16px 32px rgba(0,0,0,0.16); transition: all .2s ease; }
html { scroll-behavior: smooth; }



.section-hero { padding:56px 0 12px; text-align:left; }
.section-hero h1 { margin:0 0 6px; font-size:2rem; }
.section-hero p { color:#6b7280; margin:0 0 24px; }
.gallery-grid { display:grid; grid-template-columns: repeat(3, minmax(240px,1fr)); gap:16px; }
@media (max-width:1024px){ .gallery-grid { grid-template-columns: repeat(2, minmax(200px,1fr)); } }
@media (max-width:640px){ .gallery-grid { grid-template-columns: 1fr; } }
.gallery-grid a.tile { display:block; border-radius:16px; overflow:hidden; box-shadow:0 8px 20px rgba(0,0,0,0.10); background:#fff; border:1px solid rgba(0,0,0,0.06); }
.gallery-grid a.tile img { width:100%; height:220px; object-fit:cover; display:block; }
.breadcrumbs { font-size:.9rem; margin-bottom:12px; color:#6b7280; }
.breadcrumbs a { color: inherit; text-decoration: none; }
.container.narrow { max-width: 960px; margin: 0 auto; padding: 0 16px; }



.lightbox-overlay { position:fixed; inset:0; background:rgba(0,0,0,.92); display:none; align-items:center; justify-content:center; z-index:9999; }
.lightbox-overlay.open { display:flex; }
.lightbox-stage { position:relative; width:92vw; height:90vh; display:flex; align-items:center; justify-content:center; }
.lightbox-stage img { max-width:100%; max-height:100%; object-fit:contain; }
.lb-btn { position:absolute; top:50%; transform:translateY(-50%); border:0; background:rgba(255,255,255,.12); color:#fff; width:56px; height:56px; border-radius:999px; font-size:28px; cursor:pointer; }
.lb-prev{left:18px;} .lb-next{right:18px;}
.lb-close{position:absolute; top:18px; right:18px; width:44px; height:44px; font-size:22px; background:rgba(255,255,255,.12); border-radius:999px; border:0; color:#fff; cursor:pointer;}
.lb-full{position:absolute; bottom:18px; right:18px; border:0; padding:10px 12px; color:#fff; background:rgba(255,255,255,.12); border-radius:10px; cursor:pointer;}
.lightbox-overlay button:hover{background:rgba(255,255,255,.2);}



/* Video badge on gallery tile */
.gallery-grid a.tile .tile-badge{
  position:absolute; top:10px; left:10px; padding:6px 10px;
  background:rgba(0,0,0,.65); color:#fff; border-radius:10px;
  font-size:.85rem; font-weight:600; letter-spacing:.2px;
}
/* Lightbox video element mirrors image sizing */
.lightbox-stage video{ max-width:100%; max-height:100%; object-fit:contain; display:none; }



/* Unmute overlay + audio toggle */
.lb-unmute{
  position: fixed;
  left: 50%;
  bottom: 14%;
  transform: translateX(-50%);
  padding: 12px 16px;
  font-weight: 700;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  color: #111;
  cursor: pointer;
  z-index: 10000;
  display: none; /* shown only when video is active and muted */
}
.lb-audio-toggle{
  position:absolute;
  bottom: 18px;
  left: 18px;
  border:0;
  background: rgba(255,255,255,.12);
  color:#fff;
  width:44px; height:44px; border-radius:999px;
  font-size:20px; cursor:pointer; display:none;
}
.lightbox-overlay button:hover{ filter: brightness(1.1); }



/* Hero description: pulled-back look with a trailing underline */
.section-hero p {
  position: relative;
  display: inline-block;
  padding-right: 140px;   /* creates the 'pulled back' negative space to the right */
  margin-top: 10px;
}
.section-hero p::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -14px;
  height: 3px;
  width: 220px;           /* length of the white line under the text */
  background: #ffffff;
  border-radius: 2px;
  opacity: 0.9;
}
@media (max-width: 640px){
  .section-hero p{ padding-right: 80px; }
  .section-hero p::after{ width: 140px; }
}



/* === Refined hero description spacing + subtle underline === */
@media (min-width: 768px){
  .section-hero p{
    padding-right: 240px !important;   /* pull text back a bit more */
  }
  .section-hero p::after{
    width: 180px !important;
    background: linear-gradient(90deg, rgba(255,255,255,.45), rgba(255,255,255,0)) !important;
    bottom: -12px !important;
    pointer-events: none;
  }
}
@media (max-width: 767px){
  .section-hero p{ padding-right: 90px !important; }
  .section-hero p::after{
    width: 120px !important;
    background: linear-gradient(90deg, rgba(255,255,255,.35), rgba(255,255,255,0)) !important;
    pointer-events: none;
  }
}



    /* Final scoped fix: gallery footer blends with page background, no borders/shadows */
    
    body.gallery-bathroom .gallery-grid ~ footer.footer,
    body.gallery-kitchen .gallery-grid ~ footer.footer,
    body.gallery-garden .gallery-grid ~ footer.footer,
    body.gallery-bathroom .gallery-grid ~ footer.footer .container,
    body.gallery-kitchen .gallery-grid ~ footer.footer .container,
    body.gallery-garden .gallery-grid ~ footer.footer .container {
      background: transparent !important;
      border-top: 0 !important;
      box-shadow: none !important;
    }
  


  html.dark { --site-bg-dark:#2D2D2D; --site-text-dark:#F5F5F5; }
  html.dark body,
  html.dark .hero ~ section, html.dark .hero ~ section > .container,
  html.dark .intro, html.dark .intro > .container,
  html.dark #portfolio, html.dark section.portfolio, html.dark #portfolio + section, html.dark #portfolio + section > .container,
  html.dark section.contact, html.dark section.contact > .container,
  html.dark footer {
    background: var(--site-bg-dark) !important; background-image:none !important; color: var(--site-text-dark); border:0 !important; box-shadow:none !important;
  }



  /* Transparent portfolio wrapper (so dark bg shows) + blue footer line */
  html.dark { --accent-dark:#00E5FF; }
  html.dark section.portfolio,
  html.dark section.portfolio > .container,
  html.dark #portfolio,
  html.dark #portfolio > .container {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: 0 !important;
  }
  html.dark footer { border-top: 2px solid var(--accent-dark) !important; }



  /* فقط Dark Mode */
  html.dark { --site-bg-dark:#2D2D2D; --site-text-dark:#F5F5F5; }

  /* هر چیزی از بعدِ هیرو */
  html.dark .hero ~ *,
  html.dark .hero ~ * > .container {
    background: var(--site-bg-dark) !important;
    background-image: none !important;
    color: var(--site-text-dark) !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /* خودِ اولین سکشن: Welcome (.intro) و کانتینرش */
  html.dark .hero + section.intro,
  html.dark .hero + section.intro > .container,
  html.dark section.intro,
  html.dark section.intro > .container {
    background: var(--site-bg-dark) !important;
    background-image: none !important;
  }

  /* هر pseudo-element که نوار/اوورلی می‌کشد */
  html.dark .hero ~ *::before,
  html.dark .hero ~ *::after,
  html.dark section.intro::before,
  html.dark section.intro::after {
    background: none !important;
    box-shadow: none !important;
    border: 0 !important;
  }

  /* اگر دیوایدر/نوار میانی با کلاس سفارشی داشتی */
  html.dark .section-divider,
  html.dark .divider,
  html.dark .band,
  html.dark .spacer,
  html.dark .welcome-strip,
  html.dark .welcome-band {
    background: var(--site-bg-dark) !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }



  /* Dark mode ultra-fix: kill any background on the intro block and its wrappers */
  html.dark { --site-bg-dark:#2D2D2D; --site-text-dark:#F5F5F5; }

  /* Force page background */
  html.dark, html.dark body { background: var(--site-bg-dark) !important; }

  /* INTRO and its container fully transparent so page bg shows through */
  html.dark section.intro,
  html.dark section.intro > .container,
  html.dark .hero + section.intro,
  html.dark .hero + section.intro > .container {
    background: transparent !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /* Any child wrappers inside intro must not repaint */
  html.dark section.intro *:not(img):not(video):not(canvas) {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
  }

  /* Remove pseudo-element overlays on intro & hero that could bleed */
  html.dark .hero::before,
  html.dark .hero::after,
  html.dark section.intro::before,
  html.dark section.intro::after {
    display: none !important;
    background: none !important;
    box-shadow: none !important;
  }

  /* Ensure separators/bands near intro match bg */
  html.dark .section-divider,
  html.dark .divider,
  html.dark .band,
  html.dark .spacer,
  html.dark .welcome-strip,
  html.dark .welcome-band {
    background: var(--site-bg-dark) !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }



  /* Use the same dark bg everywhere */
  html.dark { --site-bg-dark:#0f1416; --site-text-dark:#F5F5F5; }

  /* A) Make ANY wrappers/bands around Contact match bg */
  html.dark section.contact,
  html.dark section.contact > .container,
  html.dark #contact,
  html.dark #contact > .container,
  html.dark .contact,
  html.dark .contact-section,
  html.dark .contact-wrapper,
  html.dark .contactus,
  html.dark .contact-container,
  html.dark .hero ~ section.contact,
  html.dark #portfolio + section,
  html.dark #portfolio + section > .container {
    background: var(--site-bg-dark) !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  /* Neutralize separator lines/borders near contact */
  html.dark hr,
  html.dark .separator,
  html.dark .section-divider,
  html.dark .divider,
  html.dark .band,
  html.dark .spacer {
    background: var(--site-bg-dark) !important;
    border-color: var(--site-bg-dark) !important;
    outline-color: var(--site-bg-dark) !important;
    box-shadow: none !important;
  }

  /* B) Contact Us text becomes red in dark mode (headings/labels/links only) */
  html.dark section.contact h1,
  html.dark section.contact h2,
  html.dark section.contact h3,
  html.dark section.contact p,
  html.dark section.contact label,
  html.dark section.contact a,
  html.dark #contact h1,
  html.dark #contact h2,
  html.dark #contact h3,
  html.dark #contact p,
  html.dark #contact label,
  html.dark #contact a {
    color: #FF4D4D !important;
  }

  /* Keep inputs/placeholders/buttons readable (don't force them red) */
  html.dark section.contact input,
  html.dark section.contact button {
    color: var(--site-text-dark) !important;
  }


body {
  margin: 0;
  padding: 0;
  background: linear-gradient(180deg, #d7d3d3 0%, #8a8888 50%, #2b2b2b 100%) !important;
  background-attachment: fixed;
  color: #f5f5f5 !important;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main { flex: 1; }

.footer, .site-footer {
  background: #0b1220 !important;
  color: #f5f5f5 !important;
  border-top: 1px solid rgba(255,255,255,0.2) !important;
  text-align: center;
  padding: 2rem 1rem;
  box-shadow: none !important;
}

.footer p, .footer a, .footer small {
  color: #f5f5f5 !important;
  opacity: 0.9;
}


/* Unified consistent dark style for all gallery pages */
html:not(.dark) body.gallery-bathroom .footer,
html:not(.dark) body.gallery-flooring .footer,
html:not(.dark) body.gallery-painting .footer,
html:not(.dark) body.gallery-garden .footer,
html:not(.dark) body.gallery-kitchen .footer {
  background: #0b1220 !important;
  color: #f5f5f5 !important;
  border-top: 1px solid rgba(255,255,255,0.2) !important;
}

html:not(.dark) body.gallery-bathroom .footer-wrapper,
html:not(.dark) body.gallery-flooring .footer-wrapper,
html:not(.dark) body.gallery-painting .footer-wrapper,
html:not(.dark) body.gallery-garden .footer-wrapper,
html:not(.dark) body.gallery-kitchen .footer-wrapper,
html:not(.dark) body.gallery-flooring .container,
html:not(.dark) body.gallery-painting .container {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
}

body.gallery-bathroom,
body.gallery-flooring,
body.gallery-painting,
body.gallery-garden,
body.gallery-kitchen {
  background: linear-gradient(180deg, #d7d3d3 0%, #8a8888 50%, #2b2b2b 100%) !important;
  background-attachment: fixed !important;
  color: #f5f5f5 !important;
}