/* ===== Izellia Home Page Styles ===== */

.home-page {
  display: block;
}

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

@media (max-width: 767px) {
  .home-section {
    padding-block: var(--space-2xl);
  }
}

/* ===== Hero Block ===== */
.home-hero {
  position: relative;
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url('/src/media/hero-wayward-souls-dungeon.webp');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: var(--space-2xl) var(--container-pad-mobile);
  overflow: hidden;
}

.home-hero__overlay {
  position: absolute;
  inset: 0;
  background-color: rgba(11, 13, 16, 0.55);
  z-index: 1;
}

.home-hero__content {
  position: relative;
  z-index: 2;
  max-width: 720px;
  width: 100%;
  margin-inline: auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}

.home-hero__eyebrow {
  color: var(--torch);
  margin-block-end: 0;
}

.home-hero__title {
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--parchment);
  margin-block-end: 0;
  max-width: 720px;
}

.home-hero__subtitle {
  font-size: 1.1875rem;
  line-height: 1.7;
  color: var(--ash);
  margin-block-end: 0;
  max-width: 600px;
  margin-inline: auto;
}

.home-hero__cta {
  min-height: 44px;
  white-space: normal;
  text-align: center;
}

@media (max-width: 767px) {
  .home-hero {
    min-height: 50vh;
    align-items: flex-end;
    padding-bottom: var(--space-2xl);
  }

  .home-hero__content {
    gap: var(--space-md);
  }

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

  .home-hero__subtitle {
    font-size: 1.0625rem;
  }
}

@media (max-width: 480px) {
  .home-hero__cta {
    width: 100%;
  }
}

/* ===== Review Intro ===== */
.home-review-intro {
  background-color: var(--void);
}

.home-review-intro__inner {
  max-width: var(--measure-narrow);
  margin-inline: auto;
  padding-inline: var(--container-pad-mobile);
  text-align: left;
}

.home-review-intro__lead {
  font-size: 1.1875rem;
  line-height: 1.7;
  color: var(--parchment);
  margin-block-end: var(--space-lg);
}

.home-review-intro__meta {
  color: var(--ash);
  margin-block-end: 0;
}

@media (min-width: 768px) {
  .home-review-intro__inner {
    padding-inline: var(--container-pad-desktop);
  }
}

/* ===== Character Classes ===== */
.home-classes {
  background-color: var(--void);
}

.home-classes__container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad-mobile);
}

.home-classes__intro {
  max-width: var(--measure-narrow);
  margin-block-end: var(--space-xl);
  color: var(--parchment);
}

.home-classes__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
  align-items: stretch;
}

.home-class-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg);
  background-color: var(--crypt);
  border: 1px solid var(--mortar);
  border-radius: var(--radius-md);
  min-width: 0;
  transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.home-class-card:hover {
  border-color: var(--torch);
  background-color: var(--stone);
}

.home-class-card h3 {
  margin-block-end: 0;
  color: var(--parchment);
}

.home-class-card p {
  margin-block-end: 0;
  color: var(--parchment);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.home-class-card__icon {
  width: 44px;
  height: 44px;
  background-color: var(--stone);
  border: 1px solid var(--mortar);
  border-radius: var(--radius-sm);
  display: block;
  flex-shrink: 0;
}

.home-class-card__icon--warrior {
  background-image: linear-gradient(135deg, var(--torch) 0%, var(--torch) 50%, var(--stone) 50%, var(--stone) 100%);
}

.home-class-card__icon--mage {
  background-image: linear-gradient(135deg, var(--ash) 0%, var(--ash) 50%, var(--stone) 50%, var(--stone) 100%);
}

.home-class-card__icon--rogue {
  background-image: linear-gradient(135deg, var(--blood) 0%, var(--blood) 50%, var(--stone) 50%, var(--stone) 100%);
}

.home-class-card__link {
  margin-block-start: auto;
  color: var(--torch);
  text-decoration: underline;
  text-decoration-color: var(--torch);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}

.home-class-card__link:hover {
  color: var(--ember);
  text-decoration-color: var(--ember);
}

@media (max-width: 991px) {
  .home-classes__grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
}

@media (min-width: 768px) {
  .home-classes__container {
    padding-inline: var(--container-pad-desktop);
  }
}

/* ===== Procedural Labyrinths ===== */
.home-labyrinths {
  background-color: var(--crypt);
  border-block: 1px solid var(--mortar);
}

.home-labyrinths__container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad-mobile);
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: var(--space-2xl);
  align-items: start;
}

.home-labyrinths__text {
  min-width: 0;
}

.home-labyrinths__text p {
  color: var(--parchment);
  margin-block-end: 0;
}

.home-labyrinths__quote {
  min-width: 0;
  max-width: 400px;
  justify-self: end;
  width: 100%;
}

.home-labyrinths__quote .pull-quote {
  margin-block-end: var(--space-md);
}

.home-labyrinths__divider {
  width: 100%;
  height: 8px;
  background-image: repeating-linear-gradient(90deg, var(--mortar) 0 8px, transparent 8px 16px);
  opacity: 0.6;
  margin-block-start: var(--space-md);
}

@media (max-width: 991px) {
  .home-labyrinths__container {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .home-labyrinths__quote {
    max-width: 100%;
    justify-self: start;
  }
}

@media (min-width: 768px) {
  .home-labyrinths__container {
    padding-inline: var(--container-pad-desktop);
  }
}

/* ===== Gear and Magic ===== */
.home-gear {
  background-color: var(--void);
}

.home-gear__container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad-mobile);
  display: grid;
  grid-template-columns: 8fr 4fr;
  gap: var(--space-2xl);
  align-items: start;
}

