/* =========================================================================
   materialy.css — niezależny system wizualny sekcji „Materiały".
   Celowo NIE dziedziczy wyglądu reszty LekcjeRazem (styl.css) ani wyglądu
   Matematix.pl — własna paleta, własna siatka kafli, pełna szerokość.
   ========================================================================= */

.mat-page{
  --mat-ink:#0f1130;       --mat-mid:#5b6187;      --mat-mid-2:#8a8fb0;
  --mat-bg:#f5f6fd;        --mat-card:#ffffff;     --mat-border:#e6e8f7;
  --mat-mat-1:#4f46e5; --mat-mat-2:#8b5cf6;   /* matematyka: indygo → fiolet   */
  --mat-fiz-1:#0891b2; --mat-fiz-2:#22d3ee;   /* fizyka: cyjan → turkus        */
  --mat-che-1:#d97706; --mat-che-2:#fbbf24;   /* chemia: bursztyn → złoty      */
  --mat-accent:#e11d48; --mat-accent-2:#fb7185; /* CTA: malina → róż           */
  --mat-radius:20px; --mat-radius-sm:12px;
  --mat-shadow:0 10px 28px rgba(24,26,68,.08);
  --mat-shadow-lg:0 24px 60px rgba(24,26,68,.18);
  background:var(--mat-bg); color:var(--mat-ink);
  font-family:"Plus Jakarta Sans",sans-serif;
  -webkit-font-smoothing:antialiased;
}
.mat-page *{box-sizing:border-box}
.mat-page a{color:inherit;text-decoration:none}

/* ── Kontener pełnej szerokości: świadomie BEZ max-width ── */
.mat-shell{width:100%;padding:0 clamp(16px,3.4vw,64px);margin:0 auto}

