/* public.css — homepage sections and project detail page (mobile-first) */

/* ---------- Filters bar ---------- */
.filters { display: grid; gap: var(--s-3); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: var(--s-4); }
@media (min-width: 900px) { .filters { grid-template-columns: repeat(4, minmax(0, 200px)) auto; align-items: end; } }
.filters__reset { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
@media (min-width: 900px) { .filters__reset { grid-column: auto; justify-content: flex-end; } }
.result-count { font-size: var(--fs-sm); color: var(--ink-2); }
.result-count strong { color: var(--ink); }

/* ---------- Interactive map ---------- */
.mapx { display: grid; gap: var(--s-4); }
@media (min-width: 900px) { .mapx { grid-template-columns: minmax(0, 1fr) 360px; gap: 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; } }
@media (min-width: 1200px) { .mapx { grid-template-columns: minmax(0, 1fr) 400px; } }
.mapx__map { position: relative; height: 62vh; min-height: 340px; max-height: 560px; border-radius: var(--r); overflow: hidden; background: var(--surface-2); border: 1px solid var(--line); z-index: 0; }
@media (min-width: 900px) { .mapx__map { height: 640px; max-height: none; border: 0; border-radius: 0; } }
.mapx__loading { position: absolute; inset: 0; display: grid; place-items: center; gap: var(--s-3); color: var(--ink-3); font-size: var(--fs-sm); z-index: 500; background: var(--surface-2); }
.mapx__panel { display: flex; flex-direction: column; min-height: 0; background: var(--white); }
@media (min-width: 900px) { .mapx__panel { height: 640px; border-left: 1px solid var(--line); } }
.panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); padding: var(--s-3) var(--s-2); }
@media (min-width: 900px) { .panel__head { padding: var(--s-4); border-bottom: 1px solid var(--line); } }
.panel__list { list-style: none; padding: var(--s-2) 0; margin: 0; display: grid; gap: 2px; }
@media (min-width: 900px) { .panel__list { overflow-y: auto; padding: var(--s-2); flex: 1; } }
.panel__more { padding: var(--s-3) var(--s-2); }
.mapx__legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin-top: var(--s-3); font-size: var(--fs-xs); color: var(--ink-3); }
.mapx__legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--cat, var(--blue)); box-shadow: 0 0 0 2px var(--white), 0 0 0 3px var(--line-strong); }
.legend-ring { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--blue); background: var(--white); }

/* Project summary (desktop panel + mobile bottom sheet share this) */
.pcard { display: grid; gap: var(--s-4); }
.pcard__back { justify-self: start; }
.pcard__img { aspect-ratio: 16 / 10; border-radius: var(--r); overflow: hidden; background: var(--surface-3); }
.pcard__img img { width: 100%; height: 100%; object-fit: cover; }
.pcard__tags { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.pcard__title { font-size: var(--fs-lg); }
.pcard dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); padding: var(--s-4) 0; border-block: 1px solid var(--line); }
.pcard dt { font-size: var(--fs-xs); color: var(--ink-3); font-weight: 600; }
.pcard dd { margin: 2px 0 0; font-size: var(--fs-sm); font-weight: 600; color: var(--ink); }
.pcard__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pcard__actions .btn { flex: 1; }
.mapx__panel .pcard { padding: var(--s-4); overflow-y: auto; }

/* Leaflet overrides & markers */
.leaflet-container { font-family: var(--font); background: var(--surface-2); }
.leaflet-control-zoom a { color: var(--ink) !important; }
.leaflet-control-attribution { font-size: 10px; }
.mk { display: block; width: 18px; height: 18px; border-radius: 50%; background: var(--cat, var(--blue)); border: 2px solid var(--white); box-shadow: 0 1px 4px rgba(14, 44, 82, 0.45); transition: transform var(--t-fast) var(--ease); }
.mk--secondary { width: 12px; height: 12px; background: var(--white); border: 3px solid var(--cat, var(--blue)); }
.mk--unpublished { opacity: 0.6; border-style: dashed; }
.mk.is-active { transform: scale(1.45); box-shadow: 0 0 0 4px var(--yellow), 0 2px 8px rgba(14, 44, 82, 0.5); }
.leaflet-marker-icon:focus-visible .mk { box-shadow: 0 0 0 4px var(--blue-100), 0 0 0 6px var(--blue); }
.leaflet-marker-icon:focus-visible { outline: none; }
.mk-cluster--s { width: 34px; height: 34px; } .mk-cluster--m { width: 40px; height: 40px; } .mk-cluster--l { width: 48px; height: 48px; }
.mk-cluster { display: grid; place-items: center; border-radius: 50%; background: var(--blue); color: var(--white); font-weight: 700; font-size: 13px; box-shadow: 0 0 0 5px rgba(24, 75, 137, 0.22); }

