/* ============================================================
   PATTERNS — small reusable pieces of the new site (generalised 02.10.2026)
   Requires: tokens.css, page.css

   .block-head    a block's heading: H2 + optional lead (.block-head__lead); centred on desktop,
                  left on phones; --block-gap down to the content.
   .check-list    a list with a check before each item; --inline = one centred row that wraps
                  (the perks under buttons). The check is sized from the text (em).
   .chip          a label with a solid thin outline (categories, "Video tutorial") — not a button.
   .hover-frame   on hover a thick frame appears around the element, --frame-gap outside its content;
                  its radius follows the nested-radius rule (--frame-inner-radius + the gap).
                  Off on touch screens and phones (no hover there): no frame, no gap.
   ============================================================ */

/* ---------- Block head ---------- */
.block-head {
  display: grid;
  justify-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--block-gap);
  text-align: center;
}
@media (max-width: 47.9375rem) {
  .block-head { justify-items: start; text-align: left; } /* phones: one column, read from the left */
}

/* ---------- Check list ---------- */
.check-list { display: grid; gap: var(--space-sm); margin: 0; padding: 0; list-style: none; }
.check-list li { display: grid; grid-template-columns: 1.25em 1fr; gap: var(--space-xs); align-items: start; }
.check-list li::before {
  content: "";
  width: 1.25em;
  height: 1.25em;
  background: url("../icons/check-circle.svg") center / contain no-repeat;
}
.check-list--inline { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-xs) var(--space); }
.check-list--inline li { display: inline-flex; align-items: center; }

/* ---------- Chip ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space);
  border: var(--border-thin) solid currentColor;
  border-radius: var(--radius-md); /* controls 12 */
  line-height: 1;
}
.chip svg { width: 1.25em; height: 1.25em; flex: none; }

/* ---------- Hover frame ---------- */
.hover-frame { position: relative; padding: var(--frame-gap, var(--space-sm)); }
.hover-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border: var(--border-thick) solid var(--frame-color, var(--color-accent-green));
  border-radius: calc(var(--frame-inner-radius, var(--radius-md)) + var(--frame-gap, var(--space-sm)));
  opacity: 0; /* switches instantly, no fade — as the live Webflow interaction */
  pointer-events: none;
}
.hover-frame:hover::after, .hover-frame:focus-visible::after { opacity: 1; }
.hover-frame:focus-visible { outline: none; }
@media (hover: none), (max-width: 47.9375rem) {
  .hover-frame { padding: 0; }
  .hover-frame::after { display: none; }
}