/* ==========================================================
   Featured images, card thumbnails, topic banners and the contact form.
   Source: toolsite-v2-src/static-site/css/media.css (copied by build.js). Loaded after portal.css.
   Every <img> has width/height attributes and a CSS aspect-ratio, so nothing shifts while images load.
   ========================================================== */
.hero-fig{margin:14px 0 20px}
.hero-fig img{display:block;width:100%;height:auto;aspect-ratio:1200/630;object-fit:cover;border-radius:var(--r,14px);background:var(--soft)}
.hero-fig.topic-banner{margin:6px 0 18px}
.hero-fig.topic-banner img{aspect-ratio:1200/400}
.img-credit{margin-top:6px;font-size:.76rem;line-height:1.45;color:var(--muted)}
.img-credit a{color:inherit}
.img-credit a.ext::after{content:none}
/* cards with a thumbnail on top */
.posts-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.post-card.has-thumb{display:flex;flex-direction:column;padding:0;overflow:hidden}
.post-card.has-thumb>:not(.card-thumb){margin-left:16px;margin-right:16px}
.post-card.has-thumb>:last-child{margin-bottom:16px}
.card-thumb{display:block;aspect-ratio:400/210;overflow:hidden;background:var(--soft);margin-bottom:8px}
.card-thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s ease}
.post-card:hover .card-thumb img,.mini-item:hover .card-thumb img{transform:scale(1.04)}
/* compact list rows with a small thumbnail (home page, category pages) */
.mini-list{list-style:none;padding:0!important;margin:.6em 0;display:grid;gap:12px}
.mini-item{display:flex;gap:12px;align-items:flex-start;margin:0!important}
.mini-item .card-thumb{flex:none;width:112px;margin:0;border-radius:10px}
.mini-body{display:flex;flex-direction:column;gap:2px;min-width:0}
.mini-body a{font-weight:600;line-height:1.3}
.mini-body .small{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media (min-width:860px){.home-blog .mini-list,.cat-page .related .mini-list{grid-template-columns:1fr 1fr;column-gap:22px}}
/* small picture in tool category headers */
.cat-hero.has-img{align-items:center}
.cat-hero-img{flex:none;width:210px;height:auto;aspect-ratio:400/210;object-fit:cover;border-radius:16px;margin-left:auto;box-shadow:var(--shadow)}
@media (max-width:760px){.cat-hero-img{display:none}}
@media (prefers-reduced-motion:reduce){.card-thumb img{transition:none}.post-card:hover .card-thumb img,.mini-item:hover .card-thumb img{transform:none}}
/* contact form */
.contact-form{display:grid;gap:14px;margin:16px 0 22px;padding:18px;border:1px solid var(--border);border-radius:var(--r,14px);background:var(--card);box-shadow:var(--shadow)}
.contact-form .row2{display:grid;gap:14px;grid-template-columns:1fr 1fr}
@media (max-width:600px){.contact-form .row2{grid-template-columns:1fr}}
.contact-form input,.contact-form select,.contact-form textarea{font:inherit;width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--bg);color:var(--fg)}
.contact-form textarea{min-height:150px;resize:vertical}
.contact-form .hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.contact-form .cf-status{margin:0;font-weight:600}
.contact-form .cf-status:empty{display:none}
.contact-form .hint{font-size:.82rem;color:var(--muted)}

/* ---------- Photo to PDF Scanner (/photo-to-pdf-scanner/) - mobile first ---------- */
.sc-add{display:grid;gap:10px}
.sc-cam{position:relative;justify-content:center;font-size:1.05rem;min-height:52px;width:100%}
.sc-cam input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.sc-pages{list-style:none;margin:12px 0;padding:4px 2px 10px;display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity}
.sc-page{flex:0 0 112px;scroll-snap-align:start;display:flex;flex-direction:column;gap:6px}
.sc-thumb{position:relative;display:block;width:112px;height:150px;padding:0;border:2px solid var(--border);border-radius:10px;background:var(--soft);overflow:hidden;cursor:pointer}
.sc-thumb img{width:100%;height:100%;object-fit:contain;display:block}
.sc-page.on .sc-thumb{border-color:var(--primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 25%,transparent)}
.sc-n{position:absolute;left:6px;top:6px;background:rgba(0,0,0,.65);color:#fff;font-size:.75rem;font-weight:700;border-radius:6px;padding:1px 6px}
.sc-btns{display:grid;grid-template-columns:repeat(4,1fr);gap:3px}
.sc-btns .small-btn{padding:2px 0;min-height:32px}
.sc-btns .small-btn:disabled{opacity:.35;cursor:default}
.sc-editor{border:1px solid var(--border);border-radius:14px;padding:12px;margin:8px 0 14px;background:var(--card)}
.sc-ed-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
.sc-ed-grid{display:grid;gap:14px}
.sc-canvas,.sc-preview{display:block;width:100%;height:auto;border-radius:10px;background:#111}
.sc-canvas{touch-action:none;cursor:crosshair}
.sc-preview{max-height:70vh;object-fit:contain;background:var(--soft);box-shadow:0 1px 6px rgba(0,0,0,.15)}
@media (min-width:760px){.sc-add{grid-template-columns:220px 1fr;align-items:stretch}.sc-cam{height:100%}.sc-ed-grid{grid-template-columns:3fr 2fr;align-items:start}}
.sc-btns .small-btn,.sc-editor .small-btn{display:inline-flex;align-items:center;justify-content:center;padding:6px 10px;min-height:36px;background:var(--soft);color:var(--fg);border:1px solid var(--border);border-radius:8px;text-decoration:none;font-size:.88rem}
.sc-btns .small-btn{padding:2px 0;font-size:.95rem}
.sc-btns .small-btn:hover,.sc-editor .small-btn:hover{border-color:var(--primary)}