.hratelnost-page { overflow: hidden; }
.hratelnost-page .hr-grid { display: grid; min-width: 0; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-6); }
.hratelnost-page .hr-grid > * { min-width: 0; }
.hratelnost-page .lead { margin-bottom: 0; }
.hratelnost-page .hr-hero { position: relative; padding-block: clamp(5rem, 9vw, 7rem); background: var(--gradient-day); }
.hratelnost-page .hr-hero__grid { align-items: center; }
.hratelnost-page .hr-hero__copy { grid-column: span 5; display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.hratelnost-page .hr-hero__copy h1 { margin: 0; font-size: clamp(2.75rem, 4vw, 3.5rem); }
.hratelnost-page .hr-hero__copy .eyebrow { margin: 0; }
.hratelnost-page .hr-hero__copy .lead { max-width: 58ch; }
.hratelnost-page .hr-hero__points { display: flex; flex-direction: column; gap: var(--space-3); max-width: 46ch; }
.hratelnost-page .hr-hero__points p { display: flex; gap: var(--space-3); margin: 0; }
.hratelnost-page .hr-hero__points span { flex: 0 0 0.75rem; width: 0.75rem; height: 0.75rem; margin-top: 0.48rem; border: 2px solid var(--color-celestine); border-radius: 50%; }
.hratelnost-page .hr-hero__action { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); }
.hratelnost-page .hr-hero__action p { max-width: 42ch; margin: 0; color: var(--color-slate); font-size: var(--text-sm); }
.hratelnost-page .hr-hero__media { grid-column: 7 / span 6; width: 100%; margin: 0; aspect-ratio: 16 / 10; }
.hratelnost-page .hr-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.hratelnost-page .hr-loop__grid { row-gap: var(--space-8); }
.hratelnost-page .hr-loop__intro { grid-column: span 5; }
.hratelnost-page .hr-loop__intro .lead { max-width: 54ch; }
.hratelnost-page .hr-loop__steps { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); min-width: 0; }
.hratelnost-page .hr-step { position: relative; min-width: 0; }
.hratelnost-page .hr-step__number { margin-bottom: var(--space-3); color: var(--color-primary); font-family: var(--font-heading); font-size: 1.75rem; font-weight: var(--weight-extrabold); }
.hratelnost-page .hr-step h3, .hratelnost-page .hr-step p { max-width: 32ch; }
.hratelnost-page .hr-elements__grid { row-gap: var(--space-8); }
.hratelnost-page .hr-elements__intro { grid-column: span 5; }
.hratelnost-page .hr-elements__intro .lead { max-width: 56ch; }
.hratelnost-page .hr-elements__legend { grid-column: 9 / span 3; align-self: center; min-width: 0; padding-left: var(--space-4); border-left: 2px solid var(--color-celestine); }
.hratelnost-page .hr-elements__legend span { color: var(--color-sun); }
.hratelnost-page .hr-elements__legend p { margin: var(--space-2) 0 0; color: var(--color-slate); font-size: var(--text-sm); }
.hratelnost-page .hr-elements__list { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); min-width: 0; }
.hratelnost-page .hr-element { min-width: 0; padding: var(--space-6); border: var(--border-default); border-top: 3px solid var(--color-sky); border-radius: var(--radius-lg); background: #fff; }
.hratelnost-page .hr-element h3 { margin-bottom: var(--space-2); }
.hratelnost-page .hr-element p { max-width: 30ch; margin: 0; }
.hratelnost-page .hr-element--pyro { border-top-color: #d46c4b; }.hratelnost-page .hr-element--hydro { border-top-color: var(--color-sky); }.hratelnost-page .hr-element--anemo { border-top-color: var(--color-celestine); }.hratelnost-page .hr-element--electro { border-top-color: #8b75c9; }.hratelnost-page .hr-element--dendro { border-top-color: var(--color-leaf); }.hratelnost-page .hr-element--cryo { border-top-color: #70bddf; }.hratelnost-page .hr-element--geo { border-top-color: var(--color-sun); }
.hratelnost-page .hr-elements__note { grid-column: 1 / -1; padding: var(--space-6); border: var(--border-default); border-left: 3px solid var(--color-leaf); border-radius: var(--radius-lg); background: #fff; }
.hratelnost-page .hr-elements__note h3 { margin-bottom: var(--space-2); }.hratelnost-page .hr-elements__note p { max-width: 60ch; margin: 0; }
.hratelnost-page .hr-party__grid { align-items: center; }
.hratelnost-page .hr-party__content { grid-column: span 6; display: flex; flex-direction: column; gap: var(--space-4); }
.hratelnost-page .hr-party__content > * { margin: 0; }.hratelnost-page .hr-party__content .lead { max-width: 54ch; }
.hratelnost-page .hr-party__cards { display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.hratelnost-page .hr-party__cards .card { position: relative; }.hratelnost-page .hr-party__cards .card p { max-width: 34ch; }
.hratelnost-page .hr-party__four { position: absolute; top: var(--space-3); right: var(--space-4); color: rgba(74,159,232,.15); font-family: var(--font-heading); font-size: 4rem; font-weight: var(--weight-extrabold); line-height: 1; }
.hratelnost-page .hr-party__media { grid-column: 8 / span 5; width: 100%; margin: 0; aspect-ratio: 3 / 2; }
.hratelnost-page .hr-party__media img, .hratelnost-page .hr-movement__media img, .hratelnost-page .hr-coop__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-base); }
@media (hover:hover) { .hratelnost-page .hr-party__media:hover img, .hratelnost-page .hr-movement__media:hover img, .hratelnost-page .hr-coop__media:hover img { transform: scale(1.02); } }
.hratelnost-page .hr-movement__grid { align-items: start; row-gap: var(--space-6); }
.hratelnost-page .hr-movement__heading { grid-column: 1 / -1; }.hratelnost-page .hr-movement__heading .lead { max-width: 54ch; }
.hratelnost-page .hr-movement__media { grid-column: span 7; width: 100%; margin: 0; aspect-ratio: 3 / 2; }
.hratelnost-page .hr-movement__copy { grid-column: 9 / span 4; display: flex; flex-direction: column; gap: var(--space-4); }
.hratelnost-page .hr-movement__copy article { padding-bottom: var(--space-4); border-bottom: var(--border-default); }.hratelnost-page .hr-movement__copy h3 { margin-bottom: var(--space-2); }.hratelnost-page .hr-movement__copy p { max-width: 40ch; margin: 0; }
.hratelnost-page .hr-movement__closing { max-width: 48ch !important; color: var(--color-slate); }
.hratelnost-page .hr-discoveries__grid { row-gap: var(--space-8); }.hratelnost-page .hr-discoveries__intro { grid-column: span 5; }.hratelnost-page .hr-discoveries__intro .lead { max-width: 52ch; }
.hratelnost-page .hr-discoveries__cards { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }.hratelnost-page .hr-discoveries__cards .card { min-width: 0; }.hratelnost-page .hr-discoveries__cards span { display: block; margin-bottom: var(--space-3); color: var(--color-primary); font-family: var(--font-heading); font-weight: var(--weight-bold); }.hratelnost-page .hr-discoveries__cards p { max-width: 34ch; }
.hratelnost-page .hr-progression__grid { row-gap: var(--space-6); }.hratelnost-page .hr-progression__intro { grid-column: span 6; }.hratelnost-page .hr-progression__intro .lead { max-width: 54ch; }
.hratelnost-page .hr-progression__cards { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); }.hratelnost-page .hr-progression__cards .card { min-width: 0; }.hratelnost-page .hr-progression__cards p { max-width: 42ch; }.hratelnost-page .hr-progression__weapons { border-top: 3px solid var(--color-sun); }.hratelnost-page .hr-progression__artifacts { border-top: 3px solid var(--color-celestine); }
.hratelnost-page .hr-progression__summary { grid-column: 1 / -1; padding: var(--space-6); border: var(--border-default); border-radius: var(--radius-lg); background: #fff; }.hratelnost-page .hr-progression__summary p { max-width: 60ch; margin: 0; }
.hratelnost-page .hr-coop__grid { align-items: center; row-gap: var(--space-6); }.hratelnost-page .hr-coop__heading { grid-column: 1 / -1; }.hratelnost-page .hr-coop__heading h2 { margin-bottom: 0; }.hratelnost-page .hr-coop__media { grid-column: span 5; width: 100%; margin: 0; aspect-ratio: 3 / 2; }.hratelnost-page .hr-coop__panel { grid-column: 7 / span 6; display: flex; flex-direction: column; gap: var(--space-4); }.hratelnost-page .hr-coop__panel > * { margin: 0; }.hratelnost-page .hr-coop__panel > p { max-width: 52ch; }.hratelnost-page .hr-coop__points { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }.hratelnost-page .hr-coop__points article { min-width: 0; }.hratelnost-page .hr-coop__points h4 { margin-bottom: var(--space-2); }.hratelnost-page .hr-coop__points p { max-width: 31ch; margin: 0; }
.hratelnost-page .hr-first-steps__grid { row-gap: var(--space-6); }.hratelnost-page .hr-first-steps__intro { grid-column: span 6; }.hratelnost-page .hr-first-steps__intro h2 { margin-bottom: 0; }.hratelnost-page .hr-first-steps__principles { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }.hratelnost-page .hr-first-steps__principles article { min-width: 0; }.hratelnost-page .hr-first-steps__principles article > p:first-child { margin-bottom: var(--space-3); color: var(--color-primary); font-family: var(--font-heading); font-size: 1.5rem; font-weight: var(--weight-extrabold); }.hratelnost-page .hr-first-steps__principles article > p:last-child { max-width: 31ch; }.hratelnost-page .hr-first-steps__notice { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4) var(--space-6); border: var(--border-default); border-radius: var(--radius-lg); background: var(--color-cloud); }.hratelnost-page .hr-first-steps__notice span { display: inline-flex; flex: 0 0 1.5rem; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--color-primary); color: #fff; font-weight: var(--weight-bold); }.hratelnost-page .hr-first-steps__notice p { max-width: 70ch; margin: 0; }
.hratelnost-page .hr-final { background: var(--gradient-day); }.hratelnost-page .hr-final__panel { display: flex; flex-direction: column; align-items: center; gap: var(--space-4); padding: clamp(4rem, 7vw, 5rem) var(--space-6); border: var(--border-glass); border-radius: var(--radius-xl); background: rgba(255,255,255,.82); box-shadow: var(--shadow-card); text-align: center; }.hratelnost-page .hr-final__panel > * { margin: 0; }.hratelnost-page .hr-final__panel > p:not(.eyebrow) { max-width: 54ch; }.hratelnost-page .hr-final__panel .button { min-width: 16.25rem; min-height: 3rem; }.hratelnost-page .hr-final__note { max-width: 42ch !important; color: var(--color-slate); font-size: var(--text-sm); }
@media (max-width: 57.5rem) { .hratelnost-page .hr-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--space-5, 1.25rem); }.hratelnost-page .hr-hero__copy { grid-column: span 4; }.hratelnost-page .hr-hero__media { grid-column: 5 / span 4; }.hratelnost-page .hr-loop__intro, .hratelnost-page .hr-elements__intro, .hratelnost-page .hr-progression__intro, .hratelnost-page .hr-first-steps__intro { grid-column: span 6; }.hratelnost-page .hr-loop__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }.hratelnost-page .hr-loop__steps > :last-child { grid-column: 1 / -1; }.hratelnost-page .hr-elements__legend { grid-column: 7 / span 2; }.hratelnost-page .hr-elements__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }.hratelnost-page .hr-party__content, .hratelnost-page .hr-party__media, .hratelnost-page .hr-movement__heading, .hratelnost-page .hr-movement__media, .hratelnost-page .hr-coop__heading, .hratelnost-page .hr-coop__media, .hratelnost-page .hr-coop__panel { grid-column: 1 / -1; }.hratelnost-page .hr-party__media { order: 2; }.hratelnost-page .hr-movement__copy { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5, 1.25rem); }.hratelnost-page .hr-movement__copy > * { min-width: 0; }.hratelnost-page .hr-movement__closing { grid-column: 1 / -1; }.hratelnost-page .hr-discoveries__cards, .hratelnost-page .hr-progression__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }.hratelnost-page .hr-first-steps__principles { grid-template-columns: repeat(2, minmax(0, 1fr)); }.hratelnost-page .hr-first-steps__principles > :last-child { grid-column: 1 / -1; } }
@media (max-width: 47.49rem) { .hratelnost-page .hr-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }.hratelnost-page .hr-hero { padding-block: var(--space-12); }.hratelnost-page .hr-hero__copy, .hratelnost-page .hr-hero__media, .hratelnost-page .hr-loop__intro, .hratelnost-page .hr-elements__intro, .hratelnost-page .hr-elements__legend, .hratelnost-page .hr-elements__list, .hratelnost-page .hr-elements__note, .hratelnost-page .hr-party__content, .hratelnost-page .hr-party__media, .hratelnost-page .hr-movement__heading, .hratelnost-page .hr-movement__media, .hratelnost-page .hr-movement__copy, .hratelnost-page .hr-discoveries__intro, .hratelnost-page .hr-discoveries__cards, .hratelnost-page .hr-progression__intro, .hratelnost-page .hr-progression__cards, .hratelnost-page .hr-progression__summary, .hratelnost-page .hr-coop__heading, .hratelnost-page .hr-coop__media, .hratelnost-page .hr-coop__panel, .hratelnost-page .hr-first-steps__intro, .hratelnost-page .hr-first-steps__principles, .hratelnost-page .hr-first-steps__notice { grid-column: 1 / -1; }.hratelnost-page .hr-hero__copy h1 { font-size: 2.125rem; line-height: 1.15; }.hratelnost-page .hr-hero__action { align-items: stretch; }.hratelnost-page .hr-hero__action .button { width: 100%; }.hratelnost-page .hr-loop__steps, .hratelnost-page .hr-elements__list, .hratelnost-page .hr-discoveries__cards, .hratelnost-page .hr-progression__cards, .hratelnost-page .hr-first-steps__principles, .hratelnost-page .hr-movement__copy, .hratelnost-page .hr-coop__points { grid-template-columns: minmax(0, 1fr); }.hratelnost-page .hr-loop__steps > :last-child, .hratelnost-page .hr-first-steps__principles > :last-child { grid-column: auto; }.hratelnost-page .hr-elements__legend { padding-left: var(--space-3); }.hratelnost-page .hr-elements__list { gap: var(--space-3); }.hratelnost-page .hr-element { padding: var(--space-5, 1.25rem); }.hratelnost-page .hr-party__cards .card, .hratelnost-page .hr-discoveries__cards .card, .hratelnost-page .hr-progression__cards .card { padding: var(--space-5, 1.25rem); }.hratelnost-page .hr-party__media { order: 0; }.hratelnost-page .hr-movement__media { order: 0; }.hratelnost-page .hr-coop__panel { padding: var(--space-5, 1.25rem); }.hratelnost-page .hr-first-steps__notice { padding: var(--space-4); }.hratelnost-page .hr-final__panel { padding: var(--space-12) var(--space-4); }.hratelnost-page .hr-final__panel .button { width: 100%; min-width: 0; min-height: 3.25rem; } }
@media (prefers-reduced-motion: reduce) { .hratelnost-page .hr-party__media img, .hratelnost-page .hr-movement__media img, .hratelnost-page .hr-coop__media img { transition: none; } }