/* Компоненты и разделы публичного сайта: макет «Воздух».
   Главная — много пространства, альбомы — плотная сетка фото. */

/* ===== Шапка ===== */
.header{position:absolute;inset:0 0 auto 0;z-index:var(--z-header)}
.header--solid{position:sticky;background:color-mix(in srgb,var(--color-bg) 92%,transparent);backdrop-filter:blur(12px);border-bottom:var(--border-w) solid var(--color-border)}
.header__in{display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);min-height:88px}
.logo{font-family:var(--font-heading);font-size:1.75rem;font-weight:500;text-decoration:none;letter-spacing:.01em;line-height:1}
.nav{display:flex;gap:var(--space-6)}
.nav a{display:inline-flex;align-items:center;min-height:var(--touch);font-size:var(--text-sm);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid transparent;transition:border-color var(--dur-fast)}
.nav a:hover,.nav a[aria-current]{border-color:currentColor}

/* Меню телефона: <details> без скриптов */
.menu{display:none}
.menu summary{display:grid;place-items:center;width:var(--touch);height:var(--touch);list-style:none;cursor:pointer;border-radius:50%}
.menu summary::-webkit-details-marker{display:none}
.menu summary .icon-close{display:none}
.menu[open] summary .icon-open{display:none}
.menu[open] summary .icon-close{display:block}
.menu__panel{position:absolute;inset:100% 0 auto 0;display:grid;padding:var(--space-4) var(--space-5) var(--space-6);background:var(--color-bg);border-bottom:var(--border-w) solid var(--color-border)}
.menu__panel a{display:flex;align-items:center;min-height:var(--control-h);font-family:var(--font-heading);font-size:var(--text-xl);text-decoration:none;border-bottom:var(--border-w) solid var(--color-border)}
.menu__panel a[aria-current]{color:var(--color-accent-text)}

/* ===== Главный экран ===== */
.hero{padding-top:calc(88px + var(--space-8));text-align:center}
.hero__title{max-width:13ch;margin:var(--space-5) auto var(--space-6);font-size:var(--text-4xl);font-weight:300;line-height:.95;letter-spacing:-.02em}
.hero__title em{color:var(--color-accent)}
.hero__lead{max-width:44ch;margin-inline:auto;color:var(--color-text-muted);font-size:var(--text-lg)}
.hero__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-5) var(--space-7);margin-top:var(--space-7)}
.hero__figure{width:min(100% - 2*var(--space-5),1120px);margin:var(--space-9) auto 0}
.hero__figure img{width:100%;aspect-ratio:16/9;object-fit:cover;object-position:50% 40%}
.hero__figure figcaption{margin-top:var(--space-3);text-align:right;font-size:var(--text-xs);letter-spacing:.08em;color:var(--color-text-muted)}

.intro{text-align:center}
.intro p{font-family:var(--font-heading);font-size:var(--text-xl);font-weight:300;line-height:1.35}
.intro em{color:var(--color-accent)}

/* ===== Заголовки разделов ===== */
.section-title{margin-top:var(--space-4);font-size:var(--text-2xl);font-weight:300}
.section-head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:var(--space-5);margin-bottom:var(--space-8)}

/* ===== Карточка альбома ===== */
.shelf{display:grid;gap:var(--space-8) var(--space-7)}
.tile{display:block;text-decoration:none}
.tile__img{overflow:hidden;background:var(--color-surface)}
.tile__img img{width:100%;aspect-ratio:4/5;object-fit:cover;transition:transform 1.1s var(--ease)}
.tile:hover .tile__img img{transform:scale(1.04)}
.tile__cap{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-4);margin-top:var(--space-4)}
.tile__title{font-family:var(--font-heading);font-size:var(--text-xl);font-weight:400;line-height:1.1}
.tile:hover .tile__title{color:var(--color-accent-text)}
.tile__meta{font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--color-text-muted);white-space:nowrap}

/* ===== Обо мне ===== */
.about{display:grid;gap:var(--space-7);align-items:center}
.about img{width:100%;aspect-ratio:4/5;object-fit:cover}
.about h2{margin:var(--space-4) 0 var(--space-5);font-size:var(--text-2xl);font-weight:300}
.about p{max-width:46ch;color:var(--color-text-muted)}
.about p+p{margin-top:var(--space-4)}

/* ===== Карточка услуги: строка ===== */
.services{border-top:var(--border-w) solid var(--color-border)}
.service{display:grid;gap:var(--space-2) var(--space-6);padding-block:var(--space-6);border-bottom:var(--border-w) solid var(--color-border)}
.service h3{font-size:var(--text-xl)}
.service p{max-width:52ch;color:var(--color-text-muted)}
.service b{font-size:var(--text-sm);font-weight:400;letter-spacing:.1em;text-transform:uppercase}

/* ===== Отзыв ===== */
.quote{text-align:center}
.quote blockquote{font-family:var(--font-heading);font-size:var(--text-2xl);font-style:italic;font-weight:300;line-height:1.2;text-wrap:balance}
.quote figcaption{margin-top:var(--space-5);font-size:var(--text-sm);color:var(--color-text-muted)}

