/* =======================================================
   I. STRUKTURA I ZACHOWANIE BLOKÓW — EKSPERYMENTUJ.PL (2025)
   Wspólne reguły dla wszystkich stylów dziedzin nauki
   ======================================================= */

:root {
  --block-radius: 14px;
  --block-pad: 18px 20px;
  --block-gap: 24px;
  --block-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
  --block-shadow-hover: 0 6px 18px rgba(0, 0, 0, 0.18);
  --section-margin: 28px;
  --line-gradient: linear-gradient(
    to bottom,
    rgba(55,180,198,0) 0%,
    rgba(55,180,198,0.25) 50%,
    rgba(55,180,198,0) 100%
  );
  --text-dark: #1e1e1e;
  --text-light: #ffffff;
}

/* =============================
   1. Siatka bloków
============================= */
[class*="-grid"] {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--block-gap);
  align-items: stretch;
  position: relative;
  margin: var(--section-margin) 0;
  isolation: isolate;
}

[class*="-grid"]::before {
  content: "";
  position: absolute;
  top: 4%;
  bottom: 4%;
  left: 50%;
  width: 2px;
  background: var(--line-gradient);
  transform: translateX(-50%);
  z-index: 0;
}

@media (max-width: 768px) {
  [class*="-grid"] {
    grid-template-columns: 1fr;
  }
  [class*="-grid"]::before {
    display: none;
  }
}

/* =============================
   2. Bloki treści
============================= */
[class*="-feature"],
[class*="-note"] {
  border-radius: var(--block-radius);
  padding: var(--block-pad);
  box-shadow: var(--block-shadow);
  background-clip: padding-box;
  transition: transform 0.35s ease, box-shadow 0.35s ease, filter 0.35s ease;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
  z-index: 1;
  overflow: hidden;
}

/* Hover efekt */
[class*="-feature"]:hover,
[class*="-note"]:hover {
  transform: translateY(-4px);
  box-shadow: var(--block-shadow-hover);
  filter: brightness(1.05);
}

/* =============================
   3. Nagłówki
============================= */
[class*="-feature"] h2,
[class*="-note"] h2,
.fact-block h2,
.fact-block-dark h2 {
  font-size: 1.45rem;
  font-weight: 700;
  margin: 0 0 10px 0;
  line-height: 1.3;
  color: inherit;
}

@media (max-width: 768px) {
  [class*="-feature"] h2,
  [class*="-note"] h2,
  .fact-block h2,
  .fact-block-dark h2 {
    font-size: 1.25rem;
  }
}


/* =============================
   4. Linki
============================= */
[class*="-feature"] a,
[class*="-note"] a {
  position: relative;
  z-index: 2;
  color: #004d73;
  text-decoration: underline;
}
[class*="-feature"] a:hover,
[class*="-note"] a:hover {
  color: #0079a6;
}

