/* ═══════════════════════════════════════════════════════════════
   SIMPLYCODE TECHNOLOGY — lightbox.css
   Includes: Contact 3-column layout + Portfolio Lightbox popup
   ─────────────────────────────────────────────────────────────
   NOTE TO DEVELOPER:
   This file contains styles that were previously inline in index.html.
   Keep this file separate for maintainability.
   Load order: style.css → lightbox.css
═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════
   SIMPLYCODE TECHNOLOGY — ADDON STYLES
   Contact Layout + Lightbox
   Append this to css/style.css
═══════════════════════════════════════════════════════ */

/* ── 3-COLUMN CONTACT LAYOUT ── */
.con-3grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2rem;
  margin: 0 auto;
  padding: 0 2rem 3rem;
  align-items: start;
}

#formFields input, #formFields select, #formFields textarea {
  background: #f8f9fb;
  border: 1px solid #e8ecf4;
  border-radius: 8px;
  padding: .75rem 1rem;
  margin-bottom: 1rem;
  font-size: .9rem;
}
.con-map {
  height: 100%;
  min-height: 380px;
}
.con-map iframe {
  height: 100%;
  min-height: 380px;
  box-shadow: 0 4px 24px rgba(26,63,122,.12);
}
.con-social-row {
  display: flex;
  gap: .5rem;
  margin-top: 1.25rem;
}
/* Make existing .cf fit 3-col */
.con-3grid .cf {
  padding: 1.5rem;
  border-radius: 14px;
  border: 1px solid #e8ecf4;
}
.con-3grid .cf input,
.con-3grid .cf select,
.con-3grid .cf textarea {
  width: 100%;
  box-sizing: border-box;
}
@media(max-width:900px){
  .con-3grid { grid-template-columns: 1fr; }
  .con-map { min-height: 280px; }
  .con-map iframe { min-height: 280px; }
}
.slide-h{
  color: #fff;
}

/* ── Lightbox Overlay ── */
#lb-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.88);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 16px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
#lb-overlay.open { display: flex; }

/* ── Lightbox Box ── */
#lb-box {
  position: relative;
  background: #111;
  border-radius: 16px;
  overflow: hidden;
  max-width: 900px;
  width: 100%;
  box-shadow: 0 32px 80px rgba(0,0,0,.7);
  animation: lbIn .25s ease;
}
@keyframes lbIn {
  from { opacity:0; transform: scale(.93); }
  to   { opacity:1; transform: scale(1);   }
}

/* ── Image ── */
#lb-img {
  width: 100%;
  max-height: 68vh;
  object-fit: contain;
  display: block;
  background: #0a0a0a;
}

/* ── Caption ── */
#lb-caption {
  padding: 18px 22px 20px;
  background: #111;
}
#lb-caption h4 {
  margin: 0 0 4px;
  font-size: 1.05rem;
  color: #fff;
  font-weight: 700;
}
#lb-caption p {
  margin: 0 0 10px;
  font-size: .88rem;
  color: #aaa;
}
#lb-caption span {
  display: inline-block;
  background: #ff6b00;
  color: #fff;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 20px;
}

/* ── Buttons ── */
#lb-close {
  position: absolute;
  top: 12px; right: 14px;
  background: rgba(0,0,0,.55);
  border: none;
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  width: 36px; height: 36px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
#lb-close:hover { background: #ff6b00; }

#lb-prev, #lb-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,.5);
  border: none;
  color: #fff;
  font-size: 2rem;
  width: 44px; height: 60px;
  cursor: pointer;
  z-index: 10;
  border-radius: 8px;
  transition: background .2s;
  display: flex; align-items: center; justify-content: center;
}
#lb-prev:hover, #lb-next:hover { background: #ff6b00; }
#lb-prev { left: 8px; }
#lb-next { right: 8px; }

/* ── Mobile ── */
@media(max-width:600px){
  #lb-img { max-height: 52vh; }
  #lb-prev, #lb-next { width:36px; height:48px; font-size:1.5rem; }
  #lb-caption { padding:12px 14px 14px; }
}