/* ===== Strona główna MovieStoryCentral ===== */

.home-hero {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
  padding-block: var(--space-3xl) var(--space-4xl);
  background-color: var(--color-krem-filmowy);
}

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

.home-hero__kicker {
  margin-block-end: 0;
}

.home-hero__title {
  font-size: var(--text-display-xl);
  line-height: var(--leading-display-xl);
  letter-spacing: var(--tracking-display-xl);
  margin-block-end: 0;
  max-width: 900px;
}

.home-hero__lead {
  font-size: var(--text-body-l);
  line-height: var(--leading-body-l);
  color: var(--color-granat-miekki);
  max-width: 720px;
  margin-block-end: 0;
}

.home-hero__cta {
  margin-block-start: var(--space-xs);
}

.home-hero__collage {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-md);
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--container-padding-mobile);
}

.home-hero__frame {
  margin: 0;
  border: var(--border-hairline);
  border-radius: var(--radius-medium);
  background-color: var(--color-krem-cien);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color var(--transition-color), box-shadow var(--transition-transform);
}

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

.home-hero__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}

.home-hero__frame figcaption {
  padding: var(--space-sm) var(--space-md);
  font-size: var(--text-body-s);
  line-height: var(--leading-body-s);
  color: var(--color-granat-miekki);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

.home-hero__frame--poker {
  grid-column: span 6;
  aspect-ratio: 16 / 9;
}

.home-hero__frame--cards {
  grid-column: span 3;
  aspect-ratio: 3 / 2;
}

.home-hero__frame--roulette {
  grid-column: span 3;
  aspect-ratio: 3 / 2;
}

.home-hero__frame--casino {
  grid-column: span 6;
  aspect-ratio: 16 / 9;
}

.home-hero__frame--portrait {
  grid-column: span 3;
  aspect-ratio: 1 / 1;
}

.home-hero__frame-placeholder {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  height: 100%;
  padding: var(--space-md);
  background-color: var(--color-granat-gleboki);
  color: var(--color-krem-filmowy);
  gap: var(--space-md);
}

.home-hero__frame-placeholder--portrait {
  background-color: var(--color-granat-nocny);
}

.home-hero__frame-note {
  color: var(--color-krem-filmowy);
  font-size: var(--text-annotation);
  line-height: var(--leading-annotation);
}

.home-section {
  padding-block: var(--space-4xl);
  background-color: var(--color-krem-filmowy);
}

.home-section__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  max-width: var(--container-main);
  margin-inline: auto;
  padding-inline: var(--container-padding-mobile);
  margin-block-end: var(--space-2xl);
}

.home-section__header--narrow {
  max-width: var(--container-narrow);
  margin-inline: auto;
}

.home-section__title {
  font-size: var(--text-heading-2);
  line-height: var(--leading-heading-2);
  letter-spacing: var(--tracking-heading-2);
  margin-block-end: 0;
}

.home-section__intro {
  font-size: var(--text-body-m);
  line-height: var(--leading-body-m);
  color: var(--color-granat-miekki);
  max-width: 720px;
  margin-block-end: 0;
}

.home-films__grid,
.home-plots__grid,
.home-characters__grid,
.home-why__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
  max-width: var(--container-main);
  margin-inline: auto;
  padding-inline: var(--container-padding-mobile);
}

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

.home-film-card:hover,
.home-plot-card:hover,
.home-character-card:hover,
.home-why-card:hover {
  border-color: var(--color-turkus-projekcyjny);
  box-shadow: var(--shadow-overlay);
  transform: translateY(-2px);
}

.home-film-card__title,
.home-plot-card__title,
.home-character-card__name,
.home-why-card__title {
  font-size: var(--text-heading-3);
  line-height: var(--leading-heading-3);
  letter-spacing: var(--tracking-heading-3);
  margin-block-end: 0;
}

.home-film-card__meta,
.home-character-card__role {
  font-size: var(--text-body-s);
  line-height: var(--leading-body-s);
  color: var(--color-granat-miekki);
  margin-block-end: 0;
}

.home-film-card__description,
.home-plot-card__description,
.home-character-card__description,
.home-why-card__description {
  font-size: var(--text-body-s);
  line-height: var(--leading-body-s);
  color: var(--color-granat-gleboki);
  margin-block-end: 0;
}

.home-film-card__link,
.home-plot-card__link,
.home-character-card__link,
.home-theme__link {
  align-self: flex-start;
  margin-block-start: auto;
  padding-block-start: var(--space-xs);
  font-size: var(--text-label);
  line-height: var(--leading-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-turkus-projekcyjny);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--transition-color), text-decoration-thickness var(--transition-color);
}

.home-film-card__link:hover,
.home-plot-card__link:hover,
.home-character-card__link:hover,
.home-theme__link:hover {
  text-decoration-thickness: 2px;
}

.home-reviews__list,
.home-facts__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding-inline: var(--container-padding-mobile);
}

.home-review-item,
.home-fact-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg);
  background-color: var(--color-krem-filmowy);
  border: var(--border-hairline);
  border-radius: var(--radius-default);
  transition: background-color var(--transition-color), border-color var(--transition-color);
}

.home-review-item:hover,
.home-fact-item:hover {
  background-color: var(--color-turkus-jasny);
  border-color: var(--color-turkus-projekcyjny);
}

.home-review-item__topline {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.home-review-item__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-pomarancz-kadru);
}

.home-review-item__title,
.home-fact-item__title {
  font-size: var(--text-heading-3);
  line-height: var(--leading-heading-3);
  letter-spacing: var(--tracking-heading-3);
  margin-block-end: 0;
}

