/* Весільний фотоальбом — продовжує стиль сторінки подяки (золото, крем, Isadora / Literature Decor) */

:root {
  --gold: #d4af37;
  --gold-deep: #a97f22;
  --gold-light: #f3dc8f;
  --gold-text: #b8912e;
  --gold-metal: linear-gradient(135deg, #b8892b 0%, #f1d67e 42%, #c9a13b 68%, #e9cd72 100%);
  --cream: #fff8eb;
  --cream-2: #fdf1d8;
  --font-script: var(--font-family-isadora_cyr_-regular), "Isadora Cyr-Regular", Georgia, serif;
  --font-decor: var(--font-family-literature_decor-regular), "Literature Decor-Regular", Georgia, serif;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --shadow-card: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 22px 45px -28px rgba(120, 88, 18, .55), 0 6px 14px -8px rgba(120, 88, 18, .25);
  --shadow-card-hover: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 34px 60px -30px rgba(120, 88, 18, .6), 0 0 0 1px rgba(212, 175, 55, .35), 0 0 38px -6px rgba(241, 214, 126, .55);
}

.album-body {
  margin: 0;
  background: #fff;
  color: var(--gold-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.album-page {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  overflow: clip;
  background:
    radial-gradient(1200px 600px at 50% -10%, var(--cream) 0%, rgba(255, 248, 235, 0) 70%),
    linear-gradient(180deg, var(--cream) 0%, #fff 38%, #fff 78%, #fffaf0 100%);
  animation: album-page-in .8s var(--ease-out) both;
}

.album-page a {
  color: inherit;
  text-decoration: none;
}

/* —— Іконки: будь-яке зображення (svg/png) фарбується в золото через маску —— */

.album-icon {
  display: inline-block;
  width: 40px;
  aspect-ratio: 1;
  background: var(--gold-metal);
  -webkit-mask: var(--icon) center / contain no-repeat;
  mask: var(--icon) center / contain no-repeat;
  flex-shrink: 0;
}

/* —— Шапка —— */

.album-hero {
  position: relative;
  display: flex;
  justify-content: center;
  padding: max(12px, env(safe-area-inset-top, 0px)) 12px 0;
  min-height: clamp(100px, 20vw, 200px);
}

.album-hero__silhouette {
  position: absolute;
  top: env(safe-area-inset-top, 0px);
  width: clamp(70px, 13vw, 180px);
  height: auto;
  pointer-events: none;
  user-select: none;
}

.album-hero__silhouette--left { left: env(safe-area-inset-left, 0px); }
.album-hero__silhouette--right { right: env(safe-area-inset-right, 0px); }

.album-hero__logo-link {
  position: relative;
  z-index: 1;
  display: block;
  margin-top: clamp(6px, 2.4vw, 24px);
  transition: transform .5s var(--ease-out), filter .5s var(--ease-out);
}

@media (hover: hover) {
  .album-hero__logo-link:hover {
    transform: scale(1.04);
    filter: drop-shadow(0 6px 16px rgba(212, 175, 55, .35));
  }
}

.album-hero__logo {
  width: min(240px, 42vw);
  height: auto;
}

/* —— Заголовки —— */

.album-main {
  flex: 1 0 auto;
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 40px);
}

.album-intro {
  text-align: center;
  margin: clamp(18px, 4vw, 40px) auto clamp(28px, 5vw, 56px);
  max-width: 760px;
  animation: album-rise .9s var(--ease-out) .1s both;
}

.album-eyebrow {
  margin: 0 0 10px;
  font-family: var(--font-decor);
  font-size: clamp(.8rem, 1.6vw, 1.05rem);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
}

.album-title {
  margin: 0;
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(2.1rem, 5.6vw, 4rem);
  line-height: 1.15;
  color: var(--gold);
  text-wrap: balance;
  padding: .08em .1em .12em;
}

/* легкий «металевий» відблиск; без підтримки background-clip текст лишається просто золотим */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .album-title {
    background: var(--gold-metal);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

/* ПК/планшет: заголовок в один рядок. Текст займає ≈13.6em, тож шрифт
   зменшується разом з екраном, щоб рядок завжди вміщався між полями */
@media (min-width: 768px) {
  .album-intro {
    max-width: none;
  }

  .album-intro .album-lead {
    max-width: 760px;
    margin-inline: auto;
  }

  .album-title {
    white-space: nowrap;
    font-size: min(4rem, calc((100vw - 96px) / 14.5));
  }
}

.album-divider {
  position: relative;
  display: block;
  width: min(260px, 60%);
  height: 14px;
  margin: clamp(10px, 2vw, 18px) auto;
}

.album-divider::before {
  content: "";
  position: absolute;
  inset: 50% 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold) 20%, var(--gold) 80%, transparent);
}

.album-divider::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  background: var(--gold-metal);
  transform: translate(-50%, -50%) rotate(45deg);
  box-shadow: 0 0 0 4px #fff, 0 0 0 5px rgba(212, 175, 55, .6);
}

.album-lead {
  margin: 0;
  font-family: var(--font-script);
  font-size: clamp(1.15rem, 2.2vw, 1.6rem);
  line-height: 1.45;
  color: var(--gold-text);
  text-wrap: balance;
}

.album-intro__icon {
  width: clamp(48px, 5vw, 64px);
  margin-bottom: 4px;
}

.album-meta {
  margin: 10px 0 0;
  font-family: var(--font-decor);
  font-size: .9rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
}

/* —— Сітка карток —— */

.album-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 56px) clamp(20px, 3vw, 44px);
  padding-bottom: clamp(40px, 6vw, 80px);
}

