/* Home page scoped styles */
#home-main {
  width: 100%;
}

.home-section-label {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--text-label-size);
  font-weight: var(--text-label-weight);
  text-transform: var(--text-label-transform);
  letter-spacing: var(--text-label-tracking);
  line-height: var(--text-label-leading);
  color: var(--color-burgundy);
  margin-block-end: var(--space-sm);
}

.home-section-label--dark {
  color: var(--color-brass);
}

.home-text-link {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--text-meta-size);
  font-weight: var(--text-meta-weight);
  letter-spacing: 0.02em;
  color: var(--color-burgundy);
  text-decoration: none;
  transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
  margin-block-start: var(--space-md);
}

.home-text-link:hover {
  color: var(--color-burgundy-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.home-text-link--dark {
  color: var(--color-brass-soft);
}

.home-text-link--dark:hover {
  color: var(--color-brass);
}

/* Hero */
.home-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 60vh;
  background-color: var(--color-charcoal);
  overflow: hidden;
}

.home-hero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.home-hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: contrast(1.02);
  transition: filter var(--transition-base);
}

.home-hero:hover .home-hero__image {
  filter: contrast(1.05);
}

.home-hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(20, 20, 20, 0.1) 0%, rgba(20, 20, 20, 0.75) 70%, rgba(20, 20, 20, 0.95) 100%);
  pointer-events: none;
}

.home-hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container-primary-max);
  margin-inline: auto;
  padding: var(--space-xl) var(--container-primary-padding-mobile) var(--space-lg);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-start;
  gap: var(--space-md);
  min-height: 60vh;
}

.home-hero__title {
  font-size: var(--text-display-size);
  font-weight: var(--text-display-weight);
  line-height: var(--text-display-leading);
  letter-spacing: var(--text-display-tracking);
  color: var(--color-ivory-text);
  margin-block-end: 0;
  max-width: 100%;
}

.home-hero__lead {
  font-family: var(--font-body);
  font-size: var(--text-lead-size);
  font-weight: var(--text-lead-weight);
  font-style: var(--text-lead-style);
  line-height: var(--text-lead-leading);
  color: var(--color-ivory-text);
  max-width: 720px;
  margin-block-end: 0;
}

.home-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-block-start: var(--space-sm);
}

/* Featured Review */
.home-featured-review {
  padding-block: var(--space-2xl);
}

.home-featured-review__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: center;
}

.home-featured-review__media {
  display: flex;
  justify-content: center;
}

.home-featured-review__poster {
  width: 100%;
  max-width: 300px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border: 1px solid var(--color-brass);
  filter: contrast(1.02);
  transition: filter var(--transition-base);
}

.home-featured-review__poster:hover {
  filter: contrast(1.05);
}

.home-featured-review__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-items: flex-start;
}

.home-featured-review__heading {
  font-size: var(--text-h2-size);
  font-weight: var(--text-h2-weight);
  line-height: var(--text-h2-leading);
  letter-spacing: var(--text-h2-tracking);
  color: var(--color-ink);
  margin-block-end: 0;
}

.home-featured-review__excerpt {
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  line-height: var(--text-body-leading);
  color: var(--color-ink);
  max-width: 720px;
  margin-block-end: 0;
}

.home-featured-review__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
  font-family: var(--font-sans);
  font-size: var(--text-meta-size);
  font-weight: var(--text-meta-weight);
  line-height: var(--text-meta-leading);
  color: var(--color-ink-muted);
}

.home-meta-item {
  display: inline-flex;
  align-items: center;
}

.home-meta-item:not(:last-child)::after {
  content: '•';
  margin-inline-start: var(--space-md);
  color: var(--color-brass);
}

/* Top 10 */
.home-top10 {
  padding-block: var(--space-2xl);
}

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

.home-top10__heading {
  font-size: var(--text-h2-size);
  font-weight: var(--text-h2-weight);
  line-height: var(--text-h2-leading);
  letter-spacing: var(--text-h2-tracking);
  color: var(--color-ivory-text);
  margin-block-end: 0;
}

