/* Page-owned styles for complete-mobile-game-review */

.review-page {
  --review-section-gap: var(--space-8);
  --review-section-gap-desktop: var(--space-9);
  --review-copy-max: 68ch;
  --review-copy-max-narrow: 60ch;
  --review-copy-max-centered: 680px;
  --review-border: 1px solid var(--color-antique-gold-40);
  --review-border-emphasis: 2px solid var(--color-antique-gold);
  --review-radius: var(--radius-default);
  --review-radius-button: var(--radius-button);
  --review-transition: var(--transition-fast);
  --review-glow: var(--color-torchlight-glow);
}

.review-section {
  padding-block: var(--review-section-gap);
}

.review-section__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad-mobile);
}

.review-section__inner--centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.review-section__heading {
  margin-block-end: var(--space-6);
  padding-block-end: var(--space-3);
  border-bottom: var(--review-border-emphasis);
  display: inline-block;
  min-width: 200px;
}

.review-section__inner--centered .review-section__heading {
  display: block;
  margin-inline: auto;
  width: fit-content;
}

/* Review Hero */
.review-hero {
  padding-block: var(--space-8);
  background-color: var(--color-arcane-violet-10);
  border-block-end: var(--review-border);
}

.review-hero__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad-mobile);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  align-items: flex-start;
}

.review-hero__rule {
  width: 48px;
  height: 2px;
  background-color: var(--color-antique-gold);
  margin-block-end: var(--space-2);
}

.review-hero__title {
  font-size: var(--text-display);
  line-height: var(--leading-display);
  font-weight: 700;
  letter-spacing: var(--tracking-display);
  color: var(--color-antique-gold);
  max-width: 20ch;
  margin-block-end: 0;
}

.review-hero__lede {
  font-size: var(--text-body-large);
  line-height: var(--leading-body-large);
  color: var(--color-parchment-ivory);
  max-width: var(--review-copy-max);
  margin-block-end: 0;
}

.review-hero__meta {
  color: var(--color-antique-gold);
  max-width: 100%;
  margin-block-end: 0;
}

/* What Is Enter the Gungeon? */
.what-is-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

.what-is-text {
  min-width: 0;
}

.what-is-text p,
.what-is-text ul {
  max-width: var(--review-copy-max);
}

.what-is-callout {
  min-width: 0;
  align-self: start;
}

.what-is-callout .callout__label,
.dodge-tip .callout__label,
.control-tip .callout__label,
.weapon-callout .callout__label,
.verdict-band__label {
  margin-block-end: var(--space-2);
  color: var(--color-dungeon-charcoal);
}

.what-is-callout p,
.dodge-tip p,
.control-tip p,
.weapon-callout p {
  color: var(--color-dungeon-charcoal);
}

.what-is-callout a,
.dodge-tip a,
.control-tip a,
.weapon-callout a,
.table-flip-card a,
.exploration-card a {
  color: var(--color-dungeon-charcoal);
  text-decoration: underline;
}

.what-is-callout a:hover,
.dodge-tip a:hover,
.control-tip a:hover,
.weapon-callout a:hover,
.table-flip-card a:hover,
.exploration-card a:hover {
  color: var(--color-ember-orange);
  box-shadow: none;
}

/* Core Gameplay Loop */
.core-loop-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: start;
}

.core-loop-text {
  min-width: 0;
}

.core-loop-text p,
.core-loop-text ol {
  max-width: var(--review-copy-max);
}

.run-steps {
  list-style: none;
  counter-reset: run-step;
  padding: 0;
  margin-block-end: var(--space-5);
}

.run-steps li {
  counter-increment: run-step;
  position: relative;
  padding-left: var(--space-7);
  margin-block-end: var(--space-3);
}

.run-steps li::before {
  content: counter(run-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  background-color: var(--color-antique-gold);
  color: var(--color-dungeon-charcoal);
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--review-radius-button);
}

.core-loop-figure {
  min-width: 0;
  margin-block-end: 0;
  transform: rotate(1deg);
  transition: transform var(--review-transition), box-shadow var(--review-transition);
}

.core-loop-figure:hover {
  transform: rotate(0deg) scale(1.01);
  box-shadow: var(--review-glow);
}

.core-loop-figure img {
  width: 100%;
  height: auto;
  border: var(--review-border-emphasis);
  border-radius: var(--review-radius);
  display: block;
}

.core-loop-figure figcaption {
  margin-block-start: var(--space-2);
}

/* Combat Mechanics */
.combat-block {
  margin-block-end: var(--space-7);
}

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

