/* Compact, swipeable portfolio gallery in Photoelectric's green-and-gold palette. */
.portfolio-gallery {
  background: #fffdf8;
  padding: 6px 0 96px;
  overflow: hidden;
  scroll-margin-top: 110px;
}

.gallery-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 36px;
  padding: 0 0 20px;
  border-bottom: 1px solid #dce7cf;
}

.gallery-heading h2 {
  font-family: Manrope, sans-serif;
  font-size: clamp(39px, 4.2vw, 63px);
  line-height: 1.06;
  letter-spacing: -.065em;
  margin: 20px 0 0;
  color: #143e2b;
}

.gallery-heading .serif-accent { color: #198a43; }

.gallery-heading-aside { display: flex; align-items: center; gap: 17px; flex-shrink: 0; }
.gallery-heading-aside strong { font-size: 64px; font-family: Manrope, sans-serif; letter-spacing: -.08em; line-height: 1; color: #13743b; }
.gallery-heading-aside span { font-size: 10px; font-weight: 800; letter-spacing: .14em; line-height: 1.7; color: #66776a; }

.gallery-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 26px 0 19px; }
.gallery-toolbar p { margin: 0; color: #69796f; font-size: 13px; line-height: 1.65; }
.gallery-controls { display: flex; align-items: center; gap: 11px; }
.gallery-counter { white-space: nowrap; font-size: 11px; font-weight: 800; color: #7a9180; letter-spacing: .08em; margin-right: 8px; }
.gallery-counter b { color: #147a3d; }
.gallery-arrow {
  height: 42px;
  width: 42px;
  flex: 0 0 42px;
  border-radius: 50%;
  border: 1px solid #b7d6b6;
  color: #174d30;
  background: transparent;
  cursor: pointer;
  font-size: 21px;
  transition: transform .2s, background .2s, color .2s, opacity .2s;
}
.gallery-arrow:not(:disabled):hover { background: #19783e; color: #fff; transform: translateY(-3px); }
.gallery-arrow:disabled { opacity: .32; cursor: not-allowed; }

.gallery-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 36px)/3);
  gap: 18px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: 2px;
  scrollbar-width: none;
  padding: 4px 2px 20px;
  border-radius: 14px;
}
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-track:focus-visible { outline: 3px solid #a3da5c; outline-offset: 3px; }

.portfolio-card {
  scroll-snap-align: start;
  background: #f1f6e7;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #dfebcc;
  border-radius: 17px;
  box-shadow: 0 8px 22px #173e2412;
  transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s;
}
.portfolio-card:hover { transform: translateY(-6px); box-shadow: 0 18px 37px #173e2425; }

.portfolio-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 1.17;
  overflow: hidden;
  border: 0;
  padding: 0;
  cursor: zoom-in;
  display: block;
  isolation: isolate;
  background: #223f2e;
}
.portfolio-photo::before {
  content: '';
  position: absolute;
  z-index: -1;
  inset: -18px;
  background-image: var(--gallery-photo);
  background-size: cover;
  background-position: center;
  filter: blur(20px) brightness(.5) saturate(1.2);
  transform: scale(1.1);
}
.portfolio-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  position: relative;
  z-index: 1;
  transition: transform .75s cubic-bezier(.2,.8,.2,1);
}
.portfolio-card:hover .portfolio-photo img { transform: scale(1.035); }
.photo-action {
  position: absolute;
  z-index: 2;
  right: 14px;
  bottom: 14px;
  color: #173e2b;
  background: #e2f79e;
  padding: 10px 12px;
  border-radius: 999px;
  font-size: 9px;
  font-family: 'DM Sans', sans-serif;
  font-weight: 800;
  letter-spacing: .09em;
  transition: transform .25s, background .25s;
}
.photo-action span { margin-left: 8px; }
.portfolio-photo:hover .photo-action { transform: translateY(-3px); background: #f9e05a; }

.portfolio-card-body { padding: 23px 23px 25px; }
.portfolio-card-top { display: flex; justify-content: space-between; gap: 10px; font-size: 9px; font-weight: 800; color: #5d8665; letter-spacing: .13em; }
.portfolio-card-top span:last-child { color: #2c7c43; }
.portfolio-card h3 { color: #173f2b; font-size: clamp(19px, 1.8vw, 24px); letter-spacing: -.04em; line-height: 1.22; margin: 16px 0 21px; }
.portfolio-metrics { display: grid; grid-template-columns: 1fr 1fr; padding-top: 16px; border-top: 1px solid #d2dfc5; gap: 14px; }
.portfolio-metrics span { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; }
.portfolio-metrics strong { color: #176d38; font-family: Manrope, sans-serif; font-size: 27px; letter-spacing: -.06em; line-height: 1; }
.portfolio-metrics small { font-size: 9px; color: #6d816e; letter-spacing: .06em; font-weight: 800; }
.gallery-progress { height: 3px; margin-top: 4px; background: #e0ead9; border-radius: 99px; overflow: hidden; }
.gallery-progress span { display: block; height: 100%; width: 33.333%; background: linear-gradient(90deg, #fbc928, #15823e); border-radius: 99px; transform-origin: left; transition: width .2s; }

.gallery-lightbox {
  position: fixed;
  inset: 0;
  margin: auto;
  padding: 0;
  width: min(950px, calc(100vw - 30px));
  max-height: min(90vh, 1080px);
  background: #11291d;
  border: 1px solid #a5ba9d;
  border-radius: 19px;
  box-shadow: 0 35px 100px #06191099;
  color: #fff;
  overflow: hidden;
}
.gallery-lightbox::backdrop { background: rgba(3, 20, 11, .85); backdrop-filter: blur(8px); }
.gallery-lightbox-content { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(230px, .6fr); max-height: 90vh; }
.gallery-lightbox-content img { display: block; width: 100%; height: min(83vh, 850px); min-height: 330px; object-fit: contain; background: #234331; }
.gallery-lightbox-detail { display: flex; justify-content: center; flex-direction: column; gap: 16px; padding: 35px; }
.gallery-lightbox-detail span { font-size: 9px; font-weight: 800; letter-spacing: .16em; color: #dced92; }
.gallery-lightbox-detail h2 { font-size: clamp(26px, 3vw, 37px); line-height: 1.16; letter-spacing: -.05em; margin: 0; }
.gallery-lightbox-detail p { font-size: 14px; line-height: 1.7; color: #c5dbc9; margin: 0; }
.gallery-lightbox-close { position: absolute; z-index: 5; right: 16px; top: 15px; border: 0; color: #133c28; background: #f5f5e8; border-radius: 50%; height: 37px; width: 37px; cursor: pointer; }
.gallery-lightbox-close:hover { background: #e7f3b4; }

@media (max-width: 1080px) {
  .gallery-track { grid-auto-columns: calc((100% - 18px)/2); }
}
@media (max-width: 760px) {
  .portfolio-gallery { padding: 0 0 62px; }
  .gallery-heading { align-items: start; gap: 16px; }
  .gallery-heading-aside strong { font-size: 45px; }
  .gallery-heading-aside span { display: none; }
  .gallery-toolbar { align-items: flex-start; }
  .gallery-toolbar p { font-size: 11px; max-width: 190px; }
  .gallery-controls { gap: 6px; }
  .gallery-counter { font-size: 10px; margin-right: 4px; }
  .gallery-arrow { width: 34px; height: 34px; flex-basis: 34px; font-size: 17px; }
  .gallery-track { grid-auto-columns: min(84vw, 345px); }
  .portfolio-card-body { padding: 20px; }
  .gallery-lightbox-content { grid-template-columns: 1fr; }
  .gallery-lightbox-content img { height: min(61vh, 600px); min-height: 240px; }
  .gallery-lightbox-detail { padding: 18px 22px 23px; gap: 8px; }
  .gallery-lightbox-detail h2 { font-size: 25px; }
}
@media (prefers-reduced-motion: reduce) {
  .portfolio-card, .portfolio-photo img, .photo-action, .gallery-arrow, .gallery-progress span { transition: none !important; }
}