#wyjasnienia-fabul-page {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

#wyjasnienia-fabul-page::before,
#wyjasnienia-fabul-page::after {
  position: absolute;
  z-index: -1;
  width: 30rem;
  aspect-ratio: 1;
  pointer-events: none;
  content: "";
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.2;
}

#wyjasnienia-fabul-page::before {
  top: 14rem;
  right: -18rem;
  background: rgba(102, 199, 242, 0.2);
}

#wyjasnienia-fabul-page::after {
  bottom: 18rem;
  left: -20rem;
  background: rgba(139, 124, 255, 0.18);
}

.wyjasnienia-hero__panel {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(21.25rem, 5fr);
  align-items: center;
  gap: var(--space-7);
  padding: clamp(var(--space-6), 4vw, var(--space-8));
  border-radius: var(--radius-2xl);
}

.wyjasnienia-hero__copy,
.wyjasnienia-hero__media,
.wyjasnienia-search__intro,
.wyjasnienia-search__field,
.wyjasnienia-results__copy,
.wyjasnienia-results__sort,
.wyjasnienia-final__copy {
  min-width: 0;
}

.wyjasnienia-hero__copy {
  display: flex;
  width: 100%;
  max-width: 36.25rem;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.wyjasnienia-hero__copy > * {
  margin: 0;
}

.wyjasnienia-hero__copy .eyebrow {
  margin-bottom: 0;
}

.wyjasnienia-hero__copy .display-title {
  font-size: clamp(2rem, 5.1vw, 4rem);
}

.wyjasnienia-hero__copy .lead {
  max-width: 35rem;
}

.wyjasnienia-hero__spoiler-note {
  padding-left: var(--space-3);
  border-left: 2px solid var(--color-signal-lilac);
  color: var(--color-text-secondary);
  font-size: var(--font-size-meta);
  line-height: var(--line-height-meta);
}

.wyjasnienia-hero__actions {
  gap: var(--space-4);
}

.wyjasnienia-hero__help {
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
  font-size: var(--font-size-meta);
}

.wyjasnienia-hero__media {
  width: 100%;
  margin: 0;
  overflow: hidden;
  border: var(--border-default);
  border-radius: var(--radius-xl);
  background: var(--color-deep-ocean-900);
}

.wyjasnienia-hero__media img {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: right center;
  filter: saturate(0.84) brightness(0.84);
}

.wyjasnienia-hero__media figcaption {
  margin: 0;
  padding: var(--space-3) var(--space-4);
}

.wyjasnienia-search__panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding: clamp(var(--space-5), 4vw, var(--space-7));
}

.wyjasnienia-search__panel > * {
  min-width: 0;
  margin: 0;
}

.wyjasnienia-search__intro {
  width: 100%;
  max-width: 40.625rem;
}

.wyjasnienia-search__intro .eyebrow {
  margin-bottom: var(--space-3);
}

.wyjasnienia-search__intro p {
  margin-bottom: 0;
}

.wyjasnienia-search__form {
  display: flex;
  width: 100%;
  align-items: flex-end;
  gap: var(--space-3);
}

.wyjasnienia-search__form > * {
  min-width: 0;
}

.wyjasnienia-search__field {
  flex: 1 1 30rem;
}

.wyjasnienia-search__field label,
.wyjasnienia-results__sort label {
  display: block;
}

.wyjasnienia-search__hint {
  margin: var(--space-2) 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-meta);
  line-height: var(--line-height-meta);
}

.wyjasnienia-search__controls {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.wyjasnienia-search__controls > * {
  min-width: 0;
}

.wyjasnienia-status {
  min-height: 1.5rem;
  color: var(--color-text-muted);
  font-size: var(--font-size-meta);
  line-height: var(--line-height-meta);
}

.wyjasnienia-filters__heading,
.wyjasnienia-legend__heading,
.wyjasnienia-featured__heading,
.wyjasnienia-method__heading,
.wyjasnienia-collections__heading,
.wyjasnienia-paths__heading {
  width: 100%;
  max-width: 38.75rem;
  margin-bottom: var(--space-6);
}

.wyjasnienia-filters__heading > :last-child,
.wyjasnienia-legend__heading > :last-child,
.wyjasnienia-featured__heading > :last-child,
.wyjasnienia-method__heading > :last-child,
.wyjasnienia-collections__heading > :last-child,
.wyjasnienia-paths__heading > :last-child {
  margin-bottom: 0;
}

.wyjasnienia-filters__panel {
  display: grid;
  grid-template-columns: minmax(0, 4fr) repeat(4, minmax(0, 2fr));
  gap: var(--space-5);
  padding: var(--space-6);
}

.wyjasnienia-filters__panel > * {
  min-width: 0;
  margin: 0;
}

.wyjasnienia-filter-group {
  padding: 0;
  border: 0;
}

.wyjasnienia-filter-group legend {
  margin-bottom: var(--space-2);
  padding: 0;
  font-size: var(--font-size-meta);
}

.wyjasnienia-filter-group > label {
  width: 100%;
}

.wyjasnienia-filter-group__text {
  margin: 0 0 var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--font-size-meta);
  line-height: var(--line-height-meta);
}

