/* ================================
   STOREON – FILTRY REALIZACJI
   FIX: tekst ostry + biały
================================ */

.storeon-realizacje__filters {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 24px;
}

/* BUTTON BASE */
.storeon-realizacje .sr-filter {
  position: relative;
  background: linear-gradient(
    45deg,
    #35A684,
    #2F9176,
    #123A4A
  );
  border: none;
  border-radius: 14px;
  padding: 10px 18px;
  cursor: pointer;
  overflow: hidden;
}

/* TEXT (NA WIERZCHU) */
.storeon-realizacje .sr-filter span {
  position: relative;
  z-index: 3;
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 500;
  white-space: nowrap;
}

/* INNER DARK LAYER */
.storeon-realizacje .sr-filter::before {
  content: "";
  position: absolute;
  inset: 2px;
  background: linear-gradient(
    180deg,
    #123A4A,
    #0B1F2A
  );
  border-radius: 12px;
  z-index: 1;
  transition: opacity 0.4s ease;
}

/* SOFT GLOW */
.storeon-realizacje .sr-filter::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    45deg,
    #35A684,
    #5FE3C0,
    #2F9176
  );
  border-radius: 14px;
  filter: blur(20px);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 0;
}

/* HOVER */
.storeon-realizacje .sr-filter:hover::before {
  opacity: 0.6;
}

.storeon-realizacje .sr-filter:hover::after {
  opacity: 1;
}

/* ACTIVE FILTER */
.storeon-realizacje .sr-filter.is-active span {
  font-weight: 600;
}

.storeon-realizacje .sr-filter.is-active::before {
  opacity: 0.35;
}

.storeon-realizacje .sr-filter.is-active::after {
  opacity: 1;
}

/* FOCUS (A11Y) */
.storeon-realizacje .sr-filter:focus-visible {
  outline: 2px solid #5FE3C0;
  outline-offset: 3px;
}





.storeon-realizacje__grid {
  display: grid;
  gap: 18px;
  grid-template-columns: 1fr;
}

/* 2 kolumny */
@media (min-width: 640px) {
  .storeon-realizacje__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 3 kolumny */
@media (min-width: 960px) {
  .storeon-realizacje__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* 4 kolumny */
@media (min-width: 1280px) {
  .storeon-realizacje__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ================================
   STOREON – KARTA REALIZACJI
   Safari-safe gradient border
================================ */
.storeon-realizacje .sr-card > * {
  border-radius: 16px;
}


.storeon-realizacje .sr-card {
  position: relative;
  display: block;
  text-decoration: none;
  border-radius: 18px;
  overflow: hidden;
  padding: 2px; /* GRUBOŚĆ BORDERA */
  background: linear-gradient(
    45deg,
    #35A684,
    #5FE3C0,
    #2F9176
  );
  background-size: 200% 200%;
  animation: borderFlow 6s ease infinite;
}

.storeon-realizacje .sr-card__media,
.storeon-realizacje .sr-card__media img {
  border-radius: 0;
}

/* WNĘTRZE KARTY */
.storeon-realizacje .sr-card > * {
  border-radius: 16px;
  background: linear-gradient(
    180deg,
    #123A4A,
    #0B1F2A
  );
  overflow: hidden;
}



/* MEDIA */
.storeon-realizacje .sr-card__media {
  aspect-ratio: 4 / 3;
     border-radius: 0;
}

.storeon-realizacje .sr-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* BODY */
.storeon-realizacje .sr-card__body {
  padding: 8px 14px 12px;
  border-radius: 0;
  background: linear-gradient(
    180deg,
    #123A4A,
    #0B1F2A
  );
}

/* TEKST */
.storeon-realizacje .sr-card__title {
  margin: 0;
  font-size: 16px;
  line-height: 1.25;
}

.storeon-realizacje .sr-card__excerpt {
  margin: 8px 0 0;
  font-size: 14px;
  opacity: .8;
}

/* GLOW */
.storeon-realizacje .sr-card::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 22px;
  background: linear-gradient(
    45deg,
    #35A684,
    #5FE3C0,
    #2F9176
  );
  filter: blur(22px);
  opacity: 0.25;
  z-index: -1;
  transition: opacity 0.35s ease;
}

.storeon-realizacje .sr-card:hover::after {
  opacity: 0.55;
}

/* HOVER */
.storeon-realizacje .sr-card:hover {
  transform: translateY(-2px);
  transition: transform 0.25s ease;
}

/* ANIMACJA */
@keyframes borderFlow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}





.storeon-realizacje__empty {
  grid-column: 1 / -1;
  margin: 0;
  padding: 14px;
  border: 1px dashed rgba(0,0,0,.25);
  border-radius: 12px;
}

/* ================================
   STOREON – OPIS TYPU REALIZACJI
================================ */

.storeon-realizacje__term-info {
  margin-top: 40px;
  padding: 28px;
  border-radius: 18px;
  background: linear-gradient(180deg, #123A4A, #0B1F2A);
  border: 1px solid rgba(53, 166, 132, 0.25);
  overflow: hidden; /* clearfix dla float */
}

/* Obraz – float lewo 30% */
.sr-term-info__img {
  float: left;
  width: 30%;
  margin: 0 24px 16px 0;
  border-radius: 12px;
  object-fit: cover;
  display: block;
}

/* Opis oblewa zdjęcie */
.sr-term-info__desc {
  font-size: 15px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.85);
}

.sr-term-info__desc p {
  margin: 0 0 12px;
}

.sr-term-info__desc p:last-child {
  margin-bottom: 0;
}

/* Clearfix po opisie */
.storeon-realizacje__term-info::after {
  content: "";
  display: table;
  clear: both;
}

/* Mobile – zdjęcie pełna szerokość */
@media (max-width: 640px) {
  .sr-term-info__img {
    float: none;
    width: 100%;
    margin: 0 0 16px 0;
  }
}