.home-review-item__excerpt,
.home-fact-item__description {
  font-size: var(--text-body-m);
  line-height: var(--leading-body-m);
  color: var(--color-granat-gleboki);
  margin-block-end: 0;
}

.home-review-item__meta {
  font-size: var(--text-body-s);
  line-height: var(--leading-body-s);
  color: var(--color-granat-miekki);
  margin-block-end: 0;
}

.home-review-item__link {
  align-self: flex-start;
  font-size: var(--text-label);
  line-height: var(--leading-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-turkus-projekcyjny);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: color var(--transition-color), text-decoration-thickness var(--transition-color);
}

.home-review-item__link:hover {
  text-decoration-thickness: 2px;
}

.home-character-card {
  align-items: center;
  text-align: center;
}

.home-character-card__portrait {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border-radius: var(--radius-circle);
  border: 2px solid var(--color-turkus-projekcyjny);
  background-color: var(--color-krem-filmowy);
  color: var(--color-granat-gleboki);
  font-family: var(--font-heading);
  font-size: 2rem;
  font-weight: 600;
  margin-block-end: var(--space-sm);
  transition: border-color var(--transition-color);
}

.home-character-card:hover .home-character-card__portrait {
  border-color: var(--color-pomarancz-kadru);
}

.home-character-card__initial {
  line-height: 1;
}

.home-theme {
  background-color: var(--color-krem-cien);
}

.home-theme__inner {
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding-inline: var(--container-padding-mobile);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}

.home-theme__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding: var(--space-lg);
  background-color: var(--color-krem-filmowy);
  border: var(--border-hairline);
  border-radius: var(--radius-medium);
}

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

.home-theme__fragment:hover {
  background-color: var(--color-pomarancz-jasny);
}

.home-theme__fragment-title {
  font-size: var(--text-heading-3);
  line-height: var(--leading-heading-3);
  letter-spacing: var(--tracking-heading-3);
  margin-block-end: 0;
}

.home-theme__fragment p {
  margin-block-end: 0;
}

.home-why-card__icon {
  font-size: 2rem;
  line-height: 1;
  margin-block-end: var(--space-xs);
}

.home-cta {
  background-color: var(--color-granat-nocny);
  color: var(--color-krem-filmowy);
  padding-block: var(--space-4xl);
}

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

.home-cta__kicker {
  color: var(--color-pomarancz-kadru);
  margin-block-end: 0;
}

.home-cta__title {
  font-size: var(--text-display-l);
  line-height: var(--leading-display-l);
  letter-spacing: var(--tracking-display-l);
  color: var(--color-krem-filmowy);
  margin-block-end: 0;
}

.home-cta__text {
  font-size: var(--text-body-l);
  line-height: var(--leading-body-l);
  color: var(--color-krem-filmowy);
  max-width: 600px;
  margin-block-end: 0;
}

.home-cta__button {
  margin-block-start: var(--space-xs);
}

@media (min-width: 48rem) {
  .home-hero__text,
  .home-section__header,
  .home-section__header--narrow,
  .home-films__grid,
  .home-plots__grid,
  .home-characters__grid,
  .home-why__grid,
  .home-reviews__list,
  .home-facts__list,
  .home-theme__inner,
  .home-cta__inner {
    padding-inline: var(--container-padding-desktop);
  }
}

@media (max-width: 64rem) {
  .home-hero__collage {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  .home-hero__frame--poker {
    grid-column: span 6;
  }

  .home-hero__frame--cards {
    grid-column: span 3;
  }

  .home-hero__frame--roulette {
    grid-column: span 3;
  }

  .home-hero__frame--casino {
    grid-column: span 6;
  }

  .home-hero__frame--portrait {
    grid-column: span 3;
  }

  .home-films__grid,
  .home-plots__grid,
  .home-characters__grid,
  .home-why__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .home-films__grid > :nth-child(3),
  .home-plots__grid > :nth-child(3),
  .home-characters__grid > :nth-child(3),
  .home-why__grid > :nth-child(3) {
    grid-column: span 2;
  }
}

@media (max-width: 40rem) {
  .home-hero {
    padding-block-start: var(--space-2xl);
    padding-block-end: var(--space-3xl);
  }

  .home-hero__title {
    font-size: clamp(2.25rem, 8vw, 2.75rem);
  }

  .home-hero__collage {
    grid-template-columns: 1fr;
  }

  .home-hero__frame--poker,
  .home-hero__frame--cards,
  .home-hero__frame--roulette,
  .home-hero__frame--casino,
  .home-hero__frame--portrait {
    grid-column: span 1;
    aspect-ratio: 16 / 9;
  }

  .home-hero__frame--portrait {
    aspect-ratio: 1 / 1;
  }

  .home-section {
    padding-block: var(--space-3xl);
  }

  .home-section__header {
    margin-block-end: var(--space-xl);
  }

  .home-films__grid,
  .home-plots__grid,
  .home-characters__grid,
  .home-why__grid {
    grid-template-columns: 1fr;
  }

  .home-films__grid > :nth-child(3),
  .home-plots__grid > :nth-child(3),
  .home-characters__grid > :nth-child(3),
  .home-why__grid > :nth-child(3) {
    grid-column: span 1;
  }

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

  .home-cta__title {
    font-size: clamp(2rem, 7vw, 2.5rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-film-card,
  .home-plot-card,
  .home-character-card,
  .home-why-card {
    transition: none;
  }

  .home-film-card:hover,
  .home-plot-card:hover,
  .home-character-card:hover,
  .home-why-card:hover {
    transform: none;
  }
}