.wyjasnienia-check-list,
.wyjasnienia-choice-list {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
}

.wyjasnienia-check-list > *,
.wyjasnienia-choice-list > * {
  min-width: 0;
}

.wyjasnienia-check-list label,
.wyjasnienia-choice-list label {
  display: flex;
  min-height: 2.75rem;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border: var(--border-default);
  border-radius: var(--radius-md);
  background: rgba(9, 20, 41, 0.46);
  color: var(--color-text-secondary);
  font-weight: 500;
}

.wyjasnienia-check-list label:has(input:checked),
.wyjasnienia-choice-list label:has(input:checked) {
  border-color: rgba(102, 199, 242, 0.68);
  background: var(--color-glass-navy-strong);
  color: var(--color-text-primary);
}

.wyjasnienia-filters__summary {
  display: flex;
  grid-column: 1 / -1;
  min-width: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  padding-top: var(--space-5);
  border-top: var(--border-default);
}

.wyjasnienia-filters__summary > * {
  min-width: 0;
}

.wyjasnienia-active-pills {
  display: flex;
  min-width: 0;
  flex: 1 1 20rem;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.wyjasnienia-active-pills__empty {
  color: var(--color-text-muted);
  font-size: var(--font-size-meta);
}

.wyjasnienia-active-pill {
  display: inline-flex;
  min-height: 2rem;
  max-width: 100%;
  align-items: center;
  gap: var(--space-2);
  padding: 0.25rem 0.375rem 0.25rem 0.625rem;
  border: 1px solid rgba(102, 199, 242, 0.42);
  border-radius: 999px;
  background: var(--color-glass-navy-strong);
  color: var(--color-text-primary);
  font-size: var(--font-size-label);
  font-weight: 600;
}

.wyjasnienia-active-pill button {
  width: 1.5rem;
  min-width: 1.5rem;
  min-height: 1.5rem;
  padding: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-text-primary);
}

.wyjasnienia-legend__grid,
.wyjasnienia-method__grid,
.wyjasnienia-paths__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

.wyjasnienia-legend__grid > *,
.wyjasnienia-method__grid > *,
.wyjasnienia-paths__grid > * {
  min-width: 0;
}

.wyjasnienia-legend-card .card__body {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
}

.wyjasnienia-legend-card .card__body > * {
  margin: 0;
}

.wyjasnienia-legend-card h3 {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
}

.wyjasnienia-featured__grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--space-5);
}

.wyjasnienia-featured__grid > * {
  min-width: 0;
}

.wyjasnienia-featured-main {
  position: relative;
  min-height: 34rem;
}

.wyjasnienia-featured-main__link {
  position: relative;
  display: block;
  width: 100%;
  min-height: 34rem;
  overflow: hidden;
  color: var(--color-text-primary);
  text-decoration: none;
}

.wyjasnienia-featured-main__link > img {
  width: 100%;
  height: 100%;
  min-height: 34rem;
  object-fit: cover;
  filter: saturate(0.82) brightness(0.72);
}

.wyjasnienia-featured-main__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: var(--space-3);
  padding: clamp(var(--space-5), 4vw, var(--space-7));
  background: linear-gradient(to top, rgba(5, 11, 24, 0.96) 5%, rgba(5, 11, 24, 0.7) 38%, transparent 75%);
}

.wyjasnienia-featured-main__overlay > * {
  min-width: 0;
}

.wyjasnienia-featured-main__title {
  max-width: 32.5rem;
  font-family: var(--font-heading);
  font-size: clamp(1.55rem, 3vw, 2rem);
  font-weight: 700;
  line-height: var(--line-height-heading);
  letter-spacing: -0.025em;
}

.wyjasnienia-featured-main__text {
  max-width: 32.5rem;
  color: var(--color-text-secondary);
}

.wyjasnienia-featured-side {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-5);
}

.wyjasnienia-featured-side > * {
  min-width: 0;
  flex: 1 1 0;
}