.combat-block h3 {
  margin-block-end: var(--space-4);
}

.combat-block p,
.combat-block ul {
  max-width: var(--review-copy-max);
}

.weapon-table-wrap,
.performance-table-wrap {
  margin-block-start: var(--space-5);
  overflow-x: auto;
}

.weapon-table,
.performance-table {
  min-width: 600px;
}

.weapon-table th,
.weapon-table td,
.performance-table th,
.performance-table td {
  padding: var(--space-3) var(--space-4);
}

.weapon-table tbody tr,
.performance-table tbody tr {
  transition: background-color var(--review-transition);
}

.weapon-table tbody tr:hover,
.performance-table tbody tr:hover {
  background-color: var(--color-arcane-violet-10);
}

.dodge-tip {
  margin-block-start: var(--space-5);
  max-width: var(--review-copy-max-narrow);
}

/* Table Flipping */
.table-flip-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: start;
}

.table-flip-text {
  min-width: 0;
}

.table-flip-text p,
.table-flip-text ul {
  max-width: var(--review-copy-max);
}

.table-flip-card {
  min-width: 0;
}

.table-flip-card p {
  color: var(--color-dungeon-charcoal);
}

.table-flip-card .card-title {
  color: var(--color-dungeon-charcoal);
  margin-block-end: var(--space-4);
}

/* Heroes and Weapons */
.heroes-weapons-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-7);
}

.heroes-block,
.weapons-block {
  min-width: 0;
}

.heroes-block p,
.heroes-block ul,
.weapons-block p,
.weapons-block ul {
  max-width: var(--review-copy-max);
}

.heroes-block h3,
.weapons-block h3 {
  margin-block-end: var(--space-4);
}

.weapon-callout {
  margin-block-start: var(--space-5);
}

/* Dungeon Exploration */
.exploration-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: start;
}

.exploration-text {
  min-width: 0;
}

.exploration-text p,
.exploration-text ul {
  max-width: var(--review-copy-max);
}

.exploration-card {
  min-width: 0;
}

.exploration-card p {
  color: var(--color-dungeon-charcoal);
}

.exploration-card .card-title {
  color: var(--color-dungeon-charcoal);
  margin-block-end: var(--space-4);
}

/* Mobile Port */
.mobile-port-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: start;
}

.mobile-port-text,
.mobile-performance-text {
  min-width: 0;
}

.mobile-port-text p,
.mobile-port-text ul,
.mobile-performance-text p,
.mobile-performance-text ul {
  max-width: var(--review-copy-max);
}

.mobile-port-text h3,
.mobile-performance-text h3 {
  margin-block-end: var(--space-4);
}

.mobile-port-figure {
  min-width: 0;
  margin-block-end: 0;
  transform: rotate(-1deg);
  transition: transform var(--review-transition), box-shadow var(--review-transition);
}

.mobile-port-figure:hover {
  transform: rotate(0deg) scale(1.01);
  box-shadow: var(--review-glow);
}

.mobile-port-figure img {
  width: 100%;
  height: auto;
  border: var(--review-border-emphasis);
  border-radius: var(--review-radius);
  display: block;
}

.mobile-port-figure figcaption {
  margin-block-start: var(--space-2);
}

.control-tip {
  margin-block-start: var(--space-5);
  max-width: var(--review-copy-max-narrow);
}

/* Presentation */
.presentation-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-6);
  align-items: start;
}

.presentation-text {
  min-width: 0;
}

.presentation-text p,
.presentation-text ul {
  max-width: var(--review-copy-max);
}

.presentation-card {
  min-width: 0;
}

.presentation-card p {
  color: var(--color-dungeon-charcoal);
}

.presentation-card .card-title {
  color: var(--color-dungeon-charcoal);
  margin-block-end: var(--space-4);
}

/* Difficulty and Verdict */
.difficulty-text {
  min-width: 0;
}

.difficulty-text p,
.difficulty-text ul {
  max-width: var(--review-copy-max);
}

.verdict-band {
  margin-block-start: var(--space-6);
  padding: var(--space-6);
  background-color: var(--color-arcane-violet-10);
  border: var(--review-border-emphasis);
  border-left: 4px solid var(--color-ember-orange);
  max-width: var(--review-copy-max-centered);
}

.verdict-band__text {
  font-size: var(--text-body-large);
  line-height: var(--leading-body-large);
  color: var(--color-parchment-ivory);
  margin-block-end: 0;
}

