/* =========================================================
   PHOTO GALLERY PAGE
   ========================================================= */

.photo-gallery-page {
  min-height: 100vh;
  padding: 7rem 0 6rem;

  background:
    radial-gradient(
      circle at 85% 15%,
      rgba(245, 191, 73, 0.18),
      transparent 32rem
    ),
    radial-gradient(
      circle at 10% 85%,
      rgba(84, 165, 224, 0.14),
      transparent 30rem
    ),
    linear-gradient(
      180deg,
      #f8fbff 0%,
      #eef7ff 55%,
      #fffaf0 100%
    );
}

body[data-layout-page="photos"][data-background-type="color"] .photo-gallery-page {
  background:
    var(
      --page-background-color,
      var(--color-background)
    );
}

body[data-layout-page="photos"][data-background-type="gradient"] .photo-gallery-page {
  background:
    var(
      --page-background-gradient,
      linear-gradient(
        135deg,
        #f7fbff 0%,
        #e5f3ff 50%,
        #fff8e8 100%
      )
    );
}

body[data-layout-page="photos"][data-background-type="image"] .photo-gallery-page {
  background:
    var(
      --page-background-image,
      var(--color-background)
    );
}

/* =========================================================
   PAGE HEADING
   ========================================================= */

.photo-gallery-heading {
  max-width: 780px;
  margin: 0 auto 3rem;
  text-align: center;
}

.photo-gallery-eyebrow {
  margin: 0 0 1rem;

  color: #9a6812;

  font-size: 0.9rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  text-transform: uppercase;
}

.photo-gallery-title {
  margin: 0;

  color: #123b60;

  font-size:
    clamp(
      2.6rem,
      7vw,
      5.2rem
    );

  line-height: 1.05;
  text-wrap: balance;
}

.photo-gallery-introduction {
  max-width: 650px;
  margin: 1.4rem auto 0;

  color: #5e7486;

  font-size:
    clamp(
      1.05rem,
      2vw,
      1.25rem
    );

  line-height: 1.75;
}

/* =========================================================
   ALBUM GRID
   ========================================================= */

.album-grid {
  display: grid;

  grid-template-columns:
    repeat(
      var(
        --page-layout-columns,
        4
      ),
      minmax(
        0,
        1fr
      )
    );

  gap:
    var(
      --page-layout-gap,
      1.5rem
    );
  margin-top: 3rem;
}

.album-card {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;

  border:
    1px solid
    rgba(37, 102, 151, 0.18);

  border-radius: 1.35rem;

  background:
    rgba(255, 255, 255, 0.92);

  box-shadow:
    0 16px 40px
    rgba(25, 67, 101, 0.1);
}

/* =========================================================
   ALBUM COVER
   ========================================================= */

.album-cover {
  position: relative;

  aspect-ratio:
    16 / 9;

  min-height: 0;

  margin-top: 1rem;

  background:
    linear-gradient(
      180deg,
      rgba(10, 47, 80, 0.04),
      rgba(10, 47, 80, 0.12)
    ),
    url("../images/photo-gallery-cover.jpg")
    center / cover no-repeat;
}

/* =========================================================
   ALBUM CONTENT
   ========================================================= */

.album-content {
  display: flex;
  flex: 1;
  flex-direction: column;

  padding:
    1.1rem
    1rem
    1.2rem;
}

body[data-layout-card-size="small"]
  .album-content {
  padding:
    0.85rem
    0.8rem
    0.95rem;
}

body[data-layout-card-size="large"]
  .album-content {
  padding:
    1.4rem
    1.3rem
    1.5rem;
}

body[data-layout-alignment="left"]
  .album-content {
  text-align: left;
}

body[data-layout-alignment="center"]
  .album-content {
  text-align: center;
}

.album-content h2 {
  margin: 0;

  color: #123b60;

  font-size:
    clamp(
      1.2rem,
      1.7vw,
      1.5rem
    );

  line-height: 1.2;
}

.album-content p {
  margin:
    0.65rem
    0
    0;

  color: #617789;

  font-size: 0.92rem;
  line-height: 1.5;
}

.album-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;

  margin-top: auto;
  padding-top: 1rem;
}

.album-status {
  display: inline-flex;
  width: auto;

  align-items: center;
  gap: 0.5rem;

  padding:
    0.6rem
    0.85rem;

  border: 0;
  border-radius: 999px;

  color: #1b5d8d;
  background: #edf6fd;

  font: inherit;
  font-size: 0.9rem;
  font-weight: 800;

  cursor: pointer;
}

