/**
 * Curated Album — the guest surface.
 *
 * Wave .105 R29/R30. Enqueued only by template-parts/album/collection.php, so
 * it loads on the surfaces that actually render the album and nowhere else.
 *
 * Every colour is a token from tokens.css (BLOOM), with a literal fallback in
 * the var() so the partial still renders correctly if a host surface somehow
 * loads it without the theme's tokens — which is exactly the case an isolated,
 * droppable partial has to survive.
 */

.pp-album {
  margin: 0 auto;
  padding: var(--space-lg, 24px) var(--space-md, 16px);
  max-width: 68rem;
  color: var(--color-nimble-text, #4a4a4a);
}

.pp-album__head {
  margin-bottom: var(--space-md, 16px);
  text-align: center;
}

.pp-album__headline {
  margin: 0 0 0.35em;
  font-family: var(--font-display, "Cormorant Garamond", Georgia, serif);
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  color: var(--color-ink, #2b2b2b);
}

.pp-album__body {
  margin: 0;
  font-size: var(--font-size-base, 1rem);
  line-height: 1.7;
}

/* ---------------------------------------------------------------------------
   THE GRID
   --------------------------------------------------------------------------- */

.pp-album__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-sm, 10px);
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 48rem) {
  .pp-album__grid {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  }
}

.pp-album__cell {
  margin: 0;
}

.pp-album__open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: var(--color-ivory-shadow, #f3efe9);
  cursor: zoom-in;
  overflow: hidden;
  /* 48px is the project's tap minimum; a photo cell is far larger, but the
	   floor matters when a very narrow viewport squeezes the grid. */
  min-height: var(--tap-min, 48px);
}

.pp-album__open img {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  transition: transform 220ms ease;
}

.pp-album__open:hover img,
.pp-album__open:focus-visible img {
  transform: scale(1.03);
}

.pp-album__open:focus-visible {
  outline: 3px solid var(--color-poppy-deep, #a33018);
  outline-offset: 3px;
}

.pp-album__cap {
  margin: 6px 2px 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--color-nimble-text, #4a4a4a);
}

/* ---------------------------------------------------------------------------
   LOAD MORE
   --------------------------------------------------------------------------- */

.pp-album__more {
  margin-top: var(--space-lg, 24px);
  text-align: center;
}

.pp-album__more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--tap-min, 48px);
  padding: 0 1.5em;
  border: 1px solid var(--color-nimble, #cfcac2);
  border-radius: 999px;
  background: var(--color-ivory, #fbf8f3);
  color: var(--color-poppy-deep, #a33018);
  font-size: var(--font-size-base, 1rem);
  text-decoration: none;
  cursor: pointer;
}

.pp-album__more-btn:disabled {
  opacity: 0.6;
  cursor: progress;
}

.pp-album__more-btn:focus-visible {
  outline: 3px solid var(--color-poppy-deep, #a33018);
  outline-offset: 2px;
}

.pp-album__more-error,
.pp-album__retry {
  margin-top: var(--space-md, 16px);
  text-align: center;
  color: var(--color-poppy-deep, #a33018);
}

/* A sealed or empty album is a message, not a blank space. */
.pp-album--sealed .pp-album__head,
.pp-album--empty .pp-album__head,
.pp-album--error .pp-album__head {
  padding: var(--space-lg, 24px) var(--space-md, 16px);
  border: 1px solid var(--color-nimble, #cfcac2);
  border-radius: 10px;
  background: var(--color-ivory-shadow, #f3efe9);
}

/* ---------------------------------------------------------------------------
   LIGHTBOX
   --------------------------------------------------------------------------- */

body.pp-album-locked {
  overflow: hidden;
}

.pp-album__lightbox {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Not pure black — #000 reads as mourning in Thai UI. */
  background: rgba(43, 43, 43, 0.94);
  padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0)
    env(safe-area-inset-left, 0);
}

.pp-album__lightbox[hidden] {
  display: none;
}

.pp-album__lightbox-inner {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  max-width: 62rem;
  padding: 0 8px;
}

.pp-album__figure {
  flex: 1 1 auto;
  margin: 0;
  text-align: center;
  min-width: 0;
}

.pp-album__figure img {
  max-width: 100%;
  /* dvh, because 100vh includes the URL bar in the LINE in-app browser and
	   would push the caption off screen. */
  max-height: 78dvh;
  border-radius: 6px;
  object-fit: contain;
}

.pp-album__figure figcaption {
  margin-top: 10px;
  color: var(--color-ivory, #fbf8f3);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.pp-album__close,
.pp-album__nav {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap-min, 48px);
  min-height: var(--tap-min, 48px);
  border: 0;
  border-radius: 50%;
  background: rgba(251, 248, 243, 0.16);
  color: var(--color-ivory, #fbf8f3);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}

.pp-album__close {
  position: absolute;
  top: -4px;
  right: 8px;
  z-index: 1;
  font-size: 1.125rem;
}

.pp-album__close:focus-visible,
.pp-album__nav:focus-visible {
  outline: 3px solid var(--color-ivory, #fbf8f3);
  outline-offset: 2px;
}

@media (max-width: 30rem) {
  /* On a phone a centred row of arrows would eat the picture, so they move
     to the bottom edges where a thumb reaches them. Swiping left/right also
     works — that is a real gesture bound in album-collection.js, not a
     description of where the buttons sit — and these 48px buttons remain the
     path for anyone who cannot make one. */
  .pp-album__lightbox-inner {
    flex-direction: column;
    gap: 10px;
  }
  .pp-album__nav {
    position: absolute;
    bottom: 8px;
  }
  .pp-album__nav--prev {
    left: 16px;
  }
  .pp-album__nav--next {
    right: 16px;
  }
  .pp-album__figure figcaption {
    padding-bottom: 60px;
  }
}

/* Screen-reader-only announcements for paging and lightbox position. */
.pp-album__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .pp-album__open img {
    transition: none;
  }
  .pp-album__open:hover img,
  .pp-album__open:focus-visible img {
    transform: none;
  }
}