/* ==========================================================================
   MovieStoryCentral – Recenzje page styles
   Scoped to #recenzje-main and page-owned components only.
   ========================================================================== */

.recenzje-main {
  width: 100%;
}

/* Section heading shared pattern */
.section-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-sm) var(--space-md);
  margin-block-end: var(--space-xl);
}

.section-heading .frame-number {
  flex-shrink: 0;
}

.section-heading h2 {
  margin-block-end: 0;
}

.section-heading__rule {
  flex: 1 1 10rem;
  min-width: 4rem;
  margin-block: var(--space-xs);
  border: none;
  border-top: var(--border-hairline);
}

/* ==========================================================================
   Hero: Recenzje filmów o kasynie
   ========================================================================== */
.hero-recenzje {
  padding-block: var(--space-3xl) var(--space-3xl);
  background-color: var(--color-krem-filmowy);
}

.hero-recenzje__inner {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--space-2xl);
  align-items: center;
}

.hero-recenzje__text {
  min-width: 0;
}

.hero-recenzje__frame-label {
  margin-block-end: var(--space-md);
}

.hero-recenzje__title {
  font-size: var(--text-display-l);
  line-height: var(--leading-display-l);
  letter-spacing: var(--tracking-display-l);
  margin-block-end: var(--space-lg);
  max-width: 18ch;
}

.hero-recenzje__lead {
  font-size: var(--text-body-l);
  line-height: var(--leading-body-l);
  max-width: 45rem;
  margin-block-end: 0;
}

.hero-recenzje__decor {
  min-width: 0;
  display: flex;
  justify-content: flex-end;
}

.hero-recenzje__frame-outline {
  position: relative;
  width: min(100%, 22rem);
  aspect-ratio: 4 / 3;
  border: 1px solid var(--color-linia-kadru);
  border-radius: var(--radius-medium);
  background-color: var(--color-krem-cien);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: var(--space-md);
  box-shadow: var(--shadow-raised);
}

.hero-recenzje__frame-outline::before {
  content: "";
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  width: 2.5rem;
  height: 2.5rem;
  border: 2px solid var(--color-turkus-projekcyjny);
  border-radius: var(--radius-circle);
  opacity: 0.7;
}

.hero-recenzje__frame-number {
  font-family: var(--font-heading);
  font-size: var(--text-heading-1);
  color: var(--color-pomarancz-kadru);
  line-height: 1;
}

.hero-recenzje__frame-caption {
  font-size: var(--text-label);
  line-height: var(--leading-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-granat-miekki);
}

.hero-recenzje__frame-dot {
  position: absolute;
  bottom: var(--space-md);
  right: var(--space-md);
  width: 0.75rem;
  height: 0.75rem;
  border-radius: var(--radius-circle);
  background-color: var(--color-pomarancz-kadru);
}

/* ==========================================================================
   Jak oceniamy filmy
   ========================================================================== */
.ocena-sekcja {
  padding-block: var(--space-3xl);
  background-color: var(--color-krem-cien);
}

.ocena-sekcja__grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: start;
}

.ocena-sekcja__kryteria,
.ocena-sekcja__skala,
.ocena-sekcja__niezaleznosc {
  min-width: 0;
  background-color: var(--color-krem-filmowy);
  border: var(--border-hairline);
  border-radius: var(--radius-default);
  padding: var(--space-lg);
}

.ocena-sekcja__kryteria h3,
.ocena-sekcja__skala h3,
.ocena-sekcja__niezaleznosc h3 {
  margin-block-end: var(--space-sm);
}

.ocena-sekcja__kryteria p,
.ocena-sekcja__skala p,
.ocena-sekcja__niezaleznosc p {
  max-width: 37.5rem;
}

.ocena-sekcja__lista,
.ocena-sekcja__skala-lista {
  list-style: none;
  padding-inline-start: 0;
  margin-block-start: var(--space-md);
  margin-block-end: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.ocena-sekcja__lista li,
.ocena-sekcja__skala-lista li {
  line-height: var(--leading-body-m);
}

.frame-symbol {
  color: var(--color-pomarancz-kadru);
  font-weight: 600;
  margin-inline-end: var(--space-xs);
}

/* ==========================================================================
   Recenzja tygodnia
   ========================================================================== */
.recenzja-tygodnia {
  padding-block: var(--space-3xl);
  background-color: var(--color-krem-filmowy);
}

.recenzja-tygodnia__panel {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--space-2xl);
  align-items: start;
  background-color: var(--color-biel-projekcji);
  border: var(--border-hairline);
  border-radius: var(--radius-medium);
  padding: var(--space-xl);
  box-shadow: var(--shadow-raised);
  transition: border-color var(--transition-color), box-shadow var(--transition-transform);
}

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

.recenzja-tygodnia__tekst {
  min-width: 0;
}

.recenzja-tygodnia__tekst h3 {
  margin-block-start: var(--space-sm);
  margin-block-end: var(--space-md);
  max-width: 37.5rem;
}