.album-card {
  position: relative;
  display: flex;
  flex-direction: column;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  transform-origin: 50% 60%;
  transition: transform .55s var(--ease-out);
  /* backwards, а не both — інакше кінцевий кадр анімації перекриє transform при наведенні */
  animation: album-rise .9s var(--ease-out) backwards;
  animation-delay: calc(.15s + var(--i, 0) * .09s);
}

.album-card__frame {
  position: relative;
  padding: clamp(10px, 1.3vw, 16px);
  background: linear-gradient(160deg, #fffdf8 0%, var(--cream) 55%, var(--cream-2) 100%);
  border-radius: 6px;
  box-shadow: var(--shadow-card);
  transition: box-shadow .55s var(--ease-out);
}

/* тонка золота рамка всередині паспарту */
.album-card__frame::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(212, 175, 55, .55);
  border-radius: 3px;
  pointer-events: none;
  z-index: 2;
}

/* кутові вензелі */
.album-card__corner {
  position: absolute;
  z-index: 3;
  width: clamp(38px, 4.6vw, 58px);
  aspect-ratio: 129 / 130;
  background: url("../img/vector-9.svg") center / contain no-repeat;
  pointer-events: none;
  transition: transform .55s var(--ease-out);
}

.album-card__corner--tl { top: -6px; left: -6px; }
.album-card__corner--tr { top: -6px; right: -6px; transform: scaleX(-1); }
.album-card__corner--bl { bottom: -6px; left: -6px; transform: scaleY(-1); }
.album-card__corner--br { bottom: -6px; right: -6px; transform: scale(-1, -1); }

.album-card__media {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 2px;
  background: var(--cream-2);
  isolation: isolate;
}

/* відблиск, що пробігає по фото при наведенні */
.album-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .55) 48%, transparent 66%);
  transform: translateX(-110%);
  pointer-events: none;
}

.album-card__placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transition: transform 1.1s var(--ease-out), filter .6s;
}

.album-card__placeholder {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, 0) 55%),
    repeating-linear-gradient(45deg, rgba(212, 175, 55, .07) 0 1px, transparent 1px 14px),
    repeating-linear-gradient(-45deg, rgba(212, 175, 55, .07) 0 1px, transparent 1px 14px),
    linear-gradient(160deg, #fffaf0 0%, #f8e8c4 100%);
}

