/* HEADER */
.news-swiper-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
}

.news-swiper-title {
  font-size: 48px;
  font-weight: 600;
}

.news-swiper-subtitle {
  font-size: 20px;
}

/* ARROWS */
.news-swiper-arrows {
  display: flex;
  gap: 1rem; /* match spacing from sponsor styles */
}

.news-swiper-arrow {
  /* match .circle-btn from sponsor.css for identical appearance */
  width: 50px;
  height: 50px;
  padding: 15px; /* centers the inner icon similar to sponsor */
  border-radius: 50%;
  border: 1px solid #C2C2C2;
  background: #fff;
  color: #C2C2C2;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  pointer-events: all;
  transition: all 0.3s ease;
  /* Render the small arrow icon inside the round button using a pseudo-element
     so the visual matches the `.arrow-left` / `.arrow-right` icons defined in
     `sponsor.css`. */
  position: relative; /* for the ::after icon */
  font-size: 0; /* hide any textual arrow fallback (e.g. "←/→") */
  box-sizing: border-box; /* ensure padding is included in width like sponsor.css */
}

/* Small icon shown in the center of the circular button */
.news-swiper-arrow::after {
  content: '';
  display: inline-block;
  width: 15px;
  height: 15px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  opacity: 0.5; /* matches opacity used for .arrow-left/.arrow-right */
  transition: opacity 0.25s ease;
}

/* map the correct SVGs to prev/next so they match sponsor's assets */
.news-swiper-arrow.prev::after {
  background-image: url(../images/sponsor/arrow-prev.svg);
}

.news-swiper-arrow.next::after {
  background-image: url(../images/sponsor/arrow-next.svg);
}

/* Hover behaviour: make the icon fully opaque and keep the existing
   background hover so the control behaves like other circular buttons */
.news-swiper-arrow:hover,
.news-swiper-arrow:focus,
.news-swiper-arrow:active {
  /* match sponsor hover: keep white background, darken border only */
  background: #fff !important;
  color: #C2C2C2 !important;
  border: 1px solid #000 !important;
}

.news-swiper-arrow:hover::after,
.news-swiper-arrow:focus::after,
.news-swiper-arrow:active::after {
  opacity: 1 !important;
}

/* Strong override to guarantee visual parity with sponsor's .circle-btn
   in case other stylesheets are loaded after this file. Targets the arrows
   within the arrows container to increase specificity. */
.news-swiper-arrows .news-swiper-arrow {
  width: 50px !important;
  height: 50px !important;
  padding: 15px !important;
  box-sizing: border-box !important;
  border-radius: 50% !important;
  background: #fff !important;
  background-color: #fff !important;
  background-image: none !important;
  color: #C2C2C2 !important;
  border: 1px solid #C2C2C2 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  pointer-events: all !important;
  transition: all 0.3s ease !important;
  box-shadow: none !important;
}

.news-swiper-arrows .news-swiper-arrow::after {
  width: 15px !important;
  height: 15px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  opacity: 0.5 !important;
  transition: opacity 0.25s ease !important;
}

.news-swiper-arrows .news-swiper-arrow.prev::after {
  background-image: url(../images/sponsor/arrow-prev.svg) !important;
}

.news-swiper-arrows .news-swiper-arrow.next::after {
  background-image: url(../images/sponsor/arrow-next.svg) !important;
}

.news-swiper-arrows .news-swiper-arrow:hover,
.news-swiper-arrows .news-swiper-arrow:focus,
.news-swiper-arrows .news-swiper-arrow:active {
  background: #fff !important; /* keep white */
  background-color: #fff !important;
  background-image: none !important;
  color: #C2C2C2 !important;
  border: 1px solid #000 !important; /* darken border only */
}

.news-swiper-arrows .news-swiper-arrow:hover::after,
.news-swiper-arrows .news-swiper-arrow:focus::after,
.news-swiper-arrows .news-swiper-arrow:active::after {
  opacity: 1 !important;
}

/* Ultra-specific override in case other stylesheets apply later with
   !important. This raises specificity so it beats same-specificity
   declarations coming after this file when they also use !important. */
