/* =========================================================================
   VECTOR ENGINEERING — PAGE-SPECIFIC COMPONENTS
   Used by About / Services / Service-detail / Projects / Contact.
   Builds on cards, stat-grid, services-grid, timeline, feature-split,
   testimonial-grid and cta-banner already defined in sections.css.
   ========================================================================= */

/* ---------------------------------------------------------------------
   ACCORDION (FAQ)
   --------------------------------------------------------------------- */
.accordion{ max-width: 820px; margin-inline: auto; display: grid; gap: var(--sp-3); }
.accordion-item{
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  overflow: hidden;
}
.accordion-trigger{
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-6);
  background: none; border: none; text-align: left;
  font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--heading);
}
.accordion-trigger svg{ width: 18px; height: 18px; flex-shrink: 0; color: var(--accent); transition: transform var(--dur-base) var(--ease-out); }
.accordion-item[data-open="true"] .accordion-trigger svg{ transform: rotate(45deg); }
.accordion-panel{
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-base) var(--ease-out);
}
.accordion-item[data-open="true"] .accordion-panel{ grid-template-rows: 1fr; }
.accordion-panel-inner{ overflow: hidden; }
.accordion-panel p{
  padding: 0 var(--sp-6) var(--sp-5);
  margin: 0;
  color: var(--text-muted);
  font-size: 0.93rem;
  line-height: var(--lh-body);
}

/* ---------------------------------------------------------------------
   CONTACT PAGE
   --------------------------------------------------------------------- */
.contact-grid{
  display: grid;
  grid-template-columns: 1fr 0.85fr;
  gap: var(--sp-9);
  align-items: start;
}
.contact-form-card{ padding: var(--sp-7); }
.contact-form-card h2{ font-size: 1.4rem; margin-bottom: var(--sp-2); }
.contact-form-card .lead{ font-size: 0.95rem; margin-bottom: var(--sp-6); }

