/* ==========================================================================
   All4eBikes — sistem de articole blog "HALO" v1.0
   Fisier de tema: assets/css/a4e-blog.css, inclus doar pe paginile de
   articol din pages/blog_article.html.twig. Articolele nu contin CSS.
   Tot ce e aici e scopat sub .a4e ca sa nu atinga restul temei.
   ========================================================================== */
.a4e{
  --ink:#0B1B26; --ink-2:#3A5261; --ink-3:#7A8F9C;
  --surface:#FFFFFF; --tint:#F2FAFD; --line:#DCEBF2; --line-2:#C3E2EE;
  --cyan:#00CCFF; --cyan-lt:#7FE4FF; --cyan-mid:#00A8D6; --cyan-dk:#00708F;
  --deep:#04121A;
  --warn-bg:#FFF7E8; --warn-ln:#EFC97E; --warn-ink:#8A6100;
  --note-bg:#EDF8F2; --note-ln:#93D2AF; --note-ink:#1B6E44;
  --tip-bg:#EAF8FE;  --tip-ln:#A6E4F7;  --tip-ink:#00708F;
  --pad:clamp(20px,4.5vw,34px);
  font-family:"Poppins",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:16px; line-height:1.72; color:var(--ink-2);
  -webkit-font-smoothing:antialiased;
}
.a4e *,.a4e *::before,.a4e *::after{box-sizing:border-box;}

/* Neutralizarea marcatorilor nativi de lista.
   Tema aplica `list-style: disc / decimal` si `padding-left: 2rem` pe orice
   ul/ol din `.article__content`, cu specificitate 0,2,1 -- mai mare decat
   selectorii nostri de componenta (0,1,1). Fara acest override apar simultan
   marcatorul temei si cel desenat de noi: bulina + patrat albastru la liste
   simple, cifra neagra + cifra albastra la cele numerotate.
   Folosim !important pentru ca regula temei nu poate fi editata fara sa
   afectam si alte pagini care depind de ea. */
.a4e ul,.a4e ol{list-style:none !important;padding-left:0 !important;}
.a4e li::marker{content:"" !important;}
/* singura componenta care are nevoie de padding propriu pe lista */
.a4e-toc ol{padding:0 18px 16px 18px !important;}
.a4e img{max-width:100%;height:auto;display:block;}
.a4e a{color:var(--cyan-dk);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;}
.a4e a:hover{color:var(--cyan-mid);}
.a4e a:focus-visible,.a4e summary:focus-visible,.a4e button:focus-visible{outline:2px solid var(--cyan-mid);outline-offset:2px;}

/* Tema afiseaza deja data/categorie/autor deasupra continutului; le inlocuim
   cu hero-ul nostru, care contine aceleasi informatii plus timpul de lectura.
   Conditionat cu :has(), ca articolele inca nemigrate sa nu ramana fara meta.
   Pe browserele fara :has() (~5%) apare o mica dublare, nu o defectiune. */
.page--blog-article:has(.a4e-hero) .article__info{display:none;}

/* ---------------------------------------------------------------- HERO --- */
.a4e-hero{
  position:relative;overflow:hidden;border-radius:4px;
  padding:var(--pad) var(--pad) calc(var(--pad) + 4px);
  color:#fff;
  background:
    radial-gradient(circle at 20% 48%, rgba(0,204,255,.55) 0, rgba(0,204,255,0) 52%),
    radial-gradient(circle at 80% 16%, rgba(0,110,165,.52) 0, rgba(0,110,165,0) 55%),
    var(--deep);
}
.a4e-brand{display:flex;align-items:center;gap:10px;margin-bottom:clamp(18px,3.5vw,26px);}
.a4e-mark{width:38px;height:38px;flex-shrink:0;display:block;
  filter:drop-shadow(0 0 14px rgba(0,204,255,.8)) drop-shadow(0 0 30px rgba(0,204,255,.32));}