.home-gear__text {
  min-width: 0;
}

.home-gear__text p {
  color: var(--parchment);
  margin-block-end: var(--space-md);
}

.home-gear__text p:last-of-type {
  margin-block-end: var(--space-lg);
}

.home-gear__link {
  color: var(--torch);
  text-decoration: underline;
  text-decoration-color: var(--torch);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}

.home-gear__link:hover {
  color: var(--ember);
  text-decoration-color: var(--ember);
}

.home-gear__media {
  margin-block-end: 0;
  min-width: 0;
}

.home-gear__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--mortar);
  border-radius: var(--radius-0);
  image-rendering: pixelated;
  display: block;
}

.home-gear__media figcaption {
  color: var(--ash);
  margin-block-start: var(--space-xs);
}

@media (max-width: 991px) {
  .home-gear__container {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
}

@media (min-width: 768px) {
  .home-gear__container {
    padding-inline: var(--container-pad-desktop);
  }
}

/* ===== Gameplay Tips ===== */
.home-tips {
  background-color: var(--crypt);
  border-block: 1px solid var(--mortar);
}

.home-tips__inner {
  max-width: var(--measure-narrow);
  margin-inline: auto;
  padding-inline: var(--container-pad-mobile);
  text-align: left;
}

.home-tips__lead {
  color: var(--parchment);
  margin-block-end: var(--space-md);
}

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

.home-tips__list li {
  position: relative;
  padding-inline-start: var(--space-lg);
  color: var(--parchment);
  margin-block-end: 0;
  line-height: 1.7;
}

.home-tips__list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 8px;
  height: 8px;
  background-color: var(--torch);
  border-radius: 0;
}

@media (min-width: 768px) {
  .home-tips__inner {
    padding-inline: var(--container-pad-desktop);
  }
}

/* ===== Enemies and Beasts ===== */
.home-enemies {
  background-color: var(--void);
}

.home-enemies__container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad-mobile);
  display: grid;
  grid-template-columns: 4fr 8fr;
  gap: var(--space-2xl);
  align-items: start;
}

.home-enemies__media {
  margin-block-end: 0;
  min-width: 0;
}

.home-enemies__media img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--mortar);
  border-radius: var(--radius-0);
  image-rendering: pixelated;
  display: block;
}

.home-enemies__media figcaption {
  color: var(--ash);
  margin-block-start: var(--space-xs);
}

.home-enemies__text {
  min-width: 0;
}

.home-enemies__text p {
  color: var(--parchment);
  margin-block-end: var(--space-lg);
}

.home-enemies__link {
  color: var(--torch);
  text-decoration: underline;
  text-decoration-color: var(--torch);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}

.home-enemies__link:hover {
  color: var(--ember);
  text-decoration-color: var(--ember);
}

@media (max-width: 991px) {
  .home-enemies__container {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }

  .home-enemies__media {
    order: -1;
  }
}

@media (min-width: 768px) {
  .home-enemies__container {
    padding-inline: var(--container-pad-desktop);
  }
}

/* ===== Final Bosses ===== */
.home-bosses {
  background-color: var(--crypt);
  border-block: 1px solid var(--mortar);
}

.home-bosses__inner {
  max-width: var(--measure-narrow);
  margin-inline: auto;
  padding-inline: var(--container-pad-mobile);
  text-align: left;
}

.home-bosses__callout {
  background-color: var(--void);
  border: 1px solid var(--blood);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-block-end: 0;
}

.home-bosses__warning-label {
  color: var(--blood);
  font-family: var(--font-heading);
  font-size: 0.75rem;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-block-end: var(--space-xs);
}

.home-bosses__callout p:last-child {
  color: var(--parchment);
  margin-block-end: 0;
}

@media (min-width: 768px) {
  .home-bosses__inner {
    padding-inline: var(--container-pad-desktop);
  }
}

/* ===== Updates and Community ===== */
.home-updates {
  background-color: var(--void);
}

.home-updates__inner {
  max-width: var(--measure-narrow);
  margin-inline: auto;
  padding-inline: var(--container-pad-mobile);
  text-align: left;
}

.home-updates__inner > p {
  color: var(--parchment);
  margin-block-end: var(--space-lg);
}

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

.home-updates__list li {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  color: var(--parchment);
  margin-block-end: 0;
  line-height: 1.7;
}

.home-updates__list .mono {
  color: var(--torch);
  font-family: var(--font-mono);
  font-size: 0.875rem;
  line-height: 1.5;
  font-weight: 400;
}

.home-updates__link {
  color: var(--torch);
  text-decoration: underline;
  text-decoration-color: var(--torch);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: color var(--transition-fast), text-decoration-color var(--transition-fast);
}

.home-updates__link:hover {
  color: var(--ember);
  text-decoration-color: var(--ember);
}

@media (min-width: 768px) {
  .home-updates__inner {
    padding-inline: var(--container-pad-desktop);
  }
}

/* ===== Final Download CTA ===== */
.home-download {
  background-color: var(--crypt);
  border-block: 1px solid var(--mortar);
  padding-block: var(--space-3xl);
}

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

.home-download__eyebrow {
  color: var(--torch);
  margin-block-end: 0;
}

.home-download__text {
  color: var(--parchment);
  margin-block-end: 0;
}

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

.home-download__cta {
  min-height: 44px;
  white-space: normal;
  text-align: center;
}

@media (max-width: 480px) {
  .home-download__cta {
    width: 100%;
  }
}

@media (min-width: 768px) {
  .home-download__inner {
    padding-inline: var(--container-pad-desktop);
  }
}

/* ===== Scroll Reveal ===== */
.home-reveal {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 240ms ease-out, transform 240ms ease-out;
}

.home-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .home-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}