/* Custom styles for the MIKROBOT website
 *
 * This stylesheet provides a basic responsive layout and styling without
 * relying on external frameworks like Bootstrap. It defines common utility
 * classes used throughout the templates (e.g. rows, columns, cards, buttons,
 * alerts, navbar, etc.).
 */

/* Reset some default margins and paddings */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
  /* Przywrócono neutralną, jasną kolorystykę tła. Rezygnujemy z intensywnego
     gradientu, aby treść była bardziej czytelna. */
  background-color: #f8f9fa;
  color: #212529;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

main {
  flex: 1 0 auto;
}

/* Container to center content and limit width */
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}

/* Grid system */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: -15px;
  margin-right: -15px;
}

.col-12 {
  flex: 0 0 100%;
  max-width: 100%;
  padding: 15px;
}

/* Medium columns (≥768px) */
@media (min-width: 768px) {
  .col-md-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-md-4 {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }
}

/* Small columns (≥576px) */
@media (min-width: 576px) {
  .col-sm-6 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  .col-sm-4 {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }
}

/*
 * On extra‑small screens (<576px), columns that normally span 4 or 6 units
 * should take the full width. We wrap this rule in a max‑width media query
 * so that medium breakpoints still behave as expected. Without the media
 * query, the rule would override the larger breakpoints and cause all
 * columns to stack vertically on wide screens.
 */
@media (max-width: 575.98px) {
  .col-md-6,
  .col-md-4 {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 15px;
  }
}

/* Width and height utilities */
.w-100 { width: 100% !important; }
.h-100 { height: 100% !important; }

/* Display utilities */
.d-block { display: block !important; }

/* Margin utilities */
.mb-0 { margin-bottom: 0 !important; }
.mb-2 { margin-bottom: 0.5rem !important; }
.mb-3 { margin-bottom: 1rem !important; }
.mb-4 { margin-bottom: 1.5rem !important; }
.mb-5 { margin-bottom: 3rem !important; }
.mt-2 { margin-top: 0.5rem !important; }
.mt-4 { margin-top: 1.5rem !important; }
.mt-5 { margin-top: 3rem !important; }

/* Positioning utilities */
.position-relative { position: relative; }
.position-absolute { position: absolute; }
.top-50 { top: 50%; }
.start-50 { left: 50%; }
.translate-middle { transform: translate(-50%, -50%); }

