/* ARCH-E4 — CCTV page pair UX owner pack
   Moved from inline HTML on:
   - odzyskiwanie-danych-z-monitoringu-cctv-dvr-nvr.html
   - en/cctv-dvr-nvr-data-recovery.html
   Scope kept local to .dsk-page-cctv only. */

/* dsk-cctv-desktop-premium */
@media (min-width: 769px){
  /* Force light page background like HDD (removes black surrounding) */
  .dsk-page-cctv body,
  .dsk-page-cctv #sb-page-structure{
    background:#f3f5f7 !important;
  }

  /* Ensure CTA label is visible on desktop */
  .dsk-page-cctv a.dsk-service-cta{
    color:#ffffff !important;
    text-shadow:0 1px 0 rgba(0,0,0,.20);
  }
  .dsk-page-cctv #service-template .sb-text-image__content-paragraph h2{
    margin: var(--sp-h2-mt) 0 var(--sp-h2-mb) !important;
    font-size: var(--fs-h2) !important;
    line-height: var(--lh-heading) !important;
    font-weight: var(--fw-h2) !important;
    color: #111827 !important;
    letter-spacing: var(--ls-h2);
}
  .dsk-page-cctv #service-template .sb-text-image__content-paragraph h3{
    margin: var(--sp-h3-mt) 0 var(--sp-h3-mb) !important;
    font-size: var(--fs-h3) !important;
    line-height: var(--dsk-h3-lh) !important;
    font-weight: var(--fw-h3) !important;
    color: #111827 !important;
    letter-spacing: var(--ls-h3);
}

  .dsk-page-cctv #service-template .sb-text-image__content-paragraph p{
    font-size: var(--fs-body) !important;
    line-height: var(--lh-body) !important;
    color: #374151 !important;
    margin: 0 0 var(--sp-p-mb) !important;
    font-weight: var(--fw-body);
    letter-spacing: var(--ls-body);
}

  /* Sub-navigation chips */
  .dsk-page-cctv .dsk-subnav{
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 14px 0 26px;
  }
  .dsk-page-cctv .dsk-subnav__item{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(0,0,0,.03);
    border: 1px solid rgba(0,0,0,.10);
    text-decoration: none !important;
    color: #111827 !important;
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif !important;
    font-size:1rem !important;
    font-weight: 500;
    transition: transform .12s ease, background .12s ease, border-color .12s ease;
  }
  .dsk-page-cctv .dsk-subnav__item:hover{
    background: rgba(22,163,74,.10);
    border-color: rgba(22,163,74,.35);
    transform: translateY(-1px);
  }

  /* Icon lists (cards) */
  .dsk-page-cctv .dsk-icon-list,
  .dsk-page-cctv .dsk-method-list,
  .dsk-page-cctv .dsk-steps-ol{
    list-style:none !important;
    padding:0 !important;
    margin:12px 0 18px !important;
  }
  .dsk-page-cctv .dsk-icon-list{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
  }
  @media (min-width: 980px){
    .dsk-page-cctv .dsk-icon-list{ grid-template-columns:1fr 1fr; }
  }
  .dsk-page-cctv .dsk-icon-list > li,
  .dsk-page-cctv .dsk-steps-ol > li{
    position:relative;
    border:1px solid rgba(0,0,0,.08);
    border-radius:14px;
    color:#2b2b2b;
  }
  .dsk-page-cctv .dsk-icon-list > li{
    padding:12px 12px 12px 42px;
    background:rgba(0,0,0,.02);
    margin:0;
  }
  .dsk-page-cctv .dsk-icon-list > li::before{
    content:"✓";
    position:absolute;
    left:14px;
    top:11px;
    font-weight:900;
    color:#16a34a;
  }
  .dsk-page-cctv .dsk-icon-list--symptoms > li::before{ content:"⚠"; color:#f59e0b; }
  .dsk-page-cctv .dsk-alert-steps > li::before{ content:"⛔"; color:#ef4444; }

  /* Method callout */
  .dsk-page-cctv .dsk-method-list{
  }
  .dsk-page-cctv .dsk-method-list > li{
    padding:12px 12px 12px 14px;
    border-radius:14px;
    background:rgba(22,163,74,.08);
    border:1px solid rgba(22,163,74,.20);
    border-left:6px solid #16a34a;
    color:#1f2d1f;
  }
  .dsk-page-cctv .dsk-method-list > li strong{ color:#14532d; }

  /* Step list (ordered) */
  .dsk-page-cctv .dsk-steps-ol{
    counter-reset:dskstep;
  }
  .dsk-page-cctv .dsk-steps-ol > li{
    counter-increment:dskstep;
    padding:12px 12px 12px 44px;
    background:#fff;
    margin:10px 0;
    box-shadow:0 10px 22px rgba(0,0,0,.04);
  }
  .dsk-page-cctv .dsk-steps-ol > li::before{
    content: counter(dskstep);
    position:absolute;
    left:14px;
    top:10px;
    width:22px;
    height:22px;
    border-radius:999px;
    background:#111827;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:0.8125rem;
    font-weight:800;
  }
}

@media (max-width: 768px){
  /* Sub-navigation tiles (matching HDD / MacBook mobile layout) */
  .dsk-page-cctv .dsk-subnav{
    display:grid;
    grid-template-columns:1fr;
    gap:8px;
    margin:10px 0 16px;
  }
  .dsk-page-cctv .dsk-subnav__item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:10px 12px;
    background:#fff;
    border:1px solid rgba(0,0,0,.10);
    border-radius:12px;
    text-decoration:none !important;
    color:#111827 !important;
    font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,sans-serif !important;
    font-size:.92rem !important;
    font-weight:500;
    box-shadow:0 8px 18px rgba(15,23,42,.08)!important;
  }
  .dsk-page-cctv .dsk-subnav__item::after{
    content:"›";
    font-size:1.25rem;
    opacity:.55;
    margin-left:12px;
  }
}
@media (max-width: 390px){
  .dsk-page-cctv .dsk-subnav{
    gap:8px;
    margin:8px 0 14px;
  }
  .dsk-page-cctv .dsk-subnav__item{
    padding:9px 10px;
    border-radius:10px;
    font-size:.89rem !important;
  }
}

/* dsk-cctv-mobile-offer-lift */
/* CCTV offer page – mobile UX aligned with HDD/SSD system */
@media (max-width: 768px){

  /* If header is transparent, force consistent look on mobile (prevents "different color nav bar") */
  .dsk-page-cctv [data-b12-component="Header"],
  .dsk-page-cctv [data-b12-component="Navigation"],
  .dsk-page-cctv #site-header,
  .dsk-page-cctv nav{
    background:#ffffff !important;
  }

  /* Title inside Service Template */
  /* Panels spacing – remove double padding (container already has 20px) */
  .dsk-page-cctv .dsk-service-panel{
    padding-left:0 !important;
    padding-right:0 !important;
    margin:0 0 18px !important;
    max-width:none !important;
    width:100% !important;
  }

  /* Headings */
  .dsk-page-cctv .dsk-service-panel h2{
    font-size:1.375rem !important;
    line-height:1.2 !important;
    margin:22px 0 12px !important;
    font-weight:800 !important;
    color:#111827 !important;
    letter-spacing:-0.01em;
  }
  .dsk-page-cctv .dsk-service-panel h3{
    font-size:1.125rem !important;
    line-height:1.25 !important;
    margin:18px 0 10px !important;
    font-weight:800 !important;
    color:#111827 !important;
  }

  /* Paragraphs */
  .dsk-page-cctv .dsk-service-panel p{
    font-size:1rem !important;
    line-height:1.65 !important;
    color:#444 !important;
    margin:0 0 14px !important;
    text-align:left !important;
  }

  /* Icon lists */
  .dsk-page-cctv .dsk-icon-list{
    list-style:none !important;
    padding:0 !important;
    margin:12px 0 18px !important;
  }
  .dsk-page-cctv .dsk-icon-list > li{
    position:relative;
    padding:12px 12px 12px 42px;
    border:1px solid rgba(0,0,0,.08);
    border-radius:14px;
    background:rgba(0,0,0,.02);
    margin:0 0 10px;
    line-height:1.5;
    color:#374151;
  }
  .dsk-page-cctv .dsk-icon-list > li::before{
    content:"✓";
    position:absolute;
    left:14px;
    top:12px;
    font-weight:800;
    color:#22c55e;
  }

  /* Alert box – consistent */
  .dsk-page-cctv .alert-box,
  .dsk-page-cctv .dsk-service-note{
    background:#fff5f5 !important;
    border:1px solid rgba(239,68,68,.25) !important;
    border-left:5px solid #ef4444 !important;
    border-radius:14px !important;
    padding:14px !important;
    margin:14px 0 18px !important;
    color:#7f1d1d !important;
  }
  .dsk-page-cctv .alert-box p,
  .dsk-page-cctv .dsk-service-note p{ margin:0 !important; color:#7f1d1d !important; }

  /* CTA buttons */
  .dsk-page-cctv a.dsk-service-cta{
    display:block !important;
    width:100% !important;
    text-align:center !important;
    border-radius:16px !important;
    padding:14px 16px !important;
    font-weight:800 !important;
    text-decoration:none !important;
      color:#ffffff !important;
    text-shadow:0 1px 0 rgba(0,0,0,.20);
}
  /* CTA button tweak removed in stage539: page has no local CTA section */

/* dsk-cctv-mobile-rhythm-etap42 */
@media (max-width:767px){
  .dsk-page-cctv .dsk-icon-list,.dsk-page-cctv .dsk-method-list,.dsk-page-cctv .dsk-steps-ol{margin:10px 0 14px!important;}
  .dsk-page-cctv .dsk-icon-list>li{padding:10px 10px 10px 38px!important;border-radius:12px!important;margin-bottom:8px!important;}
  .dsk-page-cctv .dsk-method-list>li{padding:10px 10px 10px 12px!important;border-radius:12px!important;margin-bottom:8px!important;}
  .dsk-page-cctv .dsk-steps-ol>li{padding:10px 10px 10px 40px!important;border-radius:12px!important;margin-bottom:8px!important;}
  .dsk-page-cctv .dsk-steps-ol>li::before{left:12px!important;top:10px!important;}
  .dsk-page-cctv .alert-box{padding:12px!important;margin:12px 0 16px!important;}
  .dsk-page-cctv .alert-box p{margin-bottom:8px!important;}
}
@media (max-width:390px){
  .dsk-page-cctv .dsk-icon-list,.dsk-page-cctv .dsk-method-list,.dsk-page-cctv .dsk-steps-ol{margin:8px 0 12px!important;}
  .dsk-page-cctv .dsk-icon-list>li{padding:9px 9px 9px 34px!important;border-radius:10px!important;margin-bottom:7px!important;}
  .dsk-page-cctv .dsk-method-list>li{padding:9px 9px 9px 10px!important;border-radius:10px!important;margin-bottom:7px!important;}
  .dsk-page-cctv .dsk-steps-ol>li{padding:9px 9px 9px 36px!important;border-radius:10px!important;margin-bottom:7px!important;}
  .dsk-page-cctv .dsk-steps-ol>li::before{left:10px!important;top:9px!important;}
  .dsk-page-cctv .alert-box{padding:10px!important;margin:10px 0 14px!important;border-radius:12px!important;}
}