/* Projetos v1.2 (PlanetConstroi) — layout & responsive rules */

/* 1) Full width wrapper */
.pproj-single-wrap { width: 100%; }

/* 2) Centered content container with max-width logic */
.pproj-container {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 24px;
}

@media (min-width: 3840px) {
  .pproj-container {
    max-width: none;
    width: 75%;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 1024px) {
  .pproj-container { width: 90%; max-width: none; }
}

@media (max-width: 768px) {
  .pproj-container { width: 100%; padding: 16px; }
}

/* Typography */
.pproj-title { margin: 0 0 6px; font-size: clamp(24px, 2.6vw, 40px); }
.pproj-subtitle { margin: 0 0 16px; color: #64748b; font-size: 1rem; }

/* 3) Gallery styles */
.pproj-gallery { margin: 20px 0 28px; }
.pproj-gallery .gallery-main {
  width: 100%;
  aspect-ratio: 16/9;
  background: #f1f5f9;
  border-radius: 16px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.pproj-gallery .gallery-main img {
  width: 100%; height: 100%; object-fit: cover; cursor: zoom-in;
}

.pproj-gallery .gallery-thumbs {
  margin-top: 12px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(84px, 1fr);
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.pproj-gallery .gallery-thumbs .thumb {
  border: none; padding: 0; background: transparent; cursor: pointer;
  border-radius: 10px; overflow: hidden;
}
.pproj-gallery .gallery-thumbs img {
  width: 100%; height: 140px; object-fit: cover; display: block;
}
.pproj-gallery .gallery-thumbs .thumb.is-active { outline: 2px solid #0ea5e9; }

/* 5) Content */
.pproj-content { margin-top: 20px; }
.pproj-content p { line-height: 1.7; }

/* 6) CTA block */
.pproj-cta { margin: 28px 0 0; }
.pproj-cta .pproj-cta-block {
  display: block;
  text-align: center;
  padding: 18px 22px;
  border-radius: 999px;
  background: #0ea5e9;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  transition: transform .12s ease, box-shadow .12s ease, background .2s ease;
  box-shadow: 0 6px 24px rgba(14,165,233,.3);
}
.pproj-cta .pproj-cta-block:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(14,165,233,.35); }
.pproj-cta .pproj-cta-block:active { transform: translateY(0); }

@media (min-width: 1025px) {
  .pproj-cta .pproj-cta-block { display: inline-block; min-width: 380px; }
}

@media (max-width: 768px) {
  .pproj-cta .pproj-cta-block { width: 100%; border-radius: 14px; }
}


.gallery-main {
  max-width: 80%;
  margin: auto;
  position: relative;
}
.gallery-main img {
  width: 100%;
  height: auto;
  display: block;
}
.gallery-thumbs {
  display: flex;
  gap: 10px;
  justify-content: center;
  overflow-x: auto;
}
.gallery-thumbs img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  aspect-ratio: 1/1;
  cursor: pointer;
  border-radius: 6px;
}
.gallery-prev, .gallery-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 2rem;
  color: #fff;
  background: rgba(0,0,0,0.5);
  padding: 5px 10px;
  cursor: pointer;
  border-radius: 50%;
  user-select: none;
}
.gallery-prev { left: 10px; }
.gallery-next { right: 10px; }

.lightbox-overlay {
  position: fixed;
  top:0; left:0; right:0; bottom:0;
  background: rgba(0,0,0,0.9);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:10000;
}
.lightbox-overlay img {
  max-width:90%;
  max-height:90%;
}
.lightbox-prev, .lightbox-next {
  position: absolute;
  top:50%;
  transform: translateY(-50%);
  font-size: 3rem;
  color:#fff;
  cursor: pointer;
  user-select: none;
  padding:10px;
}
.lightbox-prev { left:30px; }
.lightbox-next { right:30px; }


/* v1.4.1 adjustments */
.gallery-main img {
  max-width: 70%;
  margin: auto;
  display: block;
}
.gallery-thumbs {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  max-width: 70%;
  margin: 10px auto;
}
.gallery-thumbs img {
  flex: 0 0 auto;
  width: 150px;
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 6px;
}
.lightbox-overlay img {
  max-width: 100%;
  max-height: 100%;
}