/* ══ HERO (niski pasek nagłówka — nie zajmuje ekranu) ═══════════════════ */
.mat-hero{
  position:relative;overflow:hidden;padding:clamp(1.2rem,2.6vw,1.8rem) 0 clamp(2rem,3.6vw,2.6rem);
  background:linear-gradient(120deg,var(--mat-mat-1) 0%,var(--mat-mat-2) 55%,var(--mat-accent) 100%);
  color:#fff;
}
.mat-hero-bg{position:absolute;inset:0;opacity:.5;pointer-events:none}
.mat-hero-inner{position:relative;z-index:1;display:flex;align-items:flex-end;justify-content:space-between;gap:1.8rem;flex-wrap:wrap}
.mat-hero-main{flex:1 1 380px;min-width:0}
.mat-hero-search{
  flex:0 0 auto;width:min(340px,100%);display:flex;align-items:center;gap:.4rem;
  background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);border-radius:100px;
  padding:.4rem .4rem .4rem 1.1rem;backdrop-filter:blur(6px);
}
.mat-hero-search input{border:0;background:transparent;outline:0;font:inherit;font-size:.86rem;color:#fff;width:100%}
.mat-hero-search input::placeholder{color:rgba(255,255,255,.7)}
.mat-hero-search button{
  border:0;background:#fff;color:var(--mat-mat-1);width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;
}
@media(max-width:820px){ .mat-hero-search{width:100%} }
.mat-eyebrow{
  display:inline-flex;align-items:center;gap:.4rem;font-size:.68rem;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:#fef3f8;background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.25);padding:.24rem .7rem;border-radius:100px;backdrop-filter:blur(6px);
}
.mat-hero h1{
  font-size:clamp(1.3rem,2vw,1.7rem);line-height:1.18;font-weight:800;margin:.55rem 0 .4rem;
  max-width:46ch;
}
.mat-hero p{font-size:.9rem;color:rgba(255,255,255,.85);max-width:60ch;line-height:1.5}
.mat-hero-stats{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.9rem}
.mat-stat{
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);border-radius:100px;
  padding:.3rem .8rem;font-size:.76rem;font-weight:700;color:#fff;backdrop-filter:blur(6px);
}
.mat-stat b{font-weight:800;color:#fde68a}
.mat-breadcrumb{font-size:.74rem;color:rgba(255,255,255,.65);margin-bottom:.5rem}
.mat-breadcrumb a{color:rgba(255,255,255,.88)}
.mat-breadcrumb a:hover{text-decoration:underline}

/* ══ PASEK FILTRÓW ═══════════════════════════════════════════════════════ */
.mat-toolbar{
  position:relative;z-index:2;margin-top:-1.3rem;background:var(--mat-card);
  border:1px solid var(--mat-border);border-radius:var(--mat-radius);
  box-shadow:var(--mat-shadow-lg);padding:1.1rem 1.2rem;
  display:flex;flex-wrap:wrap;gap:.9rem;align-items:center;
}
.mat-pills{display:flex;flex-wrap:wrap;gap:.5rem}
.mat-pill{
  display:inline-flex;align-items:center;gap:.4rem;padding:.5rem 1rem;border-radius:100px;
  font-size:.85rem;font-weight:700;border:1.5px solid var(--mat-border);color:var(--mat-mid);
  background:#fff;transition:all .15s;white-space:nowrap;cursor:pointer;
}
.mat-pill:hover{border-color:var(--mat-mat-1);color:var(--mat-mat-1);transform:translateY(-1px)}
.mat-pill.is-active{
  color:#fff;border-color:transparent;
  background:linear-gradient(120deg,var(--mat-mat-1),var(--mat-mat-2));
  box-shadow:0 8px 18px rgba(79,70,229,.28);
}
.mat-pill.is-active.mat-c-fiz{background:linear-gradient(120deg,var(--mat-fiz-1),var(--mat-fiz-2));box-shadow:0 8px 18px rgba(8,145,178,.28)}
.mat-pill.is-active.mat-c-che{background:linear-gradient(120deg,var(--mat-che-1),var(--mat-che-2));box-shadow:0 8px 18px rgba(217,119,6,.28)}
.mat-pill-cnt{opacity:.75;font-weight:600}

.mat-search{
  margin-left:auto;display:flex;align-items:center;gap:.5rem;background:var(--mat-bg);
  border:1.5px solid var(--mat-border);border-radius:100px;padding:.45rem .5rem .45rem 1rem;min-width:220px;flex:1;max-width:360px;
}
.mat-search input{border:0;background:transparent;outline:0;font:inherit;font-size:.86rem;color:var(--mat-ink);width:100%}
.mat-search button{
  border:0;background:var(--mat-ink);color:#fff;width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;
}
.mat-select{
  border:1.5px solid var(--mat-border);border-radius:100px;padding:.5rem 1rem;font:inherit;font-size:.85rem;
  font-weight:700;color:var(--mat-mid);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%235b6187'/%3E%3C/svg%3E") right 1rem center no-repeat;
  appearance:none;padding-right:2.2rem;cursor:pointer;
}

/* ══ SIATKA KAFLI ═════════════════════════════════════════════════════════ */
.mat-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));
  gap:1.1rem;margin-top:1.6rem;
}

.mat-tile{
  position:relative;display:flex;flex-direction:column;background:var(--mat-card);
  border:1px solid var(--mat-border);border-radius:var(--mat-radius);
  box-shadow:var(--mat-shadow);overflow:hidden;height:272px;
  transition:transform .18s,box-shadow .18s,border-color .18s;cursor:pointer;text-align:left;
  width:100%;font:inherit;color:inherit;
}
a.mat-tile{cursor:pointer}
.mat-tile:hover{transform:translateY(-4px);box-shadow:var(--mat-shadow-lg);border-color:transparent}
.mat-tile:focus-visible{outline:3px solid var(--mat-accent-2);outline-offset:2px}