.home-top10__intro {
  font-family: var(--font-body);
  font-size: var(--text-lead-size);
  font-weight: var(--text-lead-weight);
  font-style: var(--text-lead-style);
  line-height: var(--text-lead-leading);
  color: var(--color-ivory-text-muted);
  max-width: 720px;
  margin-block-end: 0;
}

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

.home-top10__item {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr);
  gap: var(--space-md);
  align-items: center;
  padding: var(--space-sm);
  border: 1px solid var(--color-brass-soft);
  background-color: var(--color-charcoal-soft);
  transition: border-color var(--transition-fast);
}

.home-top10__item:hover {
  border-color: var(--color-brass);
}

.home-top10__numeral {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 700;
  line-height: 1;
  color: var(--color-burgundy);
  text-align: center;
}

.home-top10__thumb {
  width: 100%;
  max-width: 80px;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border: 1px solid var(--color-brass-soft);
  filter: contrast(1.02);
  transition: filter var(--transition-base);
}

.home-top10__thumb:hover {
  filter: contrast(1.05);
}

.home-top10__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  min-width: 0;
}

.home-top10__film-title {
  font-size: var(--text-h3-size);
  font-weight: var(--text-h3-weight);
  line-height: var(--text-h3-leading);
  color: var(--color-ivory-text);
  margin-block-end: 0;
  transition: color var(--transition-fast);
}

.home-top10__item:hover .home-top10__film-title {
  color: var(--color-brass-soft);
}

.home-top10__verdict {
  font-family: var(--font-body);
  font-size: var(--text-body-small-size);
  line-height: var(--text-body-small-leading);
  color: var(--color-ivory-text-muted);
  margin-block-end: 0;
}

/* Categories */
.home-categories {
  padding-block: var(--space-2xl);
}

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

.home-categories__heading {
  font-size: var(--text-h2-size);
  font-weight: var(--text-h2-weight);
  line-height: var(--text-h2-leading);
  letter-spacing: var(--text-h2-tracking);
  color: var(--color-ink);
  margin-block-end: 0;
}

.home-categories__grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--space-md);
}

.home-category-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-md);
  background-color: var(--color-ivory-muted);
  border: 1px solid rgba(26, 26, 26, 0.12);
  text-decoration: none;
  transition: border-color var(--transition-fast);
}

.home-category-card:hover {
  border-color: var(--color-brass);
  text-decoration: none;
}

.home-category-card__label {
  font-family: var(--font-sans);
  font-size: var(--text-label-size);
  font-weight: var(--text-label-weight);
  text-transform: var(--text-label-transform);
  letter-spacing: var(--text-label-tracking);
  line-height: var(--text-label-leading);
  color: var(--color-burgundy);
}

.home-category-card__title {
  font-size: var(--text-h3-size);
  font-weight: var(--text-h3-weight);
  line-height: var(--text-h3-leading);
  color: var(--color-ink);
  margin-block-end: 0;
  transition: color var(--transition-fast);
}

.home-category-card:hover .home-category-card__title {
  color: var(--color-burgundy);
}

.home-category-card__desc {
  font-family: var(--font-body);
  font-size: var(--text-body-small-size);
  line-height: var(--text-body-small-leading);
  color: var(--color-ink-muted);
  margin-block-end: 0;
}

/* Latest Reviews */
.home-latest {
  padding-block: var(--space-2xl);
}

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

.home-latest__heading {
  font-size: var(--text-h2-size);
  font-weight: var(--text-h2-weight);
  line-height: var(--text-h2-leading);
  letter-spacing: var(--text-h2-tracking);
  color: var(--color-ivory-text);
  margin-block-end: 0;
}

.home-latest__grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--space-md);
}

.home-review-card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-charcoal-soft);
  border: 1px solid var(--color-brass-soft);
  transition: border-color var(--transition-fast);
}

.home-review-card:hover {
  border-color: var(--color-brass);
}

.home-review-card__poster {
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-bottom: 1px solid var(--color-brass-soft);
  filter: contrast(1.02);
  transition: filter var(--transition-base);
}

.home-review-card__poster:hover {
  filter: contrast(1.05);
}

.home-review-card__content {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-md);
}

