/*
 * IThandy - bloki linkowania wewnętrznego (styl Warsztat), ładowane tylko na stronach usług i CMS
 * (metoda relatedStyles() modułu ithandy_brand, PO ith-warsztat.css).
 *  - .ith-rel: "Powiązane poradniki" na stronie usługi. Karty to szuflady z ith-warsztat.css (.ith-drawer,
 *    uchwyt, tabliczka z kategorią Bazy wiedzy, ikona kategorii) - tu tylko układ i drobne różnice.
 *  - .ith-fix: "Usługa, która rozwiąże ten problem" pod artykułem. Tablica z perforacją (mint), karty usług
 *    z obramowaniem 3 px ink i twardym cieniem, CTA coral (.ith-btn z ith-warsztat.css).
 * Kolory wyłącznie z brand kitu: ink #0B2B2A, teal 700 #0E8C80, coral #FF6B5C, mint #F4FBFA, tekst pomocniczy #3E4F4E.
 */

/* ===== Powiązane poradniki (strona usługi) ===== */
.ith-rel { margin: 48px 0 40px; }
.ith-rel__head { max-width: 760px; margin: 0 0 26px; }
.ith-rel__head h2 { margin: 0 0 8px; font: 800 1.6rem/1.2 "Poppins", "Inter", sans-serif; letter-spacing: -.02em; color: #0B2B2A; }
.ith-rel__head h2::after { content: ""; display: block; width: 48px; height: 6px; margin-top: 12px; background: #0B2B2A; }
.ith-rel__sub { margin: 0; color: #3E4F4E; font-size: 1rem; line-height: 1.55; }
.ith-drawers.ith-rel__grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 24px; }
.ith-rel__card { height: 100%; }
.ith-rel__card .ith-drawer__t { font-size: 1.1rem; }
.ith-rel__card .ith-drawer__d { font-size: .93rem; flex: 1 1 auto; }
.ith-rel__cat { font-size: 11px; letter-spacing: .08em; }
.ith-rel__more {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 4px;
  font: 700 .92rem/1.3 "Inter", sans-serif; color: #0B2B2A;
  text-decoration: underline; text-decoration-color: #FF6B5C; text-decoration-thickness: 3px; text-underline-offset: 5px;
}
.ith-rel__more .ith-icon { width: 18px; height: 18px; color: #0E8C80; }
.ith-rel__all { margin: 26px 0 0; }
.ith-rel__all a {
  font-weight: 700; color: #0B2B2A; text-decoration: underline; text-decoration-color: #FF6B5C;
  text-decoration-thickness: 3px; text-underline-offset: 5px;
}
.ith-rel__all a:hover { text-decoration-color: #0B2B2A; }

/* ===== Usługa, która rozwiąże ten problem (artykuł Bazy wiedzy) ===== */
.ith-fix {
  margin: 44px 0 36px; padding: 30px 28px 26px;
  background: radial-gradient(circle, rgba(14, 140, 128, .28) 3px, transparent 3.5px) 14px 14px / 28px 28px, #F4FBFA;
  border: 3px solid #0B2B2A; box-shadow: 10px 10px 0 #0B2B2A; color: #0B2B2A;
}
.ith-fix__title { margin: 0 0 8px; font: 800 1.5rem/1.2 "Poppins", "Inter", sans-serif; letter-spacing: -.02em; color: #0B2B2A; }
.ith-fix__sub { margin: 0 0 22px; max-width: 760px; color: #3E4F4E; line-height: 1.55; }
.ith-fix__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.ith-fix__grid--one { grid-template-columns: minmax(0, 720px); }
.ith-fix__card {
  display: flex; flex-direction: column; gap: 10px; padding: 22px 22px 20px;
  background: #FFFFFF; border: 3px solid #0B2B2A; box-shadow: 6px 6px 0 #0B2B2A;
}
.ith-fix__ic { color: #0E8C80; }
.ith-fix__ic .ith-icon { width: 32px; height: 32px; }
.ith-fix__name { margin: 0; font: 700 1.2rem/1.25 "Poppins", "Inter", sans-serif; }
.ith-fix__name a { color: #0B2B2A; text-decoration: none; }
.ith-fix__name a:hover { text-decoration: underline; text-decoration-color: #FF6B5C; text-decoration-thickness: 3px; text-underline-offset: 4px; }
.ith-fix__desc { margin: 0; color: #3E4F4E; font-size: .95rem; line-height: 1.55; flex: 1 1 auto; }
.ith-fix__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 6px; }
.ith-fix__actions .ith-btn { min-height: 48px; padding: 10px 22px; font-size: .98rem; }
.ith-fix__more {
  font-weight: 700; color: #0B2B2A; text-decoration: underline; text-decoration-color: #0E8C80;
  text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.ith-fix__more:hover { color: #0B2B2A; text-decoration-color: #FF6B5C; }
.ith-fix__alt { margin: 22px 0 0; font-size: .95rem; color: #0B2B2A; }
.ith-fix__alt a { color: #0B2B2A; font-weight: 700; text-decoration: underline; text-decoration-color: #FF6B5C; text-decoration-thickness: 3px; text-underline-offset: 4px; }

/* Fokus z klawiatury wyraźny na kartach (ink na białym) */
.ith-rel__card:focus-visible, .ith-fix a:focus-visible { outline: 3px solid #0B2B2A; outline-offset: 3px; }

@media (max-width: 767px) {
  .ith-rel { margin: 36px 0 28px; }
  .ith-rel__head h2 { font-size: 1.35rem; }
  .ith-drawers.ith-rel__grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .ith-fix { padding: 22px 16px 20px; box-shadow: 6px 6px 0 #0B2B2A; }
  .ith-fix__title { font-size: 1.3rem; }
  .ith-fix__grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .ith-fix__card { box-shadow: 5px 5px 0 #0B2B2A; }
  .ith-fix__actions .ith-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .ith-rel__card:hover { transform: none; }
}