/* =========================================================
   HERO - UKŁAD JUBILEUSZOWY
   ========================================================= */

.hero {
  position: relative;
  padding: 0;
  overflow: hidden;
}

/* Główne tło hero */
.hero .hero-container {
  position: relative;
  min-height: 640px;
  display: flex;
  align-items: flex-start;
  padding: 120px 0 180px;
  background: url("../img/strona_jubileuszowa_zdjecie_glowne.png") right top / cover no-repeat;
}

.hero .hero-container .hero-content {
    max-width: 45%;
    margin: 0;
}

@media (max-width: 768px) {
    .hero .hero-container .hero-content {
        max-width: 100%;
    }
}

/* Przyciemnienie po lewej stronie, żeby tekst był czytelny */
.hero .hero-container::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(10, 26, 59, 0.92) 0%,
      rgba(10, 26, 59, 0.82) 22%,
      rgba(10, 26, 59, 0.58) 42%,
      rgba(10, 26, 59, 0.18) 68%,
      rgba(10, 26, 59, 0.08) 100%
    );
  z-index: 1;
}

/* Wewnętrzny kontener - szerszy i wyrównany */
.hero .hero-inner {
  position: relative;
  z-index: 2;
  width: 100%;
}

/* Blok z treścią - po lewej, max 1/3 szerokości */
.hero .hero-content {
  text-align: left;
  color: #fff;
  max-width: 420px;
  width: 100%;
  margin: 0;
  padding: 0;
}

/* Na szerokich ekranach: ok. 1/3 */
@media (min-width: 1200px) {
  .hero .hero-content {
    max-width: 33.3333%;
  }
}

/* Na średnich ekranach: max 50% */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .hero .hero-content {
    max-width: 50%;
  }
}

/* Na telefonach: pełna szerokość */
@media (max-width: 767.98px) {
  .hero .hero-container {
    min-height: auto;
    padding: 90px 0 120px;
  }

  .hero .hero-content {
    max-width: 100%;
  }
}

.hero .hero-content h1 {
  font-size: 3rem;
  line-height: 1.1;
  font-weight: 700;
  margin-bottom: 20px;
  color: #fff;
}

.hero .hero-content p {
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.88);
  margin-bottom: 24px;
}

/* Przyciski */
.hero .cta-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}

.hero .btn-apply,
.hero .btn-tour {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 0;
  text-decoration: none;
  transition: all 0.3s ease;
}

.hero .btn-apply {
  background: #1d4ed8;
  color: #fff;
}

.hero .btn-apply:hover {
  background: #163fae;
  color: #fff;
}

.hero .btn-tour {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
}

.hero .btn-tour:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

/* Pasek / komunikat */
.hero .announcement {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.08);
  border-left: 3px solid #6ea8fe;
  backdrop-filter: blur(4px);
}

.hero .announcement-badge {
  flex-shrink: 0;
  padding: 6px 10px;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
  color: #0a1a3b;
  background: #fff;
}

.hero .announcement p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.5;
  color: #fff;
}

/* =========================================================
   HIGHLIGHTS
   ========================================================= */

/* Żeby początek hero "wchodził" mniej więcej od miejsca kafelków */
.hero .highlights-container {
  position: relative;
  z-index: 3;
  margin-top: -70px;
}

