.bohaterowie-page { overflow: hidden; }
.bohaterowie-page .section { padding-block: clamp(3.5rem, 6vw, 4.5rem); }
.bohaterowie-hero__panel, .bohaterowie-final__panel { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-8); align-items: center; padding: var(--space-8); border: var(--border-soft); border-radius: var(--radius-xl); background: var(--color-panel-000); box-shadow: inset 0 1px 0 rgb(255 255 255 / 85%), var(--shadow-card); }
.bohaterowie-hero__copy, .bohaterowie-final__copy { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.bohaterowie-hero__copy > *, .bohaterowie-final__copy > *, .bohaterowie-card__content > *, .bohaterowie-scenery__copy > article > *, .bohaterowie-relations__description > *, .bohaterowie-spoilers__step > div > *, .bohaterowie-moods__card .card__content > * { margin: 0; }
.bohaterowie-hero__copy .lead { max-width: 60ch; }
.bohaterowie-hero__copy > p:not(.lead) { max-width: 58ch; }
.bohaterowie-hero__visual { width: 100%; margin: 0; object-position: right center; }
.bohaterowie-filter__intro, .bohaterowie-featured__intro, .bohaterowie-catalog__intro, .bohaterowie-moods__intro, .bohaterowie-relations__intro { max-width: 66ch; }
.bohaterowie-filter__panel { display: flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-6); padding: var(--space-4); border: var(--border-soft); border-radius: var(--radius-xl); background: var(--color-mist-100); }
.bohaterowie-filter__scroller { display: flex; min-width: 0; flex: 1 1 42rem; flex-wrap: wrap; gap: var(--space-2); }
.bohaterowie-filter__chip, .bohaterowie-relations__button { min-width: 0; min-height: 2.75rem; border: 1px solid var(--color-line-soft); border-radius: var(--radius-md); background: var(--color-panel-000); padding: .625rem 1rem; color: var(--color-violet-900); font-family: var(--font-heading); font-weight: 800; transition: background-color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast); }
.bohaterowie-filter__chip[aria-pressed="true"], .bohaterowie-relations__button.is-active { border-color: var(--color-coral-600); background: var(--color-coral-100); box-shadow: var(--shadow-pressed); }
.bohaterowie-filter__status { flex: 1 1 100%; margin: 0; color: var(--color-violet-700); font-size: var(--text-14); font-weight: 700; }
.bohaterowie-featured__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-6); }
.bohaterowie-featured__card { grid-column: span 3; min-width: 0; }
.bohaterowie-featured__card--strateg { grid-column: span 6; }
.bohaterowie-featured__card--rival { grid-column: span 6; }
.bohaterowie-card__content { gap: var(--space-3); }
.bohaterowie-card__content h3 { font-size: var(--text-24); }
.bohaterowie-card__link, .bohaterowie-moods__card a { display: inline-flex; min-height: 2.75rem; align-items: center; margin-top: auto; font-family: var(--font-heading); font-weight: 800; }
.bohaterowie-catalog__grid, .bohaterowie-moods__grid, .bohaterowie-spoilers__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-6); }
.bohaterowie-catalog__card { min-width: 0; }
.bohaterowie-catalog__card .card__content { min-height: 100%; }
.bohaterowie-scenery > .container > h2 { max-width: 66ch; }
.bohaterowie-scenery__panel { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-6); align-items: start; margin-top: var(--space-6); padding: var(--space-6); border: var(--border-soft); border-radius: var(--radius-xl); background: var(--color-panel-000); }
.bohaterowie-scenery__image { width: 100%; margin: 0; }
.bohaterowie-scenery__copy { display: flex; min-width: 0; flex-direction: column; gap: var(--space-6); }
.bohaterowie-scenery__copy > article { display: flex; min-width: 0; flex-direction: column; gap: var(--space-3); max-width: 66ch; }
.bohaterowie-scenery__callout { padding: var(--space-4); border: 1px solid #f2bcb2; border-radius: var(--radius-lg); background: var(--color-coral-100); }
.bohaterowie-relations__layout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-6); align-items: center; margin-top: var(--space-6); }
.bohaterowie-relations__board { width: 100%; padding: var(--space-6); border: var(--border-soft); border-radius: var(--radius-xl); background: var(--color-mist-100); }
.bohaterowie-relations__board svg { width: 100%; height: auto; }
.bohaterowie-relations__board p { margin: var(--space-3) 0 0; font-size: var(--text-14); font-weight: 700; color: var(--color-violet-700); }
.bohaterowie-relations__line { fill: none; stroke: var(--color-violet-700); stroke-width: 8; stroke-linecap: round; }
.bohaterowie-relations__node { fill: var(--color-panel-000); stroke: var(--color-line-soft); stroke-width: 7; }
.bohaterowie-relations__node--two { fill: var(--color-coral-100); stroke: var(--color-coral-600); }
.bohaterowie-relations__node--four { fill: #d8efef; stroke: var(--color-teal-600); }
.bohaterowie-relations__side, .bohaterowie-relations__controls, .bohaterowie-relations__description { display: flex; min-width: 0; flex-direction: column; }
.bohaterowie-relations__side { gap: var(--space-4); }
.bohaterowie-relations__controls { gap: var(--space-2); }
.bohaterowie-relations__button { width: 100%; text-align: left; }
.bohaterowie-relations__description { gap: var(--space-3); padding: var(--space-6); border: var(--border-soft); border-radius: var(--radius-xl); background: var(--color-panel-000); box-shadow: var(--shadow-card); }
.bohaterowie-relations__note { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-3); max-width: 68ch; margin-top: var(--space-6); padding: var(--space-4); border: var(--border-soft); border-radius: var(--radius-lg); background: var(--color-panel-000); }
.bohaterowie-relations__note p { margin: 0; }
.bohaterowie-spoilers { background: var(--color-mist-100); }
.bohaterowie-spoilers > .container > h2 { max-width: 62ch; }
.bohaterowie-spoilers__step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); min-width: 0; padding: var(--space-6); border: var(--border-soft); border-radius: var(--radius-xl); background: var(--color-panel-000); }
.bohaterowie-spoilers__step > div:last-child { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.bohaterowie-spoilers__number { display: grid; width: 2.75rem; height: 2.75rem; place-items: center; border-radius: 50%; background: var(--color-coral-100); color: var(--color-violet-900); font-family: var(--font-heading); font-weight: 800; }
.bohaterowie-spoilers__notice { display: flex; min-width: 0; flex-direction: column; align-items: flex-start; gap: var(--space-3); width: 100%; }
.bohaterowie-spoilers__notice p { margin: 0; }
.bohaterowie-moods__card { min-width: 0; }
.bohaterowie-faq { background: var(--color-mist-100); }
.bohaterowie-faq__panel { width: min(100%, 58rem); margin-inline: auto; padding: var(--space-8); border: var(--border-soft); border-radius: var(--radius-xl); background: var(--color-panel-000); }
.bohaterowie-faq__panel > .lead { max-width: 64ch; }
.bohaterowie-final__panel { grid-template-columns: minmax(0, 6fr) minmax(0, 3fr); justify-content: space-between; }
.bohaterowie-final__copy > p { max-width: 62ch; }
.bohaterowie-final__prop { position: relative; width: 100%; min-height: 10rem; }
.bohaterowie-final__prop span, .bohaterowie-final__prop i { position: absolute; display: block; border: 1px solid var(--color-line-soft); background: var(--color-mist-100); box-shadow: var(--shadow-card); }
.bohaterowie-final__prop span { right: 8%; bottom: 10%; width: 8rem; height: 5rem; border-radius: var(--radius-lg); transform: rotate(-8deg); }
.bohaterowie-final__prop i { top: 12%; right: 35%; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--color-coral-100); }
.bohaterowie-page [hidden] { display: none !important; }
@media (max-width: 1023px) { .bohaterowie-featured__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bohaterowie-featured__card, .bohaterowie-featured__card--strateg, .bohaterowie-featured__card--rival { grid-column: span 1; } }
@media (max-width: 900px) { .bohaterowie-hero__panel, .bohaterowie-scenery__panel, .bohaterowie-relations__layout { grid-template-columns: minmax(0, 1fr); } .bohaterowie-catalog__grid, .bohaterowie-moods__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bohaterowie-moods__card:last-child { grid-column: 1 / -1; } .bohaterowie-hero__copy .lead, .bohaterowie-hero__copy > p:not(.lead) { max-width: 100%; } }
@media (max-width: 820px) { .bohaterowie-spoilers__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bohaterowie-spoilers__step:last-child { grid-column: 1 / -1; } }
@media (max-width: 640px) { .bohaterowie-page .section { padding-block: var(--space-10); } .bohaterowie-hero__panel, .bohaterowie-final__panel { grid-template-columns: minmax(0, 1fr); padding: var(--space-6); } .bohaterowie-filter__panel { align-items: stretch; } .bohaterowie-filter__scroller { flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--space-2); } .bohaterowie-filter__chip { flex: 0 0 auto; } .bohaterowie-filter__clear { width: 100%; } .bohaterowie-featured__grid, .bohaterowie-catalog__grid, .bohaterowie-moods__grid, .bohaterowie-spoilers__grid { grid-template-columns: minmax(0, 1fr); } .bohaterowie-moods__card:last-child, .bohaterowie-spoilers__step:last-child { grid-column: auto; } .bohaterowie-scenery__panel, .bohaterowie-faq__panel { padding: var(--space-4); } .bohaterowie-spoilers__step { padding: var(--space-4); } .bohaterowie-final__prop { min-height: 4.5rem; } .bohaterowie-final__prop span { width: 6rem; height: 3.75rem; } }
@media (prefers-reduced-motion: reduce) { .bohaterowie-filter__chip, .bohaterowie-relations__button { transition: none; } }