/* === CTA-стиль для «Полезных ресурсов» (без правок HTML) === */
:root{
  --brand: oklch(0.79 0.15 160);
  --brand-2: oklch(0.82 0.10 165);
  --ink: oklch(0.18 0.02 160);
  --muted: oklch(0.48 0.02 160);
  --surface: oklch(0.99 0.01 160 / .92);
  --rad: 1rem;
  --ring: oklch(0.77 0.15 160 / .55);
  --shadow-1: 0 .6rem 1.6rem oklch(0.20 0.02 160 / .12);
  --shadow-2: 0 1.2rem 3rem oklch(0.20 0.02 160 / .10);
}

/* сетка чипов */
.resources-list{
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
  gap: 0.9rem 1.2rem;
}

/* каждый <li><a> как кнопка */
.resources-list > li{ padding:0; }

.resources-list a{
  --pad-x: 1rem; --pad-y: .75rem;
  display:flex; align-items:center; justify-content:space-between;
  gap:.9rem;
  padding: var(--pad-y) var(--pad-x);
  background: color-mix(in oklab, var(--surface) 92%, white 8%);
  border: 1px solid oklch(0.86 0.02 160 / .28);
  border-radius: calc(var(--rad) * 1.2);
  box-shadow: var(--shadow-1);
  color: var(--ink);
  text-decoration:none;
  line-height:1.35;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease, color .2s ease;
  outline: none;
  font-weight: 700;
}

/* иконка слева (книга/ресурсы) */
.resources-list a::before{
  content:"";
  flex:0 0 1.4rem; inline-size:1.4rem; block-size:1.4rem;
  /*background: linear-gradient(135deg, var(--brand), var(--brand-2));*/
  border-radius: .5rem;
  -webkit-mask: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path d='M4 5a2 2 0 0 1 2-2h11v16H6a2 2 0 0 0-2 2V5zm13 0H8a2 2 0 0 0-2 2v9' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path d='M4 5a2 2 0 0 1 2-2h11v16H6a2 2 0 0 0-2 2V5zm13 0H8a2 2 0 0 0-2 2v9' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
}

/* стрелка/«external» справа (все ссылки внешние) */
.resources-list a::after{
  content:"";
  flex:0 0 1.1rem; inline-size:1.1rem; block-size:1.1rem;
  background: currentColor;
  opacity:.8;
  transform: translateX(-6px);
  transition: transform .2s ease, opacity .2s ease;
  -webkit-mask: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path d='M14 3h7v7M21 3l-8 8M14 10H7a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1v-7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>")
           center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
<path d='M14 3h7v7M21 3l-8 8M14 10H7a1 1 0 0 0-1 1v7a1 1 0 0 0 1 1h7a1 1 0 0 0 1-1v-7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/></svg>")
           center/contain no-repeat;
}

/* hover/focus — «кнопка» оживает и зовёт кликнуть */
.resources-list a:hover{
  transform: translateY(-.18rem);
  box-shadow: var(--shadow-2);
  border-color: oklch(0.80 0.04 160 / .45);
  background: linear-gradient(0deg, color-mix(in oklab, var(--brand) 8%, white 92%), color-mix(in oklab, var(--surface) 90%, white 10%));
}
.resources-list a:hover::after{ opacity:1; transform: translateX(0); }

.resources-list a:focus-visible{
  box-shadow: var(--shadow-2), 0 0 0 .18rem var(--ring);
}

/* вторичная подпись под заголовком (если понадобится) */
.resources-note{ color: var(--muted); margin-bottom: .9rem; }