/* Component: Ornament ------------------------------------------------------ */
@layer components {
  .tp-ornament {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex: none;
  }

  .tp-ornament__rule {
    display: block;
    height: 1px;
    width: 96px;
    background: var(--tp-color-brass-soft);
  }

  .tp-ornament__star {
    display: block;
    flex: none;
  }

  /* Footer weight: brass-soft rules, brass star. Rules shorten on mobile. */
  .tp-ornament--footer .tp-ornament__rule {
    width: 96px;
  }

  /* Cobalt weight (design system): gradient rules, solid cobalt diamond. */
  .tp-ornament--cobalt {
    gap: 8px;
  }

  .tp-ornament--cobalt .tp-ornament__rule {
    width: 88px;
  }

  .tp-ornament--cobalt .tp-ornament__rule--left {
    background: linear-gradient(to right, rgba(47, 93, 168, 0), var(--tp-color-cobalt));
  }

  .tp-ornament--cobalt .tp-ornament__rule--right {
    background: linear-gradient(to left, rgba(47, 93, 168, 0), var(--tp-color-cobalt));
  }

  .tp-ornament--cobalt .tp-ornament__diamond {
    display: block;
    width: 7px;
    height: 7px;
    background: var(--tp-color-cobalt);
    transform: rotate(45deg);
  }

  /* Brass weight: solid brass rules, outlined diamond. */
  .tp-ornament--brass {
    gap: 8px;
  }

  .tp-ornament--brass .tp-ornament__rule {
    width: 70px;
    background: var(--tp-color-brass);
  }

  .tp-ornament--brass .tp-ornament__diamond {
    display: block;
    width: 5px;
    height: 5px;
    border: 1px solid var(--tp-color-brass);
    transform: rotate(45deg);
  }

  /* Hairline: a single system rule. */
  .tp-ornament--hairline {
    display: block;
    width: 100%;
  }

  .tp-ornament__hairline {
    display: block;
    height: 1px;
    width: 100%;
    background: var(--tp-color-line-system);
  }

  @media (max-width: 699px) {
    .tp-ornament--footer .tp-ornament__rule {
      width: 64px;
    }

    /* Salon context (LOCKED): 60px rules, 10px star. */
    .tp-ornament--footer.tp-ornament--salon .tp-ornament__rule {
      width: 60px;
    }

    .tp-ornament--footer.tp-ornament--salon .tp-ornament__star {
      width: 10px;
      height: 10px;
    }
  }
}