.project-gallery { background: var(--surface-white); color: var(--text-body); padding: 1rem; }
.project-gallery-tabs { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .25rem; margin-bottom: .75rem; padding: .25rem; border: 1px solid var(--border-light); border-radius: 11px; background: var(--surface-alt); }
.project-gallery-tab { display: flex; align-items: center; justify-content: center; gap: .45rem; min-width: 0; padding: .45rem .5rem; min-height: 44px; border: 1px solid transparent; border-radius: 8px; font-size: .75rem; font-weight: 600; line-height: 1.4; text-align: left; cursor: pointer; color: var(--text-muted); background: transparent; transition: background .18s ease, border-color .18s ease, color .18s ease; }
.project-gallery-tab-label { min-width: 0; overflow-wrap: anywhere; }
.project-gallery-tab-count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 .3rem; flex-shrink: 0; border-radius: 6px; background: var(--surface-white); color: var(--text-muted); font-size: .7rem; line-height: 1; font-variant-numeric: tabular-nums; }
.project-gallery-tab:hover { background: var(--surface-white); color: var(--text-dark); }
.project-gallery-tab[aria-selected="true"] { background: var(--surface-white); border-color: transparent; color: var(--text-dark); box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.project-gallery-tab[aria-selected="true"] .project-gallery-tab-count { background: var(--primary); color: #fff; }
.project-gallery-frame { position: relative; background: #080b14; border-radius: 12px; overflow: hidden; }
.project-gallery-image-button { display: block; width: 100%; cursor: zoom-in; padding: 0; }
.project-gallery-main { width: 100%; height: 330px; object-fit: contain; }
.project-gallery-arrow { display: inline-flex; align-items:center; justify-content:center; width:44px; height:44px; flex-shrink:0; border-radius:50%; background:rgba(14,18,38,.88); border:1px solid #64748b; color:#fff; font-size:1.7rem; cursor:pointer; }
.project-gallery-frame > .project-gallery-arrow { position:absolute; top:50%; transform:translateY(-50%); }
.project-gallery-arrow.previous { left:.65rem; }.project-gallery-arrow.next { right:.65rem; }
.project-gallery-arrow:disabled { opacity:.3; cursor:default; }
.project-gallery-caption { display:flex; align-items:center; flex-wrap:wrap; gap:.75rem; padding:.85rem 0; font-size:.85rem; }
.project-gallery-caption > span:first-child { flex:1; min-width:0; overflow-wrap:anywhere; }
.project-gallery-count { white-space:nowrap; font-variant-numeric:tabular-nums; }
.project-gallery-zoom { min-height:44px; padding:.5rem .8rem; background:var(--surface-alt); color:var(--text-dark); border:1px solid var(--border-light); border-radius:8px; cursor:pointer; }
.project-gallery-thumbnails { display:flex; gap:.65rem; overflow-x:auto; padding:.3rem .2rem .7rem; }
.project-gallery-thumbnail { position:relative; width:100px; height:72px; flex:0 0 100px; border:2px solid transparent; border-radius:8px; overflow:hidden; cursor:pointer; background:#101827; }
.project-gallery-thumbnail[aria-pressed="true"] { border-color:var(--primary); }
.project-gallery-thumbnail img { width:100%; height:100%; object-fit:cover; }
.project-gallery-thumbnail span { position:absolute; right:3px; bottom:3px; background:#0f172a; color:#fff; padding:0 .4rem; border-radius:3px; font-size:.7rem; }
.project-gallery-empty, .project-gallery-error { padding:3rem 1rem; text-align:center; color:var(--text-muted); }
.project-gallery :focus-visible, .project-gallery-lightbox-nav button:focus-visible { outline:3px solid #38bdf8; outline-offset:2px; }
.project-gallery-lightbox-nav { display:flex; align-items:center; gap:.75rem; flex-shrink:0; }
.project-gallery-lightbox-nav[hidden] { display:none; }
@media(max-width:640px) { .project-gallery-tabs{grid-template-columns:repeat(2,minmax(0,1fr));}.project-gallery-main{height:230px;}.project-gallery{padding:.75rem;} }

.project-description { overflow-wrap: anywhere; }
.project-description h3, .project-description h4 { color: var(--text-dark); line-height: 1.4; margin: 1.5rem 0 .75rem; }
.project-description h3 { font-size: 1.2rem; }
.project-description h4 { font-size: 1.05rem; }
.project-description p, .project-description li { margin-bottom: .85rem; }
.project-description ul, .project-description ol { padding-left: 1.4rem; }
.project-description-table-wrap { max-width: 100%; overflow-x: auto; border: 1px solid var(--border-light); border-radius: 10px; }
.project-description table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.project-description th, .project-description td { padding: .75rem; border-bottom: 1px solid var(--border-light); text-align: left; vertical-align: top; }
.project-description thead { background: var(--surface-alt); color: var(--text-dark); }
.project-description tbody th { width: 45%; font-weight: 600; }
.project-description tbody tr:last-child > * { border-bottom: 0; }

/* Shared full-size photo viewer for every project. */
#photoLightbox .lightbox-info-bar {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .75rem;
  width: 100%;
  box-sizing: border-box;
  border-radius: 14px;
  padding: .85rem 1rem;
  font-family: var(--font-main, sans-serif);
  line-height: 1.5;
}
#photoLightbox .lightbox-info-bar > span {
  min-width: 0;
  overflow-wrap: anywhere;
  white-space: normal;
}
#photoLightbox .project-gallery-lightbox-nav { justify-content: center; }
#photoLightbox .project-gallery-lightbox-count { min-width: 4rem; text-align: center; font-variant-numeric: tabular-nums; }
#photoLightbox .project-gallery-arrow:disabled { opacity: .4; }
@media (max-width: 640px), (max-height: 600px) {
  #photoLightbox {
    padding: max(.75rem, env(safe-area-inset-top)) .75rem max(.75rem, env(safe-area-inset-bottom));
  }
  #photoLightbox .lightbox-dialog {
    width: 100%;
    max-width: 100%;
    max-height: 100%;
    min-height: 0;
    display: grid;
    grid-template-rows: 44px minmax(0, 1fr) auto;
    gap: .65rem;
    align-items: stretch;
  }
  #photoLightbox .lightbox-close-btn {
    position: static;
    justify-self: end;
    width: 44px;
    height: 44px;
    transform: none;
  }
  #photoLightbox .lightbox-img-frame {
    min-height: 0;
    max-height: 100%;
    border-radius: 12px;
    background: #080b14;
  }
  #photoLightbox .lightbox-img {
    width: 100%;
    height: auto;
    max-height: calc(100dvh - 17rem);
    object-fit: contain;
  }
  #photoLightbox .lightbox-info-bar {
    margin: 0;
    padding: .75rem;
    gap: .65rem;
    font-size: .8rem;
    text-align: left;
    border-radius: 12px;
  }
  #photoLightbox .lightbox-info-bar > span {
    display: block;
    max-height: 6em;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  #photoLightbox .project-gallery-lightbox-nav {
    width: 100%;
    gap: 1rem;
    padding-top: .6rem;
    border-top: 1px solid rgba(255,255,255,.12);
  }
}

