/* ===== Strona główna — style należące do strony ===== */

.home-main {
  display: block;
}

/* Hero */
.home-hero {
  background-color: var(--color-limestone);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='64' viewBox='0 0 56 64'%3E%3Cpath d='M28 0L56 16V48L28 64L0 48V16Z' fill='none' stroke='%23A8792F' stroke-width='1' opacity='0.06'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 56px 64px;
  padding-block: var(--space-8);
}

.home-hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-5);
}

.home-hero__label {
  color: var(--color-bronze);
}

.home-hero__title {
  max-width: 900px;
  margin-block-end: 0;
}

.home-hero__deck {
  max-width: 720px;
  margin-block-end: 0;
  color: var(--color-navy-soft);
  font-size: var(--text-body-large);
}

.home-hero__actions {
  display: flex;
  justify-content: center;
  margin-block-start: var(--space-6);
}

.home-hero__meta {
  max-width: 720px;
  margin-block-start: var(--space-4);
  font-size: var(--text-small);
  color: var(--color-navy-soft);
}

/* Panel faktów */
.home-facts {
  padding-block: var(--space-8);
}

.home-facts__grid {
  margin-block-start: var(--space-5);
}

.home-facts__list {
  display: grid;
  grid-template-columns: minmax(200px, 1fr) 2fr;
  gap: var(--space-2) var(--space-5);
  margin: 0;
  padding: var(--space-5);
  background-color: var(--color-ivory);
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
}

.home-facts__item {
  display: contents;
}

.home-facts__item dt {
  font-weight: 600;
  color: var(--color-navy-soft);
  padding-block: var(--space-2);
}

.home-facts__item dd {
  margin: 0;
  padding-block: var(--space-2);
  color: var(--color-navy);
  min-width: 0;
}

/* Sekcje czytelnicze */
.home-reading {
  padding-block: var(--space-8);
}

.home-reading__column {
  max-width: 720px;
  margin-inline: auto;
  margin-block-start: var(--space-5);
}

.home-reading__column > * + * {
  margin-block-start: var(--space-4);
}

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

.home-positioning__list {
  list-style: none;
  padding-inline-start: 0;
  margin-block-start: var(--space-4);
}

.home-positioning__list li {
  position: relative;
  padding-inline-start: var(--space-5);
  margin-block-end: var(--space-2);
}

.home-positioning__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 8px;
  height: 8px;
  background-color: var(--color-olive);
  border-radius: 50%;
}

/* Blok przepływu decyzji i rama */
.home-flow {
  max-width: 900px;
  margin-inline: auto;
  margin-block-start: var(--space-7);
  padding: var(--space-5);
  background-color: var(--color-ivory);
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
  text-align: center;
}

.home-flow__label {
  color: var(--color-olive);
  margin-block-end: var(--space-4);
}

.home-flow__steps {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-3);
  list-style: none;
  padding: 0;
  margin: 0;
}

.home-flow__step {
  background-color: var(--color-limestone);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-navy);
  min-width: 0;
}

.home-flow__step:not(:last-child)::after {
  content: "→";
  margin-inline-start: var(--space-3);
  color: var(--color-bronze);
}

.home-flow__note {
  margin-block-start: var(--space-4);
  font-size: var(--text-small);
  color: var(--color-navy-soft);
}

.home-flow__question {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  font-weight: 600;
  color: var(--color-navy);
  margin-block-end: var(--space-3);
}

.home-flow__options {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-2);
  list-style: none;
  padding: 0;
  margin: 0;
}

.home-flow__options li {
  background-color: var(--color-limestone);
  border: 1px solid var(--color-line);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--color-navy);
  min-width: 0;
}

/* Lista porad */
.home-advice-list {
  list-style: none;
  padding-inline-start: 0;
  margin-block-start: var(--space-4);
}

.home-advice-list li {
  position: relative;
  padding-inline-start: var(--space-5);
  margin-block-end: var(--space-2);
  border-inline-start: 3px solid var(--color-olive);
  padding-block: var(--space-2);
}

/* Zejście w głąb */
.home-depth {
  padding-block: var(--space-8);
}

.home-depth__panel {
  max-width: 720px;
  margin-inline: auto;
  background-color: var(--color-navy);
  color: var(--color-ivory);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
}

.home-depth__label {
  color: var(--color-bronze);
  margin-block-end: var(--space-3);
}

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

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

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

.home-premium__compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  max-width: 1000px;
  margin-inline: auto;
  margin-block-start: var(--space-6);
}

.home-premium__card {
  background-color: var(--color-ivory);
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
  padding: var(--space-5);
  min-width: 0;
}

.home-premium__card--premium {
  background-color: var(--color-indigo-deep);
  color: var(--color-ivory);
  border-color: var(--color-indigo-deep);
}

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

.home-premium__card--premium h3 {
  color: var(--color-ivory);
}

.home-premium__card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.home-premium__card li {
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--color-line);
}

.home-premium__card--premium li {
  border-bottom-color: rgba(251, 247, 238, 0.2);
}