/* =============================
   5. Blok „Uwaga”, „Tip”, „Info”
============================= */
[class*="-note"] {
  background: linear-gradient(135deg, #fff3a0, #ffd84f);
  color: var(--text-dark);
  font-weight: 400; /* 🔹 zmieniono z 600 na 400 – zwykły tekst */
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
}


/* =============================
   6. Blok „Ciekawostka naukowa”
============================= */

/* 🌌 Wersja jasna (kosmiczna, mgławicowa) */
.fact-block {
  background: linear-gradient(135deg, #fff5b8, #ffe991);
  color: #222;  /* neutralny, dobry kontrast */
  border-radius: var(--block-radius);
  padding: var(--block-pad);
  box-shadow: var(--block-shadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
}

.fact-block:hover {
  transform: translateY(-3px);
  box-shadow: var(--block-shadow-hover);
  filter: brightness(1.05);
}



/* 🌒 Wersja ciemniejsza (nocna / techniczna) */
.fact-block-dark {
  background: linear-gradient(145deg, #5a4b91, #7d68b5);
  color: #f5f5f5;
  border-radius: var(--block-radius);
  padding: var(--block-pad);
  box-shadow: var(--block-shadow);
  transition: transform 0.3s ease, box-shadow 0.3s ease, filter 0.3s ease;
}
.fact-block-dark:hover {
  transform: translateY(-3px);
  box-shadow: var(--block-shadow-hover);
  filter: brightness(1.08);
}


/* =============================
   7. Blok biały-perłowy (sekcja wprowadzająca)
============================= */
.intro-block {
  background: linear-gradient(145deg, #ffffff, #f7f9fc);
  border-radius: var(--block-radius);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  padding: 22px 26px;
  color: var(--text-dark);
  line-height: 1.65;
  margin: 20px 0 32px 0;
}

/* =============================
   8. Sekcja informacji o dostawcy / producencie
============================= */
.footer-info {
  font-size: 0.93rem;
  color: #444;
  line-height: 1.6;
  margin-top: 22px;
  text-align: left;
}
.footer-info a {
  color: #006b9f;
  text-decoration: none;
}
.footer-info a:hover {
  text-decoration: underline;
}

/* =======================================================
   BLOKI WIDEO — WSPÓLNE DLA WSZYSTKICH DZIEDZIN (2025)
   ======================================================= */

/* 🎬 Jeden film */
.video-grid {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 36px auto;
  width: 70%;
  max-width: 920px;
  position: relative;
  z-index: 1;
}

.video-grid iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: none;
  border-radius: var(--block-radius);
  box-shadow: var(--block-shadow);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.video-grid iframe:hover {
  transform: translateY(-3px);
  box-shadow: var(--block-shadow-hover);
}

/* 🎬 Dwa filmy obok siebie */
.video-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--block-gap);
  justify-content: center;
  align-items: stretch;
  margin: 36px auto;
  width: 90%;
  max-width: 1100px;
  position: relative;
  z-index: 1;
}

.video-grid-2 iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: none;
  border-radius: var(--block-radius);
  box-shadow: var(--block-shadow);
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.video-grid-2 iframe:hover {
  transform: translateY(-3px);
  box-shadow: var(--block-shadow-hover);
}

/* 📱 Responsywność */
@media (max-width: 992px) {
  .video-grid {
    width: 100%;
    margin: 28px 0;
  }
  .video-grid-2 {
    grid-template-columns: 1fr;
    width: 100%;
    gap: 24px;
    margin: 28px 0;
  }
}







/* === POPRAWKI DO BLOKÓW DLA WSZYSTKICH DZIEDZIN === */

/* Większe, miękkie zaokrąglenie i przestrzeń między kartami */
.exp-feature,
.exp-note {
  border-radius: 18px; /* było 14 */
  padding: 18px; /* delikatnie większy margines wewnętrzny */
  margin-bottom: 20px; /* odstęp między sąsiednimi kartami */
  box-shadow: 0 3px 10px rgba(0,0,0,0.08);
  background-clip: padding-box;
}

/* Poprawa układu siatki – dodaje lekki oddech między kolumnami */
.exp-grid,
.ft-grid-2,
.cosmic-grid,
.physics-grid,
.geo-grid,
.bio-grid,
.chem-grid,
.paleo-grid,
.creative-grid,
.math-grid {
  gap: 26px; /* było 24 – minimalnie więcej przestrzeni */
  margin-top: 10px;
  margin-bottom: 16px;
}

/* Opcjonalne wyrównanie do pełnej szerokości i wizualne rozdzielenie */
.exp-grid::before {
  width: 1px;
  background: linear-gradient(to bottom,
    rgba(55,180,198,0) 0%,
    rgba(55,180,198,0.15) 50%,
    rgba(55,180,198,0) 100%
  );
}






/* =======================================================
   II. PALETY KOLORÓW — EKSPERYMENTUJ.PL (2025)
   ======================================================= */

/* =============================
   1. ASTRONOMIA / COSMIC
   ============================= */
.cosmic-feature, .cosmic-note { color: #fff; }
.cosmic-color1  { background: linear-gradient(135deg, #8d63d3, #b892ff); }
.cosmic-color2  { background: linear-gradient(135deg, #4ea4e6, #86d1ff); }
.cosmic-color3  { background: linear-gradient(135deg, #5b90a2, #96c8d3); }
.cosmic-color4  { background: linear-gradient(135deg, #ffb76b, #ffdca1); }
.cosmic-color5  { background: linear-gradient(135deg, #5e7eb1, #9fbdf2); }
.cosmic-color6  { background: linear-gradient(135deg, #a165f0, #d9a7ff); }
.cosmic-color7  { background: linear-gradient(135deg, #9e62e6, #d39fff); }
.cosmic-color8  { background: linear-gradient(135deg, #7a6cf2, #b7b2ff); }
.cosmic-color9  { background: linear-gradient(135deg, #5fc6b5, #9ff1de); }
.cosmic-color10 { background: linear-gradient(135deg, #b77af7, #e7baff); }

.cosmic-note {
  background: linear-gradient(135deg, #3d2a7a, #7b4ef0);
  color: #fff;
}

/* =======================================================
   PHYSICS — ELEMENTAL STYLE (2025)
   ======================================================= */

/* 1️⃣ WODA — ruch, prąd, fale, absorpcja */
.physics-color1 {
  background: linear-gradient(135deg, #58d0c9, #4aa7e0);
  color: #ffffff;
}

/* 2️⃣ OGIEŃ — energia, światło, elektryczność */
.physics-color2 {
  background: linear-gradient(135deg, #ff8a3d, #ffb84a);
  color: #ffffff;
}

/* 3️⃣ POWIETRZE — dźwięk, ciśnienie, drgania */
.physics-color3 {
  background: linear-gradient(135deg, #b8e8ff, #dff7ff);
  color: #1e1e1e;
}

/* 4️⃣ ZIEMIA — masa, grawitacja, mechanika */
.physics-color4 {
  background: linear-gradient(135deg, #a6d48d, #78b66a);
  color: #ffffff;
}

/* 5️⃣ PODSUMOWANIE — synteza wszystkich żywiołów */
.physics-color5 {
  background: linear-gradient(135deg, #4ec9b0, #61b3f8);
  color: #ffffff;
}

/* 6️⃣ DODATEK (neutrum / szare tło dla danych) */
.physics-color6 {
  background: linear-gradient(135deg, #e2e6f3, #bcc4db);
  color: #1a1a1a;
}

/* 7️⃣ INFORMACYJNY (czysty błękit techniczny) */
.physics-color7 {
  background: linear-gradient(135deg, #5dafff, #9cd4ff);
  color: #ffffff;
}

/* 8️⃣ CIEKAWOSTKA — efekt świetlny na tle wody (turkus–lawenda) */
.physics-color-fact {
  background: linear-gradient(135deg, #6edbd8, #c6b6ff);
  color: #ffffff;
}

/* 9️⃣ OSTRZEŻENIA — żółto-pomarańczowy kontrast */
.physics-note {
  background: linear-gradient(135deg, #fff29b, #ffd84f);
  color: #222;
}

/* 🔟 INTRO (biało-perłowy) */
.physics-intro {
  background: linear-gradient(145deg, #ffffff, #f6f9fc);
  border-radius: var(--block-radius);
  padding: 22px 26px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  color: #1e1e1e;
  line-height: 1.65;
  margin: 20px 0 32px 0;
}


/* =============================
   3. GEOGRAFIA / GEO
   ============================= */
.geo-color1  { background: linear-gradient(135deg, #f5e7c3, #e4ce8e); }  /* piaski pustyni */
.geo-color2  { background: linear-gradient(135deg, #b3d6b2, #89c48f); }  /* zieleń kontynentów */
.geo-color3  { background: linear-gradient(135deg, #a7c8e2, #7fb2d9); }  /* błękit oceanów */
.geo-color4  { background: linear-gradient(135deg, #d2b48c, #b38b66); }  /* skóra / ziemia / podróż */
.geo-color5  { background: linear-gradient(135deg, #cddde7, #a2bed1); }  /* chłodny ton gór i nieba */
.geo-color6  { background: linear-gradient(135deg, #d4c8a8, #f0e4c0); }  /* pergamin / piasek neutralny */
.geo-color7  { background: linear-gradient(135deg, #a8c2a1, #c4d9b6); }  /* lasy, doliny, roślinność */
.geo-color8  { background: linear-gradient(135deg, #9fc0d7, #c3deec); }  /* morza, przybrzeża */
.geo-color9  { background: linear-gradient(135deg, #e8e2c7, #f6f0d6); }  /* tło mapowe / kartonowe */
.geo-color10 { background: linear-gradient(135deg, #e1ba72, #f6d48f); }  /* złote światło / akcent słońca */


.geo-note {
  background: linear-gradient(135deg, #fef5c6, #ffe78c);
  color: #222;
}

/* =============================
   4. BIOLOGIA / BIO
   ============================= */
.bio-feature, .bio-note { color: #1b1b1b; }
.bio-color1  { background: linear-gradient(140deg, #cdecc7, #9edb93); }
.bio-color2  { background: linear-gradient(140deg, #d8f2d1, #a9e6a3); }
.bio-color3  { background: linear-gradient(140deg, #b8e5a7, #80c97a); }
.bio-color4  { background: linear-gradient(140deg, #e2f8dc, #b1e7a8); }
.bio-color5  { background: linear-gradient(140deg, #b5e2b1, #8cd38a); }
.bio-color6  { background: linear-gradient(140deg, #d7f4cf, #a4e2a2); }
.bio-color7  { background: linear-gradient(140deg, #bfe7b2, #89d18a); }
.bio-color8  { background: linear-gradient(140deg, #c2f1b6, #9ee39d); }
.bio-color9  { background: linear-gradient(140deg, #d4f0c4, #b1e7a8); }
.bio-color10 { background: linear-gradient(140deg, #eaf9e2, #c6efbf); }

.bio-note {
  background: linear-gradient(135deg, #fff3b0, #f7e179);
  color: #222;
}

/* =============================
   5. CHEMIA / CHEM
   ============================= */
.chem-feature, .chem-note { color: #121212; }
.chem-color1  { background: linear-gradient(150deg, #e7ffe1, #b9ffb3); }
.chem-color2  { background: linear-gradient(150deg, #f7fddb, #e1f4a8); }
.chem-color3  { background: linear-gradient(150deg, #c1f9cf, #9cf4b8); }
.chem-color4  { background: linear-gradient(150deg, #dbf4e0, #a6ebbb); }
.chem-color5  { background: linear-gradient(150deg, #eaf6d5, #c8efae); }
.chem-color6  { background: linear-gradient(150deg, #d5fbd0, #b1f3b3); }
.chem-color7  { background: linear-gradient(150deg, #f4ffd4, #e3f9b1); }
.chem-color8  { background: linear-gradient(150deg, #d0f6ca, #a7eca2); }
.chem-color9  { background: linear-gradient(150deg, #dcfad6, #bff2bb); }
.chem-color10 { background: linear-gradient(150deg, #f7ffe6, #e5f7c6); }

.chem-note {
  background: linear-gradient(135deg, #fff7b0, #fce779);
  color: #222;
}

/* =============================
   6. PALEONTOLOGIA / PALEO
   ============================= */
.paleo-feature, .paleo-note { color: #221f1f; }
.paleo-color1  { background: linear-gradient(135deg, #e3cbb2, #cfa676); }
.paleo-color2  { background: linear-gradient(135deg, #f1dbc1, #d9b88e); }
.paleo-color3  { background: linear-gradient(135deg, #c6a77f, #b48a5e); }
.paleo-color4  { background: linear-gradient(135deg, #f2d3a0, #e1b578); }
.paleo-color5  { background: linear-gradient(135deg, #e8c9a2, #d6aa74); }
.paleo-color6  { background: linear-gradient(135deg, #d7b88a, #c09663); }
.paleo-color7  { background: linear-gradient(135deg, #e9c7a2, #cc9f6d); }
.paleo-color8  { background: linear-gradient(135deg, #f2dcb8, #deb883); }
.paleo-color9  { background: linear-gradient(135deg, #e8c299, #c79a66); }
.paleo-color10 { background: linear-gradient(135deg, #f3d4af, #e0b583); }

.paleo-note {
  background: linear-gradient(135deg, #fff0b0, #ffda70);
  color: #222;
}

/* =============================
   7. KREATYWNE / CREATIVE
   ============================= */
.creative-feature, .creative-note { color: #121212; }
.creative-color1  { background: linear-gradient(135deg, #ffb7b2, #ffd1a4); }
.creative-color2  { background: linear-gradient(135deg, #ffd6a5, #fdffb6); }
.creative-color3  { background: linear-gradient(135deg, #caffbf, #9bf6ff); }
.creative-color4  { background: linear-gradient(135deg, #a0c4ff, #bdb2ff); }
.creative-color5  { background: linear-gradient(135deg, #ffc6ff, #fffffc); }
.creative-color6  { background: linear-gradient(135deg, #ffcbf2, #f3c4fb); }
.creative-color7  { background: linear-gradient(135deg, #ecbcfd, #a0c4ff); }
.creative-color8  { background: linear-gradient(135deg, #b9fbc0, #ffffb5); }
.creative-color9  { background: linear-gradient(135deg, #ffcf9c, #ffd6a5); }
.creative-color10 { background: linear-gradient(135deg, #ffc8dd, #ffafcc); }

.creative-note {
  background: linear-gradient(135deg, #fff3a0, #ffe97a);
  color: #222;
}

/* =============================
   8. MATEMATYKA / MATH
   ============================= */
.math-feature, .math-note { color: #fff; }
.math-color1  { background: linear-gradient(135deg, #405b8c, #5677ad); }
.math-color2  { background: linear-gradient(135deg, #586b9a, #7088b7); }
.math-color3  { background: linear-gradient(135deg, #32486b, #4a6a93); }
.math-color4  { background: linear-gradient(135deg, #517ea3, #6ca5ca); }
.math-color5  { background: linear-gradient(135deg, #2e4c64, #476d8c); }
.math-color6  { background: linear-gradient(135deg, #446a8f, #5b8db2); }
.math-color7  { background: linear-gradient(135deg, #405b7e, #5a7b9f); }
.math-color8  { background: linear-gradient(135deg, #5676a3, #708fc0); }
.math-color9  { background: linear-gradient(135deg, #4e6c94, #6b8fb5); }
.math-color10 { background: linear-gradient(135deg, #384f73, #57749a); }

.math-note {
  background: linear-gradient(135deg, #354566, #4f6690);
  color: #fff;
}

/* =============================
   9. FISCHERTECHNIK / FT
   ============================= */
.ft-feature, .ft-note {
  color: #101010;
}

/* 🔹 Kolory bloków */
.ft-color1  { background: linear-gradient(135deg, #d1e9ff, #a6d4ff); } /* jasnoniebieski - cechy */
.ft-color2  { background: linear-gradient(135deg, #b8f2e5, #90e1d0); } /* turkusowy - modele */
.ft-color3  { background: linear-gradient(135deg, #e4f0ff, #b9d7ff); } /* chłodny błękit - zawartość */
.ft-color4  { background: linear-gradient(135deg, #d6e8ff, #b0ceff); } /* dodatkowy odcień */
.ft-color5  { background: linear-gradient(135deg, #d5eaff, #9fc9ff); } /* specyfikacja */
.ft-color6  { background: linear-gradient(135deg, #e1fff6, #b7f8de); } /* materiały dydaktyczne */
.ft-color7  { background: linear-gradient(135deg, #e7ebff, #c5d0ff); } /* rezerwa/fioletowy chłodny */
.ft-color8  { background: linear-gradient(135deg, #d3f1ff, #9ce0ff); } /* jaśniejszy niebieski */
.ft-color9  { background: linear-gradient(135deg, #bdeeff, #91dbff); } /* argumentacyjny - „dlaczego warto” */
.ft-color10 { background: linear-gradient(135deg, #3cd77a 0%, #7df0a6 100%); }


.ft-color-fact { background: linear-gradient(135deg, #f5fbff, #e3f7ff); } /* ciekawostka - delikatny błękitny odcień */

/* 🔸 Uwaga */
.ft-note {
  background: linear-gradient(135deg, #fff6b5, #ffe679);
  color: #1a1a1a;
  font-weight: 400;
  box-shadow: 0 3px 10px rgba(0,0,0,0.12);
}

/* 🔹 Intro (biało-perłowy) */
.ft-intro {
  background: linear-gradient(145deg, #ffffff, #f5f8fb);
  border-radius: var(--block-radius);
  padding: 22px 26px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
  color: var(--text-dark);
  line-height: 1.65;
  margin: 20px 0 32px 0;
}

/* 🔹 Fakt (ciekawostka) – subtelny efekt hover */
.ft-color-fact:hover {
  transform: translateY(-3px);
  box-shadow: var(--block-shadow-hover);
}

/* 🔹 Drobne korekty */
.ft-feature a {
  color: #005c8a;
}
.ft-feature a:hover {
  color: #0080b8;
}


/* =======================================================
   LEGENDA / STRUKTURA UŻYCIA
   =======================================================

   colorX  → kolor tła bloku (od 1 do 10+)
   note    → blok z informacją / uwagą / tipem
   fact    → blok z ciekawostką naukową
   intro   → perłowy tekst wprowadzający
   footer  → dane producenta / dostawcy
   feature → główny blok z treścią (np. opis, cechy)
   grid    → siatka 2-kolumnowa
   hover   → efekt podniesienia (delikatny cień)
   tekst   → dopasowany kolorystycznie do charakteru dziedziny

   Wszystkie powyższe klasy współpracują z częścią wspólną CSS (I).
   ======================================================= */