/* ==========================================================
   PROJECT XAMUCO
   File: legend.css
   Version: 1.0.0
   Description: Chapter II · La Leyenda
========================================================== */

/* ======================================================
   LEGEND
====================================================== */

.legend {
  position: relative;

  background: var(--color-background);

  color: var(--color-black);
}

/* ======================================================
   CHAPTER
====================================================== */

.chapter {
  max-width: 48rem;

  margin: 0 auto var(--space-5xl);

  text-align: center;
}

/* ======================================================
   CHAPTER NUMBER
====================================================== */

.chapter__number {
  display: inline-block;

  margin-bottom: var(--space-md);

  font-size: var(--fs-xs);

  letter-spacing: 0.35em;

  text-transform: uppercase;

  color: var(--color-primary);
}

/* ======================================================
   CHAPTER TITLE
====================================================== */

.chapter__title {
  margin-bottom: var(--space-xl);

  color: var(--color-primary);
}

/* ======================================================
   CHAPTER EPIGRAPH
====================================================== */

.chapter__epigraph {
  max-width: 34rem;

  margin: 0 auto;

  font-family: var(--font-body);

  font-size: clamp(1.2rem, 2vw, 1.5rem);

  font-style: italic;

  line-height: 1.8;

  color: var(--color-dark);

  opacity: 0.85;
}

/* ======================================================
   INTRODUCTION
====================================================== */

.legend__intro {
  max-width: 30rem;

  margin: 0 auto var(--space-5xl);

  text-align: center;
}

/* ======================================================
   STORY
====================================================== */

.legend__story {
  max-width: 38rem;

  margin: 0 auto;

  display: flex;

  flex-direction: column;

  gap: var(--space-xl);
}

/* ======================================================
   STORY PARAGRAPHS
====================================================== */

.legend__story p {
  margin: 0;

  font-size: var(--fs-md);

  line-height: var(--lh-relaxed);

  color: var(--color-dark);
}

/* ======================================================
   CONTAINER
====================================================== */

.legend .container {
  max-width: 1200px;
}

/* ======================================================
   HEADER
====================================================== */

.legend__header {
  text-align: center;

  max-width: 48rem;

  margin: 0 auto var(--space-4xl);
}

/* ======================================================
   TITLE
====================================================== */

.legend__title {
  margin-top: var(--space-sm);

  margin-bottom: var(--space-lg);
}

/* ======================================================
   BODY
====================================================== */

.legend__body {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: var(--space-5xl);

  align-items: center;

  margin-bottom: var(--space-5xl);
}

/* ======================================================
   TEXT
====================================================== */

.legend__text {
  display: flex;

  flex-direction: column;

  gap: var(--space-lg);
}

/* ======================================================
   ART
====================================================== */

.legend__art {
  aspect-ratio: 4 / 5;

  border: 1px solid rgba(0, 0, 0, 0.08);

  background:
    linear-gradient(rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.3)),
    var(--color-background);

  border-radius: 8px;
}

/* ======================================================
   QUOTE
====================================================== */

.legend__quote {
  max-width: 42rem;

  margin: calc(var(--space-5xl) * 1.5) auto;

  text-align: center;

  border: none;

  padding: 0;

  font-family: var(--font-heading);

  font-size: clamp(2rem, 4vw, 3rem);

  color: var(--color-primary);

  line-height: 1.15;
}

/* ======================================================
   NEXT
====================================================== */

.legend__next {
  margin-top: var(--space-4xl);

  text-align: center;
}

.legend__next-link {
  display: inline-flex;

  flex-direction: column;

  align-items: center;

  gap: var(--space-sm);

  text-decoration: none;

  color: var(--color-dark);

  transition: transform 0.3s ease;
}

.legend__next-link:hover {
  transform: translateY(6px);
}

/* ======================================================
   STORY BREAK
====================================================== */

.story-break {
  display: flex;

  justify-content: center;

  align-items: center;

  margin-block: var(--space-5xl);
}

.story-break__icon {
  width: 40rem;

  height: auto;

  opacity: 0.85;
}

/* ======================================================
   EMPHASIS
====================================================== */

.legend__emphasis {
  text-align: center;

  font-style: italic;

  letter-spacing: 0.08em;

  margin-block: var(--space-2xl);

  color: var(--color-primary);
}