/* ════════════════════════════════════════════════════════════════════
   BRAND-ARROW-BUTTON — Reusable circular prev/next button
   BEM block: .brand-arrow-button
   Modifiers: --prev, --next
   ════════════════════════════════════════════════════════════════════ */

@layer components {

  .brand-arrow-button {
    inline-size: var(--tap-target-min);
    block-size: var(--tap-target-min);
    border: none;
    border-radius: var(--radius-round);
    background-color: var(--primary);
    color: var(--white);
    cursor: pointer;
    display: inline-grid;
    place-items: center;
    padding: 0;
    transition:
      background-color var(--duration-normal) var(--ease-out),
      transform var(--duration-fast) var(--ease-out);
  }

  .brand-arrow-button:hover {
    background-color: var(--primary-hover);
    transform: scale(1.04);
  }

  .brand-arrow-button:active {
    transform: scale(0.98);
  }

  .brand-arrow-button:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }

  .brand-arrow-button:disabled {
    opacity: var(--opacity-disabled);
    cursor: not-allowed;
  }

  .brand-arrow-button__icon {
    font-family: var(--font-heading);
    font-size: var(--text-l);
    font-weight: var(--weight-medium);
    line-height: 1;
    pointer-events: none;
    /* Optical adjustment so the chevron sits centred */
    translate: 0 -2%;
  }

  /* Optional: subtle press feedback on reduced motion */
  @media (prefers-reduced-motion: reduce) {
    .brand-arrow-button { transition: background-color var(--duration-fast) linear; }
    .brand-arrow-button:hover,
    .brand-arrow-button:active { transform: none; }
  }

}