/* Kafelki */
.hero .highlight-item {
  height: 100%;
  padding: 28px 24px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.hero .highlight-item .icon {
  margin-bottom: 16px;
  font-size: 1.8rem;
  line-height: 1;
  color: #0a1a3b;
}

.hero .highlight-item h3 {
  font-size: 1.25rem;
  margin-bottom: 10px;
  color: #0a1a3b;
}

.hero .highlight-item p {
  margin: 0;
  color: #555;
}

/* =========================================================
   EVENT BANNER
   ========================================================= */

.hero .event-banner {
  padding: 50px 0 0;
  background: transparent;
}

.hero .event-banner .container {
  background: #0a1a3b;
  color: #fff;
  padding: 30px;
}

.hero .event-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 90px;
  min-height: 90px;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.hero .event-date .month {
  font-size: 0.85rem;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.hero .event-date .day {
  font-size: 2rem;
  font-weight: 700;
  line-height: 1;
}

.hero .event-banner h3 {
  color: #fff;
  margin-bottom: 8px;
}

.hero .event-banner p {
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.85);
}

.hero .btn-register {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  color: #fff;
  background: #1d4ed8;
  text-decoration: none;
}

.hero .btn-register:hover {
  background: #163fae;
  color: #fff;
}

/* ==========================================================
   JUBILEUSZ 90 - NEWSY
   Wspólne style dla:
   - listy ogólnej
   - featured: 1 duży + mniejsze
   ========================================================== */

/* ----------------------------------------------------------
   Zmienne wspólne
   ---------------------------------------------------------- */

.jubilee-news-list,
.jubilee-news-featured {
  --jubilee-news-navy: #102b46;
  --jubilee-news-media-bg: #f2f3f5;
  --jubilee-news-radius: 10px;
  --jubilee-news-shadow: 0 5px 18px rgba(0, 0, 0, 0.07);
  --jubilee-news-shadow-hover: 0 10px 28px rgba(0, 0, 0, 0.10);
  --jubilee-news-transition: 0.35s ease;
}


/* ==========================================================
   WSPÓLNE KARTY: lista ogólna + małe featured
   ========================================================== */

.jubilee-news-list .post-box,
.jubilee-news-featured .secondary-post {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;

  background: var(--surface-color, #fff);
  border-radius: var(--jubilee-news-radius);
  box-shadow: var(--jubilee-news-shadow);

  transition:
    transform var(--jubilee-news-transition),
    box-shadow var(--jubilee-news-transition);
}

.jubilee-news-list .post-box:hover,
.jubilee-news-featured .secondary-post:hover {
  transform: translateY(-4px);
  box-shadow: var(--jubilee-news-shadow-hover);
}


/* ==========================================================
   WSPÓLNY OBSZAR ZDJĘCIA 16:8
   ========================================================== */

.jubilee-news-list .post-img,
.jubilee-news-featured .secondary-post .post-image {
  position: relative;

  width: 100%;
  aspect-ratio: 16 / 8;

  overflow: hidden;
  background: var(--jubilee-news-media-bg);
}

/*
 * Link w obszarze zdjęcia jest flexem:
 * - normalne zdjęcie wypełnia cały kadr,
 * - sygnet jest centrowany bez rozciągania.
 */
.jubilee-news-list .post-img > a,
.jubilee-news-featured .secondary-post .post-image > a {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;
}


/* ----------------------------------------------------------
   Prawdziwe zdjęcia
   ---------------------------------------------------------- */

.jubilee-news-list .post-img img.news-image,
.jubilee-news-featured .secondary-post .post-image img.secondary-image {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  transition: transform 0.45s ease;
}

.jubilee-news-list .post-box:hover img.news-image,
.jubilee-news-featured .secondary-post:hover img.secondary-image {
  transform: scale(1.04);
}


/* ----------------------------------------------------------
   Placeholder - szare tło + mały sygnet pośrodku
   ---------------------------------------------------------- */

/*
 * Tło daje rodzic (.post-img / .post-image).
 * Sam SVG NIE ma width:100% ani height:100%.
 * Dzięki temu nie jest rozciągany i nie jest kadrowany.
 *
 * Selektory są celowo dość dokładne, żeby przebić
 * oryginalne reguły szablonu MySchool dla .post-image img.
 */
.jubilee-news-list .post-img img.news-placeholder,
.jubilee-news-featured .secondary-post .post-image img.secondary-placeholder {
  display: block;

  width: auto;
  height: auto;

  max-width: 110px;
  max-height: 55%;

  padding: 0;
  margin: 0;

  object-fit: contain;
  object-position: center;

  background: transparent;
  opacity: 0.55;

  transform: none;
}

.jubilee-news-list .post-box:hover img.news-placeholder,
.jubilee-news-featured .secondary-post:hover img.secondary-placeholder {
  transform: none;
}


/* ==========================================================
   LISTA OGÓLNA
   ========================================================== */

.jubilee-news-list .post-content {
  flex: 1;

  display: flex;
  flex-direction: column;

  padding: 20px;
}

.jubilee-news-list .post-box .meta {
  margin-top: 0;
  margin-bottom: 12px;
}

.jubilee-news-list .post-box .post-title {
  margin-top: 0;

  font-size: 18px;
  line-height: 1.35;
}

.jubilee-news-list .post-title a {
  display: -webkit-box;

  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;

  overflow: hidden;
}

.jubilee-news-list .post-excerpt {
  margin-top: 14px;
}

.jubilee-news-list .post-excerpt p {
  margin: 0;

  display: -webkit-box;

  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;

  overflow: hidden;
}

.jubilee-news-list .post-box .readmore {
  margin-top: auto;
  padding-top: 20px;
}


/* ==========================================================
   FEATURED NEWS - DUŻY NEWS
   ========================================================== */

.jubilee-news-featured .featured-post {
  position: relative;

  overflow: hidden;

  background: var(--jubilee-news-media-bg);
  border-radius: 12px;
}


/* ----------------------------------------------------------
   Duże zdjęcie / placeholder
   ---------------------------------------------------------- */

.jubilee-news-featured .featured-media {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  aspect-ratio: 16 / 7;

  overflow: hidden;
  background: var(--jubilee-news-media-bg);
}

.jubilee-news-featured .featured-media img.featured-image {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;
}

.jubilee-news-featured .featured-media img.featured-placeholder {
  display: block;

  width: auto;
  height: auto;

  max-width: 150px;
  max-height: 50%;

  padding: 0;
  margin: 0;

  object-fit: contain;

  background: transparent;
  opacity: 0.55;
}


/* ----------------------------------------------------------
   Overlay i panel tekstowy
   ---------------------------------------------------------- */

.jubilee-news-featured .featured-post .post-overlay {
  position: absolute;
  inset: 0;

  display: flex;
  align-items: flex-end;

  padding: 30px;

  background:
    linear-gradient(
      to top,
      rgba(0, 0, 0, 0.40) 0%,
      rgba(0, 0, 0, 0) 65%
    );
}

/*
 * Nieprzezroczysty granatowy panel zapewnia przewidywalny
 * kontrast niezależnie od zdjęcia pod spodem.
 */
.jubilee-news-featured .featured-post .post-content {
  width: auto;
  max-width: 760px;

  padding: 24px 28px;

  background: var(--jubilee-news-navy);
  color: #fff;

  border-radius: 8px;
}

.jubilee-news-featured .featured-post .post-title,
.jubilee-news-featured .featured-post .post-title a,
.jubilee-news-featured .featured-post .post-excerpt,
.jubilee-news-featured .featured-post .post-author,
.jubilee-news-featured .featured-post .post-meta,
.jubilee-news-featured .featured-post .post-meta .date {
  color: #fff;
}

.jubilee-news-featured .featured-post .post-title a:hover,
.jubilee-news-featured .featured-post .post-title a:focus {
  color: #fff;
  text-decoration: underline;
}

.jubilee-news-featured .featured-post .category {
  display: inline-block;

  padding: 4px 9px;
  margin-right: 10px;

  background: #fff;
  color: var(--jubilee-news-navy);

  border-radius: 4px;

  font-weight: 600;
}


/* ==========================================================
   FEATURED NEWS - MAŁE KARTY
   ========================================================== */

.jubilee-news-featured .secondary-post .post-content {
  flex: 1;

  display: flex;
  flex-direction: column;

  padding: 22px;
}

.jubilee-news-featured .secondary-post .post-title {
  margin-top: 10px;
}

.jubilee-news-featured .secondary-post .post-title a {
  display: -webkit-box;

  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;

  overflow: hidden;
}

.jubilee-news-featured .secondary-post .post-author {
  margin-top: auto;
  padding-top: 14px;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 767px) {

  .jubilee-news-featured .featured-media {
    aspect-ratio: 4 / 3;
  }

  .jubilee-news-featured .featured-post .post-overlay {
    padding: 15px;
  }

  .jubilee-news-featured .featured-post .post-content {
    width: 100%;
    max-width: none;

    padding: 18px;
  }

  .jubilee-news-featured .featured-post .post-excerpt {
    display: none;
  }

  .jubilee-news-list .post-img img.news-placeholder,
  .jubilee-news-featured .secondary-post .post-image img.secondary-placeholder {
    max-width: 90px;
    max-height: 50%;
  }

  .jubilee-news-featured .featured-media img.featured-placeholder {
    max-width: 120px;
  }

}

/* ==========================================================
   JUBILEUSZ 90 - NEWS SINGLE VIEW
   ========================================================== */


/* ----------------------------------------------------------
   USTAWIENIA OGÓLNE
   ---------------------------------------------------------- */

.blog-details {
  --jubilee-detail-navy: #102b46;
  --jubilee-detail-light: #f2f3f5;
  --jubilee-detail-border: #e5e7eb;
  --jubilee-detail-radius: 10px;
  --jubilee-detail-content-width: 920px;
}


/* ----------------------------------------------------------
   ARTYKUŁ
   ---------------------------------------------------------- */

.blog-details .article {
  overflow: hidden;

  background: var(--surface-color, #fff);

  border-radius: var(--jubilee-detail-radius);

  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.06);
}


/* ==========================================================
   GŁÓWNE ZDJĘCIE
   ========================================================== */

.blog-details .post-img {
  position: relative;

  width: 100%;
  aspect-ratio: 16 / 9;

  height: auto;

  overflow: hidden;

  background: var(--jubilee-detail-light);
}


.blog-details .post-img img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;
  object-position: center;

  margin: 0;
}


/* ==========================================================
   GŁÓWNA CZĘŚĆ ARTYKUŁU
   ========================================================== */

.blog-details .article-content {
  padding: 40px 50px 50px;
}


/*
 * Wyrównujemy wszystkie główne elementy tekstowe
 * do jednej czytelnej szerokości.
 */

.blog-details .meta-categories,
.blog-details .title,
.blog-details .meta-top,
.blog-details .content,
.blog-details .meta-bottom {
  max-width: var(--jubilee-detail-content-width);

  margin-left: auto;
  margin-right: auto;
}


/* ==========================================================
   KATEGORIA
   ========================================================== */

.blog-details .meta-categories {
  display: flex;
  align-items: center;
  flex-wrap: wrap;

  gap: 12px;

  margin-bottom: 20px;
}


.blog-details .meta-categories .category {
  display: inline-flex;
  align-items: center;

  gap: 7px;

  padding: 6px 12px;

  background: var(--jubilee-detail-light);
  color: var(--jubilee-detail-navy);

  border-radius: 5px;

  font-size: 0.9rem;
  font-weight: 600;
}


.blog-details .meta-categories .category i {
  color: var(--accent-color);
}


/* ==========================================================
   TYTUŁ
   ========================================================== */

.blog-details .title {
  margin-top: 0;
  margin-bottom: 22px;

  font-family: var(--heading-font);
  font-size: 2.4rem;
  line-height: 1.2;
  font-weight: 700;

  color: var(--heading-color);
}


/* ==========================================================
   META: AUTOR / DATA
   ========================================================== */

.blog-details .meta-top {
  padding-bottom: 22px;
  margin-bottom: 32px;

  border-bottom: 1px solid var(--jubilee-detail-border);
}


.blog-details .meta-top ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;

  gap: 10px 25px;

  margin: 0;
  padding: 0;

  list-style: none;
}