.a4e-wm{display:flex;flex-direction:column;line-height:1;}
.a4e-wm b{font-family:"Chakra Petch",sans-serif;font-weight:700;font-size:16px;letter-spacing:-.01em;color:#fff;}
.a4e-wm span{font-size:9.5px;color:var(--cyan-lt);margin-top:3px;letter-spacing:.04em;}
.a4e-eyebrow{
  font-family:"Chakra Petch",sans-serif;font-weight:600;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--cyan);margin:0 0 12px;
}
.a4e-eyebrow a{color:var(--cyan);text-decoration:none;}
.a4e-eyebrow a:hover{text-decoration:underline;}
.a4e-hero h1,.a4e-title{
  font-family:"Chakra Petch",sans-serif;font-weight:700;
  font-size:clamp(26px,4.6vw,40px);line-height:1.1;letter-spacing:-.005em;
  margin:0 0 14px;color:#fff;text-wrap:balance;max-width:22ch;
  text-shadow:0 2px 26px rgba(0,130,180,.45);
}
.a4e-meta{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px;}
.a4e-meta li{
  font-family:"Chakra Petch",sans-serif;font-weight:500;font-size:12.5px;
  color:#A9CFDF;display:flex;align-items:center;gap:7px;
}
.a4e-meta li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--cyan);box-shadow:0 0 8px var(--cyan);flex-shrink:0;}

/* -------------------------------------------------------------- INTRO ---- */
.a4e-lead{
  font-size:clamp(16px,2.1vw,18px);line-height:1.65;color:var(--ink);
  margin:clamp(20px,3.5vw,28px) 0 0;max-width:64ch;
}

