/* ==========================================================================
   A-Case — landing pages SEO (klasy .aclp-*)
   Jezyk wizualny przeniesiony ze strony glownej (widok "Why A-Case").
   Paleta, typografia i komponenty = m16-why-a-case.
   ========================================================================== */
@import "https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@300;400;600;700;800;900&display=swap";

:root{
  --navy:#103152;--navy-deep:#0a263f;--navy-mid:#0e2c49;
  --green:#6edb5f;--green-dark:#54bd49;
  --ink:#333;--text:#6b6b6b;--soft:#f5f6f7;--line:#e5e7e9;
  --on-navy:#a9bdcf;--on-navy-dim:#7990a4;
  --lp-sidebar:0px;
}

/* ---- typografia bazowa: Divi daje 14px/Source Sans Pro, Elementor Roboto ---- */
html body.m16-landing{font-size:16px;line-height:1.5}
body.m16-landing,
body.m16-landing .elementor,
body.m16-landing .elementor *{font-family:"Nunito Sans",Arial,Helvetica,sans-serif}
body.m16-landing .elementor .elementor-widget{font-weight:inherit}
body.m16-landing .elementor .elementor-heading-title{margin:0}

/* ---- warstwa zgodnosci z opakowaniami widgetow ---- */
.aclp .elementor-widget-container{min-width:0}
.aclp .elementor-widget-image img{display:block}

/* ==========================================================================
   1. Elementy wspolne
   ========================================================================== */
.aclp{font-family:"Nunito Sans",Arial,sans-serif;color:var(--ink)}
.aclp *{box-sizing:border-box}
.aclp p{margin:0 0 16px;line-height:1.72;color:var(--text)}
.aclp a{text-decoration:none}

/* nadkreslenie sekcji — jak .overline na stronie glownej */
.aclp .aclp-kicker{
  color:var(--navy);text-transform:uppercase;letter-spacing:.28em;
  font-size:.7rem;font-weight:800;display:block;margin:0 0 22px;
}
.aclp .aclp-kicker:before{
  content:"";background:var(--green);width:34px;height:2px;
  display:block;margin-bottom:14px;
}

.aclp .aclp-hero-title h1{
  font-size:clamp(2.5rem,4.4vw,4.1rem)!important;line-height:.98!important;
  letter-spacing:-.05em;font-weight:800!important;
}
.aclp .aclp-section-title h2{
  font-size:clamp(2rem,3.4vw,3.4rem)!important;line-height:1.02!important;
  letter-spacing:-.045em;font-weight:800!important;
}
.aclp h3{letter-spacing:-.02em}