.blog-details .meta-top li {
  display: flex;
  align-items: center;

  gap: 7px;

  margin: 0;
  padding: 0;

  font-family: var(--default-font);
  font-size: 0.95rem;

  color: color-mix(
    in srgb,
    var(--default-color),
    transparent 25%
  );
}


.blog-details .meta-top i {
  color: var(--accent-color);
}


.blog-details .meta-top a {
  color: inherit;
  text-decoration: none;
}


.blog-details .meta-top a:hover,
.blog-details .meta-top a:focus {
  color: var(--accent-color);
  text-decoration: underline;
}


/* ==========================================================
   TREŚĆ ARTYKUŁU
   ========================================================== */

.blog-details .content {
  font-family: var(--default-font);
  font-size: 1.08rem;
  line-height: 1.8;

  color: var(--default-color);
}


/* ----------------------------------------------------------
   CZYSZCZENIE TYPOGRAFII ZE STAREGO RTE
   ---------------------------------------------------------- */

/*
 * W starych newsach mogą występować np.:
 *
 * style="font-family:'Times New Roman'"
 * style="font-size:12pt"
 *
 * Celowo nadpisujemy te dwie właściwości.
 */

.blog-details .content p,
.blog-details .content p span,
.blog-details .content li,
.blog-details .content li span,
.blog-details .content div,
.blog-details .content div span {
  font-family: var(--default-font) !important;

  font-size: inherit !important;
  line-height: inherit !important;
}


