/* ===== Ruletka page styles ===== */

/* Hero section */
.hero-ruletka {
  background-color: var(--color-granat-nocny);
  color: var(--color-biel-projekcji);
  padding-block: var(--space-3xl);
  position: relative;
  overflow: hidden;
}

.hero-ruletka__inner {
  max-width: var(--container-main);
  margin-inline: auto;
  padding-inline: var(--container-padding-mobile);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
  align-items: center;
}

.hero-ruletka__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}

.hero-ruletka__frame-number {
  align-self: flex-start;
  color: var(--color-pomarancz-kadru);
}

.hero-ruletka__title {
  font-size: var(--text-display-l);
  line-height: var(--leading-display-l);
  letter-spacing: var(--tracking-display-l);
  color: var(--color-biel-projekcji);
  margin: 0;
}

.hero-ruletka__lead {
  font-size: var(--text-body-l);
  line-height: var(--leading-body-l);
  color: var(--color-krem-filmowy);
  margin: 0;
}

.hero-ruletka__details {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  text-align: left;
  font-size: var(--text-body-s);
  line-height: var(--leading-body-s);
  color: var(--color-krem-cien);
}

.hero-ruletka__details p {
  margin: 0;
}

.hero-ruletka__disclaimer {
  font-size: var(--text-body-s);
  line-height: var(--leading-body-s);
  color: var(--color-turkus-jasny);
  margin: 0;
  border-top: 1px solid rgba(255,255,255,0.2);
  padding-top: var(--space-sm);
}

.hero-ruletka__media {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  border-radius: var(--radius-medium);
  overflow: hidden;
  border: 1px solid var(--color-linia-kadru);
  transition: transform var(--transition-transform);
}

.hero-ruletka__media:hover {
  transform: scale(1.02);
}

.hero-ruletka__image {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 0;
}

/* Intro section */
.intro-symbol {
  background-color: var(--color-krem-filmowy);
  padding-block: var(--space-3xl);
}

.intro-symbol__inner {
  max-width: var(--container-main);
  margin-inline: auto;
  padding-inline: var(--container-padding-mobile);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

.intro-symbol__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 680px;
}

.intro-symbol__frame-number {
  align-self: flex-start;
}

.intro-symbol__title {
  margin: 0;
}

.intro-symbol__subtitle {
  margin: 0;
}

.intro-symbol__list {
  margin: 0;
  padding-inline-start: var(--space-lg);
}