.recenzja-tygodnia__tekst p {
  max-width: 37.5rem;
}

.recenzja-tygodnia__link {
  margin-block-start: var(--space-md);
}

.recenzja-tygodnia__media {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.recenzja-tygodnia__figure {
  margin-block-end: 0;
}

.recenzja-tygodnia__figure img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--color-linia-kadru);
  border-radius: var(--radius-medium);
}

.recenzja-tygodnia__figure figcaption {
  margin-block-start: var(--space-xs);
}

.recenzja-tygodnia__metadata {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  border-top: var(--border-hairline);
  padding-block-start: var(--space-md);
  margin-block-start: var(--space-xs);
}

.recenzja-tygodnia__meta-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  font-size: var(--text-body-s);
  line-height: var(--leading-body-s);
}

.recenzja-tygodnia__meta-row dt {
  color: var(--color-granat-miekki);
  font-weight: 500;
}

.recenzja-tygodnia__meta-row dd {
  margin-inline-start: 0;
  color: var(--color-granat-gleboki);
  font-weight: 600;
  text-align: end;
}

/* ==========================================================================
   Najnowsze recenzje
   ========================================================================== */
.najnowsze-recenzje {
  padding-block: var(--space-3xl);
  background-color: var(--color-krem-filmowy);
}

.najnowsze-recenzje__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
}

.najnowsze-recenzje__card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  background-color: var(--color-krem-cien);
  border: var(--border-hairline);
  border-radius: var(--radius-default);
  padding: var(--space-lg);
  transition: border-color var(--transition-color), box-shadow var(--transition-transform);
}

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

.najnowsze-recenzje__card h3 {
  margin-block-end: 0;
}

.najnowsze-recenzje__card p {
  max-width: 18.75rem;
}

.scene-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-block-start: auto;
}

.scene-card__rating {
  font-size: var(--text-label);
  line-height: var(--leading-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-granat-gleboki);
}

.scene-card__link {
  margin-block-start: var(--space-xs);
}

/* ==========================================================================
   Recenzje według motywu
   ========================================================================== */
.motywy-sekcja {
  padding-block: var(--space-3xl);
  background-color: var(--color-krem-cien);
}

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

.motywy-sekcja__panel {
  display: flex;
  align-items: flex-start;
  gap: var(--space-lg);
  background-color: var(--color-krem-filmowy);
  border: var(--border-hairline);
  border-radius: var(--radius-default);
  padding: var(--space-lg);
  text-decoration: none;
  color: var(--color-granat-gleboki);
  transition: background-color var(--transition-color), border-color var(--transition-color);
}

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

.motywy-sekcja__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--color-linia-kadru);
  border-radius: var(--radius-default);
  font-size: 1.25rem;
  color: var(--color-turkus-projekcyjny);
  background-color: var(--color-biel-projekcji);
}

.motywy-sekcja__content {
  min-width: 0;
}

.motywy-sekcja__content h3 {
  margin-block-end: var(--space-xs);
}

.motywy-sekcja__content p {
  max-width: 31.25rem;
  margin-block-end: 0;
}

/* ==========================================================================
   Spoiler-free vs. spoilery
   ========================================================================== */
.spoilery-sekcja {
  padding-block: var(--space-3xl);
  background-color: var(--color-krem-filmowy);
}

.spoilery-sekcja__container {
  max-width: var(--container-narrow);
}

.spoilery-sekcja__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.spoilery-sekcja__content p {
  max-width: 40.625rem;
}

.spoiler-warning {
  background-color: var(--color-pomarancz-jasny);
  border: 1px solid var(--color-pomarancz-kadru);
  border-radius: var(--radius-default);
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.spoiler-warning p {
  margin-block-end: 0;
}

/* ==========================================================================
   Polecane dla początkujących
   ========================================================================== */
.polecane-sekcja {
  padding-block: var(--space-3xl);
  background-color: var(--color-krem-cien);
}

.polecane-sekcja__container {
  max-width: var(--container-narrow);
}

.polecane-sekcja__list {
  list-style: none;
  padding-inline-start: 0;
  margin-block-end: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.polecane-sekcja__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-md);
  background-color: var(--color-krem-filmowy);
  border: var(--border-hairline);
  border-radius: var(--radius-default);
  padding: var(--space-md);
}

.polecane-sekcja__item .frame-number {
  flex-shrink: 0;
}

.polecane-sekcja__item div {
  min-width: 0;
}

/* ==========================================================================
   Za kulisami recenzji
   ========================================================================== */
.kulisy-sekcja {
  padding-block: var(--space-3xl);
  background-color: var(--color-krem-filmowy);
}

.kulisy-sekcja__grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--space-xl);
  align-items: start;
}

.kulisy-sekcja__metodologia,
.kulisy-sekcja__wartosci {
  min-width: 0;
}

.kulisy-sekcja__metodologia p,
.kulisy-sekcja__wartosci p {
  max-width: 40.625rem;
}

/* ==========================================================================
   Ciekawostki z planu
   ========================================================================== */
