/* ===== Page-owned styles for home ===== */

/* Hero */
.hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2xl);
  min-height: 80vh;
  padding: var(--space-3xl) var(--container-padding-mobile);
  background-color: var(--color-obsidian);
  overflow: hidden;
}

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-lg);
  max-width: 60%;
  min-width: 0;
  z-index: 2;
}

.hero__kicker {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-glowing-gold);
  margin: 0;
}

.hero__title {
  font-size: var(--text-display);
  line-height: var(--leading-display);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-mist);
  margin: 0;
  text-wrap: balance;
}

.hero__subtitle {
  font-size: var(--text-body-large);
  line-height: var(--leading-body-large);
  color: var(--color-fog);
  max-width: 36rem;
  margin: 0;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-md);
}

.hero__actions > * {
  min-width: 0;
}

.hero__media {
  position: relative;
  width: 100%;
  min-width: 0;
  z-index: 1;
}

.hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-md);
  box-shadow: 0 0 40px rgba(107, 63, 160, 0.25);
}

/* Section kicker */
.section-kicker {
  font-family: var(--font-body);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-glowing-gold);
  margin-block-end: var(--space-sm);
}

/* World section */
.world__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-2xl);
  align-items: center;
}

.world__copy {
  min-width: 0;
}

.world__copy h2 {
  margin-block-end: var(--space-lg);
}

.world__copy p {
  margin-block-end: var(--space-md);
}

.world__copy p:last-child {
  margin-block-end: 0;
}

.world__media {
  min-width: 0;
  margin: 0;
}

.world__media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  border: var(--border-default);
}

/* Monsters section */
.monsters__header {
  text-align: center;
}

.monsters__header .divider {
  justify-content: center;
}

.monsters__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xl);
  margin-block-end: var(--space-xl);
}

.monster-card {
  background-color: var(--color-void);
  border: var(--border-default);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
  transition: transform var(--transition-fast), box-shadow var(--transition-fast);
}

.monster-card:hover,
.monster-card:focus-within {
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow-violet);
}

.monster-card__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--color-deep-indigo);
}

.monster-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: filter var(--transition-fast);
}

.monster-card:hover .monster-card__image img {
  filter: brightness(1.05);
}

.monster-card__body {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  min-width: 0;
}

.monster-card__body h3 {
  margin: 0;
  font-size: var(--text-h3);
  line-height: var(--leading-h3);
  font-weight: 600;
  color: var(--color-mist);
}

.monster-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-caption);
  line-height: var(--leading-caption);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-fog);
  margin: 0;
}

.monster-card__body p:last-child {
  margin: 0;
  color: var(--color-fog);
  font-size: var(--text-small);
  line-height: var(--leading-small);
}

.monsters__summary {
  max-width: 70%;
  margin-inline: auto;
  text-align: center;
  color: var(--color-fog);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

/* Elements section */
.elements__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-2xl);
  align-items: center;
}

.elements__copy {
  min-width: 0;
}

.elements__copy h2 {
  margin-block-end: var(--space-lg);
}

.elements__copy p {
  margin-block-end: var(--space-md);
}

.elements__copy p:last-child {
  margin-block-end: 0;
}

.elements__diagram {
  position: relative;
  min-width: 0;
  aspect-ratio: 1 / 1;
  max-width: 420px;
  width: 100%;
  margin-inline: auto;
  background-color: var(--color-void);
  border: var(--border-default);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

.element-node {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: 50%;
  font-family: var(--font-heading);
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-mist);
  border: 2px solid var(--color-rune-line);
  background-color: var(--color-deep-indigo);
  z-index: 2;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.element-node:hover {
  border-color: var(--color-glowing-gold);
  box-shadow: var(--shadow-glow-gold);
}

.element-node--fire { top: 5%; left: 50%; transform: translateX(-50%); border-color: #D45A3A; }
.element-node--water { bottom: 5%; left: 15%; border-color: #3A7BD4; }
.element-node--wind { bottom: 5%; right: 15%; border-color: #6BBF6B; }
.element-node--light { top: 25%; left: 8%; border-color: #E8D44D; }
.element-node--dark { top: 25%; right: 8%; border-color: #7A4D9B; }

.element-link {
  position: absolute;
  background-color: var(--color-rune-line);
  height: 2px;
  transform-origin: left center;
  z-index: 1;
}

.element-link--fire-water {
  top: 60%;
  left: 50%;
  width: 30%;
  transform: rotate(55deg);
}

.element-link--water-wind {
  bottom: 30%;
  left: 30%;
  width: 40%;
  transform: rotate(-15deg);
}

.element-link--wind-fire {
  top: 40%;
  right: 30%;
  width: 30%;
  transform: rotate(35deg);
}

.element-link--light-dark {
  top: 50%;
  left: 20%;
  width: 60%;
  transform: rotate(0deg);
}

/* Runes section */
.runes__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-2xl);
  align-items: center;
}

.runes__copy {
  min-width: 0;
}

.runes__copy h2 {
  margin-block-end: var(--space-lg);
}

.runes__copy p {
  margin-block-end: var(--space-md);
}

.runes__copy p:last-child {
  margin-block-end: 0;
}

.runes__media {
  min-width: 0;
  margin: 0;
}

.runes__media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  border: var(--border-default);
}

/* Battles section */
.battles__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-2xl);
  align-items: center;
}

.battles__copy {
  min-width: 0;
}

.battles__copy h2 {
  margin-block-end: var(--space-lg);
}

.battles__copy p {
  margin-block-end: var(--space-md);
}

.battles__copy p:last-child {
  margin-block-end: 0;
}

.battles__media {
  min-width: 0;
  margin: 0;
}

.battles__media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  border: var(--border-default);
}

