/* Компоненты: всё, что повторилось дважды. Класс с модификаторами (`.btn`, `.btn--accent`), описание – docs/design-system.md → Компоненты.
   Появляются по ходу сборки; ничего не заводится «на будущее». */

/* Ссылка: подчёркивание проявляется при наведении; --on – подчёркнута всегда (ссылки внутри текста и ячеек меню) */
.link {
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: var(--line);
  text-underline-offset: var(--underline-offset);
  transition: text-decoration-color var(--dur-300) var(--ease-out);
}
.link:hover, .link--on { text-decoration-color: currentColor; }

/* Кнопка: при наведении приподнимается на --space-4 (lift). На сайте одна кнопка – Book (--primary, акцент); второстепенных кнопок нет */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: var(--space-12) var(--space-24);
  border-radius: var(--radius-s);
  font-weight: var(--fw-strong);
  white-space: nowrap;
  transition: transform var(--dur-300) var(--ease-out);
}
.btn:hover { transform: translateY(calc(var(--space-4) * -1)); }
.btn--primary { background: var(--color-accent); color: var(--color-on-accent); }
/* Второстепенное действие рядом с основным: только контур в цвет текста, без заливки */
.btn--secondary { border: var(--line) solid var(--color-fg); color: var(--color-fg); }
.btn--secondary:hover { background: var(--color-fg); color: var(--color-bg-page); }

/* Иллюстрация-гравюра: файл служит маской, цвет – токен, поэтому одна гравюра подходит к любой поверхности */
.illus {
  width: 100%; height: var(--illus-h);
  background: var(--color-illustration);
  mask: var(--illus-src) center / contain no-repeat;
  -webkit-mask: var(--illus-src) center / contain no-repeat;
}
.illus--waffle { --illus-src: url("../assets/img/illustration/waffle.svg"); }
.illus--lighthouse { --illus-src: url("../assets/img/illustration/lighthouse.png"); }

/* Фото-карточка: рамка с фото и ярлыком на бумажной подложке в нижнем левом углу (макет заказчика, «Sable Falls / 1 mile away»).
   Ярлык лежит в той же ячейке грида, что и фото. При наведении фото медленно увеличивается (photo-zoom) */
.photo-card { display: grid; overflow: hidden; }
.photo-card > * { grid-area: 1 / 1; }
.photo-card img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-900) var(--ease-out); }
.photo-card:hover img, .photo-card:focus-within img { transform: scale(var(--scale-zoom)); }
.photo-card__tab {
  align-self: end; justify-self: start; z-index: var(--z-content);
  display: flex; flex-direction: column; gap: var(--space-4);
  max-width: calc(100% - var(--space-32));
  padding: var(--space-12) var(--space-16);
  background: var(--color-bg-page); color: var(--color-fg);
}
.photo-card__tab p { max-width: var(--measure-text); }

/* Плейсхолдер кадра: честная заглушка с подписью, какой снимок здесь будет; может нести гравюру */
.placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-16);
  padding: var(--space-32); text-align: center;
  background: var(--color-bg-page); color: var(--color-fg);
  border: var(--line) dashed var(--color-line);
}
.placeholder p { max-width: var(--measure-caption); }

/* Поле формы: подпись над полем, линия снизу */
.field { display: flex; flex-direction: column; gap: var(--space-8); }
.field input {
  padding: var(--space-12) 0; background: none; border: 0;
  border-bottom: var(--line) solid currentColor; border-radius: 0;
}
.field input:focus-visible { outline: none; border-bottom-color: var(--color-accent); box-shadow: 0 var(--line) 0 var(--color-accent); }

/* Просмотр фото (lightbox, js/lightbox.js): служебный fixed-оверлей поверх страницы, как меню; transform у кадра –
   увеличение и сдвиг. Сетка: панель с подписью и кнопками, кадр на всё оставшееся место, навигация снизу */
[data-zoomable] { cursor: zoom-in; }
.lightbox { position: fixed; inset: 0; z-index: var(--z-lightbox); display: grid; grid-template-rows: auto minmax(0, 1fr) auto;
  background: var(--color-lightbox); color: var(--color-fg-on-dark); opacity: 0; }
/* display: grid перебивал [hidden] – невидимый оверлей лежал поверх страницы и съедал клики (карта, список мест, всё) */
.lightbox[hidden] { display: none; }
.lightbox.is-open { opacity: 1; }
.has-motion .lightbox { transition: opacity var(--dur-300) var(--ease-out); }
.lightbox__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-16); padding: var(--space-16); }
.lightbox__cap { color: var(--color-fg-muted-on-dark); max-width: var(--measure-text); }
.lightbox__tools, .lightbox__nav { display: flex; align-items: center; gap: var(--space-8); }
.lightbox__nav { justify-content: center; padding: var(--space-16); }
.lightbox__count { min-width: var(--space-64); text-align: center; font-variant-numeric: tabular-nums; }
.lightbox.is-single .lightbox__nav { visibility: hidden; }
.lightbox__stage { display: grid; place-items: center; min-height: 0; overflow: hidden; touch-action: none; padding-inline: var(--space-16); }
.lightbox__img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: var(--radius-photo);
  transform-origin: center; user-select: none; cursor: zoom-in; }
.lightbox.is-zoomed .lightbox__img { cursor: grab; border-radius: 0; }
.lightbox__btn { width: var(--nav-btn); height: var(--nav-btn); display: grid; place-items: center; border-radius: var(--radius-pill);
  background: var(--color-caption-bg); color: var(--color-fg); transition: background-color var(--dur-300) var(--ease-out), color var(--dur-300) var(--ease-out); }
.lightbox__btn svg { width: var(--icon); height: var(--icon); fill: none; stroke: currentColor; stroke-width: var(--stroke-route); stroke-linecap: round; stroke-linejoin: round; }
.lightbox__btn:hover:not(:disabled) { background: var(--color-accent); color: var(--color-on-accent); }
.lightbox__btn:disabled { opacity: 0.32; cursor: default; }
html.is-lightbox { overflow: hidden; }
html.is-lightbox [data-visito-webchat-widget] { display: none; }
@media (max-width: 500px) {
  .lightbox__cap { display: none; }
  .lightbox__top { justify-content: end; }
  .lightbox__stage { padding-inline: 0; }
}