/*
  AI Automation service page (ai-automation.php) — scoped styles. Every rule
  is prefixed with .ai-automation-page so nothing here leaks onto the sibling
  service pages that share the exact same .solution-box / .expertise-box /
  .benefit-box / .step-item / .service-bg / #myHeader markup and CSS classes,
  defined in assets/css/main.css. Modelled on the digital-transformation-page.css
  pattern.

  Known gaps until real media exists — flagged so a future pass finds them
  fast instead of re-discovering the same blockers:
    - Hero now uses its own dedicated video — assets/video/ai-automation-hero.
      mp4/webm (poster: ai-automation-hero.jpg) — no longer the generic
      bg-video.mp4/webm placeholder.
    - Both full-bleed CTA bands now use real photos: .transform-main-bg
      ("Find Out What You Can Automate — Free") uses ai-automation-bg.webp,
      and .customer-experience-main-bg ("Turn Repetitive Work...") uses
      contact-get-started-bg.webp — both under assets/img/ai-automation/.
      "Our Process" step visuals also now use real per-step photos under
      assets/img/ai-automation/process/.
    - Icons for "Our Expertise" are reused from the older
      landing-page/ai-automation/ standalone microsite's icon set
      (recoloured to the brand blue #1858ca) rather than commissioned fresh.
      The "Why Choose" icons are client-supplied originals, kept as-is.
*/

.ai-automation-page{--aix-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;}

/* ---------------------------------------------------------------------- */
/* 1) Hero                                                                 */
/* ---------------------------------------------------------------------- */
/* main.css's shared .hero rule sets a literal, unresolved
   background-image: url('path/to/fallback.jpg') — a placeholder that was
   never filled in, so it 404s on every page using .hero. The video's own
   `poster` attribute already covers the pre-load/no-JS fallback, so this
   background-image is dead weight; drop it here without touching the
   shared rule (used on ~25 other pages). */
.ai-automation-page .main-video-section.hero{background-image:none;}
.ai-automation-page .main-video-section .video-overlay-main{
  background: linear-gradient(125deg, rgba(8,14,28,.88) 0%, rgba(24,88,202,.60) 55%, rgba(8,14,28,.84) 100%) !important;
  position: absolute;
}
.ai-automation-page .main-video-section .video-overlay-main::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image: repeating-linear-gradient(115deg, rgba(255,255,255,.06) 0 1px, transparent 1px 64px);
  opacity:.6;
}
.ai-automation-page .main-video-section .container{position:relative;z-index:1;}
.ai-automation-page .hero-badge{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:7px 16px;
  border-radius:999px;
  background: rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.32);
  color:#fff;
  font-family: var(--aix-mono);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.03em;
  margin-bottom:20px;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.ai-automation-page .hero-badge .dot{
  width:7px;height:7px;border-radius:50%;
  background:#4A8AFE;
  box-shadow:0 0 0 4px rgba(74,138,254,.3);
  animation: aixPulse 2.2s ease-in-out infinite;
}
@keyframes aixPulse{0%,100%{opacity:1;}50%{opacity:.35;}}
.ai-automation-page .main-video-section .section-content .title{text-shadow:0 2px 20px rgba(0,0,0,.3);}

/* ---------------------------------------------------------------------- */
/* 2) Sticky sub-nav — glass bar + sliding indicator (scrollspy is wired   */
/*    up in the inline script at the bottom of ai-automation.php).        */
/* ---------------------------------------------------------------------- */
.ai-automation-page .single-header-main{
  background: rgba(255,255,255,.78);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(16,24,40,.06);
}
.ai-automation-page .single-header-main.sticky{background: rgba(255,255,255,.86);}
.ai-automation-page .single-header-main .container{position:relative;}
.ai-automation-page .main-menu .menu-item .menu-link{font-weight:600;}
.ai-automation-page .main-menu .menu-item .menu-link::after{display:none;}
.ai-automation-page .menu-indicator{
  position:absolute;
  bottom:0;
  left:0;
  height:2.5px;
  width:0;
  border-radius:3px 3px 0 0;
  background: linear-gradient(90deg, var(--vtc-bg-main-bg-1), var(--vtc-text-pera-text-4));
  transition: transform .35s cubic-bezier(.4,0,.2,1), width .35s cubic-bezier(.4,0,.2,1), opacity .2s ease;
  opacity:0;
}
.ai-automation-page .menu-indicator.is-ready{opacity:1;}

