/* prawo-styles.css — Prawo apteczne (hub, F13). Port 1:1 z handoff/prawo-styles.css.
   Buduje na home.css (shell, tokeny, .section, .hero, .tools, .az). Tu tylko NOWE komponenty
   renderowane w v1 huba: siatka działów + ściąga odpłatności + wzory dokumentów.
   POMINIĘTE (poza v1): .law-spot (Akt tygodnia), .wykazy-* (Baza prawna) — dobudowa później. */

/* ─── Działy prawa aptecznego (legal-area categories) ─────────────────── */
.areas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.area-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--rad-lg);
  padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 10px;
  position: relative; overflow: hidden;
}
a.area-card { cursor: pointer; transition: border-color 0.14s, transform 0.14s, box-shadow 0.14s; }
a.area-card:hover { border-color: var(--line-2); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.area-card .ic {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(13,75,92,0.08); color: var(--primary);
}
.area-card.c-alt  .ic { background: rgba(20,160,133,0.12); color: var(--accent-2); }
.area-card.c-alt2 .ic { background: rgba(204,50,102,0.13);  color: var(--warn); }
.area-card.c-alt3 .ic { background: rgba(29,115,139,0.10); color: var(--primary-2); }
.area-card .tt { font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; }
.area-card .ds { font-size: 12.5px; color: var(--ink-2); line-height: 1.45; flex: 1; }
.area-card .ft {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--line);
}
.area-card .ft .ct { font-family: 'IBM Plex Mono', monospace; font-size: 11px; color: var(--ink-3); letter-spacing: 0.04em; }
.area-card .ft .go { color: var(--ink-4); transition: color 0.14s, transform 0.14s; }
a.area-card:hover .ft .go { color: var(--primary-2); transform: translateX(2px); }

/* ─── Poziomy odpłatności recept (reference cheat-sheet) ──────────────── */
.odpl {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--rad-lg);
  padding: 8px 10px;
}
.odpl-row {
  display: grid; grid-template-columns: 92px minmax(0,1fr) auto;
  gap: 16px; align-items: center; padding: 14px 16px;
  border-bottom: 1px solid var(--line);
}
.odpl-row:last-child { border-bottom: 0; }
.odpl-row .lvl {
  justify-self: start; min-width: 64px; text-align: center;
  font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: 14px;
  padding: 7px 10px; border-radius: 9px; letter-spacing: 0.02em; white-space: nowrap;
}
.odpl-row .desc { font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.odpl-row .desc b { color: var(--ink); font-weight: 600; }
.odpl-row .tag {
  justify-self: end; padding: 4px 10px; border-radius: 6px; flex-shrink: 0;
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
}
/* level swatches + matching tags */
.lvl.free  { background: rgba(20,160,133,0.13); color: var(--accent-2); }
.lvl.rycz  { background: rgba(29,115,139,0.12); color: var(--primary-2); }
.lvl.p30   { background: rgba(13,75,92,0.10);   color: var(--primary); }
.lvl.p50   { background: rgba(151,128,60,0.18); color: #7a6526; }
.lvl.full  { background: rgba(176,42,55,0.12);  color: #a32433; }
.tag.free  { background: rgba(20,160,133,0.13); color: var(--accent-2); }
.tag.rycz  { background: rgba(29,115,139,0.12); color: var(--primary-2); }
.tag.p30   { background: rgba(13,75,92,0.10);   color: var(--primary); }
.tag.p50   { background: rgba(151,128,60,0.18); color: #7a6526; }
.tag.full  { background: rgba(176,42,55,0.12);  color: #a32433; }

.odpl .foot {
  display: flex; align-items: center; gap: 8px; padding: 13px 16px 11px;
  font-size: 12px; color: var(--ink-3);
}
.odpl .foot .ic { color: var(--primary-2); flex-shrink: 0; }

/* ─── Wzory dokumentów (downloadable templates) ───────────────────────── */
.docs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.doc-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--rad-lg);
  padding: 18px 18px 14px; display: flex; flex-direction: column; gap: 10px;
}
.doc-card .top { display: flex; align-items: center; justify-content: space-between; }
.doc-card .ic {
  width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(13,75,92,0.08); color: var(--primary);
}
.doc-card .fmt {
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; font-weight: 600;
  letter-spacing: 0.07em; padding: 4px 8px; border-radius: 6px;
}
.fmt.pdf  { background: rgba(176,42,55,0.12);  color: #a32433; }
.fmt.docx { background: rgba(29,115,139,0.12); color: var(--primary-2); }
.fmt.xlsx { background: rgba(20,160,133,0.13); color: var(--accent-2); }
.doc-card .tt { font-size: 15px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.doc-card .ds { font-size: 12.5px; color: var(--ink-2); line-height: 1.45; flex: 1; }
.doc-card .ft {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--line);
}
.doc-card .ft .sz {
  font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; color: var(--ink-3); letter-spacing: 0.03em;
}
/* Status „w przygotowaniu" (v1: pliki jeszcze nie istnieją — nie fabrykujemy pobierania) */
.doc-card .ft .soon,
.area-card .ft .soon {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 500; color: var(--ink-3);
}
.doc-card .ft .soon svg,
.area-card .ft .soon svg { width: 15px; height: 15px; }
.law-note {
  margin-top: 12px; font-size: 12.5px; color: var(--ink-3);
  display: flex; align-items: center; gap: 7px;
}
.law-note svg { width: 15px; height: 15px; color: var(--primary-2); flex-shrink: 0; }

/* Kafle narzędzi w hubie to podgląd nawigacji (jeszcze nie linki) — nie udawaj klikalności.
   .tool żyje w home.css z cursor:pointer + hover-lift; neutralizujemy dla span (spójnie z
   a.area-card i .doc-card, które też nie hoverują bez linku). */
.tools span.tool { cursor: default; }
.tools span.tool:hover { transform: none; box-shadow: none; border-color: var(--line); }

/* ─── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .areas { grid-template-columns: repeat(2, 1fr); }
  .docs { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .areas { grid-template-columns: 1fr 1fr; }
  .odpl-row { grid-template-columns: 72px 1fr; row-gap: 8px; padding: 14px; }
  .odpl-row .tag { grid-column: 2; justify-self: start; }
  .odpl-row .desc { grid-column: 1 / -1; order: 3; }
}
@media (max-width: 460px) {
  .areas { grid-template-columns: 1fr; }
  .docs { grid-template-columns: 1fr; }
}