/* ТОКЕНИ — само специфичните за началната; общите са в base.css */
:root {
  --shadow: 0 22px 48px -24px rgba(0, 0, 0, 0.85);
  --step-eyebrow: 0.78rem;
  --step-body:    1.0625rem;
  /* всяко clamp() е с твърда резервна стойност за стари браузъри (~2018) */
  --step-hero: 3.5rem;
  --step-hero: clamp(2.3rem, 1.2rem + 4.6vw, 4.6rem);
  --gap: 0.8rem;
  --gap: clamp(0.6rem, 0.3rem + 1vw, 1rem);
}

body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-body, "Manrope", system-ui, sans-serif); font-weight: var(--body-weight, 400); font-size: var(--step-body); line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  background-image: radial-gradient(120% 80% at 50% -10%, var(--glow), transparent 60%);
}

@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* HERO */
.hero {
  /* по-въздушна от вътрешните страници (корица), но без голям скок при преход */
  padding-top: 5.25rem; padding-bottom: 3.5rem;
  padding-block: clamp(3.5rem, 1.75rem + 7.25vw, 6.875rem) clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.7em;
  /* без uppercase — Ани държи изписването „PhotoGrapher" като съставна дума */
  font-size: var(--step-eyebrow); letter-spacing: 0.14em;
  color: var(--amber); margin: 0 0 1.4rem;
}
.eyebrow::before { content: ""; width: 2.4rem; height: 1px; background: currentColor; opacity: 0.7; }
.hero__title {
  font-family: var(--font-display, "Cormorant Garamond", Georgia, serif); font-weight: 500;
  font-size: var(--step-hero); line-height: 1.02; letter-spacing: -0.01em;
  margin: 0; max-width: 16ch;
}
.hero__lead {
  margin: 1.5rem 0 0; max-width: 46ch; color: var(--ink-lead, var(--ink-soft)); font-weight: 500; font-style: var(--lead-style, italic);
  font-family: var(--font-display, "Cormorant Garamond", Georgia, serif);
  font-size: 1.25rem;
  font-size: clamp(1.15rem, 0.9rem + 0.9vw, 1.6rem); line-height: 1.4; letter-spacing: 0.02em;
}

/* ГАЛЕРИЯ — повтаряща се мозайка за произволен брой каталози */
.gallery {
  padding-bottom: 5rem;
  padding-bottom: clamp(4rem, 2rem + 6vw, 7rem);
}
.gallery__label {
  font-size: var(--step-eyebrow); letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--ink-soft); margin: 0 0 1.5rem;
}
.grid {
  display: grid; gap: var(--gap);
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: minmax(120px, 30vw);
}
.frame:nth-child(9n+1) { grid-column: span 2; }
@media (min-width: 760px) {
  .grid {
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 160px;
    grid-auto-rows: clamp(130px, 13.5vw, 215px);
    grid-auto-flow: row dense;
  }
.frame:nth-child(9n+1) { grid-column: span 2; grid-row: span 2; }
.frame:nth-child(9n+4) { grid-column: span 2; }
.frame:nth-child(9n+5) { grid-row: span 2; }
.frame:nth-child(9n+7) { grid-column: span 2; }
.frame:nth-child(9n+9) { grid-column: span 2; }
}

.frame {
  position: relative; display: block; padding: 0; border: none;
  border-radius: var(--radius); background: var(--bg-elev); overflow: hidden;
  cursor: pointer; box-shadow: none; width: 100%; text-align: left;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
  animation: rise 0.7s ease backwards;
  animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.frame__media {
  width: 100%; height: 100%; object-fit: cover; display: block;
  background:
    radial-gradient(80% 120% at 30% 20%, var(--glow), transparent 55%),
    linear-gradient(135deg, var(--bg-elev2), var(--bg) 75%);
  transition: transform 0.6s ease, filter 0.6s ease;
}
.frame:not(.frame--empty)::after {   /* празните гнезда нямат снимка → без затъмнение */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 55%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.72), transparent);
  pointer-events: none; z-index: 1;
}

/* Надпис върху корицата: име на каталога + брой снимки */
.frame__meta {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 0.75rem 0.85rem; display: flex; flex-direction: column; gap: 0.15rem;
  pointer-events: none;
}
.frame__title {
  font-family: var(--font-display, "Cormorant Garamond", Georgia, serif); font-weight: 500;
  font-size: 1.25rem;
  font-size: clamp(1.05rem, 0.9rem + 0.5vw, 1.45rem); line-height: 1.08; color: var(--on-photo-ink, var(--ink));
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.75);
}
.frame__count {
  font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--on-photo-accent, var(--amber)); text-shadow: 0 1px 5px rgba(0, 0, 0, 0.8);
}

.frame:not(.frame--empty):hover { transform: translateY(-3px); }
.frame:not(.frame--empty):hover .frame__media { transform: scale(1.04); filter: brightness(1.06) saturate(1.06); }
.frame:focus-visible {
  transform: translateY(-3px);
  box-shadow: inset 0 0 0 1px var(--amber), 0 0 0 2px var(--amber);
  outline: none;
}