.home-review-card__title {
  font-size: var(--text-h3-size);
  font-weight: var(--text-h3-weight);
  line-height: var(--text-h3-leading);
  color: var(--color-ivory-text);
  margin-block-end: 0;
  transition: color var(--transition-fast);
}

.home-review-card:hover .home-review-card__title {
  color: var(--color-brass-soft);
}

.home-review-card__excerpt {
  font-family: var(--font-body);
  font-size: var(--text-body-small-size);
  line-height: var(--text-body-small-leading);
  color: var(--color-ivory-text-muted);
  margin-block-end: 0;
}

.home-review-card__meta {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-sans);
  font-size: var(--text-meta-size);
  font-weight: var(--text-meta-weight);
  line-height: var(--text-meta-leading);
  color: var(--color-ivory-text-muted);
  margin-block-start: var(--space-2xs);
}

/* Thematic Spotlight */
.home-thematic {
  padding-block: var(--space-2xl);
}

.home-thematic__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-items: flex-start;
}

.home-thematic__heading {
  font-size: var(--text-h2-size);
  font-weight: var(--text-h2-weight);
  line-height: var(--text-h2-leading);
  letter-spacing: var(--text-h2-tracking);
  color: var(--color-ink);
  margin-block-end: 0;
}

.home-thematic__article-title {
  font-size: var(--text-h3-size);
  font-weight: var(--text-h3-weight);
  line-height: var(--text-h3-leading);
  color: var(--color-burgundy);
  margin-block-end: 0;
}

.home-thematic__excerpt {
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  line-height: var(--text-body-leading);
  color: var(--color-ink);
  max-width: 720px;
  margin-block-end: 0;
  border-inline-start: 2px solid var(--color-burgundy);
  padding-inline-start: var(--space-md);
}

/* Character Spotlight */
.home-character {
  padding-block: var(--space-2xl);
}

.home-character__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: center;
}

.home-character__media {
  display: flex;
  justify-content: center;
}

.home-character__portrait {
  width: 100%;
  max-width: 300px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border: 1px solid var(--color-brass);
  filter: contrast(1.02);
  transition: filter var(--transition-base);
}

.home-character__portrait:hover {
  filter: contrast(1.05);
}

.home-character__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-items: flex-start;
}

.home-character__heading {
  font-size: var(--text-h2-size);
  font-weight: var(--text-h2-weight);
  line-height: var(--text-h2-leading);
  letter-spacing: var(--text-h2-tracking);
  color: var(--color-ivory-text);
  margin-block-end: 0;
}

.home-character__role {
  font-family: var(--font-sans);
  font-size: var(--text-label-size);
  font-weight: var(--text-label-weight);
  text-transform: var(--text-label-transform);
  letter-spacing: var(--text-label-tracking);
  line-height: var(--text-label-leading);
  color: var(--color-brass);
  margin-block-end: 0;
}

.home-character__bio {
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  line-height: var(--text-body-leading);
  color: var(--color-ivory-text);
  max-width: 720px;
  margin-block-end: 0;
}

/* Film Facts */
.home-facts {
  padding-block: var(--space-2xl);
}

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

.home-facts__heading {
  font-size: var(--text-h2-size);
  font-weight: var(--text-h2-weight);
  line-height: var(--text-h2-leading);
  letter-spacing: var(--text-h2-tracking);
  color: var(--color-ink);
  margin-block-end: 0;
}

.home-facts__grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: var(--space-md);
}

.home-fact-panel {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-md);
  background-color: var(--color-ivory-muted);
  border-inline-start: 2px solid var(--color-burgundy);
  transition: border-color var(--transition-fast);
}

.home-fact-panel:hover {
  border-inline-start-color: var(--color-brass);
}

.home-fact-panel__label {
  font-family: var(--font-sans);
  font-size: var(--text-label-size);
  font-weight: var(--text-label-weight);
  text-transform: var(--text-label-transform);
  letter-spacing: var(--text-label-tracking);
  line-height: var(--text-label-leading);
  color: var(--color-burgundy);
  margin-block-end: 0;
}

.home-fact-panel__text {
  font-family: var(--font-body);
  font-size: var(--text-body-small-size);
  line-height: var(--text-body-small-leading);
  color: var(--color-ink);
  margin-block-end: 0;
}

