@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

/* ==========================================================================
   Wspólny CSS modułów (school style)
   Szarości + akcenty: fiolet (#6F4CF6), żółty (#F6D34B), niebieski rgb(23,123,254)
   ========================================================================== */
:root{
  /* Map primary color to global accent if present */
  --mi-primary: var(--accent, rgb(23 123 254));
  --mi-gray-50:#F8FAFC; --mi-gray-100:#F1F5F9; --mi-gray-200:#E5E7EB;
  --mi-gray-300:#D1D5DB; --mi-gray-600:#475569; --mi-gray-800:#1F2937;

  --mi-purple: #6F4CF6;
  --mi-yellow: #F6D34B;

  --mi-card:#FFF;
  --mi-text: #2C2F36;
  --mi-muted:#6B7280;
  --mi-line: var(--mi-gray-200);

  --mi-radius-2: 14px;
  --mi-space-3: 16px;
  --mi-space-4: 20px;
  --mi-space-5: 24px;
  --mi-h2: clamp(20px, 2.2vw, 28px);
  --mi-shadow: 0 8px 24px rgb(0 0 0 / 6%);
  color-scheme: light;
  --mi-font: 'Poppins', system-ui, -apple-system, 'Segoe UI', 'Roboto', 'Arial', sans-serif;
}