/* ---------- Featured ---------- */
.featured { display: grid; gap: var(--s-8); align-items: center; }
@media (min-width: 960px) { .featured { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--s-12); } }
.featured__media { aspect-ratio: 16 / 10; border-radius: var(--r-lg); overflow: hidden; background: var(--surface-3); }
.featured__media img { width: 100%; height: 100%; object-fit: cover; }
.featured__body { display: grid; gap: var(--s-4); }
.featured__meta { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); color: var(--ink-2); font-size: var(--fs-sm); }
.featured__meta span { display: inline-flex; gap: 6px; align-items: center; }
.featured__quote { font-size: var(--fs-md); color: var(--ink-2); line-height: 1.65; padding-left: var(--s-4); border-left: 3px solid var(--yellow); }
.featured__team { font-size: var(--fs-sm); color: var(--ink-3); }

/* ---------- Explorer ---------- */
.toolbar { display: grid; gap: var(--s-3); margin-bottom: var(--s-4); }
@media (min-width: 768px) { .toolbar { grid-template-columns: minmax(0, 1fr) 220px 200px; } }
.active-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); margin-bottom: var(--s-6); min-height: 32px; }
.filter-pill { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 6px 0 var(--s-3); border-radius: var(--r-pill); background: var(--blue-50); color: var(--blue); font-size: var(--fs-xs); font-weight: 600; }
.filter-pill button { width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; }
.filter-pill button:hover { background: var(--blue-100); }
.explorer__more { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); margin-top: var(--s-10); }

/* ---------- Year archive ---------- */
.years { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(84px, 1fr); gap: var(--s-2); overflow-x: auto; padding-bottom: var(--s-2); scrollbar-width: thin; }
.year {
  display: grid; grid-template-rows: 140px auto auto; align-items: end; gap: var(--s-2); padding: var(--s-3) var(--s-2) var(--s-3);
  border-radius: var(--r); border: 1px solid transparent; text-align: left; transition: background var(--t-fast), border-color var(--t-fast);
}
.year:hover { background: var(--white); border-color: var(--line); }
.year[aria-pressed="true"] { background: var(--white); border-color: var(--blue); box-shadow: inset 0 3px 0 var(--yellow); }
.year__bar { align-self: end; width: 100%; max-width: 44px; height: var(--h, 4%); min-height: 4px; background: var(--blue-100); border-radius: 3px 3px 0 0; transition: height var(--t-slow) var(--ease), background var(--t-fast); }
.year:hover .year__bar, .year[aria-pressed="true"] .year__bar { background: var(--blue); }
.year__label { font-size: var(--fs-lg); font-weight: 800; font-variant-numeric: tabular-nums; }
.year__count { font-size: var(--fs-xs); color: var(--ink-3); font-weight: 600; }
.year-summary { margin-top: var(--s-8); display: grid; gap: var(--s-6); padding: var(--s-6); background: var(--white); border: 1px solid var(--line); border-radius: var(--r); }
@media (min-width: 960px) { .year-summary { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } }
.year-summary h3 { font-size: var(--fs-xl); }
.year-summary p { color: var(--ink-2); margin-top: var(--s-2); }
.year-summary dl { display: flex; flex-wrap: wrap; gap: var(--s-6); margin-top: var(--s-4); }
.year-summary dl div { display: grid; }
.year-summary dt { font-size: var(--fs-xs); color: var(--ink-3); font-weight: 600; order: 2; }
.year-summary dd { margin: 0; font-size: var(--fs-xl); font-weight: 800; font-variant-numeric: tabular-nums; order: 1; }
.year-summary__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* ---------- Gallery (masonry via CSS columns) ---------- */
.masonry { columns: 2 160px; column-gap: var(--s-3); }
@media (min-width: 768px) { .masonry { columns: 3 220px; column-gap: var(--s-4); } }
@media (min-width: 1200px) { .masonry { columns: 4 240px; } }
.masonry__item { break-inside: avoid; margin-bottom: var(--s-3); }
@media (min-width: 768px) { .masonry__item { margin-bottom: var(--s-4); } }
.shot { position: relative; display: block; width: 100%; border-radius: var(--r); overflow: hidden; background: var(--surface-3); text-align: left; }
.shot img { width: 100%; height: auto; min-height: 120px; object-fit: cover; transition: transform 600ms var(--ease), opacity var(--t-slow); }
.shot:hover img { transform: scale(1.04); }
.shot__cap { position: absolute; inset: auto 0 0 0; padding: var(--s-6) var(--s-3) var(--s-3); color: var(--white); font-size: var(--fs-xs); font-weight: 600; background: linear-gradient(transparent, rgba(10, 20, 35, 0.75)); opacity: 0; transform: translateY(6px); transition: opacity var(--t), transform var(--t); }
.shot:hover .shot__cap, .shot:focus-visible .shot__cap { opacity: 1; transform: none; }
@media (hover: none) { .shot__cap { opacity: 1; transform: none; } }
.shot:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.masonry .skel { height: var(--h, 180px); border-radius: var(--r); }