/* Typography */
.text-center { text-align: center !important; }
.text-white { color: #fff !important; }
.text-muted { color: #6c757d !important; }
.lead { font-size: 1.25rem; font-weight: 300; }
.display-4 { font-size: 2.5rem; font-weight: 600; margin-bottom: .5rem; }
.fw-bold { font-weight: 700 !important; }

/* Rounded corners and overflow */
.rounded { border-radius: 0.25rem !important; }
.overflow-hidden { overflow: hidden !important; }

/* Image fluid */
.img-fluid { max-width: 100%; height: auto; display: block; }

/* Card component */
.card {
  border: 1px solid #dee2e6;
  border-radius: 0.25rem;
  background-color: #fff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;
  /* Ustaw ciemny kolor tekstu w kartach, aby był czytelny na białym tle. */
  color: #212529;
}
.card-body {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.card-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}
.card-subtitle {
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
}
.card-text {
  flex: 1;
  margin-bottom: 1rem;
}
.shadow-sm {
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

/* Card image header */
/*
 * Ustal sztywną wysokość dla obrazów w kartach (np. w aktualnościach,
 * osiągnięciach i publikacjach). Dzięki object-fit: cover zdjęcia
 * wypełniają przestrzeń bez zniekształceń i nie rozciągają układu.
 */
.card-img-top {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
  border-bottom: 1px solid #dee2e6;
}

/*
 * Członkowie: zdjęcia powinny mieć proporcje 3:4 (szerokość do wysokości 3:4)
 * i wypełniać kartę bez rozciągania. Używamy właściwości aspect-ratio, aby
 * zachować proporcje niezależnie od szerokości kontenera. Wysokość jest
 * ustalana automatycznie na podstawie szerokości, a object-fit: cover
 * przycina zdjęcia do wymiarów kontenera.
 */
.member-photo {
  width: 100%;
  aspect-ratio: 3 / 4;
  height: auto;
  object-fit: cover;
  display: block;
}

/* Form controls */
.form-label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 600;
}
.form-control {
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.form-control:disabled {
  background-color: #e9ecef;
  opacity: 1;
}

/* Remove default list styling */
.list-unstyled {
  list-style: none;
  padding-left: 0;
  margin-bottom: 0;
}

/* Buttons */
.btn {
  display: inline-block;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  border-radius: 0.25rem;
  transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
}
.btn-primary {
  background-color: #0d6efd;
  border-color: #0d6efd;
  color: #fff;
}
.btn-primary:hover {
  background-color: #0b5ed7;
  border-color: #0a58ca;
  color: #fff;
}
.btn-outline-primary {
  background-color: transparent;
  border-color: #0d6efd;
  color: #0d6efd;
}
.btn-outline-primary:hover {
  background-color: #0d6efd;
  color: #fff;
}

/* Flex utilities */
.d-flex { display: flex !important; }
.flex-column { flex-direction: column !important; }

/* Auto margins */
.mt-auto { margin-top: auto !important; }

/* Padding utilities */
.p-3 { padding: 1rem !important; }

/* Gap utilities (similar to Bootstrap's gap classes). gap-2 dodaje odstęp 0.5 rem
   między elementami fleksowymi. */
.gap-2 { gap: 0.5rem !important; }

/* Alert messages */
.alert {
  padding: 1rem;
  border-radius: 0.25rem;
  margin-bottom: 1rem;
}
.alert-success {
  background-color: #d1e7dd;
  color: #0f5132;
  border: 1px solid #badbcc;
}
.alert-danger {
  background-color: #f8d7da;
  color: #842029;
  border: 1px solid #f5c2c7;
}

/* Navbar */
.navbar {
  /* Morski odcień tła dla nawigacji */
  background-color: #042a5e;
  color: #fff;
  padding: 0.75rem 1rem;
  /* Zapewnij minimalną wysokość paska, aby logo i przycisk hamburgera
     mieściły się w całości i nie wystawały po zwinięciu menu. */
  /* Ustaw minimalną wysokość większą, aby logo mieściło się w całości
     niezależnie od przeskalowania. */
  min-height: 100px;
}

/*
 * Ustaw kontener nawigacji jako elastyczny w jednym rzędzie. Logo,
 * przycisk hamburgera oraz lista nawigacyjna będą mogły ustawiać się
 * w jednej linii. Klasa .container w HTML ma już d-flex, ale deklaracja
 * poniżej zapewnia kompatybilność z ewentualnymi innymi miejscami.
 */
.navbar > .container {
  display: flex;
  align-items: center;
  width: 100%;
}

/* Usuwamy definicję navbar-header – struktura została uproszczona */
.navbar-brand {
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
}

/* Logo inside the navbar brand: set a fixed height while preserving aspect ratio */
/* Logo: lekko powiększone w stosunku do poprzedniej wersji. */
.navbar-brand img {
  height: 80px;
  width: auto;
  display: block;
}
/* Przycisk hamburgera */
.navbar-toggler {
  background: none;
  border: none;
  color: #fff;
  font-size: 1.8rem;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  /* Domyślnie po prawej stronie w kontenerze (na dużych ekranach jest ukryty). */
  margin-left: auto;
}

/*
 * Navigation bar adjustments
 *
 * We place the logo first, then the hamburger toggler, followed by the
 * navigation list. On mobile the toggler is visible and the list
 * collapses below the logo. On larger screens the toggler is hidden
 * and the list is displayed horizontally, aligned to the right.
 */
.navbar-nav {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
}

/* Flexbox helper to center content horizontally. Used on rows where
   the number of columns is less than the maximum (np. jeden opiekun).
   Without tej klasy, elementy mogą przyklejać się do lewej krawędzi.
*/
.justify-content-center {
  justify-content: center !important;
}
.nav-item {
  margin-left: 1rem;
}
.nav-link {
  /* Jasnoniebieski kolor linków w nawigacji */
  color: #c5d8f5;
  text-decoration: none;
  padding: 0.5rem 0;
  display: block;
}
.nav-link:hover,
.nav-link.active {
  color: #fff;
}

/*
 * Wyjściowe ustawienia listy nawigacyjnej i stanu zwinięcia menu
 * zostały zdefiniowane powyżej. Usunięto powielone deklaracje,
 * które mogły powodować konflikty. Menu jest ukryte na małych
 * ekranach i pojawia się po kliknięciu przycisku hamburgera.
 */

@media (max-width: 768px) {
  /* Pokaż przycisk hamburgera na małych ekranach */
  .navbar-toggler {
    display: block;
  }
  /* Ukryj listę nawigacyjną, dopóki nie zostanie rozwinięta */
  #navbarNav {
    display: none;
    width: 100%;
  }
  #navbarNav.show {
    display: block;
    width: 100%;
    margin-top: 0.5rem;
  }
  /* Ułóż elementy nawigacji w kolumnie po rozwinięciu */
  .navbar-nav {
    flex-direction: column;
    align-items: flex-start;
  }
  .nav-item {
    margin-left: 0;
    margin-bottom: 0.5rem;
  }
  /* Usuwamy definicję .navbar-header – struktura nagłówka została uproszczona */

  /* Ustal pozycjonowanie nagłówka (logo i hamburger) na urządzeniach mobilnych. */
  .navbar {
    position: relative;
    /* Zwiększ nieco padding, aby zapewnić miejsce na logo i przycisk */
    padding-top: 1rem;
    padding-bottom: 1rem;
  }
  /* Logo po lewej u góry */
  .navbar-brand {
    position: absolute;
    left: 1rem;
    top: 0.5rem;
    z-index: 3;
  }
  /* Hamburger po prawej u góry */
  .navbar-toggler {
    position: absolute;
    right: 1rem;
    top: 0.5rem;
    margin-left: 0;
    z-index: 3;
  }
  /* Po rozwinięciu menu lista pojawia się poniżej nagłówka (wyższy margines) */
  #navbarNav.show {
    /* Zapewnij odstęp od nagłówka równy wysokości paska, aby treść menu
       zaczynała się poniżej logo i przycisku hamburgera. */
    margin-top: 5.5rem;
  }
}