.album-card__placeholder-icon {
  width: 46%;
  opacity: .85;
  filter: drop-shadow(0 6px 10px rgba(169, 127, 34, .18));
}

.album-card__caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(14px, 1.8vw, 22px) 6px 0;
}

.album-card__title {
  margin: 0;
  font-family: var(--font-script);
  font-weight: 400;
  font-size: clamp(1.6rem, 2.5vw, 2.15rem);
  line-height: 1.2;
  color: var(--gold);
}

.album-card__subtitle {
  margin: 4px 0 0;
  font-family: var(--font-script);
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.35;
  color: var(--gold-text);
  opacity: .85;
}

.album-card__location {
  position: relative;
  /* значок — частина рядка тексту, тож при переносі він лишається впритул до першого слова */
  display: inline-block;
  max-width: 100%;
  text-align: center;
  margin: 12px 0 0;
  padding-bottom: 5px;
  font-family: var(--font-decor);
  font-size: clamp(.8rem, 1vw, .9rem);
  line-height: 1.4;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-deep);
  text-wrap: balance;
}

.album-card__location svg {
  display: inline-block !important;
  width: 15px;
  height: 15px;
  margin-right: .35em;
  vertical-align: -2px;
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.6;
  stroke-linejoin: round;
  transition: transform .55s var(--ease-out);
}

.album-card__location::after {
  content: "";
  position: absolute;
  left: 15%;
  right: 15%;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  transform: scaleX(.4);
  transition: transform .55s var(--ease-out);
}

.album-intro__location {
  display: block;
  width: fit-content;
  margin: 12px auto 0;
}

/* —— Наведення —— */

@media (hover: hover) {
  .album-card:hover {
    transform: translateY(-6px) scale(1.035);
  }

  .album-card:hover .album-card__frame { box-shadow: var(--shadow-card-hover); }
  .album-card:hover .album-card__placeholder { transform: scale(1.07); }
  .album-card:hover .album-card__media::after { transform: translateX(110%); transition: transform 1.1s var(--ease-out); }
  .album-card:hover .album-card__location::after { transform: scaleX(1); }
  .album-card:hover .album-card__location svg { transform: translateY(-2px); }
  .album-card:hover .album-card__corner--tl { transform: translate(-3px, -3px); }
  .album-card:hover .album-card__corner--tr { transform: scaleX(-1) translate(-3px, -3px); }
  .album-card:hover .album-card__corner--bl { transform: scaleY(-1) translate(-3px, -3px); }
  .album-card:hover .album-card__corner--br { transform: scale(-1, -1) translate(-3px, -3px); }
}

.album-card:focus-visible .album-card__frame {
  box-shadow: var(--shadow-card-hover), 0 0 0 3px #fff, 0 0 0 5px var(--gold);
}

/* —— Натискання: легке потрушування перед переходом —— */

.album-card.is-shaking {
  animation: album-shake .5s cubic-bezier(.36, .07, .19, .97) both;
}

@keyframes album-shake {
  0%   { transform: scale(1.035) rotate(0); }
  15%  { transform: scale(1.02) rotate(-2deg) translateX(-3px); }
  30%  { transform: scale(1.02) rotate(2deg) translateX(3px); }
  45%  { transform: scale(1.02) rotate(-1.4deg) translateX(-2px); }
  60%  { transform: scale(1.02) rotate(1.2deg) translateX(2px); }
  75%  { transform: scale(1.03) rotate(-.5deg); }
  100% { transform: scale(.97) rotate(0); opacity: .85; }
}

/* —— Кнопки —— */

.album-back-wrap {
  display: flex;
  justify-content: center;
  margin-top: clamp(6px, 2vw, 16px);
}

.album-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: 12px 26px 11px;
  border-radius: 999px;
  font-family: var(--font-decor);
  font-size: .85rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-deep);
  background: rgba(255, 252, 244, .7);
  box-shadow: 0 0 0 1px rgba(212, 175, 55, .6), 0 8px 20px -14px rgba(120, 88, 18, .6);
  overflow: hidden;
  isolation: isolate;
  transition: color .4s var(--ease-out), transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}

