/* Shared component: photograph gallery and native image dialog. */
/* Global defaults, header and footer: base.css. */

.gallery-section {
  background: rgb(16, 42, 53);
  color: rgb(239, 224, 196);
  padding: 48px clamp(26px, 5.1vw, 94px) 56px;
  border-top: 1px solid rgba(209, 177, 129, 0.3);
}

.gallery-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 25px;
  margin-bottom: 24px;
}

.gallery-head .eyebrow {
  font: 11px / 1.7 "Courier New", monospace;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgb(196, 167, 128);
}

.gallery-head h2 {
  font: clamp(35px, 4.4vw, 57px) / 1.05 Georgia, serif;
  letter-spacing: -0.055em;
  margin: 7px 0px 0px;
}

.gallery-head p {
  max-width: 350px;
  color: rgb(193, 182, 159);
  font: 14px / 1.6 Georgia, serif;
  margin: 0px;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0px, 1fr));
  gap: 12px;
}

.gallery-shot {
  display: block;
  text-decoration: none;
  color: rgb(223, 204, 170);
  border: 1px solid rgba(208, 170, 113, 0.3);
  background: rgb(9, 32, 42);
  outline-offset: 4px;
  transition: border-color 0.2s, transform 0.2s;
}

.gallery-shot:hover {
  border-color: rgb(233, 208, 162);
  transform: translateY(-2px);
}

.gallery-shot img {
  width: 100%;
  height: clamp(148px, 16vw, 258px);
  object-fit: cover;
  object-position: center center;
  background: rgb(28, 48, 53);
}

.gallery-shot .caption {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  font: 11px / 1.5 "Courier New", monospace;
  text-transform: uppercase;
  letter-spacing: 0.075em;
}

.gallery-shot .caption b {
  font-size: 14px;
  font-weight: normal;
}

.gallery-note {
  font: 11px / 1.6 "Courier New", monospace;
  color: rgb(184, 164, 136);
  margin: 18px 0px 0px;
}

.photo-dialog {
  border: 1px solid rgb(213, 189, 145);
  max-width: min(94vw, 1100px);
  max-height: 96vh;
  padding: 0px;
  background: rgb(9, 29, 39);
  color: rgb(245, 232, 204);
  box-shadow: rgba(0, 0, 0, 0.533) 0px 28px 75px;
  overflow: hidden;
}

.photo-dialog::backdrop {
  background: rgba(3, 13, 18, 0.88);
}

.dialog-wrap {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  max-height: 94vh;
  min-width: min(92vw, 880px);
}

.dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 9px 15px;
  border-bottom: 1px solid rgb(182, 155, 111);
  color: rgb(232, 208, 164);
  font: 11px / 1.5 "Courier New", monospace;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.dialog-head button {
  font: 12px "Courier New", monospace;
  background: transparent;
  color: rgb(233, 212, 170);
  border: 1px solid rgb(151, 122, 82);
  padding: 7px 12px;
  cursor: pointer;
}

.dialog-tools button {
  font: 12px "Courier New", monospace;
  background: transparent;
  color: rgb(233, 212, 170);
  border: 1px solid rgb(151, 122, 82);
  padding: 7px 12px;
  cursor: pointer;
}

.photo-dialog img {
  display: block;
  max-width: 100%;
  max-height: calc(-122px + 94vh);
  width: 100%;
  height: auto;
  object-fit: contain;
  background: rgb(10, 32, 41);
}

.dialog-tools {
  display: flex;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
}

.dialog-tools a {
  font: 11px / 1.3 "Courier New", monospace;
  color: rgb(231, 201, 157);
  text-decoration: underline;
}

@media (max-width: 900px) {

  .gallery-grid {
    grid-template-columns: repeat(2, minmax(0px, 1fr));
  }
}

@media (max-width: 640px) {

  .gallery-section {
    padding: 35px 22px 42px;
  }

  .gallery-head {
    display: block;
  }

  .gallery-head p {
    margin-top: 13px;
  }

  .gallery-shot img {
    height: 165px;
  }

  .gallery-shot .caption {
    font-size: 11px;
    padding: 9px;
  }

  .dialog-wrap {
    min-width: 90vw;
  }
}

@media (prefers-reduced-motion: reduce) {

  .gallery-shot {
    transition: none;
  }
}

@media (max-width: 380px) {

  .gallery-grid {
    gap: 8px;
  }

  .gallery-shot img {
    height: 132px;
  }
}