/* Phone album reader: the open album on its leather cover, pages in a fixed stack
   and overview. Rendered by src/ui/album-mobile.tsx; the desktop book lives in
   albums.css and the photo viewer (phone and desktop) in photo-viewer.css. */

body.album-reading-phone {
  overflow: hidden;
  overscroll-behavior: none;
}

.album-mobile {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
    env(safe-area-inset-bottom) env(safe-area-inset-left);
  color: var(--album-gold);
  font-family: "Instrument Sans", var(--sans, sans-serif);
}
/* The open album's cover: leather grain tinted with the album's own cover colour,
   deepened so the gold stays legible on every tone, darker towards the edges. */
.album-mobile,
.album-mobile #album-overview {
  --album-gold: #dcc48e;
  background:
    radial-gradient(
      ellipse 120% 90% at 50% 38%,
      transparent 45%,
      rgb(12 8 4 / 0.55) 100%
    ),
    linear-gradient(rgb(12 8 4 / 0.3), rgb(12 8 4 / 0.3)),
    url(/album-textures/leather.jpg) 0 0 / 320px 320px,
    var(--album-cover-colour, #344e43);
  background-blend-mode: normal, normal, overlay, normal;
}
/* One thin gold tooling line around the cover. */
.album-mobile::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgb(220 196 142 / 0.4);
  border-radius: 3px;
  pointer-events: none;
}
.album-mobile > * {
  position: relative;
}
/* Gold stamped into the leather */
.album-mobile-title,
.album-mobile #album-position,
.album-mobile .album-mobile-tool {
  color: var(--album-gold);
  text-shadow:
    0 1px 0 rgb(0 0 0 / 0.55),
    0 -0.5px 0 rgb(255 240 200 / 0.2);
}
.album-mobile .album-glyph {
  filter: drop-shadow(0 1px 0 rgb(0 0 0 / 0.55));
}