/* Adventures section */
.adventures__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-2xl);
  align-items: center;
}

.adventures__copy {
  min-width: 0;
}

.adventures__copy h2 {
  margin-block-end: var(--space-lg);
}

.adventures__copy p {
  margin-block-end: var(--space-md);
}

.adventures__copy p:last-child {
  margin-block-end: 0;
}

.adventures__media {
  min-width: 0;
  margin: 0;
}

.adventures__media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  border: var(--border-default);
}

/* Guilds section */
.guilds__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-2xl);
  align-items: center;
}

.guilds__copy {
  min-width: 0;
}

.guilds__copy h2 {
  margin-block-end: var(--space-lg);
}

.guilds__copy p {
  margin-block-end: var(--space-md);
}

.guilds__copy p:last-child {
  margin-block-end: 0;
}

.guilds__media {
  min-width: 0;
  margin: 0;
}

.guilds__media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  border: var(--border-default);
}

/* Arena section */
.arena__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-2xl);
  align-items: center;
}

.arena__copy {
  min-width: 0;
}

.arena__copy h2 {
  margin-block-end: var(--space-lg);
}

.arena__copy p {
  margin-block-end: var(--space-md);
}

.arena__copy p:last-child {
  margin-block-end: 0;
}

.arena__media {
  min-width: 0;
  margin: 0;
}

.arena__media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  border: var(--border-default);
}

/* SWC section */
.swc__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-2xl);
  align-items: center;
}

.swc__copy {
  min-width: 0;
}

.swc__copy h2 {
  margin-block-end: var(--space-lg);
}

.swc__copy p {
  margin-block-end: var(--space-md);
}

.swc__copy p:last-child {
  margin-block-end: 0;
}

.swc__media {
  min-width: 0;
  margin: 0;
}

.swc__media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  border: var(--border-default);
}

/* Gallery section */
.gallery__header {
  text-align: center;
}

.gallery__header .divider {
  justify-content: center;
}

.gallery__intro {
  max-width: 70%;
  margin-inline: auto;
  text-align: center;
  margin-block-end: var(--space-2xl);
  color: var(--color-fog);
}

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

.gallery__item {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
  border: var(--border-default);
  transition: transform var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.gallery__item:hover,
.gallery__item:focus-within {
  transform: scale(1.02);
  border-color: var(--color-glowing-gold);
  box-shadow: var(--shadow-glow-gold);
}

.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-fast);
}

.gallery__item:hover img {
  transform: scale(1.05);
}

.gallery__item--wide {
  grid-column: span 2;
  aspect-ratio: 16 / 9;
}

.gallery__item--square {
  aspect-ratio: 1 / 1;
}

.gallery__item--standard {
  aspect-ratio: 4 / 3;
}

/* Download section */
.download__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-lg);
  padding-block: var(--space-4xl);
}

.download__inner h2 {
  margin: 0;
}

.download__text {
  max-width: 60%;
  margin-inline: auto;
  color: var(--color-fog);
  margin: 0;
}

.download__button {
  margin-top: var(--space-md);
}

/* Responsive */
@media (max-width: 1024px) {
  .hero {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    min-height: auto;
    padding-block: var(--space-2xl);
  }

  .hero__content {
    max-width: 100%;
  }

  .hero__media {
    order: -1;
  }

  .hero__image {
    max-height: 50vh;
    object-position: center;
  }

  .world__grid,
  .runes__grid,
  .battles__grid,
  .adventures__grid,
  .guilds__grid,
  .arena__grid,
  .swc__grid {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .world__media,
  .runes__media,
  .battles__media,
  .adventures__media,
  .guilds__media,
  .arena__media,
  .swc__media {
    order: -1;
  }

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

  .elements__diagram {
    order: -1;
  }

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

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

  .gallery__item--wide {
    grid-column: span 2;
  }
}

@media (max-width: 768px) {
  .monsters__grid {
    grid-template-columns: 1fr;
  }

  .monsters__summary {
    max-width: 100%;
    text-align: left;
  }

  .gallery__grid {
    grid-template-columns: 1fr;
  }

  .gallery__item--wide {
    grid-column: span 1;
  }

  .gallery__intro {
    max-width: 100%;
    text-align: left;
  }

  .download__text {
    max-width: 90%;
  }

  .hero__title {
    font-size: clamp(2.5rem, 10vw, 4rem);
  }
}

@media (max-width: 480px) {
  .hero {
    padding-inline: var(--container-padding-mobile);
  }

  .hero__actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero__actions .btn {
    width: 100%;
  }

  .element-node {
    width: 3.5rem;
    height: 3.5rem;
    font-size: 0.75rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__image,
  .monster-card__image img,
  .gallery__item img {
    transition: none;
  }

  .monster-card:hover,
  .monster-card:focus-within,
  .gallery__item:hover,
  .gallery__item:focus-within {
    transform: none;
    box-shadow: none;
  }
}