/* ==========================================================================
   Jaeger Template — Agency attribution mark
   --------------------------------------------------------------------------
   The "Design & Entwicklung von {name}" credit that ships in the footer +
   Impressum. Markup: templates/partials/attribution.php. Config:
   config/site.php → 'attribution'.

   This is the one styled piece of site chrome the template ships, because
   it's AGENCY identity (consistent across every site we build), not client
   identity. It lives in its own file precisely so a project can restyle or
   drop it without touching the rest of its CSS. Token-driven, so it adapts
   to whatever palette / dark mode a project sets in tokens.css.

   The desktop hover-preview is pure CSS: the screenshot url() sits in the
   inline custom property --attribution-preview and is only consumed (i.e.
   fetched) inside the :hover / :focus-visible rule below. Nothing downloads
   until a visitor actually hovers — zero cost on the LCP path and on touch.
   ========================================================================== */

@layer components {
  .attribution {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4em;
    margin: 0;
    font-size: var(--text-xs, 0.8125rem);
    line-height: var(--leading-snug, 1.25);
    color: var(--color-text-muted, #52525b);   /* .6 ink on the grey chrome: 5.7:1 (the .5 token fell short of AA) */
  }

  .attribution__prefix {
    letter-spacing: var(--tracking-normal, 0);
  }

  .attribution__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.45em;
    color: var(--color-text-muted, #52525b);
    font-weight: var(--font-medium, 500);
    text-decoration: none;
    border-radius: var(--radius-sm, 0.25rem);
    transition: color var(--duration-fast, 120ms) var(--ease-standard, ease);
  }

  .attribution__link:hover,
  .attribution__link:focus-visible {
    color: var(--color-accent, #2563eb);
  }

  .attribution__link:focus-visible {
    outline: 2px solid var(--color-focus-ring, #3b82f6);
    outline-offset: 3px;
  }

  .attribution__logo {
    width: auto;
    height: 1.15em;
    display: block;
    flex: none;
    transition: opacity var(--duration-fast, 120ms) var(--ease-standard, ease);
  }

  /* The logo is the link + the hover trigger — a subtle dim is the only
     affordance it needs (the preview card appearing does the rest). */
  .attribution__link:hover .attribution__logo,
  .attribution__link:focus-visible .attribution__logo {
    opacity: 0.78;
  }

  /* Fallback text label, shown only when no logo is configured. */
  .attribution__name {
    text-decoration: none;
  }

  .attribution__link:hover .attribution__name,
  .attribution__link:focus-visible .attribution__name {
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  /* ---- Desktop hover preview card ------------------------------------- */

  .attribution__preview {
    position: absolute;
    bottom: calc(100% + 0.625rem);
    left: 50%;
    z-index: 20;
    width: min(17.5rem, 70vw);
    aspect-ratio: 760 / 363;
    border-radius: var(--radius-lg, 0.75rem);
    border: 1px solid var(--color-border, #e4e4e7);
    background-color: var(--color-bg-subtle, #f4f4f5);
    background-size: cover;
    background-position: top center;
    background-repeat: no-repeat;
    box-shadow: var(--shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translate(-50%, 0.375rem) scale(0.98);
    transform-origin: bottom center;
    transition:
      opacity var(--duration-normal, 200ms) var(--ease-emphasized, ease),
      transform var(--duration-normal, 200ms) var(--ease-emphasized, ease),
      visibility 0s linear var(--duration-normal, 200ms);
  }

  /* The url() is referenced for the first time HERE → fetched only on hover. */
  .attribution__link:hover .attribution__preview,
  .attribution__link:focus-visible .attribution__preview {
    background-image: var(--attribution-preview);
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0) scale(1);
    transition:
      opacity var(--duration-normal, 200ms) var(--ease-emphasized, ease),
      transform var(--duration-normal, 200ms) var(--ease-emphasized, ease);
  }

  @media (prefers-reduced-motion: reduce) {
    .attribution__preview,
    .attribution__link:hover .attribution__preview,
    .attribution__link:focus-visible .attribution__preview {
      transition-property: opacity, visibility;
      transform: translate(-50%, 0);
    }
  }

  /* Coarse pointers (touch) have no hover — never reserve the card. The
     link, logo and text remain fully functional. */
  @media (hover: none) {
    .attribution__preview {
      display: none;
    }
  }
}