/* karty — kwadratowe, cienka linia, miekki cien (jak .product-card / .worth-card) */
.aclp .aclp-card{
  border:1px solid var(--line);border-radius:0;background:#fff;
  box-shadow:0 9px 30px #132d400f;position:relative;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.aclp .aclp-card:before{
  content:"";position:absolute;top:-1px;left:-1px;right:-1px;height:3px;
  background:var(--green);transform:scaleX(0);transform-origin:left;
  transition:transform .25s ease;
}
.aclp .aclp-card:hover{transform:translateY(-3px);box-shadow:0 18px 44px #132d4021;border-color:#d7dde2}
.aclp .aclp-card:hover:before{transform:scaleX(1)}
.aclp .aclp-card-recommended{border:1px solid var(--line)}
.aclp .aclp-card-recommended:before{transform:scaleX(1);background:var(--navy)}
.aclp .aclp-card-recommended:hover:before{background:var(--green)}
.aclp .aclp-card h3{color:var(--navy)}

.aclp .aclp-dark-card{
  border:1px solid #ffffff1f;border-radius:0;background:#ffffff08;
  transition:background .2s ease,border-color .2s ease;
}
.aclp .aclp-dark-card:hover{background:#ffffff12;border-color:#ffffff33}

.aclp .aclp-step-number{
  font-size:.72rem;font-weight:900;letter-spacing:.28em;color:var(--green);
}
.aclp .aclp-list ul{margin:0;padding-left:1.2em}
.aclp .aclp-list li{margin:0 0 12px;line-height:1.6;color:#4f4f4f}

.aclp .aclp-pill{
  display:inline-block;padding:7px 12px;border-radius:0;
  background:var(--navy);color:#fff;font-size:.62rem;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;
}
.aclp .aclp-micro{font-size:.78rem;line-height:1.6;color:var(--on-navy-dim)}

/* przyciski — kwadratowe, wersaliki, strzalka (jak .button-navy) */
.aclp .elementor-button{
  border-radius:4px!important;text-transform:uppercase;letter-spacing:.12em;
  font-weight:800!important;font-size:.68rem!important;padding:16px 22px!important;
  transition:background .2s ease,color .2s ease,transform .2s ease;
}
.aclp .elementor-button .elementor-button-content-wrapper{gap:14px;align-items:center}
.aclp .aclp-button-primary .elementor-button-text:after,
.aclp .aclp-button-secondary .elementor-button-text:after{content:" →"}
.aclp .aclp-button-primary .elementor-button:hover{background:var(--navy-deep)!important;transform:translateY(-2px)}
.aclp .aclp-button-secondary .elementor-button{
  background:transparent!important;border:0!important;color:var(--ink)!important;padding-left:0!important;
}
.aclp .aclp-button-secondary .elementor-button:hover{color:var(--navy)!important}

/* przyciski na granacie — zielone, jak .button-green */
.aclp-magnetic .aclp-button-primary .elementor-button,
.aclp-final .aclp-button-primary .elementor-button{
  background:var(--green)!important;color:var(--navy-deep)!important;
}
.aclp-magnetic .aclp-button-primary .elementor-button:hover,
.aclp-final .aclp-button-primary .elementor-button:hover{background:var(--green-dark)!important}

/* ==========================================================================
   2. Hero — jasna kolumna z tekstem + granatowe pole ze zdjeciem case'a
   ========================================================================== */
.aclp-hero{
  padding:0!important;
  background:#fff url(https://shop.army-case.com/wp-content/uploads/2024/04/7.jpg) 50%/cover no-repeat!important;
  overflow:visible;
}
.aclp-hero .aclp-hero-grid{
  display:grid!important;grid-template-columns:56% 44%;align-items:stretch;
  gap:0!important;padding:0!important;width:100%;max-width:none;min-height:640px;
}
.aclp-hero .aclp-hero-copy{
  background:linear-gradient(90deg,#fffffff8,#fffffff0);
  justify-content:center;padding:96px 5vw 104px!important;gap:0!important;
}
.aclp-hero .aclp-hero-copy>*{width:100%!important}
.aclp-hero .aclp-hero-title{margin:0 0 6px}
.aclp-hero .aclp-hero-copy p{max-width:560px;margin:32px 0 0;font-size:1.06rem;line-height:1.7}
.aclp-hero .aclp-hero-title h1{max-width:620px}
.aclp-hero .aclp-hero-buttons{
  display:flex!important;flex-direction:row!important;flex-wrap:wrap;
  align-items:center;gap:14px 28px!important;margin-top:38px;padding:0!important;width:auto!important;
}
.aclp-hero .aclp-hero-buttons>*{flex:0 0 auto;width:auto!important}

.aclp-hero .aclp-hero-visual{
  background:linear-gradient(#103152f0,#103152e6);
  position:relative;min-width:0;padding:0!important;overflow:visible;
}
.aclp-hero .aclp-hero-visual .elementor-widget-html,
.aclp-hero .aclp-hero-visual .elementor-widget-html>.elementor-widget-container{position:static}
.aclp-hero-case{
  position:absolute;z-index:3;width:106%;max-width:none;height:auto;
  left:-14%;top:50%;transform:translateY(-52%);
  filter:drop-shadow(0 34px 60px #05121fa6);pointer-events:none;
}

/* pasek cech pod hero — jak .feature-bar na stronie glownej */
.aclp-feature-strip{padding:0!important;max-width:none!important;background:transparent}
.aclp-feature-bar{
  z-index:5;position:relative;background:#fff;
  display:grid;grid-template-columns:repeat(3,1fr);
  margin:-46px 5vw 0;box-shadow:0 14px 48px #142a3c1c;
}
.aclp-feature-bar>div{
  border-right:1px solid var(--line);display:flex;flex-direction:row;
  align-items:center;justify-content:center;gap:17px;min-height:116px;padding:18px 16px;
}
.aclp-feature-bar>div:last-child{border-right:0}
.aclp-feature-bar svg{fill:none;stroke:currentColor;stroke-width:2px;width:42px;height:42px;color:var(--green);flex:0 0 auto}
.aclp-feature-bar .aclp-feature-text{font-size:.72rem;line-height:1.5;color:var(--text)}
.aclp-feature-bar .aclp-feature-text b{
  color:var(--ink);text-transform:uppercase;letter-spacing:.08em;font-size:.78rem;display:block;
}

/* ==========================================================================
   3. Sekcje tresci
   ========================================================================== */
.aclp-intro,.aclp-topic-detail,.aclp-faq-section{background:#fff}
.aclp-fit,.aclp-selector,.aclp-related{background:var(--soft)}
.aclp-workflow{background:var(--navy-deep)}
.aclp-final{background:var(--navy)}

.aclp-intro .aclp-section-title h2,
.aclp-fit .aclp-section-title h2,
.aclp-topic-detail .aclp-section-title h2,
.aclp-selector .aclp-section-title h2,
.aclp-faq-section .aclp-section-title h2,
.aclp-related .aclp-section-title h2{color:var(--ink)}

/* FAQ — cienkie linie, pytania granatowe */
.aclp .aclp-faq{border-top:1px solid var(--line);padding-top:24px}
.aclp .aclp-faq h3{font-size:1.3rem!important;line-height:1.3!important;color:var(--navy);font-weight:800}

/* powiazane strony */
.aclp .aclp-related{margin:0;padding:0;list-style:none}
.aclp .aclp-related li{margin:0;border-bottom:1px solid var(--line)}
.aclp .aclp-related li:first-child{border-top:1px solid var(--line)}
.aclp .aclp-related a{
  display:flex;justify-content:space-between;align-items:center;gap:20px;
  padding:20px 0;color:var(--navy);font-weight:800;font-size:1.02rem;border:0;
  transition:padding .2s ease;
}
.aclp .aclp-related a:after{content:"→";color:var(--green);font-weight:900}
.aclp .aclp-related a:hover{padding-left:10px}

/* sekcje ciemne — kolor tekstu z pakietu byl szary (#6b6b6b) na czerni */
.aclp-workflow p,.aclp-final p{color:var(--on-navy)}
.aclp-workflow .aclp-section-title h2,.aclp-final .aclp-section-title h2{color:#fff}
.aclp-workflow h3{color:#fff}

/* ==========================================================================
   4. "Magnetic" — granatowy pas ze zdjeciem (jak .time-section)
   ========================================================================== */
.aclp-magnetic{
  background:var(--navy)!important;padding:0!important;max-width:none!important;
}
.aclp-magnetic .aclp-magnetic-grid{
  display:grid!important;grid-template-columns:48% 52%;align-items:stretch;
  gap:0!important;padding:0!important;width:100%;max-width:none;
}
.aclp-magnetic .aclp-magnetic-photo{padding:0!important;position:relative;min-height:420px;overflow:hidden}
.aclp-magnetic .aclp-magnetic-photo .elementor-widget-html,
.aclp-magnetic .aclp-magnetic-photo .elementor-widget-html>.elementor-widget-container{
  position:absolute;inset:0;display:block;
}
.aclp-magnetic .aclp-magnetic-photo img{width:100%;height:100%;object-fit:cover;display:block}
.aclp-magnetic .aclp-magnetic-text{
  justify-content:center;padding:86px 5vw 90px!important;gap:0!important;
}
.aclp-magnetic .aclp-magnetic-text>*{width:100%!important}
.aclp-magnetic .aclp-section-title h2{color:#fff;max-width:620px}
.aclp-magnetic p{color:var(--on-navy);max-width:620px;margin-top:26px}
.aclp-magnetic .aclp-button-primary{margin-top:14px}

/* ==========================================================================
   5. "Selector" — karty modeli ze zdjeciami (jak .product-card)
   ========================================================================== */
.aclp-selector .aclp-card{display:flex;flex-direction:column;overflow:hidden}
.aclp-card-photo{
  background:linear-gradient(160deg,#eef1f4,#dfe4e9);
  display:flex;align-items:center;justify-content:center;
  height:210px;margin:0 0 4px;overflow:hidden;
}
.aclp-card-photo img{
  max-width:86%;max-height:82%;width:auto;height:auto;object-fit:contain;display:block;
  transition:transform .35s ease;
}
.aclp-selector .aclp-card:hover .aclp-card-photo img{transform:scale(1.05)}
.aclp-selector .aclp-card>.elementor-element{padding-left:26px;padding-right:26px}
.aclp-selector .aclp-card>.aclp-card-photo-widget{padding:0!important}
.aclp-selector .aclp-card .aclp-button-primary{margin-top:auto}

/* ==========================================================================
   6. Final CTA — granat, logo, duza typografia (jak .final-cta)
   ========================================================================== */
.aclp-final .aclp-final-logo img{
  width:150px;height:auto;filter:brightness(0) invert();margin:0 auto 42px;display:block;
}
.aclp-final .aclp-final-row{
  flex-direction:column!important;align-items:center!important;text-align:center;
  gap:0!important;width:100%!important;
}
.aclp-final .aclp-final-copy{width:100%!important;align-items:center!important;text-align:center}
.aclp-final .aclp-final-copy p{max-width:660px;margin-left:auto;margin-right:auto}
.aclp-final .aclp-final-button{width:auto!important;margin-top:34px}
.aclp-final .aclp-section-title h2{font-size:clamp(2.6rem,5.4vw,5.4rem)!important;line-height:.92!important}
.aclp-final .aclp-micro{text-align:center;max-width:760px;margin-left:auto;margin-right:auto}

/* ==========================================================================
   7. Naglowek i stopka strony (wstrzykiwane przez mu-plugin)
   ========================================================================== */
.m16-lp-header{
  position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  height:76px;padding:0 5vw;font-family:"Nunito Sans",Arial,sans-serif;
}
.m16-lp-header .m16-lp-logo img{width:132px;height:auto;display:block}
.m16-lp-header-actions{display:flex;align-items:center;gap:22px;min-width:0}
.m16-lp-langs{display:flex;align-items:center;gap:2px}
.m16-lp-langs a{
  color:#8b939a;text-transform:uppercase;letter-spacing:.1em;font-size:.66rem;font-weight:800;
  padding:7px 8px;text-decoration:none;border-radius:3px;transition:color .2s ease,background .2s ease;
}
.m16-lp-langs a:hover{color:var(--navy);background:var(--soft)}
.m16-lp-langs a.is-current{color:var(--navy);background:var(--soft);box-shadow:inset 0 -2px 0 var(--green)}

/* lista rozwijana jezykow — tylko na waskich ekranach (kody 2-literowe sa za male na palec) */
.m16-lp-langsel{display:none;position:relative}
.m16-lp-langsel:after{
  content:"";position:absolute;right:12px;top:50%;width:7px;height:7px;pointer-events:none;
  border-right:2px solid var(--navy);border-bottom:2px solid var(--navy);
  transform:translateY(-70%) rotate(45deg);
}
.m16-lp-langsel select{
  -webkit-appearance:none;appearance:none;
  font-family:"Nunito Sans",Arial,sans-serif;font-size:.82rem;font-weight:800;color:var(--navy);
  background:#fff;border:1px solid var(--line);border-radius:4px;
  padding:12px 32px 12px 12px;min-height:44px;line-height:1.2;
}
.m16-lp-langsel select:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.m16-lp-header .m16-lp-shop{
  background:var(--navy);color:#fff;text-transform:uppercase;letter-spacing:.1em;
  font-size:.66rem;font-weight:800;padding:13px 16px;border-radius:4px;
  display:flex;align-items:center;gap:12px;text-decoration:none;transition:background .2s ease;
  max-width:52vw;
}
.m16-lp-header .m16-lp-shop:hover{background:var(--navy-deep)}
.m16-lp-header .m16-lp-shop span{color:var(--green)}

.m16-lp-footer{
  background:#fff;border-top:1px solid var(--line);
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:30px;
  padding:42px 5vw;font-family:"Nunito Sans",Arial,sans-serif;
}
.m16-lp-footer img{width:120px;height:auto;display:block}
.m16-lp-footer nav{
  display:flex;gap:24px;flex-wrap:wrap;color:var(--navy);
  text-transform:uppercase;letter-spacing:.08em;font-size:.67rem;font-weight:800;
}
.m16-lp-footer nav a{color:var(--navy);text-decoration:none}
.m16-lp-footer nav a:hover{color:var(--green-dark)}
.m16-lp-footer span{color:#93999c;font-size:.7rem}

/* ==========================================================================
   8. Responsywnosc
   ========================================================================== */
@media (max-width:1200px){
  .aclp-hero .aclp-hero-grid{grid-template-columns:54% 46%}
  .aclp-hero-case{width:112%;left:-12%}
}
@media (min-width:768px) and (max-width:1024px){
  .aclp-card-grid>.aclp-card,.aclp-card-grid>.aclp-dark-card{width:48%!important}
  .aclp-magnetic .aclp-magnetic-grid{grid-template-columns:44% 56%}
}
@media (max-width:900px){
  .aclp-hero .aclp-hero-grid{grid-template-columns:1fr;min-height:0}
  .aclp-hero .aclp-hero-copy{padding:80px 30px 72px!important}
  .aclp-hero .aclp-hero-visual{min-height:400px;overflow:hidden}
  .aclp-hero-case{width:auto;height:76%;left:50%;top:50%;transform:translate(-50%,-50%);filter:drop-shadow(0 20px 38px #05121f80)}
  .aclp-feature-bar{grid-template-columns:1fr;margin:0}
  .aclp-feature-bar>div{border-right:0;border-bottom:1px solid var(--line);justify-content:flex-start;padding:18px 28px}
  .aclp-magnetic .aclp-magnetic-grid{grid-template-columns:1fr}
  .aclp-magnetic .aclp-magnetic-photo{min-height:300px}
  .aclp-magnetic .aclp-magnetic-text{padding:64px 30px 70px!important}
}
@media (max-width:767px){
  .aclp{padding-left:22px!important;padding-right:22px!important}
  .aclp-hero,.aclp-magnetic{padding-left:0!important;padding-right:0!important}
  .aclp-card-grid>.aclp-card,.aclp-card-grid>.aclp-dark-card,
  .aclp .aclp-card,.aclp .aclp-dark-card,.aclp .aclp-hero-copy,
  .aclp .aclp-intro-heading,.aclp .aclp-intro-text,
  .aclp .aclp-final-copy,.aclp .aclp-final-button{width:100%!important}
  .aclp{padding-top:64px!important;padding-bottom:64px!important}
  .aclp-hero,.aclp-magnetic,.aclp-feature-strip{padding-top:0!important;padding-bottom:0!important}
  .aclp .aclp-hero-title h1{font-size:2.6rem!important}
  .aclp .aclp-section-title h2{font-size:1.95rem!important}
  .m16-lp-header{height:auto;min-height:64px;padding:10px 18px;flex-wrap:wrap;gap:8px 12px}
  .m16-lp-header .m16-lp-logo img{width:104px}
  .m16-lp-header-actions{gap:10px;flex:1 1 auto;justify-content:flex-end}
  .m16-lp-langs{display:none}
  .m16-lp-langsel{display:block}
  .m16-lp-header .m16-lp-shop{font-size:.6rem;padding:11px 12px;gap:8px;letter-spacing:.08em}
  .aclp .elementor-button{font-size:.64rem!important;padding:15px 18px!important}
  .m16-lp-footer{grid-template-columns:1fr;justify-items:center;text-align:center;gap:20px}
  .m16-lp-footer nav{justify-content:center}
}

/* ==========================================================================
   9. Spis poradników (Guides / Ratgeber / Guías / Guide)
   ========================================================================== */
.aclp-guides-head .aclp-guides-title{
  color:var(--ink);font-size:clamp(2.2rem,4vw,3.8rem);line-height:1;letter-spacing:-.045em;
  font-weight:800;margin:0 0 26px;max-width:900px;
}
.aclp-guides-head .aclp-guides-lead{max-width:720px;font-size:1.06rem;line-height:1.7;margin:0}

.aclp-guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.aclp-guide-card{
  position:relative;display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--line);padding:30px 28px 62px;text-decoration:none;
  box-shadow:0 9px 30px #132d400f;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.aclp-guide-card:before{
  content:"";position:absolute;top:-1px;left:-1px;right:-1px;height:3px;background:var(--green);
  transform:scaleX(0);transform-origin:left;transition:transform .25s ease;
}
.aclp-guide-card:hover{transform:translateY(-3px);box-shadow:0 18px 44px #132d4021;border-color:#d7dde2}
.aclp-guide-card:hover:before{transform:scaleX(1)}
.aclp-guide-num{
  color:var(--green);font-size:.72rem;font-weight:900;letter-spacing:.28em;display:block;margin-bottom:16px;
}
.aclp-guide-card h2{
  color:var(--navy);font-size:1.22rem;line-height:1.3;letter-spacing:-.02em;font-weight:800;margin:0 0 12px;
}
.aclp-guide-card p{color:var(--text);font-size:.92rem;line-height:1.65;margin:0}
.aclp-guide-more{
  position:absolute;left:28px;bottom:26px;color:var(--navy);font-weight:900;font-size:1rem;
  transition:transform .2s ease;
}
.aclp-guide-card:hover .aclp-guide-more{transform:translateX(6px)}

@media (max-width:1024px){ .aclp-guide-grid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:767px){
  .aclp-guide-grid{grid-template-columns:1fr;gap:16px}
  .aclp-guide-card{padding:26px 22px 58px}
}