.ciekawostki-sekcja {
  padding-block: var(--space-3xl);
  background-color: var(--color-krem-cien);
}

.ciekawostki-sekcja__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
}

.ciekawostki-sekcja__card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  background-color: var(--color-krem-filmowy);
  border: var(--border-hairline);
  border-radius: var(--radius-default);
  padding: var(--space-lg);
}

.ciekawostki-sekcja__icon {
  font-size: 1.5rem;
  line-height: 1;
}

.ciekawostki-sekcja__card h3 {
  margin-block-end: 0;
}

.ciekawostki-sekcja__card p {
  max-width: 18.75rem;
  margin-block-end: 0;
}

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq-sekcja {
  padding-block: var(--space-3xl);
  background-color: var(--color-krem-filmowy);
}

.faq-sekcja__container {
  max-width: var(--container-narrow);
}

.faq-sekcja__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.faq-sekcja__item {
  border: var(--border-hairline);
  border-radius: var(--radius-default);
  background-color: var(--color-biel-projekcji);
  overflow: hidden;
}

.faq-sekcja__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  width: 100%;
  min-height: 3rem;
  padding: var(--space-sm) var(--space-md);
  background-color: transparent;
  border: none;
  border-radius: 0;
  font-size: var(--text-body-m);
  line-height: var(--leading-body-m);
  letter-spacing: var(--tracking-body-m);
  text-transform: none;
  font-weight: 600;
  color: var(--color-granat-gleboki);
  cursor: pointer;
  transition: background-color var(--transition-color);
}

.faq-sekcja__question:hover {
  background-color: var(--color-turkus-jasny);
  transform: none;
}

.faq-sekcja__question:focus-visible {
  outline: 2px solid var(--color-turkus-projekcyjny);
  outline-offset: -2px;
}

.faq-sekcja__icon {
  flex-shrink: 0;
  width: 0.75rem;
  height: 0.75rem;
  border-right: 2px solid var(--color-granat-gleboki);
  border-bottom: 2px solid var(--color-granat-gleboki);
  transform: rotate(45deg);
  transition: transform var(--transition-transform);
}

.faq-sekcja__item.open .faq-sekcja__icon {
  transform: rotate(225deg);
}

.faq-sekcja__answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 220ms ease-out;
}

.faq-sekcja__item.open .faq-sekcja__answer {
  max-height: 12rem;
}

.faq-sekcja__answer p {
  padding: 0 var(--space-md) var(--space-md);
  margin-block-end: 0;
  max-width: 40.625rem;
}

/* ==========================================================================
   CTA
   ========================================================================== */
.cta-sekcja {
  padding-block: var(--space-4xl);
  background-color: var(--color-granat-nocny);
  color: var(--color-biel-projekcji);
}

.cta-sekcja__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-md);
}

.cta-sekcja h2 {
  color: var(--color-biel-projekcji);
  max-width: 31.25rem;
  margin-block-end: 0;
}

.cta-sekcja p {
  max-width: 31.25rem;
  margin-block-end: 0;
  color: var(--color-krem-filmowy);
}

.cta-sekcja__button {
  margin-block-start: var(--space-sm);
}

/* ==========================================================================
   Tablet breakpoint
   ========================================================================== */
@media (max-width: 64rem) {
  .hero-recenzje__inner {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .hero-recenzje__decor {
    justify-content: flex-start;
  }

  .ocena-sekcja__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
  }

  .ocena-sekcja__kryteria {
    grid-column: 1 / -1;
  }

  .recenzja-tygodnia__panel {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .najnowsze-recenzje__grid,
  .ciekawostki-sekcja__grid {
    grid-template-columns: 1fr 1fr;
  }

  .kulisy-sekcja__grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
}

/* ==========================================================================
   Mobile breakpoint
   ========================================================================== */
@media (max-width: 48rem) {
  .hero-recenzje {
    padding-block: var(--space-2xl);
  }

  .hero-recenzje__title {
    font-size: clamp(2rem, 8vw, 2.5rem);
    line-height: 1.1;
  }

  .hero-recenzje__decor {
    display: none;
  }

  .ocena-sekcja__grid {
    grid-template-columns: 1fr;
  }

  .ocena-sekcja__kryteria {
    grid-column: auto;
  }

  .recenzja-tygodnia__panel {
    padding: var(--space-lg);
  }

  .najnowsze-recenzje__grid,
  .ciekawostki-sekcja__grid {
    grid-template-columns: 1fr;
  }

  .motywy-sekcja__panel {
    flex-direction: column;
    gap: var(--space-sm);
  }

  .polecane-sekcja__item {
    flex-direction: column;
    gap: var(--space-xs);
  }

  .faq-sekcja__question {
    font-size: var(--text-body-s);
    line-height: var(--leading-body-s);
  }

  .cta-sekcja {
    padding-block: var(--space-3xl);
  }
}

@media (prefers-reduced-motion: reduce) {
  .faq-sekcja__answer {
    transition: none;
  }

  .faq-sekcja__icon {
    transition: none;
  }
}