/* =========================================================
   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%
    );
}

/* =========================================================
   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(
      auto-fit,
      minmax(
        min(100%, 320px),
        1fr
      )
    );

  gap: 2rem;
  margin-top: 3rem;
}

.album-card {
  overflow: hidden;

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

  border-radius: 2rem;

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

  box-shadow:
    0 24px 60px
    rgba(25, 67, 101, 0.12);
}

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

.album-cover {
  position: relative;
  min-height: 320px;

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

.album-cover::after {
  position: absolute;
  right: 1.4rem;
  bottom: 1.4rem;

  padding: 0.65rem 1rem;

  border-radius: 999px;

  color: #174c75;
  background:
    rgba(255, 255, 255, 0.92);

  content: attr(data-photo-count);

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

  box-shadow:
    0 8px 24px
    rgba(17, 59, 93, 0.18);
}

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

.album-content {
  padding: 2rem;
}

.album-content h2 {
  margin: 0;

  color: #123b60;

  font-size:
    clamp(
      1.6rem,
      4vw,
      2.2rem
    );
}

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

  color: #617789;

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

.album-status {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;

  margin-top: 1.5rem;
  padding: 0.75rem 1rem;

  border-radius: 999px;

  color: #1b5d8d;
  background: #edf6fd;

  font-weight: 800;
}

.album-status::before {
  width: 0.65rem;
  height: 0.65rem;

  border-radius: 50%;

  background: #d49a25;

  content: "";
}

/* =========================================================
   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(
      2,
      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) {
  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 {
    gap: 1.4rem;
  }

  .album-cover {
    min-height: 240px;
  }

  .album-content {
    padding: 1.5rem;
  }

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