/*
 * Nie resetujemy font-weight, żeby zachować
 * <strong> i <b>.
 */

.blog-details .content strong,
.blog-details .content b {
  font-weight: 700;
}


/* ----------------------------------------------------------
   AKAPITY
   ---------------------------------------------------------- */

.blog-details .content p {
  margin-top: 0;
  margin-bottom: 1.5rem;
}


/*
 * Zadziała dla naprawdę pustych <p></p>.
 * Nie usunie <p>&nbsp;</p>.
 */

.blog-details .content p:empty {
  display: none;
}


/* ==========================================================
   LEAD
   ========================================================== */

.blog-details .content p.lead {
  margin-top: 0;
  margin-bottom: 2rem;

  font-family: var(--default-font) !important;

  font-size: 1.25rem !important;
  line-height: 1.65 !important;

  font-weight: 500;

  color: var(--heading-color);
}


/* Jeżeli gdzieś pozostanie starszy div.lead */

.blog-details .content .lead {
  font-family: var(--default-font);

  font-size: 1.25rem;
  line-height: 1.65;

  font-weight: 500;

  color: var(--heading-color);
}


/* ==========================================================
   NAGŁÓWKI W TREŚCI
   ========================================================== */

.blog-details .content h2,
.blog-details .content h3,
.blog-details .content h4,
.blog-details .content h5 {
  font-family: var(--heading-font);

  font-weight: 700;
  line-height: 1.3;

  color: var(--heading-color);
}