.album-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--gold-metal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s var(--ease-out);
}

.album-btn:focus-visible {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px rgba(212, 175, 55, .9), 0 14px 26px -14px rgba(120, 88, 18, .7);
  outline: none;
}

.album-btn:focus-visible::before {
  transform: scaleX(1);
}

@media (hover: hover) {
  .album-btn:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 0 0 1px rgba(212, 175, 55, .9), 0 14px 26px -14px rgba(120, 88, 18, .7);
  }

  .album-btn:hover::before {
    transform: scaleX(1);
  }
}

.album-btn:active {
  transform: scale(.97);
}

/* —— Фото розділу: вирівняні ряди (порядок зліва направо, без обрізання) ——
   Кожне фото росте пропорційно своєму співвідношенню сторін (--ar), тож у ряду
   всі фото однакової висоти, а ряд займає всю ширину. */

.album-photos {
  --row-h: clamp(150px, 18vw, 270px);
  --gap: clamp(8px, 1.2vw, 16px);

  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  padding-bottom: clamp(32px, 5vw, 64px);
}

/* останній ряд не розтягується на всю ширину */
.album-photos::after {
  content: "";
  flex-grow: 1000000;
}

.album-photo {
  position: relative;
  display: block;
  flex-grow: var(--ar, 1.5);
  flex-basis: calc(var(--ar, 1.5) * var(--row-h));
  aspect-ratio: var(--ar, 1.5);
  max-height: calc(var(--row-h) * 1.6);
  border-radius: 4px;
  overflow: hidden;
  background: linear-gradient(160deg, #fffaf0, #f8ecd0);
  box-shadow: 0 0 0 1px rgba(212, 175, 55, .35), 0 14px 30px -22px rgba(120, 88, 18, .55);
  animation: album-rise .8s var(--ease-out) backwards;
  animation-delay: calc(min(var(--i, 0), 12) * .05s);
  cursor: zoom-in;
}

.album-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .9s var(--ease-out), filter .5s;
}

.album-photo::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(255, 255, 255, .0);
  border-radius: 2px;
  transition: border-color .5s var(--ease-out);
  pointer-events: none;
}

@media (hover: hover) {
  .album-photo:hover img { transform: scale(1.05); }
  .album-photo:hover::after { border-color: rgba(255, 255, 255, .75); }
}

.album-photo:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* —— Порожній розділ —— */

.album-empty {
  position: relative;
  margin-bottom: clamp(36px, 5vw, 64px);
}

.album-empty__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: start;
  gap: clamp(10px, 1.6vw, 20px);
  opacity: .9;
}

.album-empty__tile {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 4px;
  background:
    linear-gradient(110deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .7) 50%, rgba(255, 255, 255, 0) 70%) 0 0 / 250% 100%,
    linear-gradient(160deg, #fffaf0, #f8ecd0);
  box-shadow: 0 0 0 1px rgba(212, 175, 55, .25);
  animation: album-shimmer 2.4s linear infinite;
  animation-delay: calc(var(--i) * .15s);
}

.album-empty__card {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(460px, calc(100% - 32px));
  padding: clamp(22px, 3.4vw, 36px) clamp(18px, 3vw, 36px);
  text-align: center;
  border-radius: 8px;
  background: rgba(255, 252, 244, .9);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 0 0 1px rgba(212, 175, 55, .5), 0 0 0 6px rgba(255, 252, 244, .9), 0 0 0 7px rgba(212, 175, 55, .35), 0 30px 60px -30px rgba(120, 88, 18, .5);
}

.album-empty__icon {
  width: 52px;
  margin-bottom: 8px;
}

.album-empty__title {
  margin: 0;
  font-family: var(--font-script);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--gold);
}

.album-empty__text {
  margin: 6px 0 0;
  font-family: var(--font-script);
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  line-height: 1.45;
  color: var(--gold-text);
}