@media (min-width: 769px) {
  /* Ukryj przycisk hamburgera na dużych ekranach */
  .navbar-toggler {
    display: none;
  }
  /* Wyświetl listę poziomo i wyrównaj ją do prawej krawędzi */
  #navbarNav {
    display: block;
    margin-left: auto;
    width: auto;
  }
  .navbar-nav {
    flex-direction: row;
    margin-left: auto;
  }
  .nav-item {
    margin-left: 1rem;
    margin-bottom: 0;
  }
}

/* Footer */
footer {
  /* Dopasuj stopkę kolorystycznie do nawigacji */
  background-color: #042a5e;
  color: #c5d8f5;
  padding: 1rem 0;
  text-align: center;
  margin-top: 2rem;
}

/* Utility for flex-fill (used in layout) */
.flex-fill {
  flex: 1 1 auto;
}

/* Utility for ms-auto (margin-left auto) to push items to the right */
.ms-auto {
  margin-left: auto !important;
}

/* Contact form specific spacing */
.contact-form {
  margin-top: 1rem;
}

@media (max-width: 576px) {
  .contact-form {
    margin-top: 2rem;
  }
}

/* -------------------------------------------------------------------- */
/* Horizontal card layout for news, achievements and publications        */
/*                                                                      */
/* These styles create a flexible row for each item with an image on    */
/* one side and text on the other. On small screens the layout stacks   */
/* vertically, while on medium and larger screens it becomes horizontal.*/
/* Adding the class .reverse will swap the order on larger screens to   */
/* achieve an alternating left/right image layout.                      */
/* -------------------------------------------------------------------- */