.blog-details .content h2 {
  margin-top: 2.7rem;
  margin-bottom: 1rem;

  font-size: 1.8rem;
}


.blog-details .content h3 {
  margin-top: 2.3rem;
  margin-bottom: 0.9rem;

  font-size: 1.5rem;
}


.blog-details .content h4 {
  margin-top: 2rem;
  margin-bottom: 0.8rem;

  font-size: 1.25rem;
}


/* ==========================================================
   LISTY
   ========================================================== */

.blog-details .content ul,
.blog-details .content ol {
  margin-top: 0;
  margin-bottom: 1.5rem;

  padding-left: 1.6rem;
}


.blog-details .content li {
  margin-bottom: 0.5rem;
}


/* ==========================================================
   LINKI
   ========================================================== */

.blog-details .content a {
  color: var(--accent-color);

  text-decoration: underline;
  text-underline-offset: 3px;
}


.blog-details .content a:hover,
.blog-details .content a:focus {
  color: var(--heading-color);

  text-decoration-thickness: 2px;
}


/* ==========================================================
   CYTAT
   ========================================================== */

.blog-details .content blockquote {
  position: relative;

  margin: 2.5rem 0;
  padding: 24px 30px;

  background: var(--jubilee-detail-light);

  border-left: 4px solid var(--accent-color);
}


.blog-details .content blockquote p {
  margin: 0;

  font-size: 1.15rem;
  line-height: 1.7;

  font-style: italic;

  color: var(--heading-color);
}


.blog-details .content blockquote cite {
  display: block;

  margin-top: 14px;

  font-size: 0.9rem;
  font-style: normal;
  font-weight: 600;

  color: var(--default-color);
}


/* ==========================================================
   OBRAZY W TREŚCI
   ========================================================== */

.blog-details .content img {
  max-width: 100%;
  height: auto;
}


.blog-details .content-image {
  margin: 2.5rem 0;
}


.blog-details .content-image img {
  display: block;

  width: 100%;
  height: auto;

  border-radius: 8px;
}


