/* Page, destination, and category hero floating-card frames.
 * Keep the frame flush with the card edge, 2px thick, using
 * the canonical media-border token. */
@layer components {
  .page-hero__copy,
  .destination-hero__copy,
  .catalogue .category-hero__copy {
    border: 0;
  }

  .page-hero__copy::before,
  .destination-hero__copy::before {
    inset: 0;
    border: 2px solid var(--mega-media-border);
    pointer-events: none;
  }

  /* Category archives use a separate hero component in catalogue.css.
   * The extra .catalogue specificity intentionally overrides that file's
   * brass offset frame at every breakpoint. */
  .catalogue .category-hero__copy::before {
    inset: 0;
    border: 2px solid var(--mega-media-border);
    pointer-events: none;
  }

  @media (min-width: 768px) {
    .page-hero__copy::before,
    .destination-hero__copy::before,
    .catalogue .category-hero__copy::before {
      inset: 0;
      border: 2px solid var(--mega-media-border);
    }
  }
}

/* Site-wide selection treatment. Utilities is intentionally later than the
 * base-layer selection rules in main.css, including the estimator override. */
@layer utilities {
  ::selection {
    background-color: var(--accent);
    color: var(--surface);
  }
}