/* Product cards - ONE small, picture-first look for the Products page and the Home "Tools" section (markup: app/product-card.php, prefix pc-).
   Picture on top (same 4:3 frame for every product), then the kind, the name and the price - all centred. The whole card is the link.
   Desktop: cards 250px wide, as many per row as fit, an incomplete last row is centred. Tablet: 3 per row. Phone: 2 per row. */
.pc-grid { --pc-gap: clamp(14px, 1.8vw, 24px); display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(18px, 2.2vw, 28px) var(--pc-gap); }
.pc-card { position: relative; flex: 0 0 250px; display: flex; flex-direction: column; border-radius: 18px; background: transparent; transition: transform .25s ease; }
.pc-card:hover, .pc-card:focus-within { transform: translateY(-4px); }
.pc-card:focus-within { outline: 2px solid #dbaa3e; outline-offset: 4px; }

.pc-media { position: relative; display: block; overflow: hidden; border-radius: 16px; background: #0b1b2e; box-shadow: 0 1px 2px rgba(7, 21, 36, .08), 0 14px 28px -16px rgba(7, 21, 36, .5); }
.pc-media img, .pc-ph { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; }
/* the WHOLE picture is always shown, shrunk to fit the 4:3 frame (no cropping, no zoom); a picture of another shape gets navy bars, the same colour as the frame */
.pc-media img { object-fit: contain; object-position: center; }
.pc-ph { display: grid; place-items: center; background: radial-gradient(120% 90% at 20% 0%, rgba(219, 170, 62, .22), transparent 60%), linear-gradient(135deg, #0b1f36, #12385c); }
.pc-ph > span { width: 68px; height: 68px; display: grid; place-items: center; border-radius: 20px; border: 1px solid rgba(219, 170, 62, .45); background: rgba(255, 255, 255, .06); font-size: 32px; }
.pc-ph-trial { background: radial-gradient(120% 90% at 80% 0%, rgba(243, 214, 133, .35), transparent 60%), linear-gradient(135deg, #3a2a08, #7a5a12); }
.pc-ph-journal { background: radial-gradient(120% 90% at 20% 0%, rgba(80, 200, 170, .22), transparent 60%), linear-gradient(135deg, #0b2a2c, #124a4a); }
/* "View details" over the picture - only where a mouse can hover (on a phone the whole card is tapped) */
.pc-view { position: absolute; left: 50%; bottom: 12px; transform: translate(-50%, 8px); opacity: 0; padding: 8px 16px; border-radius: 999px; background: linear-gradient(135deg, #f3d685, #dbaa3e); color: #0b1622; font-size: 12.5px; font-weight: 800; white-space: nowrap; box-shadow: 0 6px 16px rgba(0, 0, 0, .3); transition: opacity .2s ease, transform .2s ease; pointer-events: none; }
@media (hover: hover) { .pc-card:hover .pc-view, .pc-card:focus-within .pc-view { opacity: 1; transform: translate(-50%, 0); } }

.pc-body { display: flex; flex: 1; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px 4px; text-align: center; }
.pc-tag { display: inline-block; padding: 3px 10px; border-radius: 999px; background: rgba(219, 170, 62, .18); color: #7a5a12; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.pc-tag-trial { background: linear-gradient(135deg, #f3d685, #dbaa3e); color: #0b1622; }
/* the extra selectors beat the site-wide h2 / h3 size rules (body.density-compact h2 ... !important) */
body .pc-card .pc-name { margin: 0 !important; font: 700 clamp(15px, 1.3vw, 16.5px)/1.3 Georgia, serif !important; color: #0b1b2e; display: -webkit-box !important; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pc-name a { color: inherit; text-decoration: none; }
.pc-name a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.pc-name a:focus-visible { outline: none; }

.pc-meta { margin-top: auto; padding-top: 2px; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%; }
.pc-from { min-height: 12px; color: #8a97a5; font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.pc-price { display: inline-flex; align-items: baseline; justify-content: center; gap: 5px; flex-wrap: wrap; }
.pc-price b { color: #0b1b2e; font: 700 20px/1.1 Georgia, serif; }
.pc-price small { color: #5a6a7a; font-size: 12.5px; font-weight: 700; }
.pc-sub { min-height: 19px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; flex-wrap: wrap; font-size: 12px; color: #8a97a5; }
.pc-sub s { color: #8a97a5; }
.pc-off { padding: 1px 7px; border-radius: 999px; background: #e3f5ea; color: #14703a; font-size: 10.5px; font-weight: 800; letter-spacing: .04em; }
.pc-per { min-height: 16px; color: #5a6a7a; font-size: 12px; font-weight: 700; }

/* tablet: 3 per row */
@media (min-width: 601px) and (max-width: 1000px) {
    .pc-card { flex-basis: calc((100% - 2 * var(--pc-gap)) / 3); }
}
/* phone: 2 per row, same card just narrower */
@media (max-width: 600px) {
    .pc-grid { --pc-gap: 12px; gap: 20px 12px; }
    .pc-card { flex-basis: calc((100% - var(--pc-gap)) / 2); min-width: 0; }
    .pc-media { border-radius: 14px; }
    .pc-ph > span { width: 52px; height: 52px; border-radius: 15px; font-size: 24px; }
    .pc-body { padding: 11px 2px 2px; gap: 5px; }
    .pc-tag { font-size: 9.5px; padding: 3px 8px; }
    body .pc-card .pc-name { font-size: 14px !important; }
    .pc-price b { font-size: 18px; }
    .pc-price small { font-size: 11.5px; }
}
@media (prefers-reduced-motion: reduce) { .pc-card, .pc-view { transition: none; } .pc-card:hover { transform: none; } }

/* on a dark Home section (Admin -> Home Page -> Products -> Background = Navy) */
.yp-dark .pc-name, .yp-dark .pc-price b { color: #fff; }
.yp-dark .pc-price small, .yp-dark .pc-per, .yp-dark .pc-sub, .yp-dark .pc-sub s, .yp-dark .pc-from { color: #b9c8d6; }
.yp-dark .pc-off { background: rgba(80, 200, 130, .18); color: #7fe0a8; }