/* Final Verdict */
.final-verdict-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  max-width: var(--review-copy-max-centered);
  margin-inline: auto;
  text-align: center;
}

.final-verdict-content h3 {
  margin-block-end: 0;
}

.final-verdict-content p {
  max-width: var(--review-copy-max);
  margin-inline: auto;
  margin-block-end: 0;
}

.final-verdict-list {
  text-align: left;
  margin-block-end: 0;
}

.final-verdict-list li {
  margin-block-end: var(--space-2);
}

.final-verdict-cta {
  margin-block-start: var(--space-3);
}

/* FAQ */
.faq-accordion {
  width: 100%;
  max-width: 800px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  text-align: left;
}

.faq-item {
  border: var(--review-border);
  border-radius: var(--review-radius);
  background-color: var(--color-dungeon-charcoal);
}

.faq-item__question {
  margin-block-end: 0;
}

.faq-item__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-4) var(--space-5);
  background: none;
  border: none;
  color: var(--color-antique-gold);
  font-family: var(--font-heading);
  font-size: var(--text-h4);
  line-height: var(--leading-h4);
  font-weight: 600;
  letter-spacing: var(--tracking-h4);
  text-align: left;
  cursor: pointer;
  transition: color var(--review-transition), box-shadow var(--review-transition);
}

.faq-item__trigger:hover {
  color: var(--color-ember-orange);
  box-shadow: var(--review-glow);
}

.faq-item__trigger:focus-visible {
  outline: var(--border-focus);
  outline-offset: var(--focus-offset);
}

.faq-item__icon {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  position: relative;
  display: inline-block;
}

.faq-item__icon::before,
.faq-item__icon::after {
  content: '';
  position: absolute;
  background-color: currentColor;
  transition: transform var(--review-transition);
}

.faq-item__icon::before {
  top: 50%;
  left: 0;
  width: 100%;
  height: 2px;
  transform: translateY(-50%);
}

.faq-item__icon::after {
  left: 50%;
  top: 0;
  width: 2px;
  height: 100%;
  transform: translateX(-50%);
}

.faq-item__trigger[aria-expanded="true"] .faq-item__icon::after {
  transform: translateX(-50%) scaleY(0);
}

.faq-item__answer {
  padding: 0 var(--space-5) var(--space-5);
}

.faq-item__answer p {
  max-width: var(--review-copy-max);
  margin-block-end: 0;
  color: var(--color-parchment-ivory);
}

/* Scroll animation */
.review-section {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 300ms ease-out, transform 300ms ease-out;
}

.review-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}

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

/* Tablet and desktop */
@media (min-width: 768px) {
  .review-section {
    padding-block: var(--review-section-gap-desktop);
  }

  .review-section__inner {
    padding-inline: var(--container-pad-desktop);
  }

  .review-hero {
    padding-block: var(--space-9);
  }

  .review-hero__inner {
    padding-inline: var(--container-pad-desktop);
  }

  .review-hero__title {
    max-width: 18ch;
  }

  .what-is-grid {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: var(--space-7);
    align-items: start;
  }

  .core-loop-grid {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: var(--space-7);
  }

  .core-loop-figure {
    transform: rotate(2deg);
  }

  .table-flip-grid {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: var(--space-7);
  }

  .heroes-weapons-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-7);
  }

  .exploration-grid {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: var(--space-7);
  }

  .mobile-port-grid {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: var(--space-7);
  }

  .mobile-port-figure {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: start;
    transform: rotate(-2deg);
  }

  .mobile-port-text {
    grid-column: 1;
    grid-row: 1;
  }

  .mobile-performance-text {
    grid-column: 1;
    grid-row: 2;
  }

  .presentation-grid {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: var(--space-7);
  }

  .verdict-band {
    padding: var(--space-7);
  }
}

@media (min-width: 1024px) {
  .review-hero__title {
    max-width: 16ch;
  }

  .what-is-grid {
    grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
  }

  .core-loop-grid {
    grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
  }

  .table-flip-grid {
    grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
  }

  .exploration-grid {
    grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
  }

  .mobile-port-grid {
    grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
  }

  .presentation-grid {
    grid-template-columns: minmax(0, 1.8fr) minmax(0, 1fr);
  }
}

@media (max-width: 479px) {
  .review-hero__title {
    font-size: 2rem;
    line-height: 1.1;
  }

  .review-hero__lede {
    font-size: 1rem;
    line-height: 1.6;
  }

  .review-section__heading {
    font-size: 1.625rem;
  }

  .faq-item__trigger {
    font-size: 1.125rem;
  }
}