/* Base style: stack content vertically with a small gap */
.card.horizontal-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;

  /* Dodaj dolny margines dla każdej poziomej karty, aby odseparować kafelki
     osiągnięć, publikacji i aktualności od siebie. */
  margin-bottom: 1rem;
}

/* Image container defines a fixed proportion of the horizontal card */
.card.horizontal-card .image-container {
  flex: 0 0 40%;
  /* Zachowaj proporcję 16:9, aby wszystkie zdjęcia miały ten sam stosunek
     szerokości do wysokości. Wysokość kontenera jest obliczana na
     podstawie szerokości (40% karty). */
  aspect-ratio: 16 / 9;
}

/* Ensure images are fully visible without cropping. */
.card.horizontal-card .image-container img {
  width: 100%;
  height: 100%;
  /* Obrazy są skalowane tak, aby w całości mieściły się w kontenerze,
     przy zachowaniu proporcji. Dzięki temu zapobiegamy przycinaniu
     lub zniekształceniom podczas zmiany slajdów. */
  object-fit: contain;
  display: block;
}

/* Content takes up the remaining space */
.card.horizontal-card .content-container {
  flex: 1;
}

/*
 * Multi‑image indicator
 *
 * Ten element pojawia się w górnym rogu zdjęcia, jeżeli wpis posiada
 * więcej niż jedno zdjęcie. Zawiera liczbę zdjęć lub ogólną informację
 * o galerii. Stosujemy półprzezroczyste tło dla czytelności oraz
 * zaokrąglone rogi, aby spójnie komponował się z kartą.
 */
.multi-image-indicator {
  position: absolute;
  top: 8px;
  left: 8px;
  background-color: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 2px 6px;
  font-size: 0.75rem;
  border-radius: 4px;
  z-index: 2;
}

/*
 * Fade effect for slideshows
 *
 * Wszystkie obrazy biorące udział w prostym pokazie slajdów mają
 * płynne przejście pomiędzy jednym a kolejnym zdjęciem. Zastosowanie
 * klasy .fade-out ustawia przezroczystość na 0, a jej usunięcie przywraca
 * widoczność. Efekt przejścia jest kontrolowany za pomocą transition.
 */
.slideshow-img {
  transition: opacity 1s ease-in-out;
  opacity: 1;
}
.slideshow-img.fade-out {
  opacity: 0;
}

@media (min-width: 768px) {
  .card.horizontal-card {
    flex-direction: row;
  }
  .card.horizontal-card.reverse {
    flex-direction: row-reverse;
  }
}

/* -------------------------------------------------------------------- */
/* Ważne linki (5 elementów obok siebie)                                */
/* -------------------------------------------------------------------- */

.links-grid-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 5 równych kolumn */
  gap: 1.5rem; /* Odstęp pomiędzy logotypami */
  align-items: center; /* Wyśrodkowanie w pionie, przydatne gdy loga mają różne wysokości */
  justify-items: center; /* Wyśrodkowanie w poziomie */
}

/* Wymuszenie poprawnego skalowania kontenerów linków */
.links-grid-5 a {
  display: flex;
  justify-content: center;
  width: 100%;
}

/* Ustawienia dla obrazków w siatce */
.links-grid-5 img {
  max-width: 100%;
  max-height: 80px; /* Zabezpieczenie przed zbyt dużymi obrazkami, możesz dostosować */
  object-fit: contain; /* Zapobiega zniekształceniom logotypów */
  transition: transform 0.2s ease-in-out; /* Płynna animacja */
}

/* Efekt powiększenia po najechaniu myszką */
.links-grid-5 a:hover img {
  transform: scale(1.1);
}

/* * Na bardzo małych ekranach (<576px) 5 elementów obok siebie 
 * będzie nieczytelnych. Poniższa reguła sprawi, że ułożą się elastycznie 
 * i zawiną do kolejnego rzędu, jeśli zabraknie miejsca.
 */
@media (max-width: 575.98px) {
  .links-grid-5 {
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 1rem;
  }
}