/* Behind the Scenes Teaser */
.home-bts {
  padding-block: var(--space-2xl);
}

.home-bts__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-items: flex-start;
}

.home-bts__heading {
  font-size: var(--text-h2-size);
  font-weight: var(--text-h2-weight);
  line-height: var(--text-h2-leading);
  letter-spacing: var(--text-h2-tracking);
  color: var(--color-ivory-text);
  margin-block-end: 0;
}

.home-bts__excerpt {
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  line-height: var(--text-body-leading);
  color: var(--color-ivory-text);
  max-width: 720px;
  margin-block-end: 0;
  border-inline-start: 2px solid var(--color-brass);
  padding-inline-start: var(--space-md);
}

/* Editorial Quote */
.home-quote {
  padding-block: var(--space-2xl);
}

.home-quote__inner {
  display: flex;
  justify-content: center;
}

.home-quote__block {
  max-width: 800px;
  text-align: center;
  margin-block-end: 0;
  padding-inline-start: 0;
  border-inline-start: none;
}

.home-quote__text {
  font-family: var(--font-heading);
  font-size: var(--text-quote-size);
  font-weight: var(--text-quote-weight);
  font-style: var(--text-quote-style);
  line-height: var(--text-quote-leading);
  color: var(--color-ivory-text);
  margin-block-end: var(--space-md);
}

.home-quote__attribution {
  font-family: var(--font-sans);
  font-size: var(--text-meta-size);
  font-weight: var(--text-meta-weight);
  line-height: var(--text-meta-leading);
  color: var(--color-brass-soft);
}

/* Call to Explore */
.home-cta {
  padding-block: var(--space-2xl);
}

.home-cta__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  align-items: center;
  text-align: center;
  max-width: 600px;
  margin-inline: auto;
}

.home-cta__heading {
  font-size: var(--text-h2-size);
  font-weight: var(--text-h2-weight);
  line-height: var(--text-h2-leading);
  letter-spacing: var(--text-h2-tracking);
  color: var(--color-ink);
  margin-block-end: 0;
}

.home-cta__text {
  font-family: var(--font-body);
  font-size: var(--text-body-size);
  line-height: var(--text-body-leading);
  color: var(--color-ink);
  margin-block-end: 0;
}

.home-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
}

/* Gambling Disclaimer */
.home-disclaimer {
  padding-block: var(--space-lg);
  border-top: 1px solid rgba(26, 26, 26, 0.12);
}

.home-disclaimer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.home-disclaimer__text {
  font-family: var(--font-body);
  font-size: var(--text-body-small-size);
  line-height: var(--text-body-small-leading);
  color: var(--color-warning);
  margin-block-end: 0;
}

/* Tablet */
@media (min-width: 640px) {
  .home-hero__content {
    padding-inline: var(--container-primary-padding-desktop);
  }

  .home-top10__item {
    grid-template-columns: 80px 100px minmax(0, 1fr);
  }

  .home-categories__grid,
  .home-latest__grid,
  .home-facts__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Desktop */
@media (min-width: 1024px) {
  .home-hero {
    min-height: 70vh;
  }

  .home-hero__content {
    min-height: 70vh;
    max-width: var(--container-primary-max);
  }

  .home-hero__title {
    max-width: 70%;
  }

  .home-featured-review__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
    gap: var(--space-2xl);
  }

  .home-featured-review__media {
    justify-content: flex-start;
  }

  .home-featured-review__poster {
    max-width: 300px;
  }

  .home-top10__item {
    grid-template-columns: 100px 120px minmax(0, 1fr);
    gap: var(--space-lg);
  }

  .home-top10__thumb {
    max-width: 120px;
  }

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

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

  .home-character__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
    gap: var(--space-2xl);
  }

  .home-character__media {
    justify-content: flex-start;
  }

  .home-character__portrait {
    max-width: 300px;
  }

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

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .home-hero__image,
  .home-featured-review__poster,
  .home-top10__thumb,
  .home-review-card__poster,
  .home-character__portrait {
    transition: none;
  }
}