.contact-info-stack{ display: grid; gap: var(--sp-5); }
.contact-info-card{ padding: var(--sp-6); display: flex; gap: var(--sp-4); align-items: flex-start; }
.contact-info-card .icon-wrap{
  width: 46px; height: 46px; border-radius: var(--radius-md);
  background: var(--gradient-brand);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.contact-info-card .icon-wrap svg{ width: 21px; height: 21px; color: #fff; }
.contact-info-card h3{ font-size: 0.98rem; margin-bottom: var(--sp-1); }
.contact-info-card p{ font-size: 0.88rem; color: var(--text-muted); margin: 0; }
.contact-info-card a{ color: var(--accent); font-weight: 600; }

.map-frame{
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  aspect-ratio: 16/10;
}
.map-frame iframe{ width: 100%; height: 100%; border: 0; display: block; filter: grayscale(0.15); }

.form-status{
  display: none;
  align-items: center; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--radius-sm);
  font-size: 0.9rem; font-weight: 600;
  margin-bottom: var(--sp-5);
}
.form-status svg{ width: 19px; height: 19px; flex-shrink: 0; }
.form-status.is-visible{ display: flex; }
.form-status.is-success{ background: rgba(var(--c-whatsapp-rgb),0.12); color: var(--c-whatsapp-hover); }
html[data-theme="dark"] .form-status.is-success{ color: #4ADE80; }
.form-status.is-error{ background: rgba(209,67,67,0.12); color: #D14343; }
html[data-theme="dark"] .form-status.is-error{ color: #F87171; }

@media (max-width: 900px){
  .contact-grid{ grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
   PROJECT LIGHTBOX — multi-image gallery within the modal
   --------------------------------------------------------------------- */
.lightbox-panel{ max-width: 820px; max-height: 88vh; overflow-y: auto; }
.lightbox-media{ position: relative; }
.lightbox-media img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lightbox-tag{
  position: absolute; top: var(--sp-4); left: var(--sp-4);
  background: rgba(10,11,16,0.55); backdrop-filter: blur(6px);
  color: #fff; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em;
  padding: 0.4rem 0.9rem; border-radius: var(--radius-full); z-index: 1;
}
.lightbox-thumbs{ display: flex; gap: var(--sp-3); padding: var(--sp-5) var(--sp-6) 0; }
.lightbox-thumb{
  width: 76px; height: 58px; border-radius: var(--radius-sm);
  overflow: hidden; position: relative;
  border: 2px solid transparent;
  background: var(--bg-alt);
  flex-shrink: 0;
}
.lightbox-thumb.is-active{ border-color: var(--accent); }
.lightbox-thumb img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.lightbox-thumb.is-placeholder{
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
}
.lightbox-thumb.is-placeholder svg{ width: 18px; height: 18px; }
.lightbox-body h3{ font-size: 1.25rem; margin-bottom: var(--sp-2); }
.lightbox-meta{ display: flex; gap: var(--sp-5); flex-wrap: wrap; margin: var(--sp-4) 0; padding: var(--sp-4) 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.lightbox-meta div{ font-size: 0.78rem; color: var(--text-muted); }
.lightbox-meta b{ display: block; color: var(--heading); font-family: var(--font-display); font-size: 0.92rem; }
.lightbox-body p.desc{ color: var(--text-muted); font-size: 0.93rem; }

/* ---------------------------------------------------------------------
   VALUES GRID (About page)
   --------------------------------------------------------------------- */
.value-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); }
.value-card{ padding: var(--sp-6) var(--sp-5); text-align: center; }
.value-card .icon-wrap{
  width: 52px; height: 52px; border-radius: var(--radius-md);
  background: var(--gradient-brand);
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto var(--sp-4);
}
.value-card .icon-wrap svg{ width: 24px; height: 24px; color: #fff; }
.value-card h3{ font-size: 1rem; margin-bottom: var(--sp-2); }
.value-card p{ font-size: 0.85rem; color: var(--text-muted); margin: 0; }
@media (max-width: 900px){ .value-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px){ .value-grid{ grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------
   AREAS SERVED (chip cloud — About / Services / Contact)
   --------------------------------------------------------------------- */
.areas-cloud{ display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.areas-cloud span{
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 0.55rem 1.1rem;
  border-radius: var(--radius-full);
  background: var(--bg-alt);
  border: 1px solid var(--border);
  font-size: 0.85rem; font-weight: 600;
}
.areas-cloud svg{ width: 14px; height: 14px; color: var(--accent); }

/* ---------------------------------------------------------------------
   SERVICE DETAIL: pricing-free "what's included" checklist + sidebar CTA
   --------------------------------------------------------------------- */
.service-layout{ display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--sp-9); align-items: start; }
.service-sidebar{ position: sticky; top: 110px; display: grid; gap: var(--sp-5); }
.sidebar-card{ padding: var(--sp-6); }
.sidebar-card h3{ font-size: 1.05rem; margin-bottom: var(--sp-4); }
.sidebar-services-list a{
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.7rem 0; border-bottom: 1px solid var(--border);
  font-size: 0.88rem; font-weight: 600;
}
.sidebar-services-list a:last-child{ border-bottom: none; }
.sidebar-services-list a[aria-current="page"]{ color: var(--accent); }
.sidebar-services-list svg{ width: 14px; height: 14px; }
@media (max-width: 980px){
  .service-layout{ grid-template-columns: 1fr; }
  .service-sidebar{ position: static; }
}

/* ---------------------------------------------------------------------
   SIMPLE 2-UP IMAGE BAND (service-detail supporting photography)
   --------------------------------------------------------------------- */
.image-band{ display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--sp-5); }
.image-band .tall{ aspect-ratio: 3/4; }
.image-band .wide{ aspect-ratio: 4/3; }
.image-band figure{ margin: 0; border-radius: var(--radius-lg); overflow: hidden; position: relative; }
.image-band img{ width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 700px){ .image-band{ grid-template-columns: 1fr; } }