.home-premium__card li:last-child {
  border-bottom: none;
}

/* Poradnik dla początkujących */
.home-beginner {
  padding-block: var(--space-8);
}

.home-beginner__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-5);
  margin-block-start: var(--space-6);
}

.home-beginner__card {
  background-color: var(--color-ivory);
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  min-width: 0;
}

.home-beginner__card h3 {
  font-size: var(--text-h3);
  margin-block-end: var(--space-2);
}

.home-beginner__card p {
  margin-block-end: 0;
  color: var(--color-navy-soft);
}

/* Metoda pięciu kroków */
.home-method {
  padding-block: var(--space-8);
}

.home-method__steps {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-4);
  list-style: none;
  padding: 0;
  margin: var(--space-6) auto 0;
  max-width: 1000px;
}

.home-method__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
  background-color: var(--color-ivory);
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
  padding: var(--space-4);
  min-width: 0;
}

.home-method__number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--color-bronze);
  color: #FFFFFF;
  font-weight: 600;
  font-size: var(--text-small);
}

.home-method__step strong {
  font-family: var(--font-heading);
  font-size: var(--text-h3);
  color: var(--color-navy);
}

.home-method__step span:last-child {
  font-size: var(--text-small);
  color: var(--color-navy-soft);
}

.home-method__note {
  text-align: center;
  margin-block-start: var(--space-4);
  font-size: var(--text-small);
  color: var(--color-navy-soft);
}

/* Dla kogo */
.home-audience {
  padding-block: var(--space-8);
}

.home-audience__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  max-width: 1000px;
  margin-inline: auto;
  margin-block-start: var(--space-6);
}

.home-audience__panel {
  background-color: var(--color-ivory);
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
  padding: var(--space-5);
  min-width: 0;
}

.home-audience__panel--dislike {
  background-color: var(--color-limestone);
}

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

.home-audience__panel ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.home-audience__panel li {
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--color-line);
}

.home-audience__panel li:last-child {
  border-bottom: none;
}

/* Mocne i słabe strony */
.home-proscons {
  padding-block: var(--space-8);
}

.home-proscons__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-5);
  max-width: 1000px;
  margin-inline: auto;
  margin-block-start: var(--space-6);
}

.home-proscons__panel {
  background-color: var(--color-ivory);
  border: var(--border-hairline);
  border-radius: var(--radius-sm);
  padding: var(--space-5);
  min-width: 0;
}

.home-proscons__panel--pros {
  border-inline-start: 3px solid var(--color-olive);
}

.home-proscons__panel--cons {
  border-inline-start: 3px solid var(--color-terracotta);
}

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

.home-proscons__panel ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.home-proscons__panel li {
  padding-block: var(--space-2);
  border-bottom: 1px solid var(--color-line);
}

.home-proscons__panel li:last-child {
  border-bottom: none;
}

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

.home-verdict__score {
  display: inline-block;
  margin-block-start: var(--space-4);
  padding: var(--space-2) var(--space-4);
  background-color: var(--color-bronze);
  color: #FFFFFF;
  font-weight: 600;
  font-size: var(--text-small);
  border-radius: var(--radius-sm);
}

/* Końcowe CTA */
.home-final-cta {
  padding-block: var(--space-8);
}

.home-final-cta__panel {
  max-width: 720px;
  margin-inline: auto;
  background-color: var(--color-navy);
  color: var(--color-ivory);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}

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

.home-final-cta__panel p {
  color: var(--color-ivory);
  margin-block-end: 0;
  max-width: 500px;
}

/* ===== Responsywność ===== */
@media (max-width: 1023px) {
  .home-facts__list {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }

  .home-facts__item {
    display: block;
    margin-block-end: var(--space-3);
  }

  .home-facts__item dt {
    padding-block: 0;
    margin-block-end: var(--space-1);
  }

  .home-facts__item dd {
    padding-block: 0;
  }

  .home-premium__compare,
  .home-audience__grid,
  .home-proscons__grid {
    grid-template-columns: 1fr;
  }

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

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

@media (max-width: 767px) {
  .home-hero {
    padding-block: var(--space-6);
  }

  .home-hero__title {
    font-size: var(--text-h1);
  }

  .home-hero__actions {
    width: 100%;
  }

  .home-hero__actions .btn {
    width: 100%;
  }

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

  .home-flow__step {
    text-align: center;
  }

  .home-flow__step:not(:last-child)::after {
    content: "↓";
    display: block;
    margin-inline-start: 0;
    margin-block-start: var(--space-2);
  }

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

  .home-flow__options li {
    text-align: center;
  }

  .home-premium__compare,
  .home-audience__grid,
  .home-proscons__grid {
    grid-template-columns: 1fr;
  }

  .home-beginner__cards {
    grid-template-columns: 1fr;
  }

  .home-method__steps {
    grid-template-columns: 1fr;
  }

  .home-final-cta__panel .btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-flow__step,
  .home-flow__options li {
    transition: none;
  }
}