/* ==========================================================================
   Feature pages (Attendance Management, and future Features dropdown pages)
   Additive only — loaded after home.css + navbar-footer.css
   ========================================================================== */

/* ---------- breadcrumb (shared with contact-us.php) ---------- */
.breadcrumb-section{background:#F3F2FB;padding:180px  36px;text-align:center}
.breadcrumb-section h1{font-size:clamp(26px,3.4vw,36px);font-weight:700}
.breadcrumb-section nav{margin-top:12px;font-size:13.5px;color:var(--ink-soft);display:flex;align-items:center;justify-content:center;gap:8px}
.breadcrumb-section nav a{color:var(--ink-soft)}
.breadcrumb-section nav a:hover{color:var(--primary)}
.breadcrumb-section nav i{font-size:10px}
.breadcrumb-section nav span{color:var(--ink);font-weight:600}

/* ---------- breadcrumb variant: background photo + color overlay ---------- */
.breadcrumb-section.has-photo{
  position:relative;padding:150px  36px;
  background-size:cover;background-position:center;
  isolation:isolate;
}
.breadcrumb-section.has-photo::before{
  content:'';position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg, rgba(16,17,36,.82), rgba(67,56,202,.72));
}
.breadcrumb-section.has-photo h1{color:#fff}
.breadcrumb-section.has-photo nav{color:rgba(255,255,255,.78)}
.breadcrumb-section.has-photo nav a{color:rgba(255,255,255,.78)}
.breadcrumb-section.has-photo nav a:hover{color:#fff}
.breadcrumb-section.has-photo nav span{color:#fff}

/* ---------- hero with a real photo ---------- */
.feature-hero{padding:64px 0 20px}
.feature-hero-inner{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.feature-hero-copy h2{font-size:clamp(28px,3.6vw,42px);font-weight:700;margin-top:16px;max-width:17ch}
.feature-hero-copy p{margin-top:18px;font-size:17px;color:var(--ink-soft);max-width:46ch}

.feature-hero-media{position:relative}
.hero-photo{
  width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);border:1px solid var(--border);
}
.feature-hero-media .floaty-card{background:#fff}
.feature-hero-media .floaty-card i{font-size:18px;color:var(--green)}
.feature-hero-media .floaty-1{top:-16px;right:-10px}
.feature-hero-media .floaty-2{bottom:-16px;left:-16px}
.feature-hero-media .floaty-card .pulse-dot{margin-right:2px}

/* ---------- real photos inside the zigzag feature rows ---------- */
.feature-photo{
  width:100%;max-width:440px;aspect-ratio:4/3.1;object-fit:cover;
  border-radius:var(--radius-lg);box-shadow:var(--shadow-md);border:1px solid var(--border);
}

/* ---------- screenshot grid mock (Screenshot Monitoring page) ---------- */
.screenshot-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:2px}
.shot{
  aspect-ratio:16/10;border-radius:8px;position:relative;overflow:hidden;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));opacity:.9;
}
.shot::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.35),transparent 55%)}
.shot-time{position:absolute;bottom:6px;left:8px;z-index:1;color:#fff;font-size:10px;font-weight:700;background:rgba(0,0,0,.35);padding:2px 7px;border-radius:6px}

@media (max-width:980px){
  .feature-hero-inner{grid-template-columns:1fr;gap:44px}
  .feature-hero-media{order:-1;max-width:460px;margin:0 auto}
}