/* Publishing guide (publishing-guide.html): hero, step timeline, prep cards, free banner, FAQ, CTA */
@layer pages {
  main.publish-page { padding: 0; }

  .pub-section {
    padding-block: 3rem;
    @media (width >= 768px) { padding-block: 4rem; }
    &.ruled { border-block-start: 1px solid color-mix(in oklch, var(--border) 60%, transparent); }
  }

  /* Centered section heading with an eyebrow badge */
  .section-intro {
    max-inline-size: 42rem;
    margin: 0 auto 2.5rem;
    text-align: center;
    & h2 { font-size: 1.5rem; font-weight: 600; letter-spacing: -.025em; text-wrap: pretty; @media (width >= 768px) { font-size: 1.875rem; } }
    & p { margin-block-start: .75rem; font-size: .9375rem; line-height: 1.7; color: var(--muted-foreground); }
  }

  /* ───────── Hero ───────── */
  .pub-hero {
    padding-block: 3rem;
    text-align: center;
    @media (width >= 768px) { padding-block: 5rem 4rem; }

    & .badge { margin-block-end: 1rem; color: var(--muted-foreground); }
    & h1 {
      max-inline-size: 48rem;
      margin-inline: auto;
      font-size: 1.875rem;
      font-weight: 600;
      letter-spacing: -.025em;
      text-wrap: pretty;
      @media (width >= 768px) { font-size: 3rem; line-height: 1.1; }
    }
    & p {
      max-inline-size: 42rem;
      margin: 1rem auto 0;
      font-size: 1rem;
      line-height: 1.7;
      color: var(--muted-foreground);
      @media (width >= 768px) { font-size: 1.125rem; }
    }
    & .actions {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: .75rem;
      margin-block-start: 2rem;
      @media (width >= 640px) { flex-direction: row; }
    }
  }

  /* ───────── Step timeline ───────── */
  .timeline-steps {
    max-inline-size: 42rem;
    margin-inline: auto;
    counter-reset: step;

    & li {
      position: relative;
      display: flex;
      gap: 1.25rem;
      padding-block-end: 2.5rem;
      counter-increment: step;

      /* connector line between icons */
      &:not(:last-child)::before {
        content: "";
        position: absolute;
        inset-block: 2.5rem 0;
        inset-inline-start: calc(1.25rem - .5px);
        inline-size: 1px;
        background: color-mix(in oklch, var(--border) 70%, transparent);
      }
      &:last-child { padding-block-end: 0; }
    }
    & .step-icon {
      position: relative;
      z-index: 1;
      display: grid;
      place-items: center;
      flex-shrink: 0;
      align-self: flex-start;           /* don't stretch to the row height */
      inline-size: 2.5rem;
      block-size: 2.5rem;
      border: 1px solid color-mix(in oklch, var(--border) 60%, transparent);
      border-radius: 50%;
      background: var(--background);
      box-shadow: var(--shadow-sm);
      color: var(--brand);
    }
    & .step-body { padding-block-start: .25rem; }
    & .step-no::before {
      content: "Step " counter(step);
      font-size: .75rem;
      font-weight: 600;
      color: var(--muted-foreground);
      font-variant-numeric: tabular-nums;
    }
    & h3 { margin-block-start: .25rem; font-size: 1.125rem; font-weight: 600; letter-spacing: -.025em; }
    & p { margin-block-start: .5rem; font-size: .9375rem; line-height: 1.7; color: var(--muted-foreground); }
    & strong { font-weight: 600; color: var(--foreground); }
  }

  /* ───────── What to prepare ───────── */
  .prep-grid {
    display: grid;
    gap: 1rem;
    @media (width >= 640px) { grid-template-columns: repeat(3, 1fr); }
  }
  .prep-card {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.5rem;
    border: 1px solid color-mix(in oklch, var(--border) 60%, transparent);
    border-radius: .75rem;
    background: var(--background);
    transition: border-color .2s, translate .2s var(--ease), box-shadow .2s;
    &:hover { translate: 0 -2px; border-color: var(--border); box-shadow: var(--shadow-md); }

    & h3 { font-weight: 500; letter-spacing: -.025em; }
    & p { margin-block-start: .25rem; font-size: .875rem; line-height: 1.6; color: var(--muted-foreground); }
  }
  .soft-icon {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    inline-size: 2.75rem;
    aspect-ratio: 1;
    border-radius: .75rem;
    background: color-mix(in oklch, var(--brand) 10%, transparent);
    color: var(--brand);
    & .icon { inline-size: 1.25rem; block-size: 1.25rem; }
  }

  /* ───────── Free banner ───────── */
  .free-banner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 2rem;
    border: 1px solid color-mix(in oklch, var(--border) 60%, transparent);
    border-radius: 1rem;
    background: color-mix(in oklch, var(--muted) 40%, transparent);
    text-align: center;
    @media (width >= 768px) { padding: 3rem; }

    & .soft-icon { inline-size: 3rem; border-radius: 1rem; }
    & h2 { font-size: 1.5rem; font-weight: 600; letter-spacing: -.025em; @media (width >= 768px) { font-size: 1.875rem; } }
    & p { max-inline-size: 36rem; font-size: .9375rem; line-height: 1.7; color: var(--muted-foreground); }
  }

  .pub-faq { max-inline-size: 48rem; margin-inline: auto; & .faq { margin-block-start: 0; } }
  .pub-cta { padding-block: 0 4rem; @media (width >= 768px) { padding-block-end: 6rem; } }
}