/* The 2027 band on the front page: the law on the left, when each piece of
   it lands on the right. The band is the page's one dark stretch, so it
   reads its colours from the inverted tokens rather than the page's own. */

@layer components {
  .home-efaktura {
    --home-bleed-background: oklch(from var(--color-surface-inverted) calc(l - 0.06) c h);

    padding-block: 4.5rem;

    @media (width >= 768px) {
      padding-block: 6rem;
    }
  }

  .home-efaktura__container {
    display: grid;
    gap: 3rem;

    @media (width >= 1024px) {
      align-items: start;
      gap: 4rem;
      grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    }
  }

  .home-efaktura__badge {
    align-items: center;
    background: var(--color-brand-fill);
    border-radius: var(--radius-pill);
    color: var(--color-ink-inverted);
    display: inline-flex;
    font-size: 0.8125rem;
    font-weight: 700;
    gap: 0.4375rem;
    margin: 0 0 1.5rem;
    padding: 0.4375rem 0.875rem;
  }

  .home-efaktura__title {
    color: var(--color-ink-inverted);
    font-size: clamp(1.75rem, 3.2vw, 2.5rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0 0 1.5rem;
  }

  .home-efaktura__text {
    color: var(--color-ink-inverted-muted);
    font-size: 1rem;
    line-height: 1.75;
    margin: 0 0 2rem;
    max-inline-size: 34rem;
  }

  .home-efaktura__list {
    display: flex;
    flex-direction: column;
    gap: 0.875rem;
    list-style: none;
    margin: 0 0 2rem;
    padding: 0;
  }

  .home-efaktura__list li {
    color: var(--color-ink-inverted);
    display: flex;
    font-size: 0.9375rem;
    gap: 0.625rem;
    line-height: 1.55;
  }

  .home-efaktura__check {
    color: var(--color-brand-inverted);
    flex-shrink: 0;
    margin-block-start: 0.125rem;
  }

  /* What is not promised yet, set apart by a rule rather than a colour: the
     band has no second surface to put it on. */
  .home-efaktura__note {
    border-inline-start: 2px solid var(--color-brand-inverted);
    color: var(--color-ink-inverted-muted);
    font-size: 0.9375rem;
    line-height: 1.65;
    margin: 0;
    max-inline-size: 30rem;
    padding-inline-start: 1.25rem;
  }

  /* ─── Timeline ───────────────────────────── */

  /* Three dates down one line. The line is drawn by the entries' own
     pseudo-element, so it stops at the last mark instead of running past it. */
  .home-timeline {
    background: oklch(from var(--color-surface-inverted) l c h / 55%);
    border: 1px solid oklch(from var(--color-brand) l c h / 25%);
    border-radius: var(--radius-xl);
    padding: 1.75rem;
  }

  /* The card primitive paints a light surface; on the dark band the timeline
     sets its own, so the primitive's is turned off rather than layered. */
  .card.home-timeline {
    background: oklch(from var(--color-surface-inverted) l c h / 55%);
  }

  .home-timeline__label {
    color: var(--color-ink-inverted-muted);
    margin: 0 0 1.5rem;
  }

  .home-timeline__list {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .home-timeline__entry {
    padding-inline-start: 1.75rem;
    position: relative;
  }

  .home-timeline__entry:not(:last-child)::before {
    background: oklch(from var(--color-brand-inverted) l c h / 35%);
    content: "";
    inline-size: 1.5px;
    inset-block: 1.25rem -1.75rem;
    inset-inline-start: 0.28125rem;
    position: absolute;
  }

  .home-timeline__mark {
    background: var(--color-brand-inverted);
    block-size: 0.75rem;
    border-radius: var(--radius-pill);
    inline-size: 0.75rem;
    inset-block-start: 0.28125rem;
    inset-inline-start: 0;
    position: absolute;
  }

  /* The date the law takes effect is the one the reader is here for: filled
     white, where the steps before it are brand. */
  .home-timeline__entry:last-child .home-timeline__mark {
    background: var(--color-ink-inverted);
  }

  .home-timeline__title {
    color: var(--color-ink-inverted);
    font-size: 0.9375rem;
    font-weight: 700;
    margin: 0 0 0.25rem;
  }

  .home-timeline__text {
    color: var(--color-ink-inverted-muted);
    font-size: 0.875rem;
    line-height: 1.6;
    margin: 0;
  }
}