/* ============================================================
   Блок: quick
   ============================================================ */

@layer components {
  .quick { padding-block: var(--sp-4) var(--sp-1); }
  .quick__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-3);
  }
  .quick__card {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    padding: var(--sp-4);
    background: var(--secondary);
    border: 1px solid transparent;
    border-radius: var(--radius-4);
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  }
  .quick__card:hover {
    background: var(--accent-soft);
    border-color: var(--border);
    transform: translateY(-2px);
  }
  .quick__icon {
    position: absolute;
    inset-inline-end: 0;
    inset-block-end: 0;
    height: 80%;
    aspect-ratio: 1 / 1;
    color: var(--accent);
    opacity: 0.07;
    pointer-events: none;
  }
  .quick__icon .icon { width: 100%; height: 100%; }
  .quick__body { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
  .quick__title { font-weight: 700; font-size: 1.05rem; color: var(--fg); line-height: 1.3; }
  .quick__text { font-size: 0.9rem; color: var(--muted); font-weight: 200; }
  .quick__arrow {
    margin-inline-start: auto;
    color: var(--accent);
    flex: none;
    transition: transform 0.2s ease;
  }
  .quick__arrow .icon { width: 1.3em; height: 1.3em; }
  .quick__card:hover .quick__arrow { transform: translateX(3px); }
  .quick__card--accent {
    background: var(--accent);
    border-color: var(--accent);
  }
  .quick__card--accent:hover {
    background: var(--accent-hover);
    border-color: var(--accent-hover);
  }
  .quick__card--accent .quick__icon { color: var(--on-accent); }
  .quick__card--accent .quick__title { color: var(--on-accent); }
  .quick__card--accent .quick__text { color: color-mix(in oklch, var(--on-accent) 78%, transparent); }
  .quick__card--accent .quick__arrow { color: var(--on-accent); }
  .quick__link:before {
    position: absolute;
    content: '';
    inset: 0;
    z-index: 1;
  }
  .quick__flags {
    display: flex;
    gap: 0.35rem;
    flex: none;
    margin-inline-start: auto;
  }
  .flag {
    width: 1.9rem;
    height: 1.27rem;
    border-radius: 2px;
    box-shadow: var(--shadow-sm);
  }

  @media (min-width: 768px) {
    .quick__list { grid-template-columns: repeat(3, 1fr); }
    .quick__card { flex-direction: column; align-items: flex-start; }
    .quick__arrow, .quick__flags { margin-inline-start: 0; margin-top: auto; }
  }
}

@layer components {
  /* Тёмная тема карточки */
  .quick__card--dark {
    background: #0A0E12;
    border-color: #0A0E12;
    color-scheme: dark;
  }
  .quick__card--dark:hover {
    background: #11161d;
    border-color: #11161d;
  }
  .quick__card--dark .quick__icon { color: #9DBBF0; }
  .quick__card--dark .quick__title { color: #E4E8ED; }
  .quick__card--dark .quick__text { color: rgba(228, 232, 237, 0.75); }
  .quick__card--dark .quick__arrow { color: #9DBBF0; }
}