.album-photo-count {
  flex-shrink: 0;

  color: #617789;

  font-size: 0.9rem;
  font-weight: 800;

  white-space: nowrap;
}

/* =========================================================
   PHOTO ALBUM VIEW
   ========================================================= */

.photo-album-view {
  margin-top: 3rem;
}

.photo-album-view-header {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;

  margin-bottom: 2rem;
}

.photo-album-back {
  display: inline-flex;
  align-self: flex-start;

  align-items: center;
  gap: 0.55rem;

  padding:
    0.7rem
    1rem;

  border:
    1px solid
    rgba(37, 102, 151, 0.18);

  border-radius: 999px;

  color: #174c75;
  background: #edf6fd;

  font: inherit;
  font-weight: 800;

  cursor: pointer;

  transition:
    transform 160ms ease,
    background 160ms ease;
}

.photo-album-back:hover {
  transform: translateY(-1px);
  background: #e2f1fb;
}

.photo-album-back:focus-visible {
  outline:
    3px solid
    rgba(212, 154, 37, 0.35);

  outline-offset: 3px;
}

.photo-album-view-heading h2 {
  margin: 0;

  color: #123b60;

  font-size:
    clamp(
      2rem,
      4vw,
      3rem
    );

  line-height: 1.1;
}

.photo-album-view-heading p {
  max-width: 720px;

  margin:
    0.8rem
    0
    0;

  color: #617789;

  font-size: 1.05rem;
  line-height: 1.7;
}

/* =========================================================
   PHOTOS INSIDE ALBUM
   ========================================================= */

.photo-album-photo-grid {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(
        0,
        1fr
      )
    );

  gap: 1.25rem;
}

.photo-album-photo {
  display: block;
  overflow: hidden;

  width: 100%;
  padding: 0;

  border:
    1px solid
    rgba(37, 102, 151, 0.16);

  border-radius: 1.25rem;

  background: #ffffff;

  cursor: pointer;

  box-shadow:
    0 14px 34px
    rgba(25, 67, 101, 0.1);

  aspect-ratio:
    4 / 3;
}

.photo-album-photo img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  transition:
    transform 220ms ease;
}

.photo-album-photo:hover img {
  transform: scale(1.035);
}

.photo-album-photo:focus-visible {
  outline:
    3px solid
    rgba(212, 154, 37, 0.4);

  outline-offset: 3px;
}

@media (max-width: 1050px) {
  .photo-album-photo-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }
}

@media (max-width: 700px) {
  .photo-album-view {
    margin-top: 2rem;
  }

  .photo-album-photo-grid {
    grid-template-columns: 1fr;
  }

  .photo-album-view-heading h2 {
    font-size: 2rem;
  }
}

body.photo-lightbox-open {
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}

/* =========================================================
   PHOTO LIGHTBOX
   ========================================================= */

.photo-lightbox {
  position: fixed;
  inset: 0;

  z-index: 2000;

  display: grid;
  place-items: center;

  padding: 1.5rem;
}

.photo-lightbox[hidden] {
  display: none;
}

.photo-lightbox-backdrop {
  position: absolute;
  inset: 0;

  background:
    rgba(7, 24, 39, 0.88);

  backdrop-filter:
    blur(6px);
}

.photo-lightbox-dialog {
  position: relative;

  z-index: 1;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr);

  align-items: center;

  width:
    min(
      94vw,
      1200px
    );

  max-height: 92vh;
}

.photo-lightbox-figure {
  margin: 0;

  display: grid;
  place-items: center;

  width: 100%;
  min-width: 0;
}

.photo-lightbox-figure img {
  display: block;

  width: auto;
  height: auto;

  max-width: 100%;
  max-height:
    calc(
      100vh - 4rem
    );

  object-fit: contain;

  border-radius: 1.2rem;

  box-shadow:
    0 24px 70px
    rgba(0, 0, 0, 0.34);
}

.photo-lightbox-close,
.photo-lightbox-nav {
  display: inline-grid;
  place-items: center;

  width: 3rem;
  height: 3rem;

  padding: 0;

  border:
    1px solid
    rgba(255, 255, 255, 0.24);

  border-radius: 50%;

  color: #ffffff;
  background:
    rgba(15, 52, 82, 0.72);

  font: inherit;
  font-size: 1.5rem;
  font-weight: 800;

  cursor: pointer;

  transition:
    transform 160ms ease,
    background 160ms ease;
}

