/* plants.css (2026-10-23): the plants as cut-out photos from Buce Plant, each turning as it passes (plants.js, motion.js) */
.pl-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1rem; margin: 2rem 0 2.5rem; }
@media (min-width: 40rem) { .pl-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .pl-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5rem 1.5rem; } }
.pl-t { display: grid; min-width: 0; gap: .6rem; color: inherit; text-decoration: none; }
.pl-fig { position: relative; display: grid; place-items: end center; aspect-ratio: 1; padding: 8% 8% 12%;
  background: radial-gradient(60% 55% at 50% 58%, color-mix(in srgb, #248FD3 16%, transparent), transparent 72%); }
.pl-fig::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: 9%; height: 7%; border-radius: 50%; background: radial-gradient(closest-side, rgb(0 0 0 / 28%), transparent); }
.pl-turn { position: relative; z-index: 1; display: block; width: 100%; height: 100%; }
.pl-turn img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 6px 10px rgb(0 0 0 / 18%)); }
.pl-photo .pl-fig { padding: 0; background: none; }
.pl-photo .pl-fig::after { display: none; }
.pl-photo .pl-turn img { object-fit: cover; border-radius: 14px; filter: none; }
.pl-tx { display: grid; gap: .15rem; text-align: center; }
.pl-tx b { font-size: .9375rem; font-weight: 600; line-height: 1.25; color: var(--strong); letter-spacing: -.01em; }
.pl-tx small { font-size: .6875rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--grey); }
.pl-t:hover .pl-tx small, .pl-t:focus-visible .pl-tx small { color: var(--chum-text, #248FD3); }
.pl-t:focus-visible { outline: 2px solid var(--chum, #248FD3); outline-offset: 4px; border-radius: 12px; }
/* the betta tanks: the photos carry the plants, so the long notes under the old cards go */
#plants:has([data-plants="betta"], [data-plants="plakat"]) .scape li > span:not(.sc-pic) { display: none; }
/* the old per-place plant cards repeat the photos above: only the hardscape list stays */
#plants:has([data-plants="betta"], [data-plants="plakat"]) .wrap > ul.scape:not(:first-of-type),
#plants:has([data-plants="betta"], [data-plants="plakat"]) .wrap > h3.t30-place:not(:first-of-type) { display: none; }