/* Scope: kolor i marginesy modułu */
.m-innowacja, .m-pakiet{ padding: 0 20px; color: var(--mi-text); font-family: var(--mi-font); }
.m-innowacja a, .m-pakiet a{ color: var(--mi-primary); }
.m-innowacja a:hover, .m-pakiet a:hover{ color:#0f67e0; }

/* Głowa modułu */
.m-innowacja .mi-head, .m-pakiet .mi-head{
  display:flex; gap:18px; align-items:center; padding: 8px 0 18px;
  border-bottom:1px solid var(--mi-line);
  max-width: 960px; margin-left:auto; margin-right:auto;
}
.m-innowacja .mi-head__icon, .m-pakiet .mi-head__icon{
  width:72px; height:72px; display:grid; place-items:center; color: var(--mi-primary);
  border-radius:16px;
  background: #F3F4F6;
  border:1px solid var(--mi-gray-200);
}
.m-innowacja .mi-title, .m-pakiet .mi-title{ margin:0; font-size: clamp(24px, 2.6vw, 34px); line-height:1.2; }
.m-innowacja .mi-sub, .m-pakiet .mi-sub{ margin:.25rem 0 0; color:var(--mi-muted); }

/* Tabs */
.m-innowacja .mi-tabs, .m-pakiet .mi-tabs{ display:flex; gap:10px; margin: 18px 0; flex-wrap:wrap; max-width: 960px; margin-left:auto; margin-right:auto; }
.m-innowacja .mi-tab, .m-pakiet .mi-tab{
  border:1px solid var(--mi-line); border-radius:10px;
  background:#fff; padding:12px 16px; cursor:pointer; font-weight:600; color:var(--mi-gray-800);
  transition: box-shadow .12s ease, border-color .12s ease, transform .06s ease;
}
.m-innowacja .mi-tab:hover, .m-pakiet .mi-tab:hover{ border-color: rgb(23 123 254 / 35%); }
.m-innowacja .mi-tab.is-active, .m-pakiet .mi-tab.is-active{
  border-color: rgb(23 123 254 / 50%);
  box-shadow: 0 2px 10px rgb(23 123 254 / 18%);
  position: relative;
}
.m-innowacja .mi-tab.is-active::after, .m-pakiet .mi-tab.is-active::after{
  content:""; position:absolute; left:12px; right:12px; bottom:-6px; height:3px;
  background: var(--mi-primary);
  border-radius:2px;
}
.m-innowacja .mi-tab:focus-visible,
.m-innowacja .mi-btn:focus-visible,
.m-innowacja .mi-file:focus-within,
.m-pakiet .mi-tab:focus-visible,
.m-pakiet .mi-btn:focus-visible,
.m-pakiet .mi-file:focus-within{
  outline: 3px solid var(--mi-primary); outline-offset:2px;
}

/* Toolbar plików: wyśrodkowanie i styl Poppins */
.m-innowacja .mi-files-toolbar, .m-pakiet .mi-files-toolbar{
  max-width: 960px; margin: 10px auto 12px; display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.m-innowacja .mi-files-tools, .m-pakiet .mi-files-tools{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.m-innowacja .mi-tool, .m-pakiet .mi-tool{ display:flex; gap:8px; align-items:center; }
.m-innowacja .mi-tool__label, .m-pakiet .mi-tool__label{ color: var(--mi-muted); font-weight:600; font-family: var(--mi-font); }

/* Styl selectów jako "pill" */
.m-innowacja .mi-files-toolbar select, .m-pakiet .mi-files-toolbar select{
  appearance:none;
  padding:10px 38px 10px 12px; border:1px solid var(--mi-line); border-radius: 999px; background:#fff;
  font: 500 14px/1 var(--mi-font); color: var(--mi-text);
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="%23666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"/></svg>');
  background-repeat:no-repeat; background-position:right 12px center; background-size:16px 16px;
}
.m-innowacja .mi-files-toolbar select:focus, .m-pakiet .mi-files-toolbar select:focus{ outline:none; border-color: rgb(23 123 254 / 50%); box-shadow: 0 0 0 3px rgb(23 123 254 / 15%); }

/* Panes */
.m-innowacja .mi-pane, .m-pakiet .mi-pane{ display:none; }
.m-innowacja .mi-pane.is-active, .m-pakiet .mi-pane.is-active{ display:block; }

/* Cards */
.m-innowacja .mi-card, .m-pakiet .mi-card{
  background:var(--mi-card);
  border:1px solid var(--mi-line);
  border-radius: var(--mi-radius-2);
  box-shadow: var(--mi-shadow);
  padding: 24px;
  margin: 24px auto;
  max-width: 960px;
}

/* Sekcja „Dlaczego warto” */
.m-innowacja .mi-card.mi-card--why, .m-pakiet .mi-card.mi-card--why{
  background: #FFF;
  border: 1px solid var(--mi-line);
  box-shadow: 0 10px 30px rgb(23 123 254 / 8%), 0 2px 10px rgb(0 0 0 / 5%);
}
.m-innowacja .mi-why, .m-pakiet .mi-why{ display:flex; align-items:flex-start; gap: var(--mi-space-5); }
.m-innowacja .mi-why__media, .m-pakiet .mi-why__media{
  flex:0 0 180px; max-width:180px; border-radius:14px; overflow:hidden;
  background: var(--mi-gray-50);
  border:1px solid var(--mi-gray-200);
}
.m-innowacja .mi-why__body, .m-pakiet .mi-why__body{ flex:1 1 auto; }
.m-innowacja .mi-why__title, .m-pakiet .mi-why__title{ margin:0 0 10px; font-size: var(--mi-h2); }

/* Lista ikon */
.m-innowacja .mi-list, .m-pakiet .mi-list{ list-style:none; margin:0; padding:0; }
.m-innowacja .mi-list--icons li, .m-pakiet .mi-list--icons li{
  display:flex; gap:12px; align-items:flex-start; padding:9px 0;
}
.m-innowacja .mi-list--icons .mi-ico, .m-pakiet .mi-list--icons .mi-ico{
  width:30px; height:30px; flex:0 0 30px; border-radius:8px;
  background: var(--mi-gray-100);
  border:1px solid var(--mi-gray-200);
  color: var(--mi-primary);
  display:grid; place-items:center;
}
.m-innowacja .mi-list--icons .mi-ico svg, .m-pakiet .mi-list--icons .mi-ico svg{ width:18px; height:18px; }

/* Cytat */
.m-innowacja .mi-quote, .m-pakiet .mi-quote{
  border-left:4px solid var(--mi-primary);
  padding: 14px 16px; border-radius:10px; background: var(--mi-gray-50);
  max-width: 960px; margin: 18px auto;
}
.m-innowacja .mi-quote.mi-quote--light, .m-pakiet .mi-quote.mi-quote--light{ background: var(--mi-gray-50); }

/* Files grid */
.m-innowacja .mi-files, .m-pakiet .mi-files{
  display:grid; grid-template-columns: repeat( auto-fill, minmax(220px, 1fr) );
  gap: var(--mi-space-3); margin-top: var(--mi-space-3);
  max-width: 1100px; margin-left:auto; margin-right:auto;
}
.m-innowacja .mi-file, .m-pakiet .mi-file{
  background:#fff; border:1px solid var(--mi-line); border-radius: var(--mi-radius-2);
  box-shadow: var(--mi-shadow); overflow:hidden; transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.m-innowacja .mi-file__link, .m-pakiet .mi-file__link{ display:flex; flex-direction:column; text-decoration:none; color:inherit; height:100%; }
.m-innowacja .mi-file__preview, .m-pakiet .mi-file__preview{ aspect-ratio: 4 / 3; display:grid; place-items:center; background: #F3F4F6; color: var(--mi-primary); }
.m-innowacja .mi-file__preview img, .m-pakiet .mi-file__preview img{ width:100%; height:100%; object-fit:cover; display:block; border-bottom:1px solid var(--mi-line); }
.m-innowacja .mi-file__meta, .m-pakiet .mi-file__meta{ padding: 10px 12px; display:block; text-align:center; }
.m-innowacja .mi-file__name, .m-pakiet .mi-file__name{ display:block; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin:8px 0 2px; }
.m-innowacja .mi-file__ext, .m-pakiet .mi-file__ext{ display:block; font-size:.8rem; color: var(--mi-muted); margin:0; }

@media (hover:hover){
  .m-innowacja .mi-file:hover, .m-pakiet .mi-file:hover{
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgb(0 0 0 / 10%);
    border-color: rgb(23 123 254 / 35%);
  }
}

/* Ikony plików mniejsze o ~30% (tylko fallback SVG) */
.m-innowacja .mi-file__preview svg, .m-pakiet .mi-file__preview svg{ width:55px; height:55px; }

/* Dodatkowy oddech pod ikoną */
.m-innowacja .mi-file__preview, .m-pakiet .mi-file__preview{ padding: 10px 0; }

/* Formularz w module: zawężony względem szerokości strony */
.m-innowacja form, .m-pakiet form{ max-width: 820px; margin: 0 auto; padding: 8px 4px; }
.m-innowacja form .form-row, .m-innowacja form .mi-form-row,
.m-pakiet form .form-row, .m-pakiet form .mi-form-row{ display: grid; grid-template-columns: 1fr; gap: 10px; }
.m-innowacja form input[type="text"],
.m-innowacja form input[type="email"],
.m-innowacja form input[type="tel"],
.m-innowacja form select,
.m-innowacja form textarea,
.m-pakiet form input[type="text"],
.m-pakiet form input[type="email"],
.m-pakiet form input[type="tel"],
.m-pakiet form select,
.m-pakiet form textarea{ width:100%; max-width:100%; box-sizing:border-box; }

/* Grupowanie sekcji plików */
.m-innowacja .mi-group-title, .m-pakiet .mi-group-title{ max-width:960px; margin:20px auto 8px; font-size:1.05rem; font-weight:700; color:#3b4250; letter-spacing:.2px; }
.m-innowacja .mi-files--preview, .m-pakiet .mi-files--preview{ max-width:1100px; margin-left:auto; margin-right:auto; gap: var(--mi-space-3); justify-items:center; }
.m-innowacja .mi-files--preview .mi-file, .m-pakiet .mi-files--preview .mi-file{ width:100%; max-width:320px; justify-self:center; margin-left:auto; margin-right:auto; }
.m-innowacja .mi-files--download, .m-pakiet .mi-files--download{
  max-width:960px; margin-left:auto; margin-right:auto;
  grid-template-columns: repeat( auto-fill, minmax(170px, 1fr) );
  padding: 16px; border:1px solid var(--mi-line); border-radius: 14px; background: var(--mi-gray-50);
}
.m-innowacja .mi-files--download .mi-file, .m-pakiet .mi-files--download .mi-file{ box-shadow: none; border-color: var(--mi-line); }
.m-innowacja .mi-files--download .mi-file__preview, .m-pakiet .mi-files--download .mi-file__preview{ aspect-ratio: 1 / 1; }
.m-innowacja .mi-files--download .mi-file__preview svg, .m-pakiet .mi-files--download .mi-file__preview svg{ width:34px; height:34px; }
.m-innowacja .mi-files--download .mi-file__name, .m-pakiet .mi-files--download .mi-file__name{ font-size:.95rem; }

/* Przyciski akcji w module */
.m-innowacja .mi-btn, .m-pakiet .mi-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 10px 16px; border-radius: 12px; border:1px solid transparent;
  background: var(--mi-primary); color: var(--accent-contrast, #fff); font:600 14px/1 var(--mi-font); text-decoration:none;
  transition: transform .06s ease, box-shadow .12s ease, background-color .12s ease;
}
.m-innowacja .mi-btn:hover, .m-pakiet .mi-btn:hover{ transform: translateY(-1px); box-shadow: 0 6px 18px rgb(23 123 254 / 20%); }
.m-innowacja .mi-btn:active, .m-pakiet .mi-btn:active{ transform: translateY(0); box-shadow: 0 2px 8px rgb(23 123 254 / 18%); }
.m-innowacja .mi-btn--ghost, .m-pakiet .mi-btn--ghost{ background:#fff; color: var(--mi-text); border-color: var(--mi-line); }
.m-innowacja .mi-btn--ghost:hover, .m-pakiet .mi-btn--ghost:hover{ border-color: rgb(23 123 254 / 45%); box-shadow: 0 6px 18px rgb(0 0 0 / 6%); }

/* Pasek plików do edycji */
.m-innowacja .mi-download-bar, .m-pakiet .mi-download-bar{ max-width:960px; margin: 12px auto 0; display:flex; gap:12px; align-items:center; flex-wrap:wrap; padding:10px 12px; border:1px solid var(--mi-line); border-radius:12px; background:var(--mi-gray-50); }
.m-innowacja .mi-dl, .m-pakiet .mi-dl{ display:inline-flex; align-items:center; gap:8px; padding:6px 10px; border-radius:10px; background:#fff; border:1px solid var(--mi-line); color: var(--mi-primary); text-decoration:none; transition: transform .06s ease, box-shadow .12s ease, border-color .12s ease; }
.m-innowacja .mi-dl:hover, .m-pakiet .mi-dl:hover{ transform: translateY(-1px); box-shadow: 0 6px 16px rgb(23 123 254 / 18%); border-color: rgb(23 123 254 / 45%); }
.m-innowacja .mi-dl svg, .m-pakiet .mi-dl svg{ width:29px; height:29px; display:block; margin:0 auto; }
.m-innowacja .mi-dl__name, .m-pakiet .mi-dl__name{ max-width:220px; font-size:.9rem; color: var(--mi-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.m-innowacja .visually-hidden, .m-pakiet .visually-hidden{ position:absolute!important; height:1px;width:1px;overflow:hidden; clip-path: inset(50%); white-space:nowrap; border:0; }

/* Lepszy podgląd miniatur PDF */
.m-innowacja .mi-file__preview, .m-pakiet .mi-file__preview{ background:#fff; padding:8px; }
.m-innowacja .mi-file__preview img, .m-pakiet .mi-file__preview img{ background:#fff; border:1px solid var(--mi-gray-200); border-radius:10px; object-fit: contain; }

/* Uproszczone, responsywne karty podglądu */
.m-innowacja .mi-files--preview,
.m-pakiet  .mi-files--preview{
  max-width:1100px;
  margin-left:auto;
  margin-right:auto;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 260px));
  gap: var(--mi-space-3);
  justify-content:center;
  justify-items:center;
}
.m-innowacja .mi-files--preview .mi-file,
.m-pakiet  .mi-files--preview .mi-file{
  width:80%;
  max-width:360px;
  margin:0 auto;
}