/* KHT v15: /projects/, /solution/<type>/ and /projects/<project>/ (mockups solutions.html, solution.html). Loaded after site.css. */

/* ---------- admin-only upload buttons: small and plain, on top of the photo they replace ---------- */
.kht-admin-image-slot, .kht-admin-term-image-slot { position: relative; }
.kht-front-image-upload, .kht-front-term-image-upload {
  position: absolute; left: 8px; bottom: 8px; z-index: 5;
  border: 0; border-radius: 999px; padding: 5px 11px; cursor: pointer;
  background: rgba(255,255,255,.94); color: var(--ink); box-shadow: inset 0 0 0 1px var(--line);
  font: 500 12px/1.4 "IBM Plex Sans", "IBM Plex Sans Thai", sans-serif; white-space: nowrap;
}

/* ---------- /projects/: four business types ---------- */
.types-section { padding-top: 0; }
.types { display: grid; grid-template-columns: repeat(2, 1fr); gap: 48px 24px; }
.type { display: block; }
.type .ph { aspect-ratio: 16 / 9; border-radius: var(--r-md); overflow: hidden; background: var(--stage); }
.type .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.type:hover .ph img { transform: scale(1.03); }
.type .eyebrow { margin-top: 14px; }
.type .meta { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; }
.type p { font-size: 14px; margin-top: 2px; }
.type .count { font-size: 13px; color: var(--ink-3); white-space: nowrap; }
@media (max-width: 700px) { .types { grid-template-columns: 1fr; gap: 40px; } }

/* ---------- /solution/<type>/: chips to the other types, then one card per project photo set ---------- */
.page-head .chips a.chip { display: inline-flex; align-items: center; }
.chip[aria-current="page"] { background: var(--ink); color: #fff; box-shadow: none; }
.chip[aria-current="page"] span { color: #a9a9b0; }
.sets-section { padding-top: 0; }
.sets { margin-top: 0; gap: 40px 20px; }
.set { cursor: default; }
.set .meta h3 { font-size: 16px; }
/* the whole photo opens the set; the count badge sits inside that button */
.set-open { position: absolute; inset: 0; z-index: 1; width: 100%; border: 0; padding: 0; background: none; cursor: pointer; border-radius: inherit; }
.set-link { display: inline-block; margin-top: 2px; font-size: 13px; color: var(--ink-3); }
.set-link:hover { color: var(--ink); }
/* the slot number and the long texts are for the admin text editor only (visitors see photo, name, year) */
.set-fields { display: none; }
body.logged-in .set-fields { display: block; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }
body.logged-in .set-fields p { font-size: 13px; margin-top: 6px; }
.set-slot { font-size: 12px; color: var(--ink-3); letter-spacing: .04em; }
.set-fields dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; margin: 8px 0 0; }
.set-fields dt { color: var(--ink-3); }
.set-fields dd { margin: 0; }

/* ---------- /projects/<project>/: big photo, thumbnails, info rows, text ---------- */
.pj-head { padding-bottom: clamp(24px, 4vw, 40px); }
.pj-section { padding-top: 0; }
.gallery-wrap { display: grid; gap: 10px; }
.main-photo { border-radius: var(--r-lg); overflow: hidden; background: var(--stage); aspect-ratio: 16 / 9; }
.main-photo img { width: 100%; height: 100%; object-fit: cover; }
.thumb-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.thumb-slot { border-radius: var(--r-sm); overflow: hidden; background: var(--stage); aspect-ratio: 3 / 2; }
.thumb-slot .thumb { display: block; width: 100%; height: 100%; border: 0; padding: 0; background: none; cursor: pointer; opacity: .6; transition: opacity .2s ease; }
.thumb-slot .thumb:hover, .thumb-slot .thumb.active { opacity: 1; }
.thumb-slot .thumb.active { box-shadow: inset 0 0 0 2px var(--ink); }
.thumb-slot .thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb-slot:not(.has-image) img { object-fit: contain; padding: 10px; }
/* empty gallery slots are upload targets for the admin; visitors do not see them */
body:not(.logged-in) .thumb-slot:not(.has-image) { display: none; }
.thumb-slot .kht-front-image-upload { left: 6px; right: 6px; bottom: 6px; padding: 4px 6px; font-size: 11px; overflow: hidden; text-overflow: ellipsis; }

.project-info { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(32px, 6vw, 96px); margin-top: clamp(48px, 7vw, 88px); align-items: start; }
.pj-rows h2 { font-size: 13px; font-weight: 400; color: var(--ink-3); letter-spacing: .02em; }
.pj-info { margin: 12px 0 0; border-top: 1px solid var(--line); }
.pj-info div { display: grid; grid-template-columns: 110px 1fr; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
.pj-info dt { color: var(--ink-3); }
.pj-info dd { margin: 0; color: var(--ink); }
.pj-text { font-size: 16px; color: var(--ink-2); }
.pj-text > p, .pj-text > ul, .pj-text > ol { margin: 0 0 14px; }
.pj-text img { height: auto; border-radius: var(--r-md); }
.info-box { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.info-box p { font-size: 14px; }
.info-box .hero-actions { margin-top: 18px; }

@media (max-width: 900px) {
  .project-info { grid-template-columns: 1fr; }
  .thumb-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .main-photo { border-radius: var(--r-md); aspect-ratio: 4 / 3; }
}