/* Duck Fortress Guard — Home page styles */

#home-main {
  display: block;
}

/* Full-bleed separator bands */
.home-stone-band,
.home-wood-band {
  width: 100%;
  height: 8px;
  border: 0;
  display: block;
}

.home-stone-band {
  background-color: var(--color-fortress-grey);
  background-image: repeating-linear-gradient(
    90deg,
    rgba(43, 38, 32, 0.18) 0,
    rgba(43, 38, 32, 0.18) 12px,
    transparent 12px,
    transparent 24px
  );
}

.home-wood-band {
  background-color: var(--color-wood);
  border-block-end: 1px solid var(--color-wood-dark);
}

/* Commander's Note hero */
.home-hero {
  padding-block: var(--space-8) var(--space-7);
}

.home-hero__inner {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-gutter-mobile);
}

.home-hero__eyebrow {
  color: var(--color-ink-soft);
  margin-block-end: var(--space-3);
}

.home-hero__title {
  font-size: var(--text-display-size);
  line-height: var(--text-display-line-height);
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-block-end: var(--space-5);
  max-width: 1120px;
}

.home-hero__summary {
  max-width: 720px;
  margin-block-end: var(--space-6);
}

.home-hero__cta {
  display: flex;
  justify-content: flex-start;
}

/* Core loop section */
.home-core-loop {
  padding-block: var(--space-8);
}

.home-core-loop__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}

.home-core-loop__text {
  min-width: 0;
}

.home-core-loop__text h2 {
  margin-block-end: var(--space-4);
}

.home-core-loop__text p {
  max-width: 720px;
}

.home-core-loop__diagram {
  min-width: 0;
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
}

/* Diagram primitives */
.home-diagram {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  background-color: var(--color-parchment-deep);
  border: var(--border-hairline);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.home-diagram__castle {
  position: absolute;
  left: 12%;
  top: 28%;
  width: 34%;
  height: 44%;
  border: 2px solid var(--color-ink);
  background-color: var(--color-parchment);
  display: block;
}

.home-diagram__castle::before {
  content: "";
  position: absolute;
  left: -2px;
  top: -10px;
  width: calc(100% + 4px);
  height: 10px;
  background-image: repeating-linear-gradient(
    90deg,
    var(--color-ink) 0,
    var(--color-ink) 8px,
    transparent 8px,
    transparent 14px
  );
}

.home-diagram__arrow {
  position: absolute;
  display: block;
  width: 36%;
  height: 2px;
  background-color: var(--color-warning-red);
}

.home-diagram__arrow::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -4px;
  width: 0;
  height: 0;
  border-block-start: 5px solid transparent;
  border-block-end: 5px solid transparent;
  border-inline-start: 8px solid var(--color-warning-red);
}

.home-diagram__arrow--one {
  right: 6%;
  top: 32%;
  transform: rotate(-8deg);
}

.home-diagram__arrow--two {
  right: 4%;
  top: 52%;
  transform: rotate(4deg);
}

.home-diagram__arrow--three {
  right: 8%;
  top: 72%;
  transform: rotate(-2deg);
}

/* Defence cards */
.home-defence {
  padding-block: var(--space-8);
}

.home-defence h2 {
  margin-block-end: var(--space-5);
}

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

.home-defence__card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.home-defence__card h3 {
  margin-block-end: 0;
}

.home-defence__card p {
  margin-block-end: 0;
}

/* Reading column helper */
.home-reading {
  max-width: 720px;
  margin-inline: auto;
  padding-inline: var(--container-gutter-mobile);
}

.home-reading h2 {
  margin-block-end: var(--space-4);
}

.home-reading p {
  margin-block-end: var(--space-4);
}

.home-reading .content-list {
  margin-block-end: var(--space-4);
}

.home-reading .callout {
  margin-block-start: var(--space-4);
}

/* Lords section */
.home-lords {
  padding-block: var(--space-8);
}

/* Battle cards */
.home-battle-cards {
  padding-block: var(--space-8);
}

.home-battle-cards h2 {
  margin-block-end: var(--space-5);
}