.wyjasnienia-featured-small .card__body {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.wyjasnienia-featured-small .card__body > * {
  margin: 0;
}

.wyjasnienia-featured-small h3 {
  font-size: clamp(1.2rem, 2vw, 1.45rem);
}

.wyjasnienia-results__header {
  display: flex;
  min-width: 0;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
}

.wyjasnienia-results__header > * {
  min-width: 0;
}

.wyjasnienia-results__copy {
  flex: 1 1 38rem;
  max-width: 40.625rem;
}

.wyjasnienia-results__copy > :last-child {
  margin-bottom: 0;
}

.wyjasnienia-results__sort {
  width: min(100%, 16rem);
  flex: 0 1 16rem;
}

.wyjasnienia-results__count {
  margin: var(--space-5) 0;
  color: var(--color-text-secondary);
  font-size: var(--font-size-meta);
  font-weight: 600;
}

.wyjasnienia-results__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
}

.wyjasnienia-results__grid > * {
  min-width: 0;
}

.wyjasnienia-result-card {
  display: flex;
  min-width: 0;
  flex-direction: column;
}

.wyjasnienia-result-card__media {
  display: flex;
  width: 100%;
  aspect-ratio: 16 / 9;
  align-items: flex-end;
  padding: var(--space-4);
  background: linear-gradient(140deg, rgba(102, 199, 242, 0.18), transparent 50%), linear-gradient(45deg, rgba(139, 124, 255, 0.2), var(--color-deep-ocean-900));
  color: var(--color-text-secondary);
  font-size: var(--font-size-label);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wyjasnienia-result-card .card__body {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.wyjasnienia-result-card .card__body > * {
  margin: 0;
}

.wyjasnienia-result-card h3 {
  font-size: clamp(1.2rem, 2vw, 1.45rem);
}

.wyjasnienia-result-card .meta-list {
  margin-top: auto;
}

.wyjasnienia-results__empty {
  margin-top: var(--space-5);
  padding: var(--space-6);
  border: var(--border-default);
  border-radius: var(--radius-lg);
  background: var(--color-glass-navy);
}

.wyjasnienia-results__empty > :last-child {
  margin-bottom: 0;
}

.wyjasnienia-results__more {
  display: flex;
  min-width: 0;
  justify-content: center;
  margin-top: var(--space-6);
}

.wyjasnienia-results__more > * {
  min-width: 0;
}

.wyjasnienia-method__grid {
  position: relative;
}

.wyjasnienia-method__grid::before {
  position: absolute;
  z-index: -1;
  top: 2.25rem;
  right: 14%;
  left: 14%;
  height: 1px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(102, 199, 242, 0.52), transparent);
}

.wyjasnienia-method-card {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5);
}

.wyjasnienia-method-card > * {
  margin: 0;
}

.wyjasnienia-method-card__number,
.wyjasnienia-collection-card > span {
  color: var(--color-ice-blue);
  font-family: var(--font-heading);
  font-size: var(--font-size-meta);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.wyjasnienia-method-card h3 {
  font-size: clamp(1.2rem, 2vw, 1.45rem);
}

.wyjasnienia-collections__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
}

.wyjasnienia-collections__grid > * {
  min-width: 0;
}

.wyjasnienia-collection-card {
  display: flex;
  min-height: 15rem;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-6);
  color: var(--color-text-primary);
  text-decoration: none;
}

.wyjasnienia-collection-card > * {
  min-width: 0;
  margin: 0;
}

.wyjasnienia-collection-card h3 {
  font-size: clamp(1.3rem, 2.4vw, 1.5rem);
}

.wyjasnienia-collection-card p {
  color: var(--color-text-secondary);
}

.wyjasnienia-collection-card:hover {
  border-color: rgba(102, 199, 242, 0.52);
  box-shadow: var(--shadow-panel), var(--shadow-glow-blue);
  color: var(--color-text-primary);
}

.wyjasnienia-path-card .card__body {
  display: flex;
  min-height: 100%;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-3);
}

.wyjasnienia-path-card .card__body > * {
  margin: 0;
}

.wyjasnienia-path-card h3 {
  font-size: clamp(1.2rem, 2vw, 1.45rem);
}

.wyjasnienia-final__panel {
  padding: clamp(var(--space-6), 6vw, var(--space-8));
  border-radius: var(--radius-2xl);
}

.wyjasnienia-final__copy {
  display: flex;
  width: 100%;
  max-width: 35rem;
  margin-inline: auto;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
  text-align: center;
}

