/* Care card: one plant, how to keep it alive, a QR code that brings anyone back to this page. Prints on one A5 sheet. */
.cc { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 88px); align-items: start; padding-block: clamp(24px, 5vh, 56px) clamp(64px, 10vh, 120px); }
.cc__card { display: grid; grid-template-columns: 1fr auto; gap: 22px 24px; padding: clamp(24px, 3vw, 40px); border-radius: 18px; background: #fff; box-shadow: 0 1px 0 rgba(18,20,18,.06), 0 30px 70px -40px rgba(18,20,18,.4); }
.cc__pic { grid-column: 1 / -1; aspect-ratio: 16 / 10; border-radius: 12px; overflow: hidden; background: #e7e4dc; }
.cc__pic img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 40%; }
.cc__name { margin: 0; font: 400 clamp(34px, 3.2vw, 48px)/1.05 var(--font-serif); letter-spacing: -.02em; }
.cc__alt { display: block; margin-block-start: 6px; font: 400 15px/1.4 var(--font-text); opacity: .6; }
.cc__qr { display: grid; justify-items: center; gap: 6px; font: 500 11px/1.2 var(--font-text); opacity: .75; text-align: center; max-inline-size: 104px; }
.cc__qr svg, .cc__qr img { inline-size: 96px; block-size: 96px; }
.cc__rows { grid-column: 1 / -1; list-style: none; margin: 0; padding: 0; display: grid; gap: 0; border-block-start: 1px solid rgba(18,20,18,.1); }
.cc__rows li { display: grid; grid-template-columns: 34px 1fr; gap: 14px; padding-block: 16px; border-block-end: 1px solid rgba(18,20,18,.1); }
.cc__rows svg { inline-size: 26px; block-size: 26px; fill: none; stroke: var(--zellige); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.cc__rows b { display: block; font: 600 13px/1.2 var(--font-text); margin-block-end: 4px; }
.cc__rows span { font: 400 16px/1.5 var(--font-text); }
.cc__foot { grid-column: 1 / -1; margin: 0; font: 400 13px/1.45 var(--font-text); opacity: .65; }
.cc__side { display: grid; gap: 26px; align-content: start; }
.cc__side .h1 { font-size: clamp(42px, 4.6vw, 72px); }
.cc__acts { display: flex; flex-wrap: wrap; gap: 12px; }
.rem { display: grid; gap: 14px; padding: 22px; border-radius: 16px; background: var(--menthe); }
.rem h2 { margin: 0; font: 400 24px/1.15 var(--font-serif); }
.rem p { margin: 0; font: 400 15px/1.5 var(--font-text); opacity: .8; }
.rem .choices { margin-block-start: 2px; }
.cc__none { grid-column: 1 / -1; display: grid; gap: 18px; justify-items: start; }
@media (max-width: 900px) { .cc { grid-template-columns: 1fr; } .cc__side { order: -1; } }
@media print {
  .topbar, .hh, .ft, .ask-city, .toast, .cc__side, .skip { display: none !important; }
  body, .page { background: #fff; }
  .cc { display: block; padding: 0; }
  .cc__card { box-shadow: none; border: 1px solid #ccc; max-inline-size: 148mm; margin: 0 auto; }
}