/* Gatto Services — project cards, carousels, lightbox, videos, projects hub and project pages.
   Owner: B16 (Gates 3/4, 30/09/2026). Loaded only on pages that contain these components (layout.mjs).
   Without JS: every carousel is a horizontal CSS scroller (scroll-snap, swipe) and zoom links open the JPEG. */

/* ---------- Sections ---------- */
.projects-section .section-head { margin-bottom: var(--s4); }
.project-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); align-items: start; }
.project-grid-one { grid-template-columns: minmax(0, 480px); }
.project-grid > * { min-width: 0; }
.loose-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); margin-top: var(--s4); }
.loose-photos .photo-figure { max-width: 380px; }
.loose-head { font-size: 1.1rem; margin: var(--s5) 0 var(--s1); }

/* ---------- Project card ---------- */
.project-card { background: var(--white); color: var(--ink-dark); border: 1px solid var(--line-light); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; }
.dark .project-card { border-color: var(--line-dark); }
.pc-media { position: relative; background: #0D1A2D; }
.pc-track {
  list-style: none; margin: 0; padding: 0; display: flex; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.js .pc-track { scrollbar-width: none; }
.js .pc-track::-webkit-scrollbar { display: none; }
.pc-track:focus-visible { outline: 3px solid var(--blue-brand); outline-offset: -3px; }
.pc-slide { flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always; min-width: 0; }
.pc-figure { margin: 0; position: relative; }
.pc-zoom { display: block; cursor: zoom-in; }
.pc-zoom:focus-visible { outline: 3px solid var(--blue-300); outline-offset: -3px; }
.pc-figure .media img { border-radius: 0; }
.pc-stage {
  display: block; padding: 6px 12px; font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: var(--navy-900); color: var(--ink);
}
.pc-stage.stage-before { border-left: 4px solid var(--silver); }
.pc-stage.stage-during { border-left: 4px solid var(--blue-300); }
.pc-stage.stage-after { border-left: 4px solid var(--red-600); }
.pc-controls {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s1);
  padding: 6px 8px; background: var(--navy-950); color: var(--ink); border-top: 1px solid var(--line-dark);
}
.pc-controls[hidden] { display: none; }
/* Controls and filter need JS: hidden via the html.no-js class (set before first paint → no layout shift). */
.no-js .pc-controls, .no-js [data-filter-bar] { display: none; }
.pc-btn {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; flex: none;
  border-radius: 50%; border: 1px solid rgba(247,249,253,.45); background: transparent; color: var(--ink);
  font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.pc-btn:hover:not(:disabled) { background: rgba(255,255,255,.1); border-color: var(--ink); }
.pc-btn:disabled { opacity: .35; cursor: default; }
.pc-btn:focus-visible { outline: 3px solid var(--blue-300); outline-offset: 2px; }
.pc-count { font-weight: 700; font-variant-numeric: tabular-nums; font-size: .95rem; }
.pc-body { padding: var(--s2) var(--s3) var(--s3); display: flex; flex-direction: column; gap: 6px; }
.pc-title { font-family: var(--font-head); font-weight: 800; font-size: 1.15rem; line-height: 1.25; margin: 0; }
.pc-area { margin: 0; }
.pc-facts { margin: 0; font-size: .875rem; color: var(--muted-light); }
.pc-link { margin: 0; }
.pc-videos { margin-top: var(--s1); }
.pc-more-videos { margin: 6px 0 0; font-size: .9375rem; }
.pc-more-videos a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

/* ---------- Video ---------- */
.video-block { margin: 0; }
.video-block video { display: block; width: 100%; height: auto; background: #000; border-radius: var(--radius); }
.video-portrait video { max-height: 70vh; width: auto; max-width: 100%; margin: 0 auto; }
.pc-videos .video-portrait video { max-height: 420px; }
.video-block figcaption { font-size: .9375rem; color: var(--muted-light); margin-top: 6px; }
.video-cap { display: block; }
.video-len { display: block; white-space: nowrap; color: var(--muted-light); font-weight: 600; font-size: .8125rem; }
.dark .video-block figcaption, .dark .video-len { color: var(--muted-dark); }
.video-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--s3); align-items: start; }

/* ---------- Lightbox (dialog built by gallery.js) ---------- */
.lightbox { border: 0; padding: 0; margin: auto; width: min(96vw, 1400px); max-width: none; max-height: 96vh; background: transparent; color: var(--ink); overflow: visible; }
.lightbox::backdrop { background: rgba(4,9,18,.92); }
.lb-inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--s1); }
.lb-figure { margin: 0; width: 100%; display: flex; flex-direction: column; align-items: center; }
.lb-figure .media img { max-height: 80vh; width: auto; max-width: 100%; aspect-ratio: auto !important; object-fit: contain; border-radius: 6px; background: transparent; box-shadow: none; }
.lb-caption { margin-top: var(--s1); font-size: .95rem; color: var(--muted-dark); text-align: center; max-width: 70ch; }
.lb-bar { display: flex; align-items: center; justify-content: center; gap: var(--s2); }
.lb-count { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 4.5em; text-align: center; }
.lb-close { position: absolute; top: -8px; right: 0; }
.lightbox .pc-btn { background: rgba(7,16,31,.7); }
@media (max-width: 560px) {
  .lb-close { top: -52px; }
  .lightbox { width: 100vw; }
}

