/* assets/css/components/front-quick-links.css
 * @layer components — Quick links bar overlapping hero
 * ════════════════════════════════════════════════════════════════════ */

@layer components {

  .front-quick-links {
    position: relative;
    z-index: 10;
    margin-block-start: -4.5rem;
    padding-inline: var(--gutter);
    container-type: inline-size;
    container-name: front-quick-links;
  }

  .front-quick-links > .container {
    background: oklch(100% 0 0 / 72%);
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    border-radius: var(--radius-m);
    border: 1.5px solid oklch(100% 0 0 / 50%);
    box-shadow:
      0 4px 24px oklch(12% 0.007 210 / 14%),
      0 12px 32px oklch(0% 0 0 / 8%);
    overflow: hidden;
  }

  .front-quick-links__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    counter-reset: ql-counter;
  }

  /* ── Each cell ── */

  .front-quick-links__item {
    counter-increment: ql-counter;
    border-inline-end: 1px solid var(--border-muted);
    position: relative;
    overflow: hidden;
  }

  /* Accent bar — slides in from left on hover */
  .front-quick-links__item::before {
    content: '';
    position: absolute;
    inset-block-start: 0;
    inset-inline: 0;
    block-size: 3px;
    background: linear-gradient(
      to right,
      var(--primary),
      var(--primary-semi-light)
    );
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--duration-normal) var(--ease-out);
  }

  .front-quick-links__item:hover::before,
  .front-quick-links__item:focus-within::before {
    transform: scaleX(1);
  }

  .front-quick-links__item:last-child {
    border-inline-end: none;
  }

  /* ── Link ── */

  .front-quick-links__link {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    padding: var(--space-l) var(--space-m);
    text-decoration: none;
    height: 100%;
    transition: background-color var(--duration-fast) var(--ease-default);
  }

  /* Ordinal number — 01 · 02 · 03 · 04 */
  .front-quick-links__link::before {
    content: '0' counter(ql-counter);
    display: block;
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-overline);
    color: var(--text-accent);
    font-variant-numeric: tabular-nums;
    opacity: 0.5;
    transition: opacity var(--duration-fast) var(--ease-default);
    margin-block-end: var(--space-3xs);
  }

  .front-quick-links__link:hover,
  .front-quick-links__link:focus-visible {
    background-color: var(--surface-highlight);
  }

  .front-quick-links__link:hover::before,
  .front-quick-links__link:focus-visible::before {
    opacity: 1;
  }

  .front-quick-links__link:focus-visible {
    outline: var(--focus-ring);
    outline-offset: -3px;
  }

  /* ── Text layers ── */

  .front-quick-links__prefix {
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--text-subtle);
    transition: color var(--duration-fast) var(--ease-default);
  }

  .front-quick-links__link:hover .front-quick-links__prefix,
  .front-quick-links__link:focus-visible .front-quick-links__prefix {
    color: var(--text-accent);
  }

  .front-quick-links__label {
    font-size: var(--text-m);
    font-weight: var(--weight-semibold);
    color: var(--text-body);
    line-height: var(--leading-snug);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-xs);
    margin-block-start: auto;
    padding-block-start: var(--space-xs);
    transition: color var(--duration-fast) var(--ease-default);
  }

  .front-quick-links__link:hover .front-quick-links__label,
  .front-quick-links__link:focus-visible .front-quick-links__label {
    color: var(--text-accent);
  }

  /* Arrow — animates right on hover */
  .front-quick-links__label::after {
    content: '→';
    font-size: var(--text-s);
    color: currentColor;
    opacity: 0.4;
    flex-shrink: 0;
    transition:
      opacity   var(--duration-fast) var(--ease-default),
      transform var(--duration-fast) var(--ease-out);
  }

  .front-quick-links__link:hover .front-quick-links__label::after,
  .front-quick-links__link:focus-visible .front-quick-links__label::after {
    opacity: 1;
    transform: translateX(4px);
  }

  /* ── Responsive ── */

  @container front-quick-links (width < 52rem) {
    .front-quick-links__list {
      grid-template-columns: repeat(2, 1fr);
    }

    .front-quick-links__item:nth-child(2) {
      border-inline-end: none;
    }

    .front-quick-links__item:nth-child(1),
    .front-quick-links__item:nth-child(2) {
      border-block-end: 1px solid var(--border-muted);
    }

    .front-quick-links__link {
      padding: var(--space-m) var(--space-m);
    }
  }

  @container front-quick-links (width < 28rem) {
    .front-quick-links__list {
      grid-template-columns: repeat(2, 1fr);
    }

    .front-quick-links__item {
      border-block-end: 1px solid var(--border-muted);
    }

    .front-quick-links__item:nth-child(odd) {
      border-inline-end: 1px solid var(--border-muted);
    }

    .front-quick-links__item:nth-child(even) {
      border-inline-end: none;
    }

    .front-quick-links__item:nth-child(n+3) {
      border-block-end: none;
    }

    .front-quick-links__link {
      padding: var(--space-s) var(--space-s);
    }

    .front-quick-links__link::before {
      font-size: var(--text-xs);
    }

    .front-quick-links__prefix {
      font-size: var(--text-overline);
    }

    .front-quick-links__label {
      font-size: var(--text-xs);
    }
  }

  /* Reduce hero overlap on small screens */
  @media (max-width: 30em) {
    .front-quick-links {
      margin-block-start: -2rem;
    }
  }

}