/* Stilul paginii /adictii (campania MAT … adicții), încărcat doar de acea pagină (pages.adictii()).
   Preluat din prototipul campaniei; toate regulile sunt sub .mat ca să nu atingă restul site-ului
   (style.css are și el .card, .btn, .grid, .hero, h1). Header-ul și footer-ul vin din site. */

/* Paleta campaniei (albastru/galben), valabilă doar în interiorul .mat */
.mat{--navy:#092c86;--blue:#0876d9;--yellow:#ffdf00;--ink:#102b67;--muted:#5b6b88;--pale:#f3f8ff;--line:#dce7f5;--radius:20px;--shadow:0 12px 34px rgba(8,43,117,.10);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;color:var(--ink);line-height:1.55;padding-bottom:40px}
.mat *{box-sizing:border-box}
.mat a{color:inherit;text-decoration:none}
.mat button{font:inherit;cursor:pointer}
/* Titlurile campaniei sunt sans-serif bold, nu serif-ul site-ului */
.mat h1,.mat h2,.mat h3{font-family:inherit;font-weight:800}
/* .wrap din secțiuni e deja în .wrap-ul site-ului: fără lățime/padding dublu */
.mat .wrap{max-width:none;margin:0;padding:0}

/* Imaginea campaniei, pe toată lățimea conținutului */
.mat-hero{margin:16px 0 0}
.mat-hero img{display:block;width:100%;height:auto;border-radius:20px}

/* Tab-urile secțiunilor; pe telefon se derulează orizontal în loc să se rupă pe rânduri */
.mat-tabs{display:flex;gap:4px;flex-wrap:wrap;margin:18px 0 0;padding:8px;background:var(--pale);border-radius:16px}
.mat-tabs button{border:0;background:transparent;color:#173879;font-weight:750;padding:10px 12px;border-radius:12px;font-size:14px}
.mat-tabs button:hover,.mat-tabs button.active{background:#fff;color:#075ac0}
.mat-tabs button[data-page="contact"]{background:var(--yellow);color:#082b7c}

/* Secțiunile: doar cea .active e vizibilă (comutată de adictii.js) */
.mat .page{display:none;min-height:40vh;padding:40px 0 30px;animation:matfade .22s ease}
.mat .page.active{display:block}
@keyframes matfade{from{opacity:.3;transform:translateY(5px)}to{opacity:1;transform:none}}

/* Tipografie */
.mat .kicker{display:inline-flex;align-items:center;gap:8px;color:#086ac8;font-weight:850;text-transform:uppercase;letter-spacing:1.1px;font-size:12px}
.mat .kicker:before{content:"";width:24px;height:3px;background:var(--yellow);border-radius:4px}
.mat h1{font-size:clamp(32px,5vw,52px);line-height:1.08;letter-spacing:-1.8px;color:var(--navy);margin:12px 0 16px}
.mat h2{font-size:clamp(25px,3vw,34px);line-height:1.15;color:var(--navy);letter-spacing:-.8px;margin:0 0 14px}
.mat h3{margin:0 0 8px;color:var(--navy);font-size:19px}
.mat p.lead{font-size:18px;color:#455b7e;max-width:760px;margin:0 0 26px}
.mat .intro{display:flex;justify-content:space-between;gap:35px;align-items:end;margin-bottom:30px}
.mat .intro .aside{max-width:260px;color:var(--muted);font-size:14px}

/* Butoane: navy implicit, galben, contur */
.mat .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:13px;background:var(--navy);color:#fff;padding:13px 19px;font-weight:850;box-shadow:0 7px 18px #092c8624;transform:none}
.mat .btn:hover{background:#0a3aa8;color:#fff}
.mat .btn.yellow{background:var(--yellow);color:var(--navy);box-shadow:none}
.mat .btn.outline{background:#fff;color:var(--navy);border:1px solid #cbdaf0;box-shadow:none}
.mat .actions{display:flex;gap:12px;flex-wrap:wrap}

/* Grile și carduri */
.mat .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.mat .grid.two{grid-template-columns:repeat(2,1fr)}
.mat .grid.four{grid-template-columns:repeat(4,1fr)}
.mat .card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:23px;box-shadow:var(--shadow)}
.mat .card.soft{background:var(--pale);box-shadow:none;border:0}
.mat .icon{width:54px;height:54px;display:grid;place-items:center;border-radius:17px;background:#fff1a8;color:var(--navy);font-size:26px;margin-bottom:15px}
.mat .card p{color:var(--muted);margin:7px 0 0}
.mat .card .more{display:inline-block;margin-top:17px;color:#0870cf;font-weight:850;font-size:14px}

/* Banda albastră cu îndemn */
.mat .band{margin:42px 0;background:linear-gradient(115deg,#092c86,#0876d9);color:#fff;border-radius:26px;padding:34px;display:flex;align-items:center;justify-content:space-between;gap:25px}
.mat .band h2{color:#fff;margin:0 0 8px}
.mat .band p{margin:0;color:#e5f1ff}
.mat .band .btn{background:var(--yellow);color:var(--navy);white-space:nowrap}

/* Cele 4 plăci colorate de pe Acasă */
.mat .tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:25px}
.mat .tile{border-radius:18px;padding:20px;background:#fff8ce;border:1px solid #f6e88c}
.mat .tile:nth-child(2){background:#e9f5ff;border-color:#d5eaff}
.mat .tile:nth-child(3){background:#eff9f3;border-color:#d9f0df}
.mat .tile:nth-child(4){background:#f3efff;border-color:#e5dcff}
.mat .tile strong{display:block;color:var(--navy);font-size:17px}
.mat .tile span{font-size:13px;color:#526789}

/* Etichete, liste */
.mat .pill{display:inline-block;background:#eaf4ff;color:#075bb4;border-radius:999px;padding:6px 11px;font-size:12px;font-weight:850;margin:3px}
.mat ul.clean{padding-left:20px;color:#536887}
.mat ul.clean li{margin:8px 0}

/* Scenariul interactiv (Provocarea MAT) */
.mat .quizbox{background:#f4f8ff;border:1px solid #dce8fa;border-radius:22px;padding:25px;max-width:780px}
.mat .answers{display:grid;gap:10px;margin:18px 0}
.mat .answer{background:#fff;border:1px solid #d4e1f3;border-radius:12px;padding:13px 15px;text-align:left;color:var(--ink);font-weight:700}
.mat .answer:hover{border-color:#0876d9;background:#f8fbff}
.mat .feedback{font-weight:750;margin-top:12px;min-height:28px;color:#0870b8}

/* Liste de articole / activități */
.mat .article-list{display:grid;grid-template-columns:repeat(2,1fr);gap:15px}
.mat .article{padding:19px;border:1px solid var(--line);border-radius:16px}
.mat .article small{color:#0870cf;font-weight:850;text-transform:uppercase;letter-spacing:.7px}
.mat .article h3{margin-top:7px}

/* Contact: date + formular */
.mat .contactbox{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.mat .field{display:grid;gap:6px;margin:12px 0}
.mat .field input,.mat .field textarea{width:100%;border:1px solid #cbd9ed;border-radius:11px;padding:12px;font:inherit}
.mat .field textarea{min-height:110px}
.mat .cx{color:#0870cf;font-weight:700}

/* Note editoriale */
.mat .note{font-size:13px;color:#73829a}
.mat .hero-note{background:#fff8cf;border-left:4px solid var(--yellow);padding:13px 16px;border-radius:0 12px 12px 0;margin:22px 0;color:#5b4d08}

/* Mențiunea de finanțare de la final (fostul footer al prototipului) */
.mat-legal{background:#08266f;color:#dce9ff;border-radius:22px;padding:26px;font-size:14px}
.mat-legal .brand{font-weight:950;letter-spacing:-1px;color:#fff;font-size:24px}
.mat-legal .brand span{color:#f0c900}
.mat-legal p{margin:8px 0 0}

/* Tabletă: grilele de 4 devin 2, intro pe o coloană */
@media(max-width:900px){
  .mat .grid.four,.mat .tiles{grid-template-columns:repeat(2,1fr)}
  .mat .intro{display:block}
  .mat .intro .aside{max-width:none;margin-top:12px}
}
/* Telefon: totul pe o coloană, tab-urile pe un rând derulabil */
@media(max-width:620px){
  .mat-tabs{flex-wrap:nowrap;overflow-x:auto}
  .mat-tabs button{white-space:nowrap}
  .mat .page{padding:28px 0 20px}
  .mat .grid,.mat .grid.two,.mat .grid.four,.mat .tiles,.mat .article-list,.mat .contactbox{grid-template-columns:1fr}
  .mat .band{display:block;padding:25px}
  .mat .band .btn{margin-top:18px}
  .mat .card{padding:19px}
}