.wyjasnienia-final__copy > * {
  margin: 0;
}

.wyjasnienia-final__copy .eyebrow {
  margin-bottom: 0;
}

.wyjasnienia-final__actions {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

.wyjasnienia-final__actions > * {
  min-width: 0;
}

@media (hover: hover) and (pointer: fine) {
  .wyjasnienia-featured-main:hover,
  .wyjasnienia-featured-small:hover,
  .wyjasnienia-result-card:hover {
    border-color: rgba(151, 174, 235, 0.42);
  }

  .wyjasnienia-featured-main:hover .wyjasnienia-featured-main__overlay {
    background: linear-gradient(to top, rgba(5, 11, 24, 0.98) 5%, rgba(5, 11, 24, 0.68) 42%, transparent 78%);
  }
}

@media (max-width: 63.74rem) {
  .wyjasnienia-filters__panel {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .wyjasnienia-filter-group--motifs,
  .wyjasnienia-filter-group--spoilers {
    grid-column: span 4;
  }

  .wyjasnienia-filter-group--year,
  .wyjasnienia-filter-group--genre,
  .wyjasnienia-filter-group--reading {
    grid-column: span 2;
  }
}

@media (max-width: 61.24rem) {
  .wyjasnienia-hero__panel,
  .wyjasnienia-featured__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .wyjasnienia-hero__copy {
    max-width: 100%;
  }

  .wyjasnienia-hero__media {
    max-width: 52rem;
  }

  .wyjasnienia-featured-main,
  .wyjasnienia-featured-main__link,
  .wyjasnienia-featured-main__link > img {
    min-height: 29rem;
  }
}

@media (max-width: 57.49rem) {
  .wyjasnienia-results__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 52.49rem) {
  .wyjasnienia-legend__grid,
  .wyjasnienia-method__grid,
  .wyjasnienia-paths__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wyjasnienia-method__grid::before {
    display: none;
  }

  .wyjasnienia-legend__grid > :last-child,
  .wyjasnienia-method__grid > :last-child,
  .wyjasnienia-paths__grid > :last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 44.99rem) {
  .wyjasnienia-search__form {
    flex-direction: column;
    align-items: stretch;
  }

  .wyjasnienia-search__controls {
    width: 100%;
  }

  .wyjasnienia-search__controls button:first-child {
    flex: 1 1 100%;
  }

  .wyjasnienia-filters__panel {
    grid-template-columns: minmax(0, 1fr);
  }

  .wyjasnienia-filter-group--motifs,
  .wyjasnienia-filter-group--spoilers,
  .wyjasnienia-filter-group--year,
  .wyjasnienia-filter-group--genre,
  .wyjasnienia-filter-group--reading {
    grid-column: 1;
  }

  .wyjasnienia-filters__summary {
    grid-column: 1;
    align-items: flex-start;
    flex-direction: column;
  }

  .wyjasnienia-active-pills {
    width: 100%;
    flex-basis: auto;
  }
}

@media (max-width: 38.74rem) {
  .wyjasnienia-hero__panel,
  .wyjasnienia-search__panel,
  .wyjasnienia-filters__panel {
    padding: var(--space-5);
  }

  .wyjasnienia-hero__copy .display-title {
    font-size: clamp(2rem, 9vw, 2.75rem);
  }

  .wyjasnienia-hero__media img {
    aspect-ratio: 16 / 10;
  }

  .wyjasnienia-legend__grid,
  .wyjasnienia-method__grid,
  .wyjasnienia-paths__grid,
  .wyjasnienia-collections__grid,
  .wyjasnienia-results__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .wyjasnienia-legend__grid > :last-child,
  .wyjasnienia-method__grid > :last-child,
  .wyjasnienia-paths__grid > :last-child {
    grid-column: 1;
  }

  .wyjasnienia-featured-main,
  .wyjasnienia-featured-main__link,
  .wyjasnienia-featured-main__link > img {
    min-height: 0;
  }

  .wyjasnienia-featured-main__link > img {
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .wyjasnienia-featured-main__overlay {
    position: static;
    background: var(--color-glass-navy-strong);
  }

  .wyjasnienia-results__sort {
    width: 100%;
    flex-basis: 100%;
  }

  .wyjasnienia-final__actions,
  .wyjasnienia-final__actions button {
    width: 100%;
  }

  .wyjasnienia-final__actions a {
    min-height: 2.75rem;
    display: inline-flex;
    align-items: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  #wyjasnienia-fabul-page::before,
  #wyjasnienia-fabul-page::after {
    display: none;
  }
}