/* ============================================================================
   import-showcase.css — MOBILE (Source-of-Truth) · ผลงานการนำเข้า (portfolio)
   ----------------------------------------------------------------------------
   Rebuilt 2026-07-19 (Owner): a simple gallery of import-work photos + captions.
   Desktop/tablet light-2026 grid lives in import-showcase.desktop.css (loaded via
   <link media="(min-width:768px)">) and never overrides this mobile truth.
   ============================================================================ */

/* base type — the shared design system does NOT set a body font-family; each page must
   (matches membership.css / profile.css) or the body falls back to the browser serif default. */
body { font-family: var(--fb, 'Prompt', sans-serif); color: var(--ink, #23201c); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font-family: inherit; }

/* in-content title is desktop-only; mobile uses the shell's <header> title bar */
.pt-h { display: none; }

.page .lead {
  margin: 2px 2px 16px;
  color: var(--muted, #7b7167);
  font-size: 13.5px;
  line-height: 1.55;
}

/* ---- gallery ---- */
.gallery { display: grid; grid-template-columns: 1fr; gap: 14px; }

.pf {
  background: #fff;
  border: 1px solid var(--line, #f0ebe3);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(30, 40, 60, .05), 0 12px 28px -18px rgba(30, 40, 60, .18);
}

/* photo (3:2) */
.pf-img { position: relative; aspect-ratio: 3 / 2; background: #F2F3F6; }
.pf-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* branded placeholder until a photo is added (JS adds .noimg on <img> error) */
.pf-img.noimg { background: linear-gradient(135deg, #FFD9B0, #FF9F5A); }
.pf-img.noimg img { display: none; }
.pf-img.noimg::after {
  content: 'ผลงานนำเข้า PTCARGO';
  position: absolute; inset: 0; display: grid; place-items: center;
  color: #fff; font-family: var(--fd, 'Kanit', sans-serif); font-weight: 600; font-size: 15px;
  letter-spacing: .3px; text-shadow: 0 2px 8px rgba(160, 70, 10, .35);
}

/* category chip on the photo */
.pf-cat {
  position: absolute; left: 10px; top: 10px; z-index: 1;
  background: rgba(20, 16, 12, .55); color: #fff;
  font-size: 11px; font-weight: 500; padding: 4px 10px; border-radius: 999px;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}

/* caption */
.pf-body { padding: 14px 15px 15px; }
.pf-title { margin: 0 0 6px; font-family: var(--fd, 'Kanit', sans-serif); font-weight: 600; font-size: 15px; color: var(--ink, #23201c); }
.pf-desc { margin: 0 0 11px; font-size: 12.5px; line-height: 1.55; color: var(--ink-2, #4a443d); }

.pf-meta { display: flex; flex-wrap: wrap; gap: 6px 10px; }
.pf-meta span {
  font-size: 11px; color: var(--ink-2, #4a443d);
  background: #F6F3EF; border: 1px solid var(--line, #f0ebe3);
  padding: 3px 9px; border-radius: 999px; white-space: nowrap;
}
.pf-meta .pf-route { color: var(--sun-deep, #ef5f06); background: #FFF3EA; border-color: #FFD8BE; font-weight: 500; }