/* Shared "label + dashed arrow" CTA link. Used by index.html (Summer
   "Explore Collection" and the "About Cago" philosophy link) and
   faq.html ("Ask us on WhatsApp"). Markup itself isn't a shared
   partial (no Eleventy include for it) — each page repeats:
     <a class="explore-link" ...>
       <span>Label</span>
       <svg class="cta-arrow cta-arrow--desktop" width="220" height="12" viewBox="0 0 220 12" ...>...</svg>
       <svg class="cta-arrow cta-arrow--mobile" width="40" height="12" viewBox="0 0 40 12" ...>...</svg>
     </a>
   The two SVGs are both always in the DOM; only CSS below decides
   which one is visible at a given width. The mobile SVG is a
   separately hand-drawn shorter arrow, not a scaled copy of the
   desktop one — do not try to replace this swap with a single SVG
   scaled via width/clamp(), the dash rhythm and arrowhead proportions
   are wrong at that ratio.
   Depends on tokens in css/tokens.css: --font-body, --text-nav,
   --weight-regular, --tracking-nav, --color-red. */
.explore-link {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--text-color-accent);
  font-family: var(--font-body);
  font-size: var(--text-nav); /* 13px */
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-nav); /* 0.14em */
  line-height: 1.4;
  text-transform: uppercase;
  text-decoration: none;
  transition: opacity 200ms ease;
}

.explore-link:hover {
  opacity: 0.7;
}

.explore-link svg {
  color: var(--color-red);
  flex-shrink: 0;
}

.cta-arrow--mobile {
  display: none;
}

@media (max-width: 768px) {
  .explore-link {
    min-height: 44px;
  }

  .cta-arrow--desktop {
    display: none;
  }

  .cta-arrow--mobile {
    display: inline-block;
  }
}