/* —— Навігація між розділами —— */

.album-pager {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: clamp(12px, 2vw, 24px);
  padding: clamp(16px, 3vw, 28px) 0 clamp(28px, 5vw, 56px);
  border-top: 1px solid rgba(212, 175, 55, .3);
}

.album-pager__link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 18px;
  border-radius: 8px;
  transition: background .4s var(--ease-out), transform .4s var(--ease-out);
}

.album-pager__link--next {
  grid-column: 3;
  text-align: right;
  align-items: flex-end;
}

.album-pager__link:focus-visible,
.album-pager__link:active {
  background: rgba(253, 241, 216, .6);
  outline: none;
}

@media (hover: hover) {
  .album-pager__link:hover { background: rgba(253, 241, 216, .6); }
  .album-pager__link--prev:hover { transform: translateX(-4px); }
  .album-pager__link--next:hover { transform: translateX(4px); }
}

.album-pager__dir {
  font-family: var(--font-decor);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.album-pager__name {
  font-family: var(--font-script);
  font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  line-height: 1.2;
  color: var(--gold);
}

/* —— Кнопки завантаження ZIP —— */

.album-pager__download {
  grid-column: 2;
  display: flex;
  justify-content: center;
}

.album-page .album-download {
  color: #fff; /* перекриває .album-page a { color: inherit } */
}

.album-download {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 10px 26px 10px 10px;
  border-radius: 999px;
  color: #fff;
  background: var(--gold-metal);
  background-size: 160% 160%;
  background-position: 0% 50%;
  box-shadow:
    0 0 0 1px rgba(169, 127, 34, .55),
    0 0 0 4px rgba(255, 252, 244, .9),
    0 0 0 5px rgba(212, 175, 55, .45),
    0 16px 30px -16px rgba(120, 88, 18, .7);
  overflow: hidden;
  isolation: isolate;
  transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out), background-position .8s var(--ease-out);
  -webkit-tap-highlight-color: transparent;
}

/* відблиск, що пробігає по кнопці */
.album-download::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .9s var(--ease-out);
}

.album-download__icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55);
}

.album-download__icon svg {
  display: block;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .45s var(--ease-out);
}

.album-download__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
}

.album-download__label {
  font-family: var(--font-decor);
  font-size: .9rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}

.album-download__text {
  text-shadow: 0 1px 2px rgba(92, 62, 8, .55), 0 0 1px rgba(92, 62, 8, .4);
}

.album-download__meta {
  font-family: var(--font-decor);
  font-size: .7rem;
  letter-spacing: .1em;
  white-space: nowrap;
  opacity: .95;
}

.album-download:focus-visible {
  transform: translateY(-3px);
  background-position: 100% 50%;
  box-shadow:
    0 0 0 1px rgba(169, 127, 34, .7),
    0 0 0 4px rgba(255, 252, 244, .9),
    0 0 0 5px rgba(212, 175, 55, .7),
    0 22px 38px -16px rgba(120, 88, 18, .75),
    0 0 34px -4px rgba(241, 214, 126, .7);
  outline: none;
}

.album-download:focus-visible::after {
  transform: translateX(120%);
}

@media (hover: hover) {
  .album-download:hover {
    transform: translateY(-3px);
    background-position: 100% 50%;
    box-shadow:
      0 0 0 1px rgba(169, 127, 34, .7),
      0 0 0 4px rgba(255, 252, 244, .9),
      0 0 0 5px rgba(212, 175, 55, .7),
      0 22px 38px -16px rgba(120, 88, 18, .75),
      0 0 34px -4px rgba(241, 214, 126, .7);
  }

  .album-download:hover::after {
    transform: translateX(120%);
  }

  .album-download:hover .album-download__icon svg {
    animation: album-download-bounce 1s var(--ease-out) infinite;
  }
}

.album-download:active {
  transform: scale(.97);
}

/* після натискання — коротке підтвердження */
.album-download.is-started .album-download__icon {
  background: rgba(255, 255, 255, .4);
}