.home-battle-cards__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}

.home-battle-cards__card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.home-battle-cards__card h3 {
  margin-block-end: 0;
}

.home-battle-cards__card p {
  margin-block-end: 0;
}

/* Deck building */
.home-deck-building {
  padding-block: var(--space-8);
}

.home-deck-building__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}

.home-deck-building__text {
  min-width: 0;
}

.home-deck-building__text h2 {
  margin-block-end: var(--space-4);
}

.home-deck-building__text p,
.home-deck-building__text .content-list,
.home-deck-building__text .callout {
  max-width: 720px;
}

.home-deck-building__diagram {
  min-width: 0;
  width: 100%;
  max-width: 320px;
  margin-inline: auto;
}

.home-diagram--deck {
  aspect-ratio: 4 / 3;
  background-color: var(--color-parchment-deep);
}

.home-diagram__card {
  position: absolute;
  display: block;
  width: 42%;
  height: 58%;
  background-color: var(--color-parchment);
  border: 2px solid var(--color-ink);
  border-radius: var(--radius-sm);
}

.home-diagram__card--one {
  left: 16%;
  top: 22%;
  transform: rotate(-8deg);
}

.home-diagram__card--two {
  left: 29%;
  top: 18%;
  transform: rotate(2deg);
}

.home-diagram__card--three {
  left: 42%;
  top: 24%;
  transform: rotate(9deg);
}

/* Enemy waves */
.home-enemy-waves {
  padding-block: var(--space-8);
}

/* Roguelike */
.home-roguelike {
  padding-block: var(--space-8);
}

/* Card synergies pinned note */
.home-synergies {
  padding-block: var(--space-8);
}

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

.home-pinned-note {
  position: relative;
  width: 100%;
  max-width: 600px;
  min-width: 0;
  padding-block-start: var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.home-pinned-note::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--color-ink);
  box-shadow: 0 0 0 3px var(--color-parchment-deep);
}

.home-pinned-note h2 {
  margin-block-end: 0;
}

.home-pinned-note p {
  margin-block-end: 0;
}

/* Defence planning */
.home-defence-planning {
  padding-block: var(--space-8);
}

.home-defence-planning__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}

.home-defence-planning__text {
  min-width: 0;
}

.home-defence-planning__text h2 {
  margin-block-end: var(--space-4);
}

.home-defence-planning__text p,
.home-defence-planning__text .content-list {
  max-width: 720px;
}

.home-defence-planning__diagram {
  min-width: 0;
  width: 100%;
  max-width: 360px;
  margin-inline: auto;
}

.home-diagram--plan {
  aspect-ratio: 1 / 1;
  background-color: var(--color-parchment-deep);
}

.home-diagram--plan .home-diagram__castle {
  left: 38%;
  top: 38%;
  width: 24%;
  height: 24%;
}

.home-diagram__path {
  position: absolute;
  display: block;
  height: 2px;
  background-color: var(--color-ink);
  transform-origin: left center;
}

.home-diagram__path--one {
  left: 50%;
  top: 50%;
  width: 42%;
  transform: rotate(-35deg);
}

.home-diagram__path--two {
  left: 50%;
  top: 50%;
  width: 42%;
  transform: rotate(35deg);
}

.home-diagram__unit {
  position: absolute;
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: var(--color-moss);
  border: 1px solid var(--color-ink);
}

.home-diagram__unit--one {
  left: 22%;
  top: 62%;
}

.home-diagram__unit--two {
  left: 68%;
  top: 62%;
}

/* Upgrades */
.home-upgrades {
  padding-block: var(--space-8);
}

/* Beginner tips */
.home-beginner-tips {
  padding-block: var(--space-8);
}

.home-beginner-tips h2 {
  margin-block-end: var(--space-5);
}

.home-beginner-tips__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-5);
}

.home-tip-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.home-tip-card h3 {
  margin-block-end: 0;
}

.home-tip-card p {
  margin-block-end: 0;
}

/* Strategy guide */
.home-strategy-guide {
  padding-block: var(--space-8);
}