/* Let each source photo determine the gallery height, without letterboxing. */
.project-gallery-frame { background: transparent; }
.project-gallery-image-button { line-height: 0; }
.project-gallery-main { display: block; width: 100%; height: auto; max-height: none; object-fit: contain; }
@media (max-width: 640px) {
  .project-gallery-main { height: auto; }
}

#projectModal .project-toolbar-client {
  margin: 0 auto 0 0;
  min-width: 0;
  max-width: 52%;
  padding: .3rem .65rem;
  font-size: .65rem;
  line-height: 1.35;
  overflow-wrap: anywhere;
}
#projectModal .modal-route-toolbar > button { flex-shrink: 0; }
@media (max-width: 640px) {
  #projectModal .project-toolbar-client { max-width: none; flex: 1 1 auto; font-size: .6rem; padding: .25rem .45rem; }
  #projectModal .modal-copy-link { width: 40px; flex: 0 0 40px; padding: .3rem; }
  #projectModal .modal-copy-link [data-copy-label] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* Align all project toolbar controls to the same height. */
#projectModal .project-toolbar-client {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  min-height: 32px;
  border-radius: 8px;
}
@media (max-width: 640px) {
  #projectModal .project-toolbar-client { min-height: 40px; }
}

.project-gallery .project-gallery-tab:focus { outline: none; }
.project-gallery .project-gallery-tab:focus-visible { outline: 2px solid var(--primary); outline-offset: -2px; }