@keyframes album-download-bounce {
  0%, 100% { transform: translateY(0); }
  45% { transform: translateY(3px); }
}

.album-download--lg {
  gap: 16px;
  padding: 12px 34px 12px 12px;
}

.album-download--lg .album-download__icon {
  width: 52px;
  height: 52px;
}

.album-download--lg .album-download__icon svg {
  width: 24px;
  height: 24px;
}

.album-download--lg .album-download__label {
  font-size: clamp(.95rem, 1.4vw, 1.1rem);
}

.album-download--lg .album-download__meta {
  font-size: .78rem;
}

/* —— Блок «Увесь альбом» на сторінці /album/ —— */

.album-download-all {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0 0 clamp(40px, 6vw, 72px);
  animation: album-rise .9s var(--ease-out) .5s backwards;
}

.album-download-all .album-divider {
  margin-top: 0;
}

.album-download-all__title {
  margin: 4px 0 0;
  font-family: var(--font-script);
  font-size: clamp(1.8rem, 3.6vw, 2.6rem);
  line-height: 1.2;
  color: var(--gold);
}

.album-download-all__text {
  margin: 6px 0 clamp(20px, 3vw, 30px);
  font-family: var(--font-script);
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  color: var(--gold-text);
}

.album-download-all__hint {
  margin: 18px 0 0;
  font-family: var(--font-decor);
  font-size: .7rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold-text);
  opacity: .75;
}

/* —— Підвал —— */

.album-footer {
  text-align: center;
  padding: 8px 16px max(24px, env(safe-area-inset-bottom, 0px));
}

.album-footer__names {
  margin: 0;
  font-family: var(--font-script);
  font-size: 1.5rem;
  color: var(--gold);
}

.album-footer__date {
  margin: 2px 0 0;
  font-family: var(--font-decor);
  font-size: .8rem;
  letter-spacing: .3em;
  color: var(--gold-text);
}

/* —— Лайтбокс —— */

.lightbox {
  position: fixed;
  inset: 0;
  overscroll-behavior: contain;
  z-index: 1000;
  display: grid;
  place-items: center;
  color: #fff;
  opacity: 0;
  transition: opacity .35s var(--ease-out);
}

.lightbox[hidden] { display: none; }
.lightbox.is-open { opacity: 1; }

.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 40%, rgba(40, 30, 10, .88), rgba(14, 10, 4, .96));
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.lightbox__stage {
  position: relative;
  margin: 0;
  pointer-events: none;
}

/* зверху панель (≈74px), з боків кнопки ‹ › (≈68px) — фото вписується між ними */
.lightbox__img {
  max-width: min(calc(100vw - 160px), 1600px);
  max-height: calc(100vh - 150px);
  max-height: calc(100dvh - 150px);
  width: auto;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5), 0 0 0 1px rgba(241, 214, 126, .35);
  transform: scale(.97);
  opacity: 0;
  transition: transform .45s var(--ease-out), opacity .35s var(--ease-out);
  user-select: none;
}

.lightbox__img.is-loaded {
  transform: none;
  opacity: 1;
}

.lightbox__bar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: max(14px, env(safe-area-inset-top, 0px)) 16px 14px;
}

.lightbox__counter {
  font-family: var(--font-decor);
  font-size: .85rem;
  letter-spacing: .2em;
  color: var(--gold-light);
}

.lightbox__actions {
  display: flex;
  gap: 10px;
}

.lightbox__btn,
.lightbox__nav {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: var(--gold-light);
  background: rgba(255, 255, 255, .08);
  box-shadow: 0 0 0 1px rgba(241, 214, 126, .35);
  cursor: pointer;
  transition: background .3s, transform .3s var(--ease-out), color .3s;
}

.lightbox__btn:focus-visible,
.lightbox__nav:focus-visible,
.lightbox__btn:active,
.lightbox__nav:active {
  background: rgba(241, 214, 126, .2);
  color: #fff;
  outline: none;
}