/* --------------------------------------------------------- STRIP INFO ---- */
.a4e-strip{
  display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0;padding:14px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.a4e-strip span{
  display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;
  color:var(--cyan-dk);background:var(--tint);border:1px solid var(--line-2);
  padding:5px 12px;border-radius:99px;
}

/* ------------------------------------------------------------- CUPRINS --- */
.a4e-toc{
  margin:26px 0;border:1px solid var(--line);border-left:4px solid var(--cyan);
  background:var(--tint);border-radius:3px;
}
.a4e-toc>summary{
  cursor:pointer;list-style:none;padding:13px 18px;
  font-family:"Chakra Petch",sans-serif;font-weight:600;font-size:14px;
  color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:12px;
}
.a4e-toc>summary::-webkit-details-marker{display:none;}
.a4e-toc>summary::after{content:"+";font-size:20px;line-height:1;color:var(--cyan-mid);font-weight:400;}
.a4e-toc[open]>summary::after{content:"\2212";}
.a4e-toc ol{margin:0;padding:0 18px 16px 18px;list-style:none;counter-reset:toc;}
.a4e-toc li{counter-increment:toc;position:relative;padding-left:30px;margin-bottom:7px;font-size:14px;}
.a4e-toc li::before{
  content:counter(toc,decimal-leading-zero);position:absolute;left:0;top:1px;
  font-family:"Chakra Petch",sans-serif;font-size:11.5px;font-weight:600;color:var(--cyan-mid);
}
.a4e-toc a{color:var(--ink-2);text-decoration:none;}
.a4e-toc a:hover{color:var(--cyan-dk);text-decoration:underline;}

/* --------------------------------------------------------------- PROZA --- */
.a4e-prose h2{
  font-family:"Chakra Petch",sans-serif;font-weight:700;
  font-size:clamp(21px,3vw,27px);line-height:1.22;color:var(--ink);
  margin:clamp(34px,5vw,46px) 0 14px;padding-bottom:10px;position:relative;text-wrap:balance;
  border-bottom:1px solid var(--line);
}
.a4e-prose h2::after{
  content:"";position:absolute;left:0;bottom:-1px;width:56px;height:3px;
  background:linear-gradient(90deg,var(--cyan),var(--cyan-dk));
}
.a4e-prose h3{
  font-family:"Chakra Petch",sans-serif;font-weight:600;font-size:clamp(17px,2.3vw,20px);
  color:var(--ink);margin:28px 0 10px;line-height:1.32;
}
.a4e-prose h4{
  font-family:"Chakra Petch",sans-serif;font-weight:600;font-size:15px;color:var(--cyan-dk);
  margin:22px 0 8px;letter-spacing:.01em;
}
.a4e-prose p{margin:0 0 16px;}
.a4e-prose ul,.a4e-prose ol{margin:0 0 18px;padding-left:0;list-style:none;}
.a4e-prose ul>li{position:relative;padding-left:24px;margin-bottom:8px;}
.a4e-prose ul>li::before{
  content:"";position:absolute;left:0;top:9px;width:9px;height:9px;
  background:linear-gradient(135deg,var(--cyan),var(--cyan-dk));border-radius:1px;
}
.a4e-prose ol{counter-reset:a4eol;}
.a4e-prose ol>li{counter-increment:a4eol;position:relative;padding-left:30px;margin-bottom:9px;}
.a4e-prose ol>li::before{
  content:counter(a4eol);position:absolute;left:0;top:0;
  font-family:"Chakra Petch",sans-serif;font-weight:700;font-size:13px;color:var(--cyan-dk);
  background:var(--tint);border:1px solid var(--line-2);width:21px;height:21px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
}
.a4e-prose strong{font-weight:600;color:var(--ink);}
.a4e-prose blockquote{
  margin:24px 0;padding:16px 20px;background:var(--tint);
  border-left:4px solid var(--cyan);font-size:17px;color:var(--ink);
}
.a4e-prose blockquote p:last-child{margin-bottom:0;}

/* ----------------------------------------------------------- PASI ------- */
.a4e-step{
  margin:26px 0;border:1px solid var(--line);border-radius:4px;
  background:var(--surface);overflow:hidden;
}
.a4e-step>header{
  display:flex;align-items:center;gap:13px;padding:13px 18px;
  background:linear-gradient(96deg,var(--deep) 0%,#0B3D52 62%,#00688B 100%);
}
.a4e-step-n{
  font-family:"Chakra Petch",sans-serif;font-weight:700;font-size:12.5px;
  color:var(--deep);background:var(--cyan);padding:3px 10px;border-radius:2px;flex-shrink:0;
}
.a4e-step>header h3,.a4e-step-t{
  font-family:"Chakra Petch",sans-serif;font-weight:600;font-size:clamp(16px,2.2vw,19px);
  color:#fff;margin:0;line-height:1.3;
}
.a4e-step-body{padding:18px;}
.a4e-step-body>*:last-child{margin-bottom:0;}
.a4e-step-body h4:first-child{margin-top:0;}

/* -------------------------------------------------------- CASETE -------- */
.a4e-warn,.a4e-note,.a4e-tip{
  margin:22px 0;padding:14px 17px;border-radius:3px;border:1px solid;font-size:15px;line-height:1.6;
}
.a4e-warn{background:var(--warn-bg);border-color:var(--warn-ln);color:#5C4310;}
.a4e-note{background:var(--note-bg);border-color:var(--note-ln);color:#17452F;}
.a4e-tip{background:var(--tip-bg);border-color:var(--tip-ln);color:#0E3F4F;}
.a4e-warn b,.a4e-note b,.a4e-tip b{
  display:block;font-family:"Chakra Petch",sans-serif;font-weight:700;font-size:11.5px;
  letter-spacing:.16em;text-transform:uppercase;margin-bottom:5px;
}
.a4e-warn b{color:var(--warn-ink);}
.a4e-note b{color:var(--note-ink);}
.a4e-tip b{color:var(--tip-ink);}
.a4e-warn p:last-child,.a4e-note p:last-child,.a4e-tip p:last-child{margin-bottom:0;}

/* --------------------------------------------------- GRID COMPONENTE ---- */
.a4e-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:10px;margin:20px 0;
  padding:0;list-style:none;counter-reset:a4eg;
}
.a4e-grid li{
  counter-increment:a4eg;position:relative;padding:13px 15px 13px 42px;
  background:var(--tint);border:1px solid var(--line);border-radius:3px;font-size:14px;margin:0;
}
.a4e-grid li::before{
  content:counter(a4eg);position:absolute;left:13px;top:13px;
  width:20px;height:20px;border-radius:50%;
  background:linear-gradient(135deg,var(--cyan),var(--cyan-dk));color:#fff;
  font-family:"Chakra Petch",sans-serif;font-weight:700;font-size:11px;
  display:flex;align-items:center;justify-content:center;
}

/* ------------------------------------------------------- PILLS SCULE ---- */
.a4e-tools{display:flex;flex-wrap:wrap;gap:7px;margin:16px 0 20px;padding:0;list-style:none;}
.a4e-tools li{
  font-size:13px;font-weight:500;color:var(--ink-2);background:var(--surface);
  border:1px solid var(--line-2);padding:5px 13px;border-radius:99px;margin:0;
}

/* ------------------------------------------------------------ TABELE ---- */
.a4e-table{overflow-x:auto;margin:22px 0;border:1px solid var(--line);border-radius:3px;}
.a4e-table table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:420px;}
.a4e-table th,.a4e-table td{padding:11px 15px;text-align:left;border-bottom:1px solid var(--line);}
.a4e-table thead th{
  background:linear-gradient(96deg,var(--deep),#0B3D52);color:#fff;
  font-family:"Chakra Petch",sans-serif;font-weight:600;font-size:13px;
  letter-spacing:.05em;text-transform:uppercase;
}
.a4e-table tbody tr:last-child td{border-bottom:none;}
.a4e-table tbody tr:nth-child(even){background:var(--tint);}
.a4e-table td:not(:first-child){font-variant-numeric:tabular-nums;}
.a4e-table .a4e-hl{color:var(--cyan-dk);font-weight:600;}

/* Tabel specificatii: perechi eticheta/valoare */
.a4e-specs{margin:20px 0;border:1px solid var(--line);border-radius:3px;overflow:hidden;}
.a4e-specs div{
  display:flex;justify-content:space-between;gap:16px;align-items:baseline;
  padding:10px 15px;border-bottom:1px solid var(--line);font-size:14.5px;
}
.a4e-specs div:last-child{border-bottom:none;}
.a4e-specs div:nth-child(even){background:var(--tint);}
.a4e-specs dt,.a4e-specs span:first-child{color:var(--ink-2);}
.a4e-specs dd,.a4e-specs b{
  margin:0;font-family:"Chakra Petch",sans-serif;font-weight:600;font-size:14px;
  color:var(--cyan-dk);font-variant-numeric:tabular-nums;text-align:right;flex-shrink:0;
}

/* --------------------------------------------------------------- FAQ ---- */
.a4e-faq{margin:22px 0;}
.a4e-faq details{border:1px solid var(--line);border-radius:3px;margin-bottom:9px;background:var(--surface);}
.a4e-faq details[open]{border-color:var(--line-2);}
.a4e-faq summary{
  cursor:pointer;list-style:none;padding:14px 17px;
  font-family:"Chakra Petch",sans-serif;font-weight:600;font-size:15.5px;color:var(--ink);
  display:flex;justify-content:space-between;align-items:flex-start;gap:14px;line-height:1.35;
}
.a4e-faq summary::-webkit-details-marker{display:none;}
.a4e-faq summary::after{
  content:"+";font-size:21px;line-height:1;color:var(--cyan-mid);font-weight:400;flex-shrink:0;
  transition:transform .2s ease;
}
.a4e-faq details[open] summary::after{content:"\2212";}
.a4e-faq details[open] summary{color:var(--cyan-dk);}
.a4e-faq-a{padding:0 17px 15px;font-size:15px;color:var(--ink-2);}
.a4e-faq-a>*:last-child{margin-bottom:0;}

/* ------------------------------------------------------------- VIDEO ---- */
.a4e-video{margin:24px 0;}
.a4e-video-label{
  font-family:"Chakra Petch",sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--cyan-dk);margin:0 0 9px;
}
.a4e-video-box{
  position:relative;width:100%;padding-bottom:56.25%;background:var(--deep);
  border-radius:4px;overflow:hidden;border:1px solid var(--line);cursor:pointer;
}
.a4e-video-box img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.a4e-video-box iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
.a4e-video-play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:64px;height:46px;border:0;border-radius:12px;cursor:pointer;
  background:rgba(4,18,26,.78);display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 22px rgba(0,204,255,.5);transition:background .18s ease;
}
.a4e-video-box:hover .a4e-video-play{background:var(--cyan);}
.a4e-video-play svg{width:22px;height:22px;fill:#fff;}
.a4e-video-box:hover .a4e-video-play svg{fill:var(--deep);}
.a4e-video figcaption,.a4e-video-cap{margin-top:8px;font-size:13px;color:var(--ink-3);text-align:center;}

/* --------------------------------------------------------------- CTA ---- */
.a4e-cta{
  margin:28px 0;padding:var(--pad);border-radius:4px;color:#fff;position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 82% 30%, rgba(0,204,255,.42) 0, rgba(0,204,255,0) 58%),
    linear-gradient(100deg,var(--deep) 0%,#0A3B50 62%,#00688B 100%);
}
.a4e-cta h3{font-family:"Chakra Petch",sans-serif;font-weight:700;font-size:20px;margin:0 0 7px;color:#fff;}
.a4e-cta p{margin:0 0 15px;color:#B8D6E3;font-size:14.5px;max-width:52ch;}
.a4e-cta-row{display:flex;flex-wrap:wrap;gap:9px;}
.a4e-btn{
  display:inline-block;font-family:"Chakra Petch",sans-serif;font-weight:700;font-size:14px;
  padding:11px 20px;border-radius:3px;text-decoration:none;transition:opacity .18s ease;
}
.a4e-btn:hover{opacity:.88;text-decoration:none;}
.a4e-btn--primary{background:var(--cyan);color:var(--deep);}
.a4e-btn--primary:hover{color:var(--deep);}
.a4e-btn--ghost{background:transparent;border:1px solid rgba(255,255,255,.32);color:#fff;}
.a4e-btn--ghost:hover{color:#fff;}

/* ----------------------------------------------------------- VERDICT ---- */
.a4e-verdict{
  margin:26px 0;border:1px solid var(--line-2);border-radius:4px;overflow:hidden;background:var(--surface);
}
.a4e-verdict>b{
  display:block;padding:11px 17px;font-family:"Chakra Petch",sans-serif;font-weight:700;
  font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--deep);
  background:linear-gradient(96deg,var(--cyan-lt),var(--cyan));
}
.a4e-verdict-body{padding:16px 17px;}
.a4e-verdict-body>*:last-child{margin-bottom:0;}

/* ------------------------------------------------------ BARA PROGRES ---- */
.a4e-progress{
  position:fixed;top:0;left:0;height:3px;width:0;z-index:9999;
  background:linear-gradient(90deg,var(--cyan-dk),var(--cyan));
  box-shadow:0 0 10px rgba(0,204,255,.6);transition:width .08s linear;pointer-events:none;
}

/* -------------------------------------------------------- BLOC AUTOR ---- */
.a4e-author{
  margin:34px 0 0;padding:18px;border:1px solid var(--line);border-radius:4px;
  background:var(--tint);display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap;
}
.a4e-author-av{
  width:54px;height:54px;border-radius:50%;flex-shrink:0;overflow:hidden;
  background:linear-gradient(135deg,var(--cyan),var(--cyan-dk));
  display:flex;align-items:center;justify-content:center;
  font-family:"Chakra Petch",sans-serif;font-weight:700;font-size:20px;color:#fff;
}
.a4e-author-in{flex:1 1 220px;}
.a4e-author-in b{
  display:block;font-family:"Chakra Petch",sans-serif;font-weight:700;font-size:15.5px;color:var(--ink);
}
.a4e-author-role{font-size:12.5px;color:var(--cyan-dk);font-weight:600;margin:2px 0 7px;}
.a4e-author-in p{margin:0;font-size:14px;color:var(--ink-2);}

/* -------------------------------------------------------- RESPONSIVE ---- */
@media (max-width:560px){
  .a4e{font-size:15.5px;}
  .a4e-step>header{padding:11px 14px;gap:10px;}
  .a4e-step-body{padding:14px;}
  .a4e-meta{gap:6px 14px;}
  .a4e-cta-row .a4e-btn{flex:1 1 100%;text-align:center;}
}
@media (prefers-reduced-motion:reduce){
  .a4e *,.a4e-progress{transition:none !important;animation:none !important;}
}
@media print{
  .a4e-hero{background:#fff !important;color:#000 !important;border:1px solid #999;}
  .a4e-hero h1,.a4e-wm b{color:#000 !important;text-shadow:none !important;}
  .a4e-meta li{color:#333 !important;}
  .a4e-progress,.a4e-cta,.a4e-video{display:none !important;}
  .a4e-faq details{border:1px solid #999;}
  .a4e-faq-a{display:block !important;}
}