/* Страницы ведущих (/hosts/<имя>/): шапка и подвал — как на главной; ниже — только то, чего нет в site.css */
.hd .wrap,.ft .wrap,.wrap,.container{width:min(1240px,calc(100% - 40px))}
.hostc{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hostc .btn.ghost{min-height:50px}
/* видео ведущего: три вертикальных ролика */
.hv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
.hv-item{margin:0}
.hv-item video{display:block;width:100%;height:auto;aspect-ratio:9/16;object-fit:cover;background:#000;border:1px solid var(--line)}
.hv-item figcaption{margin-top:12px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}

/* подпись ведущего вместо логотипа SYNTHAZY (шапка и подвал) */
.hd .logo img{width:auto;height:52px}
@media(max-width:1020px){.hd .logo img{width:auto;height:40px}}
.ft .hlogo{width:auto;height:60px;margin-bottom:14px}
.ft .brand .syn{margin-top:16px;display:grid;gap:8px;font-size:13px}
.ft .brand .syn span{display:flex;gap:16px}
/* телефон: три видео в один ряд (обложки в 1/3 ширины, пропорция 9:16), по нажатию — полный экран */
@media(max-width:900px){
.hv-grid{grid-template-columns:repeat(3,1fr);gap:8px}
.hv-item.is-tile{cursor:pointer}
.hv-box{position:relative}
.hv-item.is-tile .hv-box::after{content:"";position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:rgba(7,7,6,.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f1d29a' d='M9 6.5v11l9-5.5z'/%3E%3C/svg%3E") center/20px no-repeat;border:1px solid rgba(241,210,154,.6);pointer-events:none}
.hv-item figcaption{font-size:10px;letter-spacing:.04em;margin-top:8px;line-height:1.35}
}
.hv-modal{position:fixed;inset:0;z-index:3500;display:none;align-items:center;justify-content:center;background:rgba(4,4,3,.96)}
.hv-modal.on{display:flex}
.hv-modal video{max-width:100vw;max-height:100dvh;width:auto;height:100dvh;aspect-ratio:9/16;background:#000}
@media(min-aspect-ratio:9/16){.hv-modal video{height:100dvh}}
.hv-x{position:absolute;top:10px;right:10px;z-index:2;width:44px;height:44px;font-size:26px;color:#f6f0e6;background:rgba(7,7,6,.6);border:1px solid rgba(255,255,255,.3);display:grid;place-items:center}
/* «Главный принцип»: крупный тезис слева, развёрнутый текст справа (страницы свадьбы и корпоратива) */
.hp-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:start;margin-top:28px}
.hp-big{font-size:clamp(30px,3.8vw,54px);line-height:1.12;letter-spacing:-.035em;font-weight:300}
.hp-big em{display:block;margin-top:.15em;font-style:normal;color:var(--gold2)}
.hp-copy .copy{margin-top:18px}
@media(max-width:900px){.hp-grid{grid-template-columns:1fr}}
.hp-lead{font-size:clamp(20px,2vw,28px);font-weight:300;line-height:1.35;color:var(--soft)}
.hp-p{margin-top:18px;color:var(--muted)}
/* Фото в текстовых блоках и галерея страницы корпоративов */
.hpic{margin:28px 0 0;border:1px solid var(--line,rgba(255,255,255,.13));border-radius:var(--radius-card,0);overflow:hidden;background:var(--panel,#11100e);aspect-ratio:4/5;max-width:520px}
.hpic img{width:100%;height:100%;object-fit:cover;object-position:50% 22%}
.hpic.ban{aspect-ratio:21/9;max-width:none;margin-top:44px}
.hpic.sq{aspect-ratio:1/1}
.hpic.ban img{object-position:50% 30%}
@media(max-width:900px){.hpic{max-width:none}.hpic.ban{aspect-ratio:4/3}}
/* Единая галерея фото ведущего: 4 фото на странице, номер и подпись на плитке, стрелки и полоски страниц, свайп */
.hgal{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:40px;touch-action:pan-y}
.hgal-i{position:relative;display:block;width:100%;padding:0;border:0;aspect-ratio:3/4;overflow:hidden;border-radius:var(--radius-card,7px);background:var(--panel,#11100e);cursor:zoom-in;text-align:left;color:var(--text,#f6f0e6)}
.hgal-i img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.hgal-i:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.62),transparent 48%);pointer-events:none}
.hgal-i:hover img{transform:scale(1.035)}
.hgal-n,.hgal-c{position:absolute;z-index:2;font-size:12px;letter-spacing:.14em}
.hgal-n{top:16px;left:17px}
.hgal-c{bottom:17px;left:17px;text-transform:uppercase}
.hgal-i.is-off{display:none}
@media(max-width:900px){.hgal{grid-template-columns:repeat(2,1fr);gap:12px}}
.hpg{display:flex;align-items:center;justify-content:center;gap:28px;margin-top:28px}
.hpg[hidden]{display:none}
.hpg-a{min-width:56px;min-height:56px;border:0;background:transparent;color:var(--text,#f6f0e6);font-size:36px;line-height:1;cursor:pointer;transition:color .2s}
.hpg-a:hover{color:var(--gold2,#f1d29a)}
.hpg-a[disabled]{opacity:.35;cursor:default}
.hpg-d{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.hpg-d button{position:relative;width:22px;height:2px;border:0;background:rgba(255,255,255,.22);padding:0;cursor:pointer;transition:background-color .25s}
.hpg-d button:after{content:"";position:absolute;inset:-16px -3px}
.hpg-d button.is-active{background:var(--gold,#d7b477)}
/* Меню страниц ведущего: до 9 пунктов в одну строку */
@media(min-width:1021px){.hd .nav{gap:18px}.hd .nav a,.hd .btn{white-space:nowrap}}
@media(min-width:1021px) and (max-width:1279px){.hd .nav{gap:14px}.hd .nav a{font-size:12px}}
@media(min-width:1021px) and (max-width:1199px){.hd .hd-ai{display:none!important}}
@media(min-width:1021px) and (max-width:1199px){.hd .logo{flex:none}.hd .logo img{width:auto;height:40px}.hd .wrap{gap:12px}}