/* ---------------------------------------------------------------------- */
/* 3) "Why Choose AI Automation" grid — 6 cards (even count), plain        */
/*    2-column grid, no odd-card promotion needed.                        */
/* ---------------------------------------------------------------------- */
.ai-automation-page .solution-section-main{background:var(--vtc-bg-main-bg-9);}
.ai-automation-page .solution-section-main .row.mt-5.g-0{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:22px;
}
.ai-automation-page .solution-section-main .row.mt-5.g-0 > [class*="col-"]{
  width:auto;max-width:none;padding:0;
}
.ai-automation-page .solution-box{
  border:1px solid var(--vtc-border-border-1) !important;
  border-radius:16px;
  background:#fff;
  padding:32px 28px;
  transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.ai-automation-page .solution-box:hover{
  background:#fff;
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -18px rgba(24,88,202,.28);
  border-color: transparent !important;
}
.ai-automation-page .solution-box .icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:58px;height:58px;
  border-radius:14px;
  background: var(--vtc-bg-main-bg-6);
  transition: background-color .3s ease, transform .3s ease;
}
.ai-automation-page .solution-box .icon img{max-width:28px;max-height:28px;}
.ai-automation-page .solution-box:hover .icon{background: var(--vtc-bg-main-bg-1);transform: scale(1.06);}
.ai-automation-page .solution-box:hover .icon img{filter:brightness(0) invert(1);}
.ai-automation-page .solution-box .heading2 h3::after{display:none;}

@media (max-width:767px){
  .ai-automation-page .solution-section-main .row.mt-5.g-0{grid-template-columns:1fr;}
}

/* ---------------------------------------------------------------------- */
/* 4) CTA bands (main.css hardcodes both classes to Digital Transformation */
/*    's own photos, so this MUST stay scoped here).                      */
/*    - .transform-main-bg ("Find Out What You Can Automate — Free") uses */
/*      the real ai-automation-bg.webp photo with a dark brand-gradient   */
/*      overlay for text contrast.                                        */
/*    - .customer-experience-main-bg (final "Turn Repetitive Work..."     */
/*      band) uses the real contact-get-started-bg.webp photo the same    */
/*      way.                                                              */
/* ---------------------------------------------------------------------- */
.ai-automation-page .transform-main-bg{
  background-image: linear-gradient(100deg, rgba(6,14,34,.82) 0%, rgba(24,88,202,.52) 45%, rgba(6,14,34,.78) 100%), url(../img/ai-automation/ai-automation-bg.webp) !important;
  background-size: cover;
  /* The AI-circle graphic sits in the upper third of the source photo, not
     its vertical middle. `center` (50%) crops equally top/bottom around the
     photo's true center and eats into the top of the circle on this very
     wide, short band. Anchoring closer to the top keeps the circle intact
     and visually centered within the visible crop. */
  background-position: center 15%;
}
.ai-automation-page .customer-experience-main-bg{
  background-image: linear-gradient(100deg, rgba(4,8,20,.86) 0%, rgba(4,8,20,.35) 45%, rgba(4,8,20,.55) 100%), url(../img/ai-automation/contact-get-started-bg.webp) !important;
  background-size: cover;
  /* Unlike .transform-main-bg above, this photo asset was pre-padded
     (extra matching near-black canvas added top/bottom) so the AI-circle
     graphic sits exactly at the image's own vertical centre and at a
     smaller scale relative to the whole frame. That means a plain `center`
     anchor works correctly at every viewport width here — no percentage
     tuning needed. No horizontal adjustment is needed either: this band is
     always wider than the photo's aspect ratio, so cover only ever crops
     top/bottom, never the sides, and the full width (circle included,
     right-of-centre in the source photo) always stays visible. */
  background-position: center center;
}
.ai-automation-page .mini-section-main{position:relative;}
.ai-automation-page .mini-section-main::before{
  content:"";position:absolute;inset:0;z-index:0;
  background-image: repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 1px, transparent 1px 64px);
}
/* The diagonal signal-line texture was only needed on a flat-gradient CTA
   band — both bands now carry a real photo, where the texture just sits on
   top and adds visual clutter, so it's suppressed on both. Compound
   selectors (both classes) for higher specificity than the plain
   .mini-section-main::before rule above. */
.ai-automation-page .transform-main-bg.mini-section-main::before,
.ai-automation-page .customer-experience-main-bg.mini-section-main::before{content:none;}
.ai-automation-page .mini-section-main .section-absolute{z-index:1;}
.ai-automation-page .service-bg{border-top:1px solid rgba(24,88,202,.12);}