.lightbox__btn svg,
.lightbox__nav svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.lightbox__nav {
  position: absolute;
  top: 50%;
  width: 54px;
  height: 54px;
  transform: translateY(-50%);
}

.lightbox__nav--prev { left: max(14px, env(safe-area-inset-left, 0px)); }
.lightbox__nav--next { right: max(14px, env(safe-area-inset-right, 0px)); }
@media (hover: hover) {
  .lightbox__btn:hover,
  .lightbox__nav:hover {
    background: rgba(241, 214, 126, .2);
    color: #fff;
  }

  .lightbox__nav--prev:hover { transform: translateY(-50%) translateX(-3px); }
  .lightbox__nav--next:hover { transform: translateY(-50%) translateX(3px); }
}

html {
  scrollbar-gutter: stable;
}

html.lightbox-open {
  overflow: hidden;
}

/* —— Анімації —— */

@keyframes album-page-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes album-rise {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}

@keyframes album-shimmer {
  from { background-position: 150% 0, 0 0; }
  to { background-position: -100% 0, 0 0; }
}

/* —— Адаптив —— */

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

@media (max-width: 640px) {
  .album-grid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 420px;
    margin: 0 auto;
  }

  .album-photos { --row-h: 100px; --gap: 6px; }
  .album-empty__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .album-empty__tile:nth-child(n + 5) { display: none; }

  .album-pager { grid-template-columns: 1fr 1fr; gap: 10px; }
  .album-pager__download { grid-column: 1 / -1; grid-row: 1; margin-bottom: 8px; }
  .album-pager__link { padding: 12px 10px; }
  .album-pager__link--next { grid-column: 2; }
  .album-pager__name { font-size: 1.2rem; }
  .album-pager__word { display: none; }

  .album-download--lg { padding: 10px 22px 10px 10px; gap: 12px; max-width: 100%; }
  .album-download--lg .album-download__icon { width: 44px; height: 44px; }
  .album-download--lg .album-download__label { font-size: .88rem; letter-spacing: .1em; }
  .album-download--lg .album-download__meta { font-size: .72rem; }

  .lightbox__nav { top: auto; bottom: max(18px, env(safe-area-inset-bottom, 0px)); transform: none; }
  .lightbox__nav--prev:hover,
  .lightbox__nav--next:hover { transform: none; }
  .lightbox__nav--prev { left: max(18px, env(safe-area-inset-left, 0px)); }
  .lightbox__nav--next { right: max(18px, env(safe-area-inset-right, 0px)); }
  /* на телефоні кнопки ‹ › унизу, тож фото на всю ширину */
  .lightbox__img {
    max-width: 100vw;
    max-height: calc(100vh - 190px);
    max-height: calc(100dvh - 190px);
    border-radius: 0;
  }
}

@media (max-width: 400px) {
  .album-pager__dir { white-space: nowrap; letter-spacing: .1em; }

  .album-download,
  .album-download--lg { padding: 8px 18px 8px 8px; gap: 10px; }
  .album-download__text { min-width: 0; }
  .album-download .album-download__label,
  .album-download--lg .album-download__label { font-size: .78rem; letter-spacing: .06em; white-space: normal; }
  .album-download .album-download__meta,
  .album-download--lg .album-download__meta { font-size: .66rem; letter-spacing: .04em; }
  .album-download__icon,
  .album-download--lg .album-download__icon { width: 38px; height: 38px; }
}

@supports not (aspect-ratio: 1 / 1) {
  .album-card__media { height: 0; padding-top: 100%; }
  .album-photo { height: var(--row-h); }
  .album-empty__tile { height: 0; padding-top: 75%; }
  .album-icon { height: 40px; }
  .album-card__placeholder-icon { height: 46%; }
  .album-intro__icon { height: clamp(48px, 5vw, 64px); }
  .album-empty__icon { height: 52px; }
  .album-card__corner { height: clamp(38px, 4.6vw, 58px); }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: .01ms !important;
  }
}