/* ---------- Projects hub (P27) ---------- */
.filter-bar { display: flex; flex-wrap: wrap; gap: var(--s1); margin: 0 0 var(--s4); padding: 0; list-style: none; }
.filter-bar[hidden] { display: none; }
.filter-btn {
  min-height: 44px; padding: 8px 18px; border-radius: 999px; border: 1px solid var(--line-light); background: var(--white);
  color: var(--ink-dark); font: inherit; font-weight: 600; cursor: pointer;
}
.filter-btn[aria-pressed="true"] { background: var(--navy-950); color: var(--ink); border-color: var(--navy-950); }
.filter-btn:hover { border-color: var(--blue-brand); }
.project-card[hidden] { display: none; }
.filter-status { margin: 0 0 var(--s2); color: var(--muted-light); font-size: .95rem; }

/* ---------- Project page (P28) ---------- */
.project-hero .hero-copy .pc-area-lead { color: var(--muted-dark); font-weight: 600; margin: 0 0 var(--s2); }
.project-gallery { display: grid; gap: var(--s5); }
.pg-stage-title { font-size: 1.3rem; display: flex; align-items: baseline; gap: 8px; border-bottom: 1px solid var(--line-light); padding-bottom: var(--s1); }
.pg-count { font-family: var(--font-body); font-weight: 600; font-size: 1rem; color: var(--muted-light); }
.pg-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); align-items: start; }
.pg-figure { margin: 0; }
.pg-figure img { border-radius: var(--radius); max-height: 560px; object-fit: contain !important; background: #EEF1F5; }
.pg-figure figcaption { font-size: .875rem; color: var(--muted-light); margin-top: 6px; }
.facts-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--s2); }
.facts-list li { border-left: 3px solid var(--blue-brand); padding: 4px 0 4px var(--s2); }
.facts-list strong { display: block; font-family: var(--font-head); font-size: 1.05rem; }
.status-note { margin-top: var(--s3); padding: var(--s2) var(--s3); border-left: 4px solid var(--blue-300); background: var(--surface-light); border-radius: 0 var(--radius) var(--radius) 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .project-grid, .loose-photos, .pg-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .project-grid, .loose-photos, .pg-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
  .project-grid-one { grid-template-columns: minmax(0, 1fr); }
  .pc-body { padding: var(--s2); }
  .pg-figure img { max-height: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pc-track { scroll-behavior: auto; }
}