.intro-symbol__annotations {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.annotation-card {
  background-color: var(--color-krem-cien);
  border: var(--border-hairline);
  border-radius: var(--radius-default);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

/* Techniques section */
.techniki {
  background-color: var(--color-krem-cien);
  padding-block: var(--space-3xl);
}

.techniki__inner {
  max-width: var(--container-main);
  margin-inline: auto;
  padding-inline: var(--container-padding-mobile);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

.techniki__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 720px;
}

.techniki__frame-number {
  align-self: flex-start;
}

.techniki__title {
  margin: 0;
}

.techniki__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.technika-card {
  background-color: var(--color-krem-filmowy);
  border: var(--border-hairline);
  border-radius: var(--radius-default);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  transition: background-color var(--transition-color), border-color var(--transition-color);
}

.technika-card:hover {
  background-color: var(--color-turkus-jasny);
  border-color: var(--color-turkus-projekcyjny);
}

.technika-card__title {
  margin: 0;
}

.technika-card__list {
  margin: 0;
  padding-inline-start: var(--space-lg);
}

.techniki__diagram {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.roulette-diagram {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

.roulette-diagram__wheel {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: var(--radius-circle);
  border: 4px solid var(--color-granat-gleboki);
  overflow: hidden;
  transition: transform var(--transition-transform);
}

.roulette-diagram__wheel:hover {
  transform: rotate(180deg);
}

.roulette-diagram__sector {
  position: absolute;
  top: 0;
  left: 50%;
  width: 50%;
  height: 50%;
  transform-origin: 0% 100%;
}

.roulette-diagram__sector--red {
  background-color: #B23A48;
}

.roulette-diagram__sector--black {
  background-color: #1B2A41;
}

.roulette-diagram__sector--green {
  background-color: #3F6B4F;
}

.roulette-diagram__sector:nth-child(1) { transform: rotate(0deg) skewY(-60deg); }
.roulette-diagram__sector:nth-child(2) { transform: rotate(30deg) skewY(-60deg); }
.roulette-diagram__sector:nth-child(3) { transform: rotate(60deg) skewY(-60deg); }
.roulette-diagram__sector:nth-child(4) { transform: rotate(90deg) skewY(-60deg); }
.roulette-diagram__sector:nth-child(5) { transform: rotate(120deg) skewY(-60deg); }
.roulette-diagram__sector:nth-child(6) { transform: rotate(150deg) skewY(-60deg); }
.roulette-diagram__sector:nth-child(7) { transform: rotate(180deg) skewY(-60deg); }
.roulette-diagram__sector:nth-child(8) { transform: rotate(210deg) skewY(-60deg); }
.roulette-diagram__sector:nth-child(9) { transform: rotate(240deg) skewY(-60deg); }
.roulette-diagram__sector:nth-child(10) { transform: rotate(270deg) skewY(-60deg); }
.roulette-diagram__sector:nth-child(11) { transform: rotate(300deg) skewY(-60deg); }
.roulette-diagram__sector:nth-child(12) { transform: rotate(330deg) skewY(-60deg); }
.roulette-diagram__sector:nth-child(13) { transform: rotate(360deg) skewY(-60deg); }

.roulette-diagram__center {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  background-color: var(--color-krem-filmowy);
  border-radius: var(--radius-circle);
  transform: translate(-50%, -50%);
  border: 2px solid var(--color-granat-gleboki);
}

.roulette-diagram__caption {
  font-size: var(--text-body-s);
  color: var(--color-granat-miekki);
  margin: 0;
}

/* Iconic scenes section */
.kultowe-sceny {
  background-color: var(--color-krem-filmowy);
  padding-block: var(--space-3xl);
}

.kultowe-sceny__inner {
  max-width: var(--container-main);
  margin-inline: auto;
  padding-inline: var(--container-padding-mobile);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.kultowe-sceny__frame-number {
  align-self: flex-start;
}

.kultowe-sceny__title {
  margin: 0;
}

.kultowe-sceny__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.scena-card {
  background-color: var(--color-biel-projekcji);
  border: var(--border-hairline);
  border-radius: var(--radius-default);
  padding: var(--space-lg);
  box-shadow: var(--shadow-raised);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  transition: border-color var(--transition-color), box-shadow var(--transition-transform);
}

.scena-card:hover {
  border-color: var(--color-turkus-projekcyjny);
  box-shadow: var(--shadow-overlay);
}

.scena-card__title {
  margin: 0;
}

.scena-card__meta {
  font-size: var(--text-body-s);
  color: var(--color-granat-miekki);
  margin: 0;
  border-top: var(--border-hairline);
  padding-top: var(--space-xs);
}

/* Psychology section */
.psychologia {
  background-color: var(--color-krem-cien);
  padding-block: var(--space-3xl);
}

.psychologia__inner {
  max-width: var(--container-main);
  margin-inline: auto;
  padding-inline: var(--container-padding-mobile);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

.psychologia__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 700px;
}

.psychologia__frame-number {
  align-self: flex-start;
}

.psychologia__title {
  margin: 0;
}

.psychologia__subtitle {
  margin: 0;
}

.psychologia__quote {
  background-color: var(--color-pomarancz-jasny);
  border: var(--border-hairline);
  border-radius: var(--radius-medium);
  padding: var(--space-lg);
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.psychologia__quote p {
  margin: 0;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  line-height: 1.3;
  color: var(--color-granat-gleboki);
}

.psychologia__definitions {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.definition-card {
  background-color: var(--color-krem-filmowy);
  border: var(--border-hairline);
  border-radius: var(--radius-default);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.definition-card__title {
  margin: 0;
  font-size: var(--text-body-m);
}

.definition-card__text {
  margin: 0;
  font-size: var(--text-body-s);
  color: var(--color-granat-miekki);
}

/* Genres section */
.gatunki {
  background-color: var(--color-krem-filmowy);
  padding-block: var(--space-3xl);
}

.gatunki__inner {
  max-width: var(--container-main);
  margin-inline: auto;
  padding-inline: var(--container-padding-mobile);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.gatunki__frame-number {
  align-self: flex-start;
}

.gatunki__title {
  margin: 0;
}

.gatunki__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.gatunek-card {
  background-color: var(--color-krem-cien);
  border: var(--border-hairline);
  border-radius: var(--radius-default);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  transition: background-color var(--transition-color), border-color var(--transition-color);
}

.gatunek-card:hover {
  background-color: var(--color-turkus-jasny);
  border-color: var(--color-turkus-projekcyjny);
}

.gatunek-card__title {
  margin: 0;
}

/* Montage study section */
.montaz-studium {
  background-color: var(--color-krem-filmowy);
  padding-block: var(--space-3xl);
}

.montaz-studium__inner {
  max-width: var(--container-main);
  margin-inline: auto;
  padding-inline: var(--container-padding-mobile);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

.montaz-studium__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 720px;
}

.montaz-studium__frame-number {
  align-self: flex-start;
}

.montaz-studium__title {
  margin: 0;
}

.montaz-studium__subtitle {
  margin: 0;
}

.montaz-studium__shots {
  margin: 0;
  padding-inline-start: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.montaz-studium__meta {
  font-size: var(--text-body-s);
  color: var(--color-granat-miekki);
  margin: 0;
}

.montaz-studium__notes {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.director-note {
  background-color: var(--color-pomarancz-jasny);
  border: var(--border-hairline);
  border-radius: var(--radius-default);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

/* Symbolism section */
.symbolika-liczb {
  background-color: var(--color-krem-cien);
  padding-block: var(--space-3xl);
}

.symbolika-liczb__inner {
  max-width: var(--container-main);
  margin-inline: auto;
  padding-inline: var(--container-padding-mobile);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-xl);
}

.symbolika-liczb__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 700px;
}

.symbolika-liczb__frame-number {
  align-self: flex-start;
}

.symbolika-liczb__title {
  margin: 0;
}

.symbolika-liczb__subtitle {
  margin: 0;
}

.symbolika-liczb__wheel {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}

.roulette-symbol {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
}

.roulette-symbol__wheel {
  position: relative;
  width: 220px;
  height: 220px;
  border-radius: var(--radius-circle);
  border: 4px solid var(--color-granat-gleboki);
  overflow: hidden;
  transition: transform var(--transition-transform);
}

.roulette-symbol__wheel:hover {
  transform: rotate(360deg);
}

.roulette-symbol__sector {
  position: absolute;
  top: 0;
  left: 50%;
  width: 50%;
  height: 50%;
  transform-origin: 0% 100%;
}

.roulette-symbol__sector--red {
  background-color: #B23A48;
}

.roulette-symbol__sector--black {
  background-color: #1B2A41;
}

.roulette-symbol__sector--green {
  background-color: #3F6B4F;
}

.roulette-symbol__sector:nth-child(1) { transform: rotate(0deg) skewY(-60deg); }
.roulette-symbol__sector:nth-child(2) { transform: rotate(30deg) skewY(-60deg); }
.roulette-symbol__sector:nth-child(3) { transform: rotate(60deg) skewY(-60deg); }
.roulette-symbol__sector:nth-child(4) { transform: rotate(90deg) skewY(-60deg); }
.roulette-symbol__sector:nth-child(5) { transform: rotate(120deg) skewY(-60deg); }
.roulette-symbol__sector:nth-child(6) { transform: rotate(150deg) skewY(-60deg); }
.roulette-symbol__sector:nth-child(7) { transform: rotate(180deg) skewY(-60deg); }
.roulette-symbol__sector:nth-child(8) { transform: rotate(210deg) skewY(-60deg); }
.roulette-symbol__sector:nth-child(9) { transform: rotate(240deg) skewY(-60deg); }
.roulette-symbol__sector:nth-child(10) { transform: rotate(270deg) skewY(-60deg); }
.roulette-symbol__sector:nth-child(11) { transform: rotate(300deg) skewY(-60deg); }
.roulette-symbol__sector:nth-child(12) { transform: rotate(330deg) skewY(-60deg); }
.roulette-symbol__sector:nth-child(13) { transform: rotate(360deg) skewY(-60deg); }

.roulette-symbol__center {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  background-color: var(--color-krem-filmowy);
  border-radius: var(--radius-circle);
  transform: translate(-50%, -50%);
  border: 2px solid var(--color-granat-gleboki);
}

.roulette-symbol__caption {
  font-size: var(--text-body-s);
  color: var(--color-granat-miekki);
  margin: 0;
}

/* Trivia section */
.ciekawostki {
  background-color: var(--color-krem-filmowy);
  padding-block: var(--space-3xl);
}

.ciekawostki__inner {
  max-width: var(--container-main);
  margin-inline: auto;
  padding-inline: var(--container-padding-mobile);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.ciekawostki__frame-number {
  align-self: flex-start;
}

.ciekawostki__title {
  margin: 0;
}

.ciekawostki__list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.ciekawostka-card {
  background-color: var(--color-krem-cien);
  border: var(--border-hairline);
  border-radius: var(--radius-default);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.ciekawostka-card__title {
  margin: 0;
}

/* Polish films section */
.polskie-filmy {
  background-color: var(--color-krem-filmowy);
  padding-block: var(--space-3xl);
}

.polskie-filmy__inner {
  max-width: var(--container-main);
  margin-inline: auto;
  padding-inline: var(--container-padding-mobile);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  max-width: 700px;
}

.polskie-filmy__frame-number {
  align-self: flex-start;
}

.polskie-filmy__title {
  margin: 0;
}

.polskie-filmy__subtitle {
  margin: 0;
}

.polskie-filmy__meta {
  font-size: var(--text-body-s);
  color: var(--color-granat-miekki);
  margin: 0;
}

/* Summary section */
.podsumowanie {
  background-color: var(--color-granat-nocny);
  color: var(--color-biel-projekcji);
  padding-block: var(--space-3xl);
}

.podsumowanie__inner {
  max-width: var(--container-main);
  margin-inline: auto;
  padding-inline: var(--container-padding-mobile);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  align-items: center;
  text-align: center;
}

.podsumowanie__frame-number {
  color: var(--color-pomarancz-kadru);
}

.podsumowanie__title {
  color: var(--color-biel-projekcji);
  margin: 0;
  max-width: 720px;
}

.podsumowanie__text {
  color: var(--color-krem-filmowy);
  margin: 0;
  max-width: 720px;
}

.podsumowanie__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  justify-content: center;
}

/* Tablet and desktop breakpoints */
@media (min-width: 48rem) {
  .hero-ruletka__inner {
    grid-template-columns: 3fr 2fr;
    gap: var(--space-2xl);
  }

  .hero-ruletka__text {
    text-align: left;
    margin-inline: 0;
  }

  .hero-ruletka__frame-number {
    align-self: flex-start;
  }

  .intro-symbol__inner {
    grid-template-columns: 7fr 3fr;
    gap: var(--space-2xl);
  }

  .techniki__inner {
    grid-template-columns: 65fr 35fr;
    gap: var(--space-2xl);
  }

  .techniki__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kultowe-sceny__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .psychologia__inner {
    grid-template-columns: 7fr 3fr;
    gap: var(--space-2xl);
  }

  .gatunki__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .montaz-studium__inner {
    grid-template-columns: 3fr 1fr;
    gap: var(--space-2xl);
  }

  .symbolika-liczb__inner {
    grid-template-columns: 3fr 2fr;
    gap: var(--space-2xl);
  }

  .ciekawostki__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 75rem) {
  .hero-ruletka__inner,
  .intro-symbol__inner,
  .techniki__inner,
  .kultowe-sceny__inner,
  .psychologia__inner,
  .gatunki__inner,
  .montaz-studium__inner,
  .symbolika-liczb__inner,
  .ciekawostki__inner,
  .polskie-filmy__inner,
  .podsumowanie__inner {
    padding-inline: var(--container-padding-desktop);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-ruletka__media:hover,
  .roulette-diagram__wheel:hover,
  .roulette-symbol__wheel:hover {
    transform: none;
  }
}