/* Празни гнезда „Очаквайте" / „Скоро" */
.frame--empty { cursor: default; }
.frame__ph {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  inset: 0; z-index: 2; display: grid; place-items: center;
  font-family: var(--font-display, "Cormorant Garamond", Georgia, serif); font-style: var(--lead-style, italic);
  font-size: 1.25rem;
  font-size: clamp(1.1rem, 0.9rem + 0.6vw, 1.5rem); letter-spacing: 0.04em;
  color: var(--ink-soft);
}

/* ФУТЪР */

/* ВИЗУАЛИЗАТОР (слайдшоу) */
.viewer {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0;
  inset: 0; z-index: 50;
  display: flex; flex-direction: column;
  background: rgba(12, 9, 6, 0.94);
  -webkit-backdrop-filter: blur(7px); backdrop-filter: blur(7px);
}
.viewer[hidden] { display: none; }
body.viewer-open { overflow: hidden; }

.viewer__stage {
  flex: 1 1 auto; min-height: 0; margin: 0; position: relative;
  display: grid; place-items: center;
  padding: 0.75rem;
}
.viewer__img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  min-width: 0; min-height: 0;   /* без това портретните снимки не се свиват (grid min-height:auto) и излизат под лентата */
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.viewer__img.is-in { animation: fade 0.35s ease; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.viewer__cap {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 1rem;   /* лента върху долната част на снимката */
  color: var(--on-photo-ink, var(--ink)); font-weight: 500; font-size: 0.78rem; letter-spacing: 0.08em;
  background: rgba(0, 0, 0, 0.55); padding: 0.25rem 0.75rem; border-radius: 999px;
}
/* Двете части на надписа са ОТДЕЛНИ правила — за независима промяна после.
   Името копира шрифта на заглавието върху грида (.frame__title). */
.viewer__cap-name { font-family: var(--font-display, "Cormorant Garamond", Georgia, serif); font-weight: 500; font-size: 1.05rem; letter-spacing: 0.01em; }

.viewer__close, .viewer__share, .viewer__nav {
  position: absolute; z-index: 2; cursor: pointer; color: var(--on-photo-ink, var(--ink));
  background: rgba(0, 0, 0, 0.42); border: 1px solid var(--on-photo-line, var(--line)); border-radius: 50%;
  display: grid; place-items: center; line-height: 1;
  transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease, opacity 0.25s ease;
}
.viewer__close { top: 1rem; right: 1rem; width: 2.8rem; height: 2.8rem; font-size: 1.5rem; }
.viewer__close:hover { border-color: var(--on-photo-accent, var(--amber)); transform: rotate(90deg); }
.viewer__share { top: 1rem; right: 4.4rem; width: 2.8rem; height: 2.8rem; }
.viewer__share:hover { border-color: var(--on-photo-accent, var(--amber)); }
.viewer__nav { top: 50%; transform: translateY(-50%); width: 3rem; height: 3rem; font-size: 1.9rem; }
.viewer__nav--prev { left: 1rem; left: clamp(0.5rem, 2vw, 1.5rem); }
.viewer__nav--next { right: 1rem; right: clamp(0.5rem, 2vw, 1.5rem); }
.viewer__nav:hover { border-color: var(--on-photo-accent, var(--amber)); background: rgba(0, 0, 0, 0.62); }
.viewer__nav[disabled] { opacity: 0.22; cursor: default; pointer-events: none; }
.viewer__toast {
  position: absolute; left: 50%; bottom: 5rem; transform: translateX(-50%); z-index: 3;
  background: var(--amber); color: var(--ink-on-amber); padding: 0.5rem 1.05rem; border-radius: 999px;
  font-size: 0.82rem; letter-spacing: 0.03em; box-shadow: var(--shadow);
  opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
  max-width: 86vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.viewer__toast.is-show { opacity: 1; }

/* Лента с тъмбнейли (десктоп) */
.viewer__film { flex: 0 0 auto; overflow: hidden; padding: 0.35rem 0; border-top: 1px solid var(--on-photo-line, var(--line)); }
.viewer__filmtrack { display: flex; gap: 0.5rem; padding: 0 0.5rem; width: max-content; transition: transform 0.35s ease; will-change: transform; }
.film__thumb {
  flex: 0 0 auto; width: 90px; height: 64px; padding: 0; cursor: pointer;
  border: 1px solid transparent; border-radius: var(--radius); overflow: hidden;
  background: var(--viewer-thumb-bg, var(--bg-elev)); opacity: 0.5; transition: opacity 0.25s ease, border-color 0.25s ease;
}
.film__thumb img { width: 100%; height: 100%; object-fit: cover; }
.film__thumb:hover { opacity: 0.85; }
.film__thumb.is-active { opacity: 1; border-color: var(--on-photo-accent, var(--amber)); }
@media (max-width: 759px) { .viewer__film { display: none; } }   /* телефон: само плъзгане + стрелки */

/* ДОСТЪПНОСТ */
@media (prefers-reduced-motion: reduce) {
  .frame { animation: none; }
  .frame:hover, .frame:focus-visible { transform: none; }
  .frame:hover .frame__media { transform: none; }
  .viewer__img.is-in { animation: none; }
  .viewer__filmtrack { transition: none; }
  * { transition-duration: 0.01ms !important; }
}