/* ============================================================
   La Manuli - strona wzoru (/wzory/<kategoria>/<wzor>) i strony
   kategorii (/wzory-<kategoria>), redesign v2.
   Ładowany po /css/lm.css i /css/library.css (karty, chipy,
   okruszki, legenda i fakty pochodzą z library.css).
   Bez stylów inline: kolory koralików przez klasy .bead-<litera>.
   Breakpointy: 560 / 768 / 1000 / 1280.
   ============================================================ */

/* ---------- 0. Kolory koralików (legenda „Potrzebne koraliki") ---------- */
.bead-A{ --c:#A26F40; }
.bead-B{ --c:#E6BF90; }
.bead-C{ --c:#5C3A28; }
.bead-D{ --c:#FBBA1C; }
.bead-G{ --c:#84D944; }
.bead-H{ --c:#F65BA0; }
.bead-K{ --c:#2B2B2B; }
.bead-L{ --c:#5BB6E6; }
.bead-O{ --c:#F4711E; }
.bead-P{ --c:#F5A0C8; }
.bead-R{ --c:#E12028; }
.bead-S{ --c:#9DA2A6; }
.bead-W{ --c:#F2F2EF; }
.bead-Y{ --c:#FCE352; }
/* 6 kolorów tylko w dużych obrazach na kilka podkładek (COLORS w js/library.js) */
.bead-J{ --c:#AFD98C; }
.bead-T{ --c:#2FB89A; }
.bead-N{ --c:#2E4F9E; }
.bead-F{ --c:#503A99; }
.bead-V{ --c:#8468D0; }
.bead-M{ --c:#E8365D; }

/* ---------- 1. Karta wzoru z miniaturą WebP (link do strony wzoru) ---------- */
.card__thumb--img{
  padding:0;
  overflow:hidden;
  background-image:none;
}
.card__thumb--img img{ width:100%; height:100%; }

/* ---------- 2. Strona wzoru ---------- */
.pattern-page{ padding-block:var(--crumbs-before) clamp(48px, 6vw, 80px); }

.pattern-top{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  align-items:start;
  gap:clamp(22px, 3vw, 40px);
}

/* podgląd: pastel kategorii + biała podkładka z pinami */
.pattern-preview{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  padding:clamp(14px, 2.4vw, 28px);
  border-radius:28px;
  background:var(--tone-soft, var(--blue-soft));
}
.pattern-board{
  width:100%;
  max-width:520px;
  padding:clamp(8px, 1.4vw, 14px);
  border:2px solid var(--tone-edge, var(--blue));
  border-radius:24px;
  background:#fff;
  box-shadow:0 5px 0 var(--tone-edge, var(--blue));
}
.pattern-board svg, .pattern-board img{ display:block; width:100%; height:auto; aspect-ratio:1; }
/* duży obraz na kilka podkładek: plansza w proporcjach wzoru (klasa --b<kolumny>x<rzędy> podkładek z generatora stron;
   nieznany układ: proporcje z viewBox). Obraz poziomy zajmuje całą szerokość, pionowy mieści się w wysokości okna
   (szerokość liczona z vh - bez wysokości procentowych). */
.pattern-board--mega svg, .pattern-board--mega img{ aspect-ratio:auto; }
.pattern-board--b2x1 svg, .pattern-board--b2x1 img{ aspect-ratio:2 / 1; }
.pattern-board--b3x2 svg, .pattern-board--b3x2 img{ aspect-ratio:3 / 2; }
.pattern-board--b2x2 svg, .pattern-board--b2x2 img{ aspect-ratio:1; }
.pattern-board--b1x2 svg, .pattern-board--b1x2 img{ aspect-ratio:1 / 2; }
.pattern-board--b2x3 svg, .pattern-board--b2x3 img{ aspect-ratio:2 / 3; }
.pattern-board--wide{ max-width:1100px; }
/* obraz poziomy ma mieścić się na ekranie w całości: szerokość ograniczona wysokością okna (wysokość × proporcje) */
.pattern-board--b2x1{ max-width:max(280px, min(1100px, calc((100vh - 230px) * 2))); }
.pattern-board--b3x2{ max-width:max(280px, min(1100px, calc((100vh - 230px) * 1.5))); }
.pattern-board--tall{ max-width:max(200px, min(520px, calc((100vh - 240px) * .5))); }
.pattern-board--b2x3{ max-width:max(220px, min(520px, calc((100vh - 240px) * .6667))); }
.pattern-preview__note{
  max-width:520px;
  font:700 var(--fs-micro)/1.4 var(--font-body);
  color:var(--ink);
  text-align:center;
}

/* kolumna informacji */
.pattern-info{ display:flex; flex-direction:column; gap:18px; min-width:0; }
.pattern-info__head{ display:flex; flex-direction:column; gap:8px; }
/* H1: --fs-h1 z lm.css (jak każda strona poza home) */
.pattern-info__title{ overflow-wrap:anywhere; }
.pattern-info__lead{ font-size:var(--fs-lead); line-height:1.55; }

.pattern-facts > li{ min-height:38px; font-size:14px; }
.pattern-facts__diff{ gap:8px; }

.pattern-actions{ display:grid; grid-template-columns:minmax(0, 1fr); gap:12px; }
.pattern-actions .btn{ padding-inline:18px; }
.pattern-actions__note{ margin-top:-6px; font-size:var(--fs-small); line-height:1.5; color:var(--ink-soft); }

/* „Potrzebne koraliki" */
.pattern-beads{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:16px;
  border:2px solid var(--border-card);
  border-radius:var(--radius);
}
.pattern-beads__title{ font-size:var(--fs-h3); line-height:1.2; }
.pattern-beads__note{ margin-top:-6px; font-size:var(--fs-micro); line-height:1.45; color:var(--ink-soft); }
/* kolor ponad jedną saszetkę (duże obrazy): dopisek „· 2 saszetki" przy liczbie sztuk */
.lib-legend__packs{ font:700 12px/1.2 var(--font-body); color:var(--ink-soft); }
.pattern-beads__total{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:8px 12px 0 6px;
  border-top:2px dashed var(--border-card);
  font:900 14px/1.2 var(--font-head);
  color:var(--blue-ink);
  font-variant-numeric:tabular-nums;
}

/* Sklep na liście „Potrzebne koraliki" (js/pattern-shop.js): odnośniki do saszetek, dostępność, notki.
   Spójne z listą zakupów wzornika (.lib-shop__link / __stock / __out / __note w library.css) - te same tokeny.
   Nic tu nie zmienia wysokości wiersza: lista z JavaScriptem i bez niego ma ten sam układ. */
/* nazwa koloru + kod jako odnośnik do saszetki; pole dotyku 44 px bez wpływu na układ (dopełnienie = ujemny margines) */
.pattern-shop__link{
  justify-self:start;
  min-width:44px;
  padding-block:14px;
  margin-block:-14px;
  border-radius:8px;
  color:inherit;
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
.pattern-shop__link .pattern-shop__nt{ text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px; text-decoration-color:var(--blue); }
.pattern-shop__link:hover{ color:var(--blue-deep); }
.pattern-shop__link:hover .pattern-shop__nt{ text-decoration-thickness:2px; }
.pattern-shop__link:focus-visible{ outline:3px dashed var(--focus); outline-offset:-4px; }
/* dostępność w sklepie: znacznik pod liczbą sztuk („Chwilowo brak"); wiersz zostaje wysoki na 40 px -
   kod saszetki schodzi pod nazwę, a znacznik staje obok niego po prawej */
.pattern-beads .lib-legend > li.is-stock{ padding-block:2px; }
.pattern-beads li.is-stock .lib-legend__name{ flex-direction:column; flex-wrap:nowrap; align-items:flex-start; gap:2px; }
.pattern-beads li.is-stock .pattern-shop__link{ padding-block:6px; margin-block:-6px; }
.pattern-beads li.is-stock .lib-legend__n{ display:flex; flex-direction:column; align-items:flex-end; gap:2px; line-height:15px; }
.pattern-shop__stock{ display:block; position:relative; height:19px; }
.pattern-shop__stock-t{
  position:absolute;
  top:0;
  right:0;
  padding:2px 7px;
  border-radius:var(--radius-pill);
  background:var(--notice-bg);
  color:var(--notice-text);
  font:800 11.5px/15px var(--font-head);
  white-space:nowrap;
}
/* notka o niedostępnych kolorach (aria-live): pusta jest poza układem, ale zostaje w drzewie dostępności */
.pattern-shop__out{
  margin:0;
  padding:8px 10px;
  border:2px solid var(--yellow-soft-edge);
  border-radius:12px;
  background:var(--notice-bg);
  color:var(--notice-text);
  font:700 13px/1.4 var(--font-body);
}
.pattern-shop__out:empty{
  position:absolute;
  width:1px;
  height:1px;
  margin:-1px;
  padding:0;
  border:0;
  overflow:hidden;
  clip-path:inset(50%);
}
/* notka przycisku koszyka („Do koszyka trafią tylko dostępne kolory.") */
.pattern-shop__note{ font:600 13px/1.4 var(--font-body); color:var(--ink-soft); }

/* sekcje pod spodem */
.pattern-how,
.pattern-faq,
.pattern-similar{
  display:flex;
  flex-direction:column;
  gap:16px;
  margin-top:clamp(40px, 5vw, 64px);
}
.pattern-section-title{ font-size:var(--fs-h2-text); overflow-wrap:anywhere; }

/* FAQ strony wzoru: komponent .faq z lm.css, szerokość bloku jak w artykułach i blokach SEO */
.pattern-faq .faq{ max-width:var(--container-text); }

/* „Jak zrobić" - 3 kroki */
.pattern-steps{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:12px;
  list-style:none;
}
.pattern-step{
  --step-soft:var(--blue-soft);
  --step-edge:#C9E4F4;
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding:16px;
  border:2px solid var(--step-edge);
  border-radius:var(--radius);
  background:var(--step-soft);
  scroll-margin-top:calc(var(--header-h-sm) + 16px);
}
.pattern-step--2{ --step-soft:var(--yellow-soft); --step-edge:var(--yellow-soft-edge); }
.pattern-step--3{ --step-soft:var(--mint-soft);   --step-edge:var(--mint-edge); }
.pattern-step--4{ --step-soft:var(--violet-soft); --step-edge:var(--violet-edge); }   /* duży obraz: krok „Połącz podkładki" */
.pattern-step__icon{
  flex:0 0 52px;
  height:52px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:16px;
  background:#fff;
  color:var(--blue-deep);
  --icon-accent:#2E8BBF;
}
.pattern-step__body{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.pattern-step__n{ font:900 13px/1.2 var(--font-head); color:var(--ink-soft); }
.pattern-step__title{ font:900 var(--fs-h4)/1.25 var(--font-head); color:var(--blue-ink); text-wrap:pretty; }
.pattern-step__text{ font-size:var(--fs-body); line-height:1.55; color:var(--ink); }

.pattern-warn{
  display:flex;
  align-items:center;
  gap:8px;
  font:800 15px/1.4 var(--font-head);
  color:var(--yellow-ink);
  --icon-accent:#B07A00;
}
.pattern-how__more{ line-height:1.6; }

/* „Poprzedni / Następny wzór" - sąsiedzi w kategorii; na wąskim ekranie kafle jeden pod drugim */
.pattern-pager{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:12px;
  margin-top:clamp(32px, 4vw, 48px);
}
.pattern-pager__link{
  --tone-soft:var(--blue-soft);
  --tone-edge:var(--blue);
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
  min-height:72px;
  padding:8px 14px 8px 8px;
  border:2px solid var(--tone-edge);
  border-radius:var(--radius);
  background:var(--tone-soft);
  box-shadow:0 4px 0 var(--tone-edge);
  color:var(--ink);
  text-decoration:none;
  transition:transform var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
  -webkit-tap-highlight-color:transparent;
}
.pattern-pager__link--next{ flex-direction:row-reverse; padding:8px 8px 8px 14px; text-align:right; }
.pattern-pager__link:hover{ color:var(--ink); transform:translateY(-3px); box-shadow:0 7px 0 var(--tone-edge); }
.pattern-pager__link:active{ transform:translateY(4px); box-shadow:0 0 0 var(--tone-edge); transition-duration:var(--dur-1); }
.pattern-pager__link:focus-visible{ outline:3px dashed var(--focus); outline-offset:5px; }
.pattern-pager__thumb{
  position:relative;
  flex:0 0 64px;
  width:64px;
  height:64px;
  overflow:hidden;
  border-radius:var(--radius-sm);
  background:#fff;
}
.pattern-pager__thumb img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }   /* duży obraz: miniatura w proporcjach */
.pattern-pager__text{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 1 auto; }
.pattern-pager__dir{ font:800 var(--fs-micro)/1.3 var(--font-body); color:var(--ink-soft); }
.pattern-pager__arrow{ display:inline-block; margin-inline:0 6px; }
.pattern-pager__link--next .pattern-pager__arrow{ margin-inline:6px 0; }
.pattern-pager__name{
  font:900 var(--fs-h4)/1.25 var(--font-head);
  color:var(--blue-ink);
  overflow-wrap:anywhere;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
  overflow:hidden;
}
@media (prefers-reduced-motion:reduce){
  .pattern-pager__link, .pattern-pager__link:hover, .pattern-pager__link:active{ transition:none; transform:none; }
}

/* „Podobne wzory" */
.pattern-similar__more{ display:flex; flex-wrap:wrap; gap:10px; }
.pattern-similar__more .btn{ white-space:normal; }   /* długa nazwa kategorii („Wszystkie wzory: Dzień Babci i Dziadka”) zawija się na wąskim telefonie zamiast wystawać poza ekran */

/* ---------- 3. Strona kategorii ---------- */
.cat-chips{ list-style:none; }
.cat-chips > li{ flex:0 0 auto; display:flex; }
.cat-chips .chip{ position:relative; padding:0 14px 0 10px; gap:8px; }   /* .sr-only w środku nie wychodzi poza przewijany rząd */
.cat-chips .chip[aria-current="page"] .lib-chip__dot{ background:radial-gradient(circle, var(--blue-deep) 0 26%, #fff 30%); }

.cat-grid-title{ font-size:var(--fs-h2-text); }
.wzor-count{ color:var(--ink-soft); font-weight:800; font-variant-numeric:tabular-nums; }

.lib-seo .cat-seo__lead{ font-size:var(--fs-lead); line-height:1.6; }
.cat-cta{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:28px;
  padding:clamp(20px, 3vw, 32px);
}
.lib-seo .cat-cta h2{ margin:0; }
.lib-seo .cat-cta p{ margin:0; }
.lib-seo .cat-cta .btn{ font-weight:900; }
.cat-cta__actions{ display:flex; flex-wrap:wrap; gap:10px; margin-top:4px; }
.cat-cta__actions .btn{ white-space:normal; }   /* długa etykieta zawija się na wąskim telefonie zamiast wystawać */

/* ---------- 4. Breakpointy ---------- */
@media (min-width:560px){
  .pattern-pager{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px; }
}
@media (min-width:768px) and (max-width:999.98px){
  /* trzy przyciski: główny na całą szerokość, pod nim „Ułóż krok po kroku" i sklep obok siebie */
  .pattern-actions{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .pattern-actions > :first-child{ grid-column:1 / -1; }
  .pattern-actions__note{ text-align:left; }
}
@media (min-width:1000px){
  .pattern-steps{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  .pattern-steps--4{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .pattern-top{ grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr); }
  .pattern-preview{ position:sticky; top:calc(var(--header-h) + 16px); }
  .pattern-step{ scroll-margin-top:calc(var(--header-h) + 16px); }
  .pattern-similar__grid{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
  /* duży obraz poziomy: podgląd na całą szerokość, pod nim opis z przyciskami (lewa kolumna) i lista koralików (prawa);
     ostatni rząd 1fr przyjmuje nadmiar wysokości listy, więc odstępy w lewej kolumnie się nie rozciągają */
  .pattern-top--wide{ grid-template-columns:minmax(0, 1fr); }
  .pattern-top--wide .pattern-preview{ position:static; }
  .pattern-top--wide .pattern-info{
    display:grid;
    grid-template-columns:minmax(0, 1.05fr) minmax(0, 1fr);
    grid-template-rows:auto auto auto auto 1fr;
    align-items:start;
    gap:18px clamp(22px, 3vw, 40px);
  }
  .pattern-top--wide .pattern-info > *{ grid-column:1; }
  .pattern-top--wide .pattern-info > .pattern-beads{ grid-column:2; grid-row:1 / -1; }
}
@media (min-width:1280px){
  .pattern-similar__grid{ grid-template-columns:repeat(6, minmax(0, 1fr)); }
  .pattern-steps--4{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
}