/* ===== Контакты ===== */
.contact{text-align:center;background:var(--color-surface)}
.contact h2{margin:var(--space-4) 0 var(--space-5);font-size:var(--text-2xl);font-weight:300}
.contact p{max-width:44ch;margin-inline:auto;color:var(--color-text-muted)}
.contact__links{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-4);margin-top:var(--space-7)}

/* ===== Подвал ===== */
.footer{padding-block:var(--space-7) calc(var(--space-7) + 64px);font-size:var(--text-sm);color:var(--color-text-muted)}
.footer__in{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--space-4)}
.footer a{text-decoration:none}
.footer a:hover{text-decoration:underline}

/* ===== Мобильная панель связи ===== */
.dock{position:fixed;inset:auto 0 0 0;z-index:var(--z-dock);display:flex;gap:var(--space-2);padding:var(--space-2) var(--space-3) calc(var(--space-2) + env(safe-area-inset-bottom));background:var(--color-bg);border-top:var(--border-w) solid var(--color-border)}
.dock .btn{flex:1;padding:0 var(--space-3)}

/* ===== Хлебные крошки ===== */
.crumbs{font-size:var(--text-xs);letter-spacing:.14em;text-transform:uppercase;color:var(--color-text-muted)}
.crumbs ol{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-3)}
.crumbs li+li::before{content:"/";margin-right:var(--space-3)}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--color-text);text-decoration:underline}
.crumbs [aria-current]{color:var(--color-text)}

/* ===== Страница альбома ===== */
.album-top{padding-top:var(--space-8);padding-bottom:var(--space-7)}
.album-top h1{margin:var(--space-4) 0 var(--space-3);font-size:var(--text-2xl);font-weight:300}
.album-top p{max-width:56ch;color:var(--color-text-muted)}
.others{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-3) var(--space-6);margin-top:var(--space-5)}
.others a{font-family:var(--font-heading);font-size:var(--text-xl);text-decoration:none;color:var(--color-text-muted);border-bottom:1px solid transparent}
.others a:hover{color:var(--color-text);border-color:currentColor}

/* Сетка фото: ряды одной высоты, ширина по пропорциям кадра.
   Пропорцию задаёт data-r (округлённая до набора значений, считает PHP). */
.gallery{--h:240px;display:flex;flex-wrap:wrap;gap:6px;width:min(100% - 2*var(--space-2),1680px);margin-inline:auto}
.gallery::after{content:"";flex-grow:1000000000}
.gallery a{--r:1.5;display:block;flex:calc(var(--r)*100) 1 calc(var(--r)*var(--h));overflow:hidden;background:var(--color-surface);cursor:zoom-in}
.gallery a[data-r="0.5"]{--r:.5}
.gallery a[data-r="0.67"]{--r:.67}
.gallery a[data-r="0.75"]{--r:.75}
.gallery a[data-r="1"]{--r:1}
.gallery a[data-r="1.33"]{--r:1.33}
.gallery a[data-r="1.5"]{--r:1.5}
.gallery a[data-r="1.78"]{--r:1.78}
.gallery a[data-r="2"]{--r:2}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease),opacity var(--dur-base)}
.gallery a:hover img{transform:scale(1.04)}