.blog-details .content-image figcaption,
.blog-details .content figure figcaption {
  margin-top: 8px;

  font-size: 0.9rem;
  line-height: 1.5;

  color: color-mix(
    in srgb,
    var(--default-color),
    transparent 30%
  );
}


/* ==========================================================
   GALERIA / DODATKOWE ZDJĘCIA
   ========================================================== */

.blog-details .content-image-split {
  margin: 2.5rem 0;
}


.blog-details .content-image-split figure {
  height: 100%;

  margin: 0;
}


.blog-details .content-image-split img {
  display: block;

  width: 100%;
  aspect-ratio: 4 / 3;

  object-fit: cover;
  object-position: center;

  border-radius: 8px;
}


/* ==========================================================
   TABELE
   ========================================================== */

.blog-details .content table {
  width: 100%;

  margin: 2rem 0;

  border-collapse: collapse;

  font-family: var(--default-font);
}


.blog-details .content table th,
.blog-details .content table td {
  padding: 12px 14px;

  border: 1px solid var(--jubilee-detail-border);

  text-align: left;
  vertical-align: top;
}


.blog-details .content table th {
  background: var(--jubilee-detail-light);

  font-weight: 700;

  color: var(--heading-color);
}


/* ==========================================================
   DOLNA CZĘŚĆ ARTYKUŁU
   ========================================================== */

.blog-details .meta-bottom {
  margin-top: 40px;
  padding-top: 24px;

  border-top: 1px solid var(--jubilee-detail-border);
}


/* ----------------------------------------------------------
   POWRÓT DO AKTUALNOŚCI
   ---------------------------------------------------------- */

.blog-details .meta-bottom .readmore {
  display: inline-flex;
  align-items: center;

  gap: 8px;

  font-weight: 600;

  color: var(--accent-color);

  text-decoration: none;
}


.blog-details .meta-bottom .readmore i {
  transition: transform 0.25s ease;
}


.blog-details .meta-bottom .readmore:hover,
.blog-details .meta-bottom .readmore:focus {
  color: var(--heading-color);

  text-decoration: underline;
}


.blog-details .meta-bottom .readmore:hover i,
.blog-details .meta-bottom .readmore:focus i {
  transform: translateX(-4px);
}


/* ==========================================================
   RESPONSYWNOŚĆ
   ========================================================== */

@media (max-width: 991.98px) {

  .blog-details .article-content {
    padding: 35px 30px 40px;
  }


  .blog-details .title {
    font-size: 2rem;
  }

}


@media (max-width: 767.98px) {

  .blog-details .article {
    border-radius: 8px;
  }


  /*
   * Na telefonie trochę wyższy kadr zdjęcia.
   */

  .blog-details .post-img {
    aspect-ratio: 4 / 3;
  }


  .blog-details .article-content {
    padding: 25px 20px 30px;
  }


  .blog-details .title {
    margin-bottom: 18px;

    font-size: 1.65rem;
    line-height: 1.3;
  }


  .blog-details .meta-top {
    margin-bottom: 25px;
  }


  .blog-details .meta-top ul {
    flex-direction: column;
    align-items: flex-start;

    gap: 10px;
  }


  .blog-details .content {
    font-size: 1rem;
    line-height: 1.75;
  }


  .blog-details .content p.lead,
  .blog-details .content .lead {
    font-size: 1.12rem !important;
    line-height: 1.65 !important;
  }


  .blog-details .content h2 {
    font-size: 1.55rem;
  }


  .blog-details .content h3 {
    font-size: 1.35rem;
  }


  .blog-details .content-image-split img {
    aspect-ratio: 16 / 10;
  }

}

/* ==========================================================
   HEADER - LOGO 90-LECIA
   ========================================================== */

.header .logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}

.header .logo .jubilee-logo {
  display: block;
  width: auto;
  height: 80px;
  max-width: 240px;
}

/* tablet */

@media (max-width: 991.98px) {

  .header .logo .jubilee-logo {
    height: 54px;
    max-width: 210px;
  }

}

section#hero {padding-top:0px;}

/* telefon */

@media (max-width: 575.98px) {

  .header .logo .jubilee-logo {
    height: 46px;
    max-width: 180px;
  }

}

.article .meta-categories {display: none;}