/*
Theme Name: Sanctel Custom
Theme URI: https://sanctel.com.pk/
Author: Urban Stack Technologies
Author URI: https://urbanstacktechnologies.com/
Description: Sanctel custom theme with the approved visual system, secure forms, and the Sanctel Control Center for full-site content, branding, colors, packages, coverage, promotional-offer controls and layout management.
Version: 1.4.1
Text Domain: sanctel-custom
*/

/* ============================================================
 * SANCTEL VISUAL SYSTEM — v1.3.9
 * Page-wise, dashboard-managed images integrated into approved sections.
 * Maps, forms, packages, routing and core content remain independent.
 * ============================================================ */
.sanctel-visual-break{
  position:relative;
  width:100%;
  padding:clamp(24px,3.4vw,48px) clamp(18px,4vw,54px);
}
.sanctel-visual-break-dark{background:var(--ink,#0b140c)}
.sanctel-visual-break-paper{background:var(--paper,#f4f5ed)}
.sanctel-visual-strip{
  display:grid;
  gap:clamp(12px,1.5vw,20px);
  margin:clamp(30px,4vw,64px) 0;
}
.sanctel-visual-break .sanctel-visual-strip{margin:0 auto}
.sanctel-visual-strip.one{grid-template-columns:minmax(0,1fr)}
.sanctel-visual-strip.split{grid-template-columns:repeat(2,minmax(0,1fr))}
.sanctel-visual-slot{
  position:relative;
  overflow:hidden;
  margin:0;
  min-width:0;
  aspect-ratio:16/9;
  border-radius:clamp(20px,2.1vw,30px);
  background:#102014;
  border:1px solid rgba(77,112,66,.20);
  box-shadow:0 16px 46px rgba(8,18,10,.10);
  isolation:isolate;
}
.sanctel-visual-break-dark .sanctel-visual-slot{
  border-color:rgba(255,255,255,.11);
  box-shadow:0 18px 54px rgba(0,0,0,.22);
}
.sanctel-visual-slot::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(4,16,8,0) 62%,rgba(4,16,8,.12));
  z-index:1;
}
.sanctel-visual-slot img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  transition:transform .65s cubic-bezier(.2,.7,.2,1),filter .4s ease;
}
@media (hover:hover){
  .sanctel-visual-slot:hover img{transform:scale(1.018)}
}
.home-visual-pair .sanctel-visual-slot:first-child{grid-column:span 1}
.home-visual-pair .portrait-friendly{aspect-ratio:16/9}
.packages-visual-top .sanctel-visual-slot,
.coverage-visual-top .sanctel-visual-slot{aspect-ratio:2.15/1}
.about-visual-lower .sanctel-visual-slot,
.home-visual-lower .sanctel-visual-slot{aspect-ratio:2/1}

@media(max-width:760px){
  .sanctel-visual-break{padding:24px 16px}
  .sanctel-visual-strip{margin:30px 0;gap:12px}
  .sanctel-visual-strip.split{grid-template-columns:1fr}
  .sanctel-visual-slot,
  .packages-visual-top .sanctel-visual-slot,
  .coverage-visual-top .sanctel-visual-slot,
  .about-visual-lower .sanctel-visual-slot,
  .home-visual-lower .sanctel-visual-slot{
    aspect-ratio:4/3;
    border-radius:20px;
  }
}