/* Bar: back, title, overview */
.album-mobile-bar {
  height: 58px;
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 10px;
}
.album-mobile .album-mobile-tool {
  width: 44px;
  height: 44px;
  flex: none;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: none;
  color: inherit;
}
.album-mobile .album-mobile-tool:focus-visible {
  outline: 2px solid #cabb91;
  outline-offset: -4px;
}
.album-glyph {
  width: 21px;
  height: 21px;
}
.album-mobile-title {
  flex: 1;
  min-width: 0;
  text-align: center;
}
.album-mobile-title :is(h1, h2) {
  margin: 0;
  font:
    400 16px/1.2 "EB Garamond",
    Georgia,
    serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.album-mobile-title p {
  margin: 4px 0 0;
  font:
    500 14px/1.3 "Instrument Sans",
    var(--sans, sans-serif);
  letter-spacing: 0.04em;
  color: #f3dfb0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* The cover carries the title itself. */
.album-mobile[data-at="cover"] > .album-mobile-bar .album-mobile-title {
  visibility: hidden;
}

/* The viewport and its 6px gutters never scroll or transform. All sheets share
   the same resting box; only the top leaf rotates around its fixed left edge. */
.album-track {
  flex: 1;
  min-height: 0;
  position: relative;
  overflow: clip;
  isolation: isolate;
}
.album-slide {
  position: absolute;
  inset: 0 14px 0 14px;
  overflow: clip;
  min-width: 0;
  display: flex;
  visibility: hidden;
}
.album-slide.is-visible {
  visibility: visible;
}
.album-track,
.album-slide .album-photo {
  touch-action: pinch-zoom;
}
.album-slide > .album-leaf {
  --e: calc(var(--stack, 0) * 1px);
  flex: 1;
  min-width: 0;
  display: flex;
  position: relative;
  margin: 0 7px 5px 0;
  border-radius: 1px 3px 3px 1px;
  /* The stack of pages still to come: thinner as the album is read. */
  box-shadow:
    var(--e) var(--e) 0 #e7ddc5,
    calc(var(--e) * 2) calc(var(--e) * 2) 0 #cbbf9f,
    calc(var(--e) * 3) calc(var(--e) * 2) 0 #efe6d0,
    calc(var(--e) * 4) calc(var(--e) * 3) 0 #cdc1a3,
    calc(var(--e) * 5) calc(var(--e) * 3) 0 #ebe1c8,
    calc(var(--e) * 6) calc(var(--e) * 4) 0 #c4b796,
    calc(var(--e) * 7) calc(var(--e) * 4) 0 #e9dfc6,
    0 4px 12px rgb(0 0 0 / 0.45);
  transform-origin: left center;
  backface-visibility: hidden;
  transform: perspective(2200px) rotateY(var(--album-turn, 0deg));
}
.album-slide > .album-leaf::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: var(--album-turn-shade, 0);
  border-radius: inherit;
  background: linear-gradient(90deg, #0000004d, #0000000d 60%, #00000026);
}
@media (prefers-reduced-motion: reduce) {
  .album-slide > .album-leaf {
    transform: none;
  }
}

/* Paper */
.album-slide .album-paper {
  flex: 1;
  min-width: 0;
  height: auto;
  padding: 18px 16px 10px 26px;
  gap: 10px;
  border: 0;
  box-shadow: none;
  background:
    linear-gradient(
      90deg,
      rgb(90 70 40 / 0.22) 0px,
      rgb(90 70 40 / 0.08) 9px,
      transparent 26px
    ),
    url(/album-textures/paper.jpg) 0 0 / 256px 256px,
    #f3ecdb;
}
.album-slide .album-paper > header {
  font:
    400 12px/1.3 "EB Garamond",
    Georgia,
    serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8a7a5e;
}
.album-slide .album-page-title h3 {
  font-family: "EB Garamond", Georgia, serif;
  font-size: 24px;
  color: #4e3f2c;
}
.album-slide .album-photo-layout {
  gap: 10px;
}
.album-slide .album-photo-layout figure {
  padding-bottom: 42px;
}
/* Size the image to the photo itself so the print border hugs it. */
.album-slide .album-photo img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  min-width: 0;
  box-sizing: border-box;
  border: 6px solid #f6f1e6;
  filter: sepia(0.06);
  box-shadow:
    0 1px 1px rgb(60 45 25 / 0.25),
    0 4px 10px rgb(60 45 25 / 0.18);
}
/* Glued in by hand: never quite straight. */
.album-slide .album-photo-layout figure:nth-child(odd) .album-photo img {
  transform: rotate(-0.5deg);
}
.album-slide .album-photo-layout figure:nth-child(even) .album-photo img {
  transform: rotate(0.45deg);
}
.album-slide .album-photo-layout figcaption {
  font-family: "EB Garamond", Georgia, serif;
  font-size: 16px;
  color: #5b4a35;
}
.album-slide .album-handnote {
  font-family: "EB Garamond", Georgia, serif;
  font-size: 17px;
  color: #5b4a35;
}
.album-slide .album-paper footer {
  justify-content: flex-end;
  font:
    italic 13px/1 "EB Garamond",
    Georgia,
    serif;
  color: #9a8c73;
}
.album-slide .original-page {
  padding: 12px 10px 8px 18px;
  gap: 8px;
}
.album-slide .original-page .album-photo img {
  border: 0;
  transform: none;
  box-shadow: 0 1px 3px rgb(60 45 25 / 0.2);
}
.album-slide .original-page .album-photo-layout figure {
  padding-bottom: 0;
}

/* Covers */
.album-slide > .album-book-cover {
  border-radius: 3px 6px 6px 3px;
  /* albums.css paints desktop covers flat and !important. */
  background:
    linear-gradient(rgb(255 250 240 / 0.04), rgb(255 250 240 / 0.04)),
    linear-gradient(rgb(12 8 4 / 0.22), rgb(12 8 4 / 0.22)),
    url(/album-textures/leather.jpg) 60px 40px / 320px 320px,
    var(--album-cover-colour, #344e43) !important;
  background-blend-mode: normal, normal, overlay, normal;
}
.album-slide > .album-book-cover::before {
  display: none;
}
/* Closed, the cover shows its spine groove and the stack of all its pages. */
.album-slide > .album-book-cover::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 14px 0 18px rgb(0 0 0 / 0.35),
    inset -1px 0 1px rgb(255 255 255 / 0.12);
}
.album-slide .book-cover-inner {
  outline: 1px solid rgb(220 196 142 / 0.45);
  outline-offset: -12px;
  border: 0;
  color: var(--album-gold);
}
.album-slide .book-cover-inner h2 {
  color: var(--album-gold);
  text-shadow: 0 1px 0 rgb(0 0 0 / 0.5);
}
.album-slide .book-cover-inner {
  /* Above the cloth texture, which would otherwise stripe the photo. */
  position: relative;
  z-index: 1;
  justify-content: center;
  padding: 34px 34px 34px 46px;
  gap: 24px;
}
.album-slide .book-cover-inner h2 {
  font-size: 40px;
  line-height: 1.08;
}
.album-slide .book-cover-inner img {
  flex: 0 1 auto;
  height: auto;
  aspect-ratio: 4 / 3;
}
.album-slide .book-cover-inner > span {
  font-size: 13px;
  letter-spacing: 0.06em;
}

/* Page count, stamped below the page */
.album-mobile-foot {
  height: 42px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.album-mobile #album-position {
  margin: 0;
  font:
    400 12px/1 "EB Garamond",
    Georgia,
    serif;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.9;
}

/* Overview */
.album-mobile #album-overview {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  padding: inherit;
  border-radius: 0;
  overflow: hidden;
}
.album-overview-grid {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px 12px;
  align-content: start;
  padding: 10px 16px 24px;
}
@media (orientation: landscape) {
  .album-overview-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }
}
.album-mobile .album-page-thumb {
  width: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
  font-size: 11px;
}
.album-mobile .album-page-thumb > span {
  margin: 0;
}
.album-mobile .album-page-thumb > span:last-child {
  text-align: center;
  opacity: 0.65;
}
.album-mobile .album-page-thumb[aria-current="true"] {
  background: none;
}
.album-mobile .album-page-thumb[aria-current="true"] > span:first-child {
  outline: 2px solid var(--album-gold);
  outline-offset: 3px;
}
.album-mobile .album-page-thumb[aria-current="true"] > span:last-child {
  opacity: 1;
}
.album-mobile :is(.album-thumb-paper, .album-thumb-cover) {
  aspect-ratio: 3 / 4;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.album-mobile .album-thumb-paper {
  gap: 5px;
  padding: 9px 8px 9px 11px;
  border-radius: 2px 4px 4px 2px;
  background:
    url(/album-textures/paper.jpg) 0 0 / 256px 256px,
    #f3ecdb;
  box-shadow: 0 3px 8px rgb(0 0 0 / 0.4);
}
.album-mobile .album-thumb-paper img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: calc(50% - 3px);
  min-height: 0;
  box-sizing: border-box;
  border: 2px solid #fbf8ef;
}
.album-mobile .album-thumb-paper.is-original {
  padding: 4px 4px 4px 7px;
}
.album-mobile .album-thumb-paper.is-original img {
  max-height: 100%;
  border: 0;
}
.album-mobile .album-thumb-cover {
  gap: 6px;
  padding: 10px;
  border-radius: 2px 5px 5px 2px;
  background: var(--album-cover-colour, #344e43);
  box-shadow:
    inset 6px 0 8px rgb(0 0 0 / 0.35),
    0 3px 8px rgb(0 0 0 / 0.4);
  outline: 1px solid rgb(220 196 142 / 0.4);
  outline-offset: -5px;
  color: var(--album-gold);
}
.album-thumb-cover strong {
  font:
    400 13px/1.1 "EB Garamond",
    Georgia,
    serif;
  text-align: center;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.album-mobile .album-thumb-cover img {
  width: 80%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 2px solid #e6ddc8;
  box-sizing: border-box;
}

/* Landscape phone: little height, so two photos sit side by side */
@media (orientation: landscape) {
  .album-mobile-bar {
    height: 44px;
  }
  .album-mobile-foot {
    height: 30px;
  }
  .album-slide .album-paper {
    padding: 10px 16px 6px 26px;
    gap: 8px;
  }
  .album-slide .album-page-title h3 {
    font-size: 18px;
  }
  .album-slide .photos-2 {
    grid-template: 1fr / 1fr 1fr;
  }
  .album-slide .album-photo-layout figure {
    padding-bottom: 30px;
  }
  .album-slide .album-photo-layout figcaption {
    -webkit-line-clamp: 1;
  }
  .album-slide .book-cover-inner {
    padding: 18px 40px;
    gap: 10px;
  }
  .album-slide .book-cover-inner h2 {
    font-size: 28px;
  }
}