/* ---------------------------------------------------------------------- */
/* 5) "Our Expertise" grid — matches the reference Digital Transformation */
/*    card design: 4-column grid, a big top colour panel (per box1..box9  */
/*    background + accent border-bottom already defined in main.css) with */
/*    a large centred icon, then heading + copy below. Matches the inset  */
/*    illustration style used on the other service pages (e.g.            */
/*    digital-transformation.php): padding around the art on all sides    */
/*    rather than bleeding it to the panel edges.                        */
/* ---------------------------------------------------------------------- */
.ai-automation-page .expertise-section .row.g-0{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:22px;
}
.ai-automation-page .expertise-section .row.g-0 > [class*="col-"]{width:auto;max-width:none;padding:0;}
.ai-automation-page .expertise-box{
  height:100%;
  margin:0;
  padding:0;
  background:#fff;
  border:1px solid var(--vtc-border-border-1);
  border-radius:16px;
  overflow:hidden;
  transition: transform .35s ease, box-shadow .35s ease;
}
.ai-automation-page .expertise-box:hover{transform: translateY(-6px);box-shadow: 0 20px 44px -20px rgba(24,88,202,.28);}
.ai-automation-page .expertise-box .icon{
  height:190px;
  width:100%;
  margin:0;
  padding:24px;
  border-radius:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.ai-automation-page .expertise-box .icon img{width:auto;height:auto;max-width:92px;max-height:92px;object-fit:contain;}
/* Boxes using a real illustration (marked with .illustration on the <img>)
   sit inset within the panel's padding, centred, same as the other
   service pages — not stretched edge-to-edge. */
.ai-automation-page .expertise-box .icon img.illustration{
  width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;object-position:center;
}
.ai-automation-page .expertise-box .content{padding:22px 22px 26px;}
.ai-automation-page .expertise-box .content h3{font-size:17px;}
.ai-automation-page .expertise-box .content p{font-size:14px;}

@media (max-width:1199px){
  .ai-automation-page .expertise-section .row.g-0{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:575px){
  .ai-automation-page .expertise-section .row.g-0{grid-template-columns:1fr;}
}

/* ---------------------------------------------------------------------- */
/* 6) "Benefits to Clients" — CLI-prompt "> " marker + alternating accent  */
/* ---------------------------------------------------------------------- */
.ai-automation-page .benefit-box h3{position:relative;padding-left:20px;}
.ai-automation-page .benefit-box h3::before{
  content:">";position:absolute;left:0;top:-1px;
  color:#7DAEFF;font-weight:800;
}
.ai-automation-page .benefits-section .row > div:nth-child(even) .benefit-box{border-left-color: var(--vtc-bg-main-bg-3);}
.ai-automation-page .benefits-section .row > div:nth-child(even) .benefit-box h3::before{color: var(--vtc-bg-main-bg-3);}

/* ---------------------------------------------------------------------- */
/* 7) "Our Process" — steps without real photography fall back to a soft  */
/*    gradient card with a centred icon. Steps that DO have a real photo  */
/*    (files under assets/img/ai-automation/process/) get the ".is-photo" */
/*    variant instead, filling the panel edge-to-edge. On the desktop     */
/*    sticky panel the same <img id="currentStepImage"> is reused/swapped */
/*    by assets/js/main.js on scroll (only its `src` changes, not any     */
/*    class), so a small inline script below watches that `src` via       */
/*    MutationObserver and toggles `.is-photo` on the wrapper to match —  */
/*    keep that observer in sync if more per-step photos are added.       */
/* ---------------------------------------------------------------------- */
.ai-automation-page .how-we-work-img{
  background: linear-gradient(135deg, var(--vtc-bg-main-blue-1) 0%, #fff 100%);
  border:1px solid var(--vtc-border-border-1);
  border-radius:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:260px;
  overflow:hidden;
}
.ai-automation-page .how-we-work-img img{width:30%;max-width:170px;object-fit:contain;}
.ai-automation-page .step-item.active .how-we-work-img,
.ai-automation-page #sticky-step-image{
  background: linear-gradient(135deg, var(--vtc-bg-main-blue-1) 0%, #fff 100%);
}
/* The wrapper's own padding-right:100px (main.css, used purely as layout
   spacing before the text column) becomes a visible empty box if the
   wrapper itself is given a background/border — the exact pitfall already
   documented above for photo bands. So for a photo step, the wrapper stays
   fully transparent/borderless and the border/radius move onto the <img>
   itself instead, which is sized to the wrapper's content box (i.e. NOT
   including that padding-right gap) and clips its own corners fine as a
   replaced element. */
/* aspect-ratio (not a fixed px height): this derives the wrapper's height
   from its own width — matching the actual 1700x1000 photos exactly, same
   proportions as the other service pages — without depending on the
   parent chain's flex-stretch height resolution at all. That dependency is
   what caused the hide-on-scroll bug: the img below was height:100% of a
   wrapper whose height came only from flex-stretch, and right where the
   sticky element releases from `position:sticky` (at the LAST step) that
   resolution goes ambiguous and can momentarily collapse to 0. aspect-ratio
   sidesteps that collapse entirely while keeping the correct 1.7:1 size. */
.ai-automation-page .how-we-work-img.is-photo{background:transparent;border:none;border-radius:0;aspect-ratio:17/10;min-height:0;}
.ai-automation-page .how-we-work-img.is-photo img{
  width:100%;height:100%;max-width:none;object-fit:cover;object-position:center;
  border:1px solid var(--vtc-border-border-1);
  border-radius:20px;
}

/* ---------------------------------------------------------------------- */
/* 8) FAQ accordion — ported from resources.php's .resource-main .faq-*   */
/*    component, rescoped to this page's own brand variables.            */
/* ---------------------------------------------------------------------- */
.ai-automation-page .section-kicker{
  display:inline-flex;align-items:center;
  color:#1858CA;font-size:13px;font-weight:600;
  background-color:#D5E9FF;
  padding:4px 14px;border-radius:40px;
  margin-bottom:14px;
}
.ai-automation-page .faq-list{max-width:860px;margin:0 auto;display:grid;gap:14px;}
.ai-automation-page .faq-item{
  border:1px solid var(--vtc-border-border-1);
  background:#fff;
  border-radius:14px;
  overflow:hidden;
  box-shadow:0 2px 8px rgba(24,88,202,.05);
  transition:box-shadow .2s;
}
.ai-automation-page .faq-item:hover{box-shadow:0 8px 24px rgba(24,88,202,.12);}
.ai-automation-page .faq-question{
  width:100%;border:0;background:transparent;
  color:var(--vtc-text-heading-text-1);padding:18px 22px;
  display:flex;align-items:center;justify-content:space-between;
  gap:18px;font-weight:600;font-size:16px;
  text-align:left;cursor:pointer;
}
.ai-automation-page .faq-answer{max-height:0;overflow:hidden;transition:max-height .28s ease;}
.ai-automation-page .faq-answer p{padding:0 22px 20px;color:var(--vtc-text-pera-text-1);line-height:1.7;}
.ai-automation-page .faq-item.active .faq-answer{max-height:320px;}
.ai-automation-page .faq-toggle{
  min-width:30px;width:30px;height:30px;border-radius:50%;
  display:grid;place-items:center;
  background:var(--vtc-bg-main-bg-6);color:#1858CA;
  flex:0 0 auto;font-size:18px;font-weight:400;
  transition:transform .25s ease, background .2s;
}
.ai-automation-page .faq-item.active .faq-toggle{transform:rotate(45deg);background:#1858CA;color:#fff;}

/* ---------------------------------------------------------------------- */
/* 9) Case Study placeholder — no AI-automation case study has been       */
/*    written yet, so this links out to the general case-study listing    */
/*    instead of showing an empty grid.                                  */
/* ---------------------------------------------------------------------- */
.ai-automation-page .casestudy-placeholder{
  max-width:640px;margin:0 auto;text-align:center;
  border:1px dashed var(--vtc-border-border-1);
  border-radius:16px;
  padding:20px 24px;
  background: var(--vtc-bg-main-bg-9);
}
.ai-automation-page .casestudy-placeholder p{color:var(--vtc-text-pera-text-1);margin-bottom:12px;}

/* ---------------------------------------------------------------------- */
/* 10) Reduced motion                                                      */
/* ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce){
  .ai-automation-page .hero-badge .dot{animation:none;}
  .ai-automation-page .solution-box,
  .ai-automation-page .expertise-box,
  .ai-automation-page .menu-indicator{transition:none;}
  .ai-automation-page .solution-box:hover,
  .ai-automation-page .expertise-box:hover{transform:none;}
}