/* ===== Просмотрщик фото (<dialog>) ===== */
.lb{width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--color-overlay);color:#fff}
.lb::backdrop{background:#000}
.lb__img{position:absolute;inset:56px;width:calc(100% - 112px);height:calc(100% - 112px);object-fit:contain}
.lb button{position:absolute;display:grid;place-items:center;width:52px;height:52px;border:0;border-radius:50%;background:transparent;color:#fff;opacity:.85;cursor:pointer}
.lb button:hover{opacity:1;background:rgb(255 255 255 / .14)}
.lb button:focus-visible{outline-color:#fff}
.lb button .icon{width:28px;height:28px}
.lb__x{top:6px;right:6px}
.lb__p{left:4px;top:50%;translate:0 -50%}
.lb__n{right:4px;top:50%;translate:0 -50%}
.lb__c{position:absolute;left:0;right:0;bottom:14px;text-align:center;font-size:var(--text-xs);letter-spacing:.2em;opacity:.8}

/* ===== Слайдер «До / После» =====
   Положение задаёт скрипт через --pos (CSSOM, CSP это разрешает); без скрипта показана половина. */
.ba{--pos:50%;position:relative;overflow:hidden;background:var(--color-surface);user-select:none;touch-action:pan-y}
.ba img{width:100%;aspect-ratio:3/2;object-fit:cover;pointer-events:none}
.ba__after{position:absolute;inset:0;clip-path:inset(0 0 0 var(--pos))}
.ba__after img{height:100%}
.ba__line{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgb(0 0 0 / .15);pointer-events:none}
.ba__line::after{content:"";position:absolute;top:50%;left:50%;width:44px;height:44px;margin:-22px;border:2px solid #fff;border-radius:50%;background:rgb(33 31 28 / .55)}
.ba__range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.ba:has(.ba__range:focus-visible){outline:3px solid var(--color-focus);outline-offset:3px}
.ba__tag{position:absolute;bottom:var(--space-3);padding:2px var(--space-3);background:rgb(33 31 28 / .7);color:#fff;font-size:var(--text-xs);letter-spacing:.12em;text-transform:uppercase}
.ba__tag--before{left:var(--space-3)}
.ba__tag--after{right:var(--space-3)}

@media (min-width:768px){
  .gallery{--h:300px;gap:8px}
  .shelf{grid-template-columns:repeat(12,1fr);align-items:start}
  .shelf .tile:nth-child(4n+1){grid-column:1 / span 5}
  .shelf .tile:nth-child(4n+2){grid-column:7 / span 5;margin-top:var(--space-9)}
  .shelf .tile:nth-child(4n+3){grid-column:2 / span 4}
  .shelf .tile:nth-child(4n+4){grid-column:7 / span 6;margin-top:var(--space-8)}
  .shelf .tile:nth-child(4n+2) img,.shelf .tile:nth-child(4n+3) img{aspect-ratio:1/1}
  .shelf .tile:nth-child(4n+4) img{aspect-ratio:3/2}
  .about{grid-template-columns:5fr 6fr;gap:var(--space-9)}
  .service{grid-template-columns:5fr 6fr auto;align-items:baseline}
  .dock{display:none}
  .footer{padding-bottom:var(--space-7)}
}
@media (min-width:1280px){.gallery{--h:340px}}
@media (max-width:767px){
  .nav{display:none}
  .menu{display:block}
  .header__in{min-height:72px}
  .hero{padding-top:calc(72px + var(--space-6))}
  .hero__figure{margin-top:var(--space-7)}
  .hero__figure img{aspect-ratio:4/5}
  .shelf{gap:var(--space-7)}
  .lb__img{inset:56px 0;width:100%;height:calc(100% - 112px)}
  .lb__p,.lb__n{top:auto;bottom:0;translate:none}
}

/* ===== Страницы: отступы, услуги, текст, согласие, 404 ===== */
.section-pad{padding-bottom:var(--space-air)}
.section-nopad{padding-top:0}
.section-title--gap{margin-bottom:var(--space-7)}
.album-others{padding-top:var(--space-9)}
.album-others .eyebrow{text-align:center}
.contact__more{margin-top:var(--space-6);font-size:var(--text-sm)}
.contact__more a{text-underline-offset:.25em}
.service .link{justify-self:start}
.menu{position:static}
.header__in{position:relative}

.packages{display:grid;gap:var(--space-7)}
.package{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-4);padding:var(--space-7) var(--space-6);border:var(--border-w) solid var(--color-border);background:var(--color-surface)}
.package h2{font-size:var(--text-xl)}
.package__lead{color:var(--color-text-muted)}
.package__list{display:grid;gap:var(--space-2);margin-block:var(--space-2)}
.package__list li{padding-left:var(--space-5);position:relative}
.package__list li::before{content:"";position:absolute;left:0;top:.8em;width:10px;border-top:1px solid var(--color-accent)}
.package__note{font-size:var(--text-sm);color:var(--color-text-muted)}
.package__price{margin-top:auto;font-family:var(--font-heading);font-size:var(--text-2xl);line-height:1}

.details{display:grid;gap:var(--space-8);padding-top:0}
.details h2{font-size:var(--text-xl);margin-bottom:var(--space-4)}
.details__list{display:grid;gap:var(--space-3);color:var(--color-text-muted)}
.details__list li{padding-left:var(--space-5);position:relative}
.details__list li::before{content:"—";position:absolute;left:0}
.details__gap{margin-top:var(--space-7)}

.prose h2{font-size:var(--text-xl);margin:var(--space-7) 0 var(--space-3)}
.prose h2:first-child{margin-top:0}
.prose p{color:var(--color-text-muted)}
.prose a{text-underline-offset:.25em}

.notfound__actions{justify-content:flex-start;margin-top:var(--space-6)}

.consent{position:fixed;left:var(--space-4);right:var(--space-4);bottom:calc(var(--space-4) + 64px);z-index:var(--z-modal);display:grid;gap:var(--space-4);max-width:560px;padding:var(--space-5);background:var(--color-bg);border:var(--border-w) solid var(--color-border-strong);box-shadow:var(--shadow-md);font-size:var(--text-sm)}
.consent p{color:var(--color-text-muted)}
.consent__btns{display:flex;flex-wrap:wrap;gap:var(--space-3)}
.consent .btn--sm{flex:1;min-height:var(--control-h-sm);padding:0 var(--space-3)}

@media (min-width:768px){
  .packages{grid-template-columns:repeat(3,1fr);gap:var(--space-6)}
  .details{grid-template-columns:1fr 1fr;gap:var(--space-9)}
  .consent{left:var(--space-5);right:auto;bottom:var(--space-5)}
}

.services__more{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4) var(--space-6);margin-top:var(--space-7)}
.services__more p{font-size:var(--text-sm)}
@media (min-width:768px){.service{grid-template-columns:5fr 6fr}}
.hero__figure img{object-position:50% 30%}

.about__actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-4) var(--space-6);margin-top:var(--space-7)}