.home-strategy-guide__panel {
  background-color: var(--color-parchment-deep);
  border-inline-start: 4px solid var(--color-deep-blue);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.home-strategy-guide__panel h2 {
  margin-block-end: var(--space-4);
}

.home-strategy-guide__panel p {
  margin-block-end: var(--space-4);
}

.home-strategy-guide__panel .content-list {
  margin-block-end: 0;
}

/* Review */
.home-review {
  padding-block: var(--space-8);
}

.home-review__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
}

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

.home-review__text h2 {
  margin-block-end: var(--space-4);
}

.home-review__text p {
  max-width: 720px;
}

.home-review__verdict {
  min-width: 0;
  width: 100%;
  max-width: 320px;
  border-inline-start-color: var(--color-moss);
  background-color: rgba(95, 122, 74, 0.1);
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.home-review__verdict h3 {
  margin-block-end: 0;
}

.home-review__verdict p {
  margin-block-end: 0;
}

/* Worth playing */
.home-worth-playing {
  padding-block: var(--space-8);
}

.home-worth-playing h2 {
  margin-block-end: var(--space-5);
}

.home-worth-playing__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
  margin-block-end: var(--space-5);
}

.home-worth-playing__column {
  min-width: 0;
}

.home-worth-playing__column h3 {
  margin-block-end: var(--space-3);
}

.home-worth-playing__column .content-list {
  margin-block-end: 0;
}

.home-worth-playing__summary {
  max-width: 720px;
}

/* FAQ */
.home-faq {
  padding-block: var(--space-8);
}

.home-faq__container {
  max-width: 720px;
  margin-inline: auto;
  padding-inline: var(--container-gutter-mobile);
}

.home-faq__container h2 {
  margin-block-end: var(--space-5);
}

.home-faq__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background-color: var(--color-parchment-deep);
  border: var(--border-hairline);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
}

.home-faq__item {
  min-width: 0;
  border-block-end: 1px solid rgba(43, 38, 32, 0.28);
}

.home-faq__item:last-child {
  border-block-end: 0;
}

.home-faq__button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  min-height: 44px;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  padding: var(--space-3) 0;
  color: var(--color-ink);
  text-align: start;
  cursor: pointer;
  transition: color var(--transition-base);
}

.home-faq__button:hover {
  background-color: transparent;
  color: var(--color-deep-blue);
}

.home-faq__button:active {
  background-color: transparent;
}

.home-faq__chevron {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  border-inline-end: 2px solid currentColor;
  border-block-end: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--transition-base);
}

.home-faq__button[aria-expanded="true"] .home-faq__chevron {
  transform: rotate(225deg);
}

.home-faq__answer {
  padding-block-end: var(--space-4);
}

.home-faq__answer p {
  margin-block-end: 0;
}

/* Final CTA */
.home-final-cta {
  background-color: var(--color-wood);
  color: var(--color-parchment);
  padding-block: var(--space-8);
}

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

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

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

.home-final-cta__button {
  min-width: 220px;
}

/* Tablet breakpoint */
@media (min-width: 768px) {
  .home-hero__inner,
  .home-reading,
  .home-faq__container,
  .home-final-cta__inner {
    padding-inline: var(--container-gutter-tablet);
  }

  .home-core-loop__grid {
    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
    gap: var(--space-6);
  }

  .home-defence__grid,
  .home-battle-cards__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
  }

  .home-deck-building__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
    gap: var(--space-6);
  }

  .home-defence-planning__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
    gap: var(--space-6);
  }

  .home-beginner-tips__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-5);
  }

  .home-review__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 3fr);
    gap: var(--space-6);
  }

  .home-worth-playing__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
  }
}

/* Desktop breakpoint */
@media (min-width: 1024px) {
  .home-hero__inner,
  .home-reading,
  .home-faq__container,
  .home-final-cta__inner {
    padding-inline: var(--container-gutter-desktop);
  }

  .home-beginner-tips__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5);
  }

  .home-review__verdict {
    justify-self: end;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .home-faq__chevron {
    transition: none;
  }
}