/* Allow the translated project action to wrap within the content gutter. */
#projectModal .project-modal-cta {
  display: flex;
  justify-content: flex-end;
  min-width: 0;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-light);
}
#projectModal .project-modal-cta .btn {
  box-sizing: border-box;
  min-width: 0;
  max-width: 100%;
  min-height: 44px;
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: center;
  line-height: 1.45;
  padding: .7rem 1.1rem;
  border-radius: 12px;
  font-size: .875rem;
}
@media (max-width: 640px) {
  #projectModal .project-modal-cta .btn { width: 100%; font-size: .85rem; padding: .75rem 1rem; }
}

/* Four equal technical cards, shared by every project. */
#projectModal .project-key-specs {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: .75rem;
  margin: 1.25rem 0;
}
#projectModal .project-key-spec {
  min-width: 0;
  padding: 1rem;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  background: var(--surface-alt);
  display: flex;
  flex-direction: column;
  gap: .6rem;
  overflow-wrap: anywhere;
}
#projectModal .project-key-spec > span { color: var(--text-muted); font-size: .78rem; font-weight: 600; line-height: 1.4; }
#projectModal .project-key-spec > strong { color: var(--text-dark); font-size: 1.1rem; line-height: 1.35; }
#projectModal .project-key-spec > .project-spec-cyan { color: #22d3ee; }
#projectModal .project-key-spec > .project-spec-orange { color: #fb923c; }
@media(max-width:640px) {
  #projectModal .project-key-specs { grid-template-columns: repeat(2,minmax(0,1fr)); gap: .6rem; }
  #projectModal .project-key-spec { padding: .8rem; }
  #projectModal .project-key-spec > strong { font-size: 1rem; }
}

/* Keep the photo caption and project heading close with aligned gutters. */
#projectModal .project-gallery { padding: 1rem 1rem 0; }
#projectModal .project-gallery-caption { padding: .65rem 0 0; gap: .6rem; margin: 0; }
#projectModal .modal-route-scroll > .modal-content-inner { padding: 1rem 1rem 1.5rem; }
#projectModal .modal-title { margin-top: 0; line-height: 1.35; overflow-wrap: anywhere; }
#projectModal .modal-header-visual { min-height: 0; }
#projectModal .modal-spec-box[hidden] { display: none; }
#projectModal .project-gallery-frame > .project-gallery-arrow:disabled { display: none; }
@media(max-width:640px) {
  #projectModal .project-gallery { padding: .75rem .75rem 0; }
  #projectModal .modal-route-scroll > .modal-content-inner { padding: .85rem .75rem 1.25rem; }
}

/* Portfolio-wide phase pills from the current UI brief. */
.project-gallery-tabs {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 8px;
  padding: 6px 8px;
  background: rgba(15,23,42,.75);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
}
.project-gallery-tab {
  color: #94a3b8;
  font-size: 14px;
  font-weight: 500;
  border-radius: 10px;
  padding: 10px 18px;
}
.project-gallery-tab:hover { background: #151c2e; color: #fff; }
.project-gallery-tab[aria-selected="true"] {
  background: #151c2e;
  color: #fff;
  border: 1px solid #ea580c;
  box-shadow: 0 0 0 2px #38bdf8;
}
.project-gallery-tab-count { background: rgba(255,255,255,.1); color: #cbd5e1; }
.project-gallery-tab[aria-selected="true"] .project-gallery-tab-count { background: #ea580c; color: #fff; }
@media(max-width:640px) {
  .project-gallery-tabs { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .project-gallery-tab { padding: 10px 8px; font-size: 12px; }
}