/* ---------- Team ---------- */
.team { display: grid; gap: 0; grid-template-columns: 1fr; border-top: 1px solid var(--line); }
@media (min-width: 640px) { .team { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-8); } }
@media (min-width: 1024px) { .team { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.person { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-3); align-items: center; padding: var(--s-4) 0; border-bottom: 1px solid var(--line); }
.person__name { font-weight: 700; font-size: var(--fs-sm); }
.person__meta { font-size: var(--fs-xs); color: var(--ink-3); }
.person__count { font-size: var(--fs-xs); font-weight: 700; color: var(--blue); background: var(--blue-50); padding: 4px 8px; border-radius: var(--r-pill); white-space: nowrap; }
.person__ig { color: var(--ink-3); display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; margin-left: 4px; }
.person__ig:hover { color: var(--violet); background: var(--violet-50); }
.team-foot { display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center; justify-content: space-between; margin-top: var(--s-6); }

/* ---------- Partners ---------- */
.partners { display: grid; grid-template-columns: 1fr; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
@media (min-width: 640px) { .partners { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .partners { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.partner { display: grid; gap: var(--s-2); align-content: start; padding: var(--s-5); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-height: 132px; }
.partner__logo { height: 40px; width: auto; max-width: 140px; object-fit: contain; margin-bottom: var(--s-2); }
.partner__type { font-size: var(--fs-xs); color: var(--ink-3); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.partner__name { font-weight: 700; }
.partner__count { font-size: var(--fs-xs); color: var(--ink-2); }

/* ---------- Project detail ---------- */
.detail-head { padding-block: var(--s-8) var(--s-8); display: grid; gap: var(--s-4); }
.detail-head__tags { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.detail-head h1 { font-size: var(--fs-3xl); max-width: 26ch; }
.detail-head__meta { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); color: var(--ink-2); font-size: var(--fs-sm); }
.detail-head__meta span { display: inline-flex; gap: 6px; align-items: center; }
.detail-head__meta .icon { color: var(--blue); }
.detail-hero { margin: 0; }
.detail-hero__img { aspect-ratio: 16 / 9; border-radius: var(--r-lg); overflow: hidden; background: var(--surface-3); }
@media (max-width: 639px) { .detail-hero__img { aspect-ratio: 4 / 3; border-radius: var(--r); } }
.detail-hero__img img { width: 100%; height: 100%; object-fit: cover; }
.detail-hero figcaption { margin-top: var(--s-2); font-size: var(--fs-xs); color: var(--ink-3); }
.detail-body { display: grid; gap: var(--s-10); padding-block: var(--s-10) var(--s-16); }
@media (min-width: 1024px) { .detail-body { grid-template-columns: minmax(0, 1fr) 340px; gap: var(--s-16); align-items: start; } }
.story { display: grid; gap: var(--s-12); min-width: 0; }
.story__block h2 { font-size: var(--fs-xl); margin-bottom: var(--s-4); }
.story__text { color: var(--ink-2); font-size: var(--fs-md); line-height: 1.75; white-space: pre-line; }
.chapters { display: grid; gap: 0; border-top: 1px solid var(--line); }
.chapter { display: grid; gap: var(--s-2) var(--s-6); padding: var(--s-6) 0; border-bottom: 1px solid var(--line); }
@media (min-width: 768px) { .chapter { grid-template-columns: 180px minmax(0, 1fr); } }
.chapter__label { display: grid; gap: var(--s-1); align-content: start; }
.chapter__num { font-size: var(--fs-xs); font-weight: 800; color: var(--blue); letter-spacing: 0.1em; }
.chapter__title { font-size: var(--fs-md); font-weight: 700; }
.chapter__text { color: var(--ink-2); line-height: 1.75; white-space: pre-line; }
.work { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
@media (min-width: 768px) { .work { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.work div { background: var(--white); padding: var(--s-4); }
.work dt { font-size: var(--fs-xs); color: var(--ink-3); font-weight: 600; }
.work dd { margin: 4px 0 0; font-weight: 700; }
.people { list-style: none; padding: 0; display: grid; gap: var(--s-3); grid-template-columns: 1fr; }
@media (min-width: 640px) { .people { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.people li { display: flex; gap: var(--s-3); align-items: center; padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r); }
.people__name { font-weight: 700; font-size: var(--fs-sm); }
.people__meta { font-size: var(--fs-xs); color: var(--ink-3); }
.gallery-grid { display: grid; gap: var(--s-2); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); } }
.gallery-grid .shot { aspect-ratio: 1; }
.gallery-grid .shot img { height: 100%; }
.video-embed { aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; background: var(--ink); }
.video-embed iframe { width: 100%; height: 100%; border: 0; }
.detail-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.detail-map { height: 360px; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); z-index: 0; position: relative; }
.facts { display: grid; gap: var(--s-5); padding: var(--s-6); border: 1px solid var(--line); border-radius: var(--r); background: var(--white); }
@media (min-width: 1024px) { .facts { position: sticky; top: calc(var(--nav-h) + var(--s-6)); } }
.facts h2 { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-3); }
.facts dl { display: grid; gap: var(--s-4); }
.facts dl > div { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--s-3); }
.facts dl .icon { color: var(--blue); margin-top: 2px; }
.facts dt { font-size: var(--fs-xs); color: var(--ink-3); font-weight: 600; }
.facts dd { margin: 2px 0 0; font-weight: 600; font-size: var(--fs-sm); overflow-wrap: anywhere; }
.facts__actions { display: grid; gap: var(--s-2); }
.related { border-top: 1px solid var(--line); }