.mat-tile-bar{height:6px;width:100%;flex-shrink:0;background:linear-gradient(90deg,var(--mat-mat-1),var(--mat-mat-2))}
.mat-tile.mat-c-fiz .mat-tile-bar{background:linear-gradient(90deg,var(--mat-fiz-1),var(--mat-fiz-2))}
.mat-tile.mat-c-che .mat-tile-bar{background:linear-gradient(90deg,var(--mat-che-1),var(--mat-che-2))}

.mat-tile-body{padding:1rem 1.1rem .9rem;display:flex;flex-direction:column;gap:.5rem;flex:1;min-height:0}
.mat-tile-top{display:flex;align-items:center;justify-content:space-between;gap:.5rem}
.mat-badge{
  font-size:.66rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:#fff;
  padding:.22rem .6rem;border-radius:100px;background:linear-gradient(120deg,var(--mat-mat-1),var(--mat-mat-2));
  white-space:nowrap;
}
.mat-tile.mat-c-fiz .mat-badge{background:linear-gradient(120deg,var(--mat-fiz-1),var(--mat-fiz-2))}
.mat-tile.mat-c-che .mat-badge{background:linear-gradient(120deg,var(--mat-che-1),var(--mat-che-2))}
.mat-badge-ghost{background:var(--mat-bg);color:var(--mat-mid);font-weight:700;border:1px solid var(--mat-border)}
.mat-badge-wyd{background:#eef0fd;color:#4f46e5;font-weight:800;border:1px solid #d7dbf7}

.mat-tile-title{font-size:1rem;font-weight:800;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.mat-tile-excerpt{font-size:.82rem;color:var(--mat-mid);line-height:1.55;flex:1;min-height:0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

.mat-formula-box{
  flex:1;min-height:0;display:flex;align-items:center;justify-content:center;text-align:center;
  background:var(--mat-bg);border-radius:var(--mat-radius-sm);padding:.4rem .6rem;overflow:hidden;
  font-size:1.05rem;line-height:1.35;color:var(--mat-ink);
}

.mat-tile-foot{display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  padding-top:.35rem;border-top:1px dashed var(--mat-border);font-size:.76rem;color:var(--mat-mid-2);flex-shrink:0}
.mat-tile-go{font-weight:800;color:var(--mat-mat-1);display:inline-flex;align-items:center;gap:.25rem}
.mat-tile.mat-c-fiz .mat-tile-go{color:var(--mat-fiz-1)}
.mat-tile.mat-c-che .mat-tile-go{color:var(--mat-che-1)}
.mat-tile:hover .mat-tile-go{transform:translateX(2px)}
.mat-tile-go svg{transition:transform .18s}

/* Kafel arkusza — mini pasek postępu rozwiązań */
.mat-progress{height:6px;border-radius:100px;background:var(--mat-border);overflow:hidden;margin-top:.15rem}
.mat-progress i{display:block;height:100%;background:linear-gradient(90deg,var(--mat-mat-1),var(--mat-mat-2))}

/* ── Pusty stan / błąd ── */
.mat-empty{
  grid-column:1/-1;text-align:center;padding:3.5rem 1rem;color:var(--mat-mid);
  background:var(--mat-card);border:1px dashed var(--mat-border);border-radius:var(--mat-radius);
}
.mat-empty .mat-empty-ico{font-size:2.4rem;margin-bottom:.6rem}
.mat-error{grid-column:1/-1;text-align:center;padding:2rem;color:#b91c1c;background:#fef2f2;border-radius:var(--mat-radius)}

/* ══ PRZYCISK PIGUŁKOWY (CTA) ═══════════════════════════════════════════ */
.mat-more{
  display:inline-flex;align-items:center;gap:.5rem;padding:.85rem 1.9rem;border-radius:100px;
  font-weight:800;font-size:.92rem;color:#fff;border:0;cursor:pointer;
  background:linear-gradient(120deg,var(--mat-accent),var(--mat-accent-2));
  box-shadow:0 14px 30px rgba(225,29,72,.28);transition:transform .15s,box-shadow .15s;
}
.mat-more:hover{transform:translateY(-2px);box-shadow:0 18px 36px rgba(225,29,72,.34)}

/* ══ PAGINACJA (numerowane podstrony) ═══════════════════════════════════ */
.mat-pager{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:.4rem;margin:2.2rem 0 .6rem}
.mat-pager-nav{
  padding:.55rem 1rem;border-radius:100px;font-size:.84rem;font-weight:700;color:var(--mat-mid);
  background:#fff;border:1.5px solid var(--mat-border);transition:all .15s;
}
.mat-pager-nav:hover{border-color:var(--mat-mat-1);color:var(--mat-mat-1);transform:translateY(-1px)}
.mat-pager-nav.is-disabled{opacity:.4;pointer-events:none}
.mat-pager-num{
  width:2.4rem;height:2.4rem;display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;font-size:.86rem;font-weight:700;color:var(--mat-mid);
  background:#fff;border:1.5px solid var(--mat-border);transition:all .15s;
}
.mat-pager-num:hover{border-color:var(--mat-mat-1);color:var(--mat-mat-1)}
.mat-pager-num.is-active{
  color:#fff;border-color:transparent;background:linear-gradient(120deg,var(--mat-mat-1),var(--mat-mat-2));
  box-shadow:0 8px 18px rgba(79,70,229,.28);
}
.mat-pager-dots{padding:0 .3rem;color:var(--mat-mid-2);font-weight:700}
.mat-pager-info{text-align:center;font-size:.78rem;color:var(--mat-mid-2);margin-top:.3rem}
@media(max-width:480px){ .mat-pager-num{width:2.15rem;height:2.15rem;font-size:.8rem} .mat-pager-nav{padding:.5rem .8rem;font-size:.78rem} }

/* ══ MODAL ══════════════════════════════════════════════════════════════ */
.mat-modal-overlay{
  position:fixed;inset:0;background:rgba(15,17,48,.6);backdrop-filter:blur(3px);
  display:flex;align-items:flex-start;justify-content:center;padding:5vh 1rem;
  z-index:900;opacity:0;visibility:hidden;transition:opacity .18s,visibility .18s;overflow-y:auto;
}
.mat-modal-overlay.is-open{opacity:1;visibility:visible}
.mat-modal{
  background:#fff;border-radius:24px;max-width:760px;width:100%;box-shadow:var(--mat-shadow-lg);
  transform:translateY(14px);transition:transform .2s;position:relative;
}
.mat-modal-overlay.is-open .mat-modal{transform:translateY(0)}
.mat-modal-close{
  position:absolute;top:1rem;right:1rem;width:38px;height:38px;border-radius:50%;border:0;
  background:var(--mat-bg);color:var(--mat-ink);font-size:1.1rem;cursor:pointer;z-index:2;
  display:flex;align-items:center;justify-content:center;
}
.mat-modal-close:hover{background:var(--mat-accent);color:#fff}
.mat-modal-body{padding:2.4rem 2rem 2rem}
.mat-modal-body h2,.mat-modal-body h3{margin-top:0}

/* ══ NAGŁÓWEK PODSTRONY (arkusz/zadanie — lekki reskin) ═════════════════ */
.mat-page .ark-back-link{color:var(--mat-mat-1)}

/* ══ RESPONSYWNOŚĆ ══════════════════════════════════════════════════════ */
@media(max-width:900px){
  .mat-toolbar{margin-top:-1.6rem}
  .mat-search{max-width:none;order:10;flex-basis:100%}
}
@media(max-width:600px){
  .mat-grid{grid-template-columns:repeat(auto-fill,minmax(46vw,1fr))}
  .mat-tile{height:230px}
  .mat-modal-body{padding:2.2rem 1.2rem 1.4rem}
}
@media(max-width:420px){
  .mat-grid{grid-template-columns:1fr 1fr;gap:.7rem}
  .mat-tile{height:214px}
  .mat-tile-body{padding:.8rem .85rem .7rem}
}