/* Artykuł powiązany */
.related-article-box {
background-color: #f0f8ff; /* Delikatny, jasnoniebieski odcień tła */
border-left: 5px solid #8abfd1; /* Akcent kolorystyczny */
padding: 20px;
margin: 30px 0;
border-radius: 8px;
}
.related-article-box p {
margin: 0;
font-size: 1.1em;
}
.related-article-box a {
color: #3a7d99; /* Ciemniejszy niebieski dla linku */
font-weight: bold;
text-decoration: none;
}
.related-article-box a:hover {
text-decoration: underline;
}

/* Ciekawostka */
.goodnews-section {
  background-color: #f9f9f9; /* Jasne tło */
  border: 1px solid #e0e0e0; /* Subtelna ramka */
  border-radius: 10px; /* Zaokrąglenia rogów */
  padding: 20px; /* Wewnętrzne odstępy */
  margin: 30px 0; /* Odstęp od innych sekcji */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Delikatny cień */
}

/* Akordeon / Rozwijana treść (FAQ) */
.accordion {
margin-top: 20px;
}
.accordion-header {
font-weight: bold;
color: #000000;
margin: 10px 0;
cursor: pointer;
border-radius: 5px;
border: 2px solid black;
padding: 12px 24px;
background-color: white;
transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
text-align: center;
width: 100%;
}
.accordion-header:hover {
background-color: #000000; /* Podświetlenie na hover */
color: #ffffff; /* Zmiana koloru tekstu na hover */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Dodanie cienia */
}
.accordion-content {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease;
background-color: #ffffff;
padding: 10px; /* Uwaga: padding będzie widoczny dopiero po rozwinięciu */
border: 1px solid #ffffff; /* Obramowanie rozwijanej sekcji */
border-top: none; /* Usunięcie górnego obramowania */
border-radius: 0 0 5px 5px; /* Zaokrąglenie tylko dolnych rogów */
}
/* Styl aktywowany przez JavaScript do rozwinięcia treści */
/* W CSS jest fallback na 300px, ale JS używa dynamicznie 'scrollHeight' */
.accordion-header.active + .accordion-content {
max-height: 300px;
}
.accordion-header:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0); /* Styl dla focus */
}
/* Kontener i layout produktów */
.blog-product-container {
display: flex;
margin-bottom: 20px;
}
.blog-product {
width: 100%;
text-align: center;
margin-bottom: 20px;
padding: 15px;
}
.blog-product .button {
background-color: white;
border: 2px solid black;
border-radius: 5px;
color: black;
padding: 12px 24px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
transition-duration: 0.4s;
width: 100%;
cursor: pointer;
}
.blog-product .button:hover {
background-color: black;
color: white;
}
/* Reguły responsywności */
@media (max-width: 768px) {
.blog-product-container {
flex-direction: column;
align-items: center;
}
.blog-product {
width: 100%;
max-width: 500px;
margin-left: auto;
margin-right: auto;
padding: 0 10px;
}
.blog-product img {
max-width: 100%;
}
}
/* Kontener całej sekcji (styl wizualny) */
.video-section {
background-color: #f9f9f9; /* Jasne tło */
border: 1px solid #e0e0e0; /* Subtelna ramka */
border-radius: 10px; /* Zaokrąglenia rogów */
padding: 20px; /* Wewnętrzne odstępy */
margin: 30px 0; /* Odstęp od innych sekcji */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Delikatny cień */
}
/* Kontener techniczny do responsywności wideo 16:9 */
.video-container {
position: relative;
padding-bottom: 56.25%; /* Proporcje 16:9 (9 / 16 = 0.5625) */
height: 0;
overflow: hidden;
border-radius: 10px; /* Zaokrąglenia rogów dla wideo */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Subtelny cień */
}
/* Styl dla samego iframe */
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0; /* Usunięcie domyślnej ramki */
}