.photo-lightbox-close:hover,
.photo-lightbox-nav:hover {
  transform: scale(1.06);

  background:
    rgba(23, 76, 117, 0.92);
}

.photo-lightbox-close:focus-visible,
.photo-lightbox-nav:focus-visible {
  outline:
    3px solid
    rgba(255, 214, 112, 0.7);

  outline-offset: 3px;
}

.photo-lightbox-close {
  position: absolute;

  top: 0;
  right: -4rem;

  z-index: 2;
}

.photo-lightbox-prev,
.photo-lightbox-next {
  position: absolute;

  top: 50%;

  z-index: 2;

  transform:
    translateY(-50%);
}

.photo-lightbox-prev {
  left: -4rem;

  margin-right: 0;
}

.photo-lightbox-next {
  right: -4rem;

  margin-left: 0;
}

.photo-lightbox-prev:hover,
.photo-lightbox-next:hover {
  transform:
    translateY(-50%)
    scale(1.06);
}

@media (max-width: 700px) {
  .photo-lightbox {
    padding: 1rem;
  }

  .photo-lightbox-dialog {
    grid-template-columns: 1fr;

    width: 100%;
  }

  .photo-lightbox-prev,
  .photo-lightbox-next {
    display: none;
  }

  .photo-lightbox-prev:hover,
  .photo-lightbox-next:hover {
    transform:
      translateY(-50%)
      scale(1.06);
  }

  .photo-lightbox-prev {
    left: 0.5rem;

    margin-right: 0;
  }

  .photo-lightbox-next {
    right: 0.5rem;

    margin-left: 0;
  }

  .photo-lightbox-close {
    top: -5.5rem;
    right: 0;
  }

  .photo-lightbox-figure img {
    max-height: 82vh;
  }
}

/* =========================================================
   EMPTY GALLERY MESSAGE
   ========================================================= */

.empty-gallery {
  margin-top: 2rem;
  padding: 2.25rem;

  border:
    1px dashed
    rgba(37, 102, 151, 0.35);

  border-radius: 1.6rem;

  background:
    rgba(255, 255, 255, 0.64);

  text-align: center;
}

.empty-gallery h2 {
  margin: 0;

  color: #174c75;

  font-size: 1.6rem;
}

.empty-gallery p {
  margin: 0.75rem auto 0;

  color: #607789;

  line-height: 1.7;
}

/* =========================================================
   PHOTO GALLERY FOOTER
   ========================================================= */

body[data-page="photoGallery"] .footer-grid {
  grid-template-columns:
    minmax(260px, 1.5fr)
    repeat(
      3,
      minmax(160px, 0.7fr)
    );
}

body[data-page="photoGallery"]
.site-footer
.footer-grid
> section:not(.footer-brand)
h2 {
  margin: 0 0 22px;

  color: #123b60;

  font-size: 1rem;
  line-height: 1.3;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

body[data-page="photoGallery"]
.site-footer
.footer-grid
> section
nav {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 11px;
}

body[data-page="photoGallery"]
.site-footer
.footer-grid
> section
nav a {
  color: #5b7182;

  font-size: 1rem;
  line-height: 1.5;

  transition:
    color 160ms ease,
    transform 160ms ease;
}

body[data-page="photoGallery"]
.site-footer
.footer-grid
> section
nav a:hover {
  color: #17476f;
  transform: translateX(3px);
}

/* =========================================================
   TABLETS
   ========================================================= */

@media (max-width: 1050px) {
  .album-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(
          0,
          1fr
        )
      );
  }

  body[data-page="photoGallery"] .footer-grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 820px) {
  body[data-page="photoGallery"] .footer-grid {
    grid-template-columns: 1fr;
    gap: 38px;
  }
}

@media (max-width: 700px) {
  .photo-gallery-page {
    padding: 4.5rem 0 4rem;
  }

  .photo-gallery-heading {
    margin-bottom: 2rem;
  }

  .album-grid {
    grid-template-columns: 1fr;
    gap: 1.4rem;
  }

  .album-content {
    padding: 1.25rem;
  }

  .empty-gallery {
    padding: 1.75rem 1.25rem;
  }
}