/* Printables Library page (pattern frugalsos/printables-library). Loaded on that page only, after tips-library.css,
   which gives the hero, search, topic shelf and side boxes. This file adds the printable cards: a page preview, the
   topic, the title, what it goes with and the button. Two cards a row on phones. */
.fsos-pl__list { display: grid; gap: 2rem; }
.fsos-pl__gh { display: flex; align-items: center; gap: .6rem; margin: 0 0 .9rem; padding-bottom: .35rem; border-bottom: 2px solid var(--lib-jade); font: 500 clamp(1.4rem, 3vw, 1.8rem) var(--wp--preset--font-family--display); color: var(--lib-jade); }
.fsos-pl__gh img { width: 40px; height: 40px; border-radius: 50%; }
.fsos-pl__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1rem; }
@media (max-width: 699px) { .fsos-pl__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; } }
.fsos-pl__card { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--lib-rule); border-radius: 6px; overflow: hidden; }
.fsos-pl__card[hidden] { display: none; }
.fsos-pl__sheet { display: flex; justify-content: center; padding: .9rem; background: var(--lib-linen); }
.fsos-pl__sheet img, .fsos-pl__blank { display: block; width: 80%; aspect-ratio: 8.5 / 11; object-fit: cover; object-position: top; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .16); transition: transform .3s var(--fsos-ease); }
.fsos-pl__sheet:hover img { transform: translateY(-3px) rotate(-1deg); }
.fsos-pl__blank { border: 2px dashed var(--wp--preset--color--sage); box-shadow: none; }
.fsos-pl__body { display: flex; flex-direction: column; gap: .35rem; padding: .75rem .85rem .95rem; flex: 1; }
.fsos-pl__topic { font: 600 .72rem/1 var(--wp--preset--font-family--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--lib-jade); }
.fsos-pl__name { font: 500 1.15rem/1.2 var(--wp--preset--font-family--display); color: var(--wp--preset--color--forest); }
.fsos-pl__for { font-size: .9rem; color: var(--lib-soft); }
.fsos-pl__btn { margin-top: auto; align-self: flex-start; background: var(--lib-jade); color: #fff !important; text-decoration: none; border-radius: 999px; padding: .55rem 1rem; font: 600 .85rem var(--wp--preset--font-family--sans); min-height: 40px; display: inline-flex; align-items: center; }
.fsos-pl__btn:hover { background: var(--wp--preset--color--forest); }
@media (max-width: 699px) { .fsos-pl__name { font-size: 1rem; } .fsos-pl__btn { padding: .5rem .8rem; font-size: .8rem; } }
.fsos-pl__more { margin: .8rem 0 0; font: 600 .95rem var(--wp--preset--font-family--sans); }
.fsos-pl__back { margin: -.3rem 0 .9rem; font: 600 .95rem var(--wp--preset--font-family--sans); color: var(--lib-soft); }
.fsos-pl__set .fsos-pl__sheet img { box-shadow: 0 2px 8px rgba(0, 0, 0, .16), 7px 7px 0 -1px #fff, 7px 7px 0 0 rgba(0, 0, 0, .14), 14px 14px 0 -1px #fff, 14px 14px 0 0 rgba(0, 0, 0, .1); margin-right: 14px; }