/* rejestrlekow.com: the medicine item card. Theme colours and fonts come from registry.css
   custom properties; category and vet colours come from medicine.css. */

/* a 14px utility line used throughout the card (and, until the list page defines its own, there too) */

.card-head { background: var(--card); border-bottom: 1px solid var(--line); }
.card-head .wrap { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 40px; padding-block: 22px 36px; align-items: end; }
.card-head__tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.card-head h1 { margin-top: 14px; font-size: 2.875rem; line-height: 1.05; font-weight: 600; letter-spacing: -0.02em; }
.card-head__line { margin-top: 10px; font-size: 1.125rem; color: var(--text-2); }
.card-head__line i { color: var(--ink); font-style: italic; }
.regno { padding: 16px 18px; border: 1px solid var(--line); background: var(--page); display: grid; gap: 6px; }
.regno b { font: 600 26px/1 var(--font-mono); }

.layout { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 40px; align-items: start; }
.layout .stack { gap: 28px; }

.block { background: var(--card); border: 1px solid var(--line); }
.block__head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 16px; align-items: baseline; padding: 18px 22px; border-bottom: 1px solid var(--line-soft); }
.block__head h2 { font-size: 1.25rem; font-weight: 600; }
.block__body { padding: 20px 22px; }

.spec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.spec > div { padding: 14px 22px; border-top: 1px solid var(--line-soft); display: grid; gap: 4px; }
.spec > div:nth-child(odd) { border-right: 1px solid var(--line-soft); }
.spec dt { font: 500 12px/1.3 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--caption); }
.spec dd { margin: 0; font-size: 1rem; }
.spec dd.mono { font-size: 0.9375rem; }
.spec small { display: block; font-size: 0.8125rem; color: var(--caption); margin-top: 2px; }

.atc { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.atc > div { display: grid; gap: 6px; }
.atc b { display: grid; place-items: center; height: 46px; background: var(--tint); color: var(--deep); font: 600 20px/1 var(--font-mono); }
.atc > div:last-child b { background: var(--accent); color: #FFFFFF; }
.atc span { font-size: 0.78125rem; line-height: 1.35; color: var(--text-2); }
.atc small { font: 400 11px/1 var(--font-mono); color: var(--caption); letter-spacing: 0.04em; }

.packs { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.packs th { text-align: left; font: 500 12px/1.3 var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; color: var(--caption); padding: 10px 22px; background: var(--page); }
.packs td { padding: 12px 22px; border-top: 1px solid var(--line-soft); }

.makers, .docs, .rel { list-style: none; margin: 0; padding: 0; }
.makers.block__body { padding: 20px 22px; }

.makers li { display: flex; justify-content: space-between; gap: 12px; padding-block: 10px; border-top: 1px solid var(--line-soft); }
.makers li:first-child { border-top: 0; }

.docs li { border-top: 1px solid var(--line-soft); }
.docs li:first-child { border-top: 0; }
.docs a { display: grid; grid-template-columns: 44px 1fr auto; gap: 12px; align-items: center; padding: 12px 22px; color: var(--ink); text-decoration: none; }
.docs b { display: grid; place-items: center; height: 44px; border: 1px solid var(--line); font: 600 11px/1 var(--font-mono); color: var(--accent); }
.docs small { display: block; color: var(--caption); font-size: 0.8125rem; }
.docs .go { font: 500 13px/1 var(--font-mono); color: var(--accent); }

.rel li a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; padding: 12px 22px; border-top: 1px solid var(--line-soft); color: var(--ink); text-decoration: none; }
.rel li:first-child a { border-top: 0; }
.rel small { grid-column: 1; color: var(--caption); font-size: 0.875rem; }

.box { padding: 18px 20px; display: grid; gap: 10px; font-size: 0.875rem; color: var(--text-2); }
.box h3 { font-size: 1rem; color: var(--ink); }

.mobile-docs { display: none; }

@media (max-width: 860px) {
    .card-head .wrap, .layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .card-head h1 { font-size: 2rem; }
    .spec { grid-template-columns: minmax(0, 1fr); }
    .spec > div:nth-child(odd) { border-right: 0; }
    .atc { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
    .atc b { font-size: 0.9375rem; height: 40px; }
    .atc span { font-size: 0.6875rem; }
    .mobile-docs { display: flex; position: sticky; bottom: 0; gap: 8px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--card); border-top: 1px solid var(--line); z-index: 5; }
    .mobile-docs .btn { flex: 1; }
}