.news-swiper-arrows.news-swiper-arrows .news-swiper-arrow.news-swiper-arrow:hover,
.news-swiper-arrows.news-swiper-arrows .news-swiper-arrow.news-swiper-arrow:focus,
.news-swiper-arrows.news-swiper-arrows .news-swiper-arrow.news-swiper-arrow:active {
  background: #fff !important;
  color: #C2C2C2 !important;
  border: 1px solid #000 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

.news-swiper-arrows.news-swiper-arrows .news-swiper-arrow.news-swiper-arrow:hover::after,
.news-swiper-arrows.news-swiper-arrows .news-swiper-arrow.news-swiper-arrow:focus::after,
.news-swiper-arrows.news-swiper-arrows .news-swiper-arrow.news-swiper-arrow:active::after {
  opacity: 1 !important;
}

/* CARD */
.news-swiper-card {
  display: block;
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
}

.news-swiper-image {
  height: 380px;
  background-size: cover;
  background-position: center;
  transition: transform 0.5s ease;
}

.news-swiper-card:hover .news-swiper-image {
  transform: scale(1.08);
}

/* CONTENT */
.news-swiper-content {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 20px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  background: linear-gradient(to top, rgba(0,0,0,0.9), transparent);
}

.news-swiper-content p {
  color: #fff;
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
  max-width: 75%;
}

/* BUTTON */
.news-swiper-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #c8a97e;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateX(10px);
  opacity: 0.7;
  transition: all 0.3s ease;
  position: relative; /* for the arrow icon pseudo-element */
}

.news-swiper-card:hover .news-swiper-btn {
  transform: translateX(0);
  opacity: 1;
}

/* Add right arrow inside the gold circular button; use same size as other arrows */
.news-swiper-btn::after {
  content: '';
  display: inline-block;
  width: 15px;
  height: 15px;
  background-image: url(../images/sponsor/arrow-next.svg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
  opacity: 0.5;
  transition: opacity 0.25s ease;
}

.news-swiper-card:hover .news-swiper-btn::after {
  opacity: 1;
}

/* DOTS */
.newsSwiper {
  position: relative;
  padding-bottom: 50px; /* miejsce na kropki */
}

.news-swiper-section .swiper-pagination {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
}

.news-swiper-section .swiper-pagination-bullet {
  background: #ccc;
  opacity: 1;
}

.news-swiper-section .swiper-pagination-bullet-active {
  background: #000;
}

.swiper-pagination-bullet {
  background: #ccc;
  opacity: 1;
}

.swiper-pagination-bullet-active {
  background: #000;
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .news-swiper-title {
    font-size: 32px;
  }
}

@media (max-width: 600px) {
  .news-swiper-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }

  .news-swiper-arrows {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 600px) {

  .news-swiper-header {
    flex-direction: column;
    align-items: center; /* 🔥 centrowanie całego bloku */
    text-align: center;  /* 🔥 centrowanie tekstu */
  }

  .news-swiper-title {
    text-align: center;
  }

  .news-swiper-subtitle {
    text-align: center;
  }

}

/* Final, ultra-specific safety overrides to prevent any other stylesheet from
   darkening the arrow buttons or changing spacing. These rules mirror the
   visual of `.circle-btn` in sponsor.css: 50x50, 15px padding, white
   background, gray icon at 0.5 opacity, and on hover only the border
   darkens while the icon becomes fully opaque. Uses very high specificity
   and !important where necessary to beat competing declarations loaded
   after this file. */
html body .news-swiper-arrows .news-swiper-arrow {
  width: 50px !important;
  height: 50px !important;
  padding: 15px !important;
  box-sizing: border-box !important;
  border-radius: 50% !important;
  background: #fff !important;
  background-color: #fff !important;
  background-image: none !important;
  color: #C2C2C2 !important;
  border: 1px solid #C2C2C2 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  pointer-events: all !important;
  transition: all 0.3s ease !important;
  box-shadow: none !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

html body .news-swiper-arrows .news-swiper-arrow::after {
  width: 15px !important;
  height: 15px !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  opacity: 0.5 !important;
  transition: opacity 0.25s ease !important;
}

html body .news-swiper-arrows .news-swiper-arrow.prev::after {
  background-image: url(../images/sponsor/arrow-prev.svg) !important;
}

html body .news-swiper-arrows .news-swiper-arrow.next::after {
  background-image: url(../images/sponsor/arrow-next.svg) !important;
}

html body .news-swiper-arrows .news-swiper-arrow:hover,
html body .news-swiper-arrows .news-swiper-arrow:focus,
html body .news-swiper-arrows .news-swiper-arrow:active {
  background: #fff !important;
  background-color: #fff !important;
  background-image: none !important;
  color: #C2C2C2 !important;
  border: 1px solid #000 !important;
}

html body .news-swiper-arrows .news-swiper-arrow:hover::after,
html body .news-swiper-arrows .news-swiper-arrow:focus::after,
html body .news-swiper-arrows .news-swiper-arrow:active::after {
  opacity: 1 !important;
}