/* ══════════════════════════════════════════════════════════════
   YAE-OVERRIDE.CSS v2 — final alignment + typography override
   MUST be loaded LAST after every other CSS file.
   ALL rules use !important to break the cascade once and for all.

   Rules:
   1. HERO on every page (.hero, .v-hero, .s-hero, .wed-hero) → LEFT
   2. Section headers → INHERIT inline style="text-align: …" from HTML
   3. Cards → LEFT  | FAQ/Forms/Footer → LEFT  | CTA bands → CENTER
   4. WIDTHS — readable widths so titles don't break into 1-2 words per line:
      - h1/h-display: max-width 28ch (~5-6 words/line on desktop)
      - h2/h-1: max-width 24ch (~4-5 words/line)
      - lead/hero__lead: max-width 65ch (classic reading width)
   ══════════════════════════════════════════════════════════════ */

/* ── 0. WIDTHS — KILL all narrow widths set by other CSS files ─ */
.h-display,
.h-1,
h1.h-display,
h2.h-display,
h1.h-1,
h2.h-1 {
    max-width: none !important;
}
/* Then set reasonable widths */
.hero__title,
.v-hero__title,
.s-hero__title,
.wed-hero__title,
h1.h-display {
    max-width: 28ch !important;
    text-wrap: balance !important;
}
h2.h-1,
.h-1:not(h1) {
    max-width: 28ch !important;
    text-wrap: balance !important;
}
.hero__lead,
.v-hero__sub,
.s-hero__lead,
.wed-hero__lead,
.lead {
    max-width: 65ch !important;
    text-wrap: pretty !important;
}
/* Section heads (centered blocks) — wider so titles don't squeeze */
.info-section__head .h-1,
.v-gallery2__head .h-1,
.v-location__head .h-1,
.v-clip__head .h-1,
.wed-intro__head .h-1,
.wed-locations__head .h-1,
.wed-formats__head .h-1,
.wed-gallery-section__head .h-1,
.wed-reviews__head .h-1,
.seo-section__head .h-1,
.v-pricing__head .h-1,
.section > .container > div .h-1,
.section > .container > div .h-display {
    max-width: 28ch !important;
}
.info-section__head p,
.v-location__head p,
.section > .container > div > .lead {
    max-width: 65ch !important;
}

/* Mobile widths — slightly narrower so they don't hit edges */
@media (max-width: 720px) {
    .h-1, .h-display,
    .hero__title, .v-hero__title,
    .s-hero__title, .wed-hero__title,
    h2.h-1 {
        max-width: 18ch !important;
    }
    .lead, .hero__lead, .v-hero__sub,
    .s-hero__lead, .wed-hero__lead {
        max-width: 100% !important;
    }
}

/* ── 1. ALL HEROES → text LEFT (desktop and mobile) ────────── */
.hero__inner,
.v-hero__inner,
.s-hero__inner,
.wed-hero__inner {
    text-align: left !important;
    align-items: flex-start !important;
    display: flex !important;
    flex-direction: column !important;
}
.hero__inner *,
.v-hero__inner *,
.s-hero__inner *,
.wed-hero__inner * {
    text-align: left !important;
}
.hero__title, .hero__lead, .hero__eyebrow,
.v-hero__title, .v-hero__sub, .v-hero__eyebrow,
.s-hero__title, .s-hero__lead, .s-hero__eyebrow,
.wed-hero__title, .wed-hero__lead, .wed-hero__eyebrow {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
}
.hero__cta,
.v-hero__cta,
.s-hero__cta,
.wed-hero__cta,
.hero__pills,
.hero__facts {
    justify-content: flex-start !important;
    align-items: flex-start !important;
}
.hero__facts {
    width: 100% !important;
}
@media (max-width: 720px) {
    .hero__inner, .v-hero__inner,
    .s-hero__inner, .wed-hero__inner {
        text-align: left !important;
        align-items: flex-start !important;
    }
    .hero__title, .hero__lead, .hero__eyebrow,
    .v-hero__title, .v-hero__sub,
    .s-hero__title, .s-hero__lead,
    .wed-hero__title, .wed-hero__lead {
        text-align: left !important;
        margin-left: 0 !important;
    }
    .hero__cta, .v-hero__cta,
    .s-hero__cta, .wed-hero__cta {
        justify-content: flex-start !important;
    }
}

/* ── 2. Section headers respect inline text-align ──────────── */
.section > .container > div[style*="text-align: center"],
.section > .container > div[style*="text-align:center"] {
    text-align: center !important;
}
.section > .container > div[style*="text-align: center"] *,
.section > .container > div[style*="text-align:center"] * {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    justify-content: center !important;
}
.section > .container > div[style*="text-align: left"],
.section > .container > div[style*="text-align:left"] {
    text-align: left !important;
}
.section > .container > div[style*="text-align: left"] *,
.section > .container > div[style*="text-align:left"] * {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    justify-content: flex-start !important;
}

/* Named section-head blocks (centered) ───────────────────── */
.info-section__head,
.v-gallery2__head,
.v-location__head,
.v-clip__head,
.wed-intro__head,
.wed-locations__head,
.wed-formats__head,
.wed-gallery-section__head,
.wed-reviews__head,
.seo-section__head,
.v-pricing__head {
    max-width: 820px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}
.info-section__head *,
.v-gallery2__head *,
.v-location__head *,
.v-clip__head *,
.wed-intro__head *,
.wed-locations__head *,
.wed-formats__head *,
.wed-gallery-section__head *,
.wed-reviews__head *,
.seo-section__head *,
.v-pricing__head * {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* For v-atmosphere block which uses inline max-width: 18ch — kill it */
.v-atmosphere h2,
.v-atmosphere .h-1 {
    max-width: 32ch !important;
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* ── 3. CARDS always LEFT ──────────────────────────────────── */
.venue-card__body,
.venue-card__body *,
.format,
.format *,
.reason,
.reason *,
.s-tier, .s-tier *,
.wed-pkg__body, .wed-pkg__body *,
.wed-format, .wed-format *,
.wed-loc, .wed-loc *,
.menu-card, .menu-card *,
.transfer-card, .transfer-card *,
.seo-card, .seo-card *,
.decor-addon-card, .decor-addon-card *,
.s-pain, .s-pain *,
.s-included__item, .s-included__item *,
.s-process__step, .s-process__step *,
.contacts-card__body, .contacts-card__body * {
    text-align: left !important;
    margin-left: 0 !important;
}
.venue-card__title, .venue-card__kicker, .venue-card__cta,
.format h3, .format p,
.reason h3, .reason p,
.s-tier h3,
.wed-pkg__body h3, .wed-pkg__body h4 {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: none !important;
}
.venue-card__meta, .contacts-card__metro {
    justify-content: flex-start !important;
}

/* page-contacts main block → CENTER */
.page-contacts .contacts-main,
.page-contacts .contacts-main * {
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.page-contacts .contacts-main__cta { justify-content: center !important; }

/* ── 4. FAQ → LEFT ─────────────────────────────────────────── */
.faq, .faq *,
.faq__q, .faq__a,
.faq__a *, .faq__a p,
.faq__a li, .faq__a div {
    text-align: left !important;
}
.faq__a p { max-width: none !important; }

/* ── 5. FORMS → LEFT ───────────────────────────────────────── */
.form, .form *,
.form label, .form input,
.form textarea, .form select,
.form__heading, .form__sub,
.form__field, .form__consent,
.intake-form, .intake-form * {
    text-align: left !important;
}
.form .btn, .form button,
.btn, .btn-link,
.intake-form__btn {
    text-align: center !important;
}

/* ── 6. INTAKE BAND → LEFT ─────────────────────────────────── */
.intake-band__copy,
.intake-band__copy *,
.intake-band__title,
.intake-band__note,
.intake-band__copy .eyebrow {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.intake-band__title { max-width: 28ch !important; }

/* ── 7. SPLIT section → text LEFT (left column) ────────────── */
.split > div:first-child,
.split > div:first-child *,
.split .eyebrow,
.split .h-1,
.split .h-display,
.split .lead,
.split p {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.split .h-1, .split .h-display {
    max-width: 28ch !important;
}
.split .lead { max-width: 60ch !important; }

/* ── 8. LEAD FORM intro → LEFT ─────────────────────────────── */
.lead-form__intro,
.lead-form__intro *,
.lead-form__intro .eyebrow,
.lead-form__intro .h-1,
.lead-form__intro h2,
.lead-form__intro p,
.lead-form__intro li,
.lead-form__intro ul {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.lead-form__intro h2 { max-width: 28ch !important; }
.lead-form__intro p { max-width: 50ch !important; }

/* ── 9. QUOTE BAND → text LEFT ─────────────────────────────── */
.quote-band > div:not(.quote-band__num),
.quote-band > div:not(.quote-band__num) *,
.quote-band .lead {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
.quote-band .lead { max-width: 60ch !important; }

/* ── 10. FOOTER → LEFT (scoped, superseded by §18) ─────────── */
.site-footer__brand,
.site-footer__brand * { text-align: left !important; }
.site-footer__brand p { max-width: 42ch !important; }

/* ── 11. CTA bands → CENTER ────────────────────────────────── */
.v-cta-band,
.v-cta-band * {
    text-align: center !important;
}
.v-cta-band .container { max-width: 860px !important; }
.v-cta-band h2 {
    max-width: 28ch !important;
    margin: 0 auto 16px !important;
}
.v-cta-band p {
    max-width: 60ch !important;
    margin: 0 auto !important;
}
.v-cta-band__buttons {
    display: inline-flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 12px !important;
    margin-top: 28px !important;
}

/* ── 12. Mobile responsive CTAs ────────────────────────────── */
@media (max-width: 560px) {
    .hero__cta, .v-hero__cta,
    .s-hero__cta, .wed-hero__cta {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }
    .hero__cta .btn, .v-hero__cta .btn,
    .s-hero__cta .btn, .wed-hero__cta .btn {
        width: 100% !important;
        max-width: none !important;
        text-align: center !important;
    }
    .v-cta-band__buttons {
        width: 100% !important;
        flex-direction: column !important;
    }
    .v-cta-band__buttons .btn { width: 100% !important; }
}

/* ── 13. Disable heavy hero animations on reduced-motion ───── */
.hero__media, .v-hero__media,
.s-hero__media, .wed-hero__media,
.lead-form-section__bg {
    will-change: auto !important;
}
@media (prefers-reduced-motion: reduce) {
    .hero__media, .v-hero__media,
    .s-hero__media, .wed-hero__media,
    .lead-form-section__bg {
        animation: none !important;
        transform: none !important;
    }
}

/* ── 14. Снять блюр с Я-лофт 3 (карточки + страница) ───────── */
.venue-card[href="ya-loft3.html"] .venue-card__media {
    filter: none !important;
    transform: none !important;
}
.venue-card[href="ya-loft3.html"]:hover .venue-card__media {
    transform: scale(1.05) !important;
}
.page-venue-ya-loft3 .hero__media,
.page-venue-ya-loft3 .lead-form-section__bg,
.page-venue-ya-loft3 .v-gallery2__cell img,
.page-venue-ya-loft3 .v-split__media img {
    filter: none !important;
    transform: none !important;
}

/* ── 15. Contacts: venue cards 2 rows × 4 on desktop ───────── */
.page-contacts .contacts-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: clamp(16px, 1.6vw, 24px) !important;
}
@media (max-width: 1100px) {
    .page-contacts .contacts-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 560px) {
    .page-contacts .contacts-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ── 16. Бургер-меню (site-drawer) — аккуратная раскладка ──── */
.site-drawer {
    padding: clamp(64px, 8vh, 96px) clamp(20px, 6vw, 64px) clamp(32px, 5vh, 56px) !important;
    gap: clamp(24px, 3.5vh, 40px) !important;
    overflow-y: auto !important;
}
.site-drawer__nav {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: clamp(18px, 2.4vw, 32px) clamp(28px, 4vw, 64px) !important;
    align-content: start !important;
    max-width: 1080px !important;
    margin: 0 auto !important;
    width: 100% !important;
}
.site-drawer__nav > a {
    font-size: clamp(22px, 2.2vw, 30px) !important;
    line-height: 1.15 !important;
    padding: 4px 0 !important;
    border-bottom: 1px solid rgba(43, 36, 25, 0.1) !important;
    transition: color 0.2s ease, padding-left 0.2s ease !important;
}
.site-drawer__nav > a:hover {
    color: var(--color-accent, #c89b3c) !important;
    padding-left: 8px !important;
}
.site-drawer__venues {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px clamp(16px, 2vw, 28px) !important;
    padding: clamp(18px, 2.4vh, 26px) 0 !important;
    margin: 4px 0 !important;
    border-top: 1px solid rgba(43, 36, 25, 0.14) !important;
    border-bottom: 1px solid rgba(43, 36, 25, 0.14) !important;
}
.site-drawer__venues a {
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    color: #2b2419 !important;
    transition: color 0.2s ease !important;
}
.site-drawer__venues a:hover { color: var(--color-accent, #c89b3c) !important; }
.site-drawer__venues a small {
    font-size: 10px !important;
    font-weight: 500 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    color: rgba(43, 36, 25, 0.5) !important;
}
.site-drawer__group {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    padding: 0 !important;
    border: 0 !important;
}
.site-drawer__group-title {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.26em !important;
    text-transform: uppercase !important;
    color: rgba(43, 36, 25, 0.45) !important;
    margin-bottom: 2px !important;
}
.site-drawer__group a {
    font-size: clamp(18px, 1.8vw, 22px) !important;
    line-height: 1.2 !important;
    color: #2b2419 !important;
    transition: color 0.2s ease, padding-left 0.2s ease !important;
}
.site-drawer__group a:hover {
    color: var(--color-accent, #c89b3c) !important;
    padding-left: 6px !important;
}
.site-drawer__contacts {
    grid-column: auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    align-self: start !important;
    padding: clamp(16px, 2vh, 22px) clamp(18px, 2vw, 24px) !important;
    border-radius: 18px !important;
    background: rgba(43, 36, 25, 0.05) !important;
}
.site-drawer__nav + .site-drawer__contacts {
    max-width: 1080px !important;
    margin: 0 auto !important;
    width: 100% !important;
}
.site-drawer__contacts a {
    font-size: 17px !important;
    font-weight: 600 !important;
    color: #2b2419 !important;
    transition: color 0.2s ease !important;
}
.site-drawer__contacts a:last-child {
    align-self: start !important;
    margin-top: 4px !important;
    padding: 9px 20px !important;
    border-radius: 999px !important;
    background: var(--color-accent, #fdcb6e) !important;
    color: #2b2419 !important;
    font-weight: 700 !important;
}
.site-drawer__contacts a:hover { color: var(--color-accent, #c89b3c) !important; }
.site-drawer__contacts a:last-child:hover {
    color: #2b2419 !important;
    filter: brightness(1.05) !important;
}
.site-drawer__close {
    width: 42px !important;
    height: 42px !important;
    border-radius: 999px !important;
    background: rgba(43, 36, 25, 0.06) !important;
    color: #2b2419 !important;
    font-size: 24px !important;
    line-height: 1 !important;
    transition: background 0.2s ease !important;
}
.site-drawer__close:hover { background: rgba(43, 36, 25, 0.14) !important; }
@media (max-width: 720px) {
    .site-drawer__nav { grid-template-columns: 1fr !important; gap: 16px !important; }
    .site-drawer__venues { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .site-drawer__nav > a { font-size: 20px !important; }
}
@media (max-width: 420px) {
    .site-drawer__venues { grid-template-columns: 1fr !important; }
}

/* ── 17. Шапка (site-header) — единый аккуратный вид ───────── */
.site-header__inner {
    align-items: center !important;
    gap: clamp(16px, 2vw, 32px) !important;
}
.site-header__cta { align-items: center !important; gap: 14px !important; }
.site-header__tg {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
}
.site-nav > a,
.site-nav__dropdown > a { transition: color 0.2s ease !important; }
.site-nav > a:hover { color: var(--color-accent, #c89b3c) !important; }
.site-header__burger span { transition: transform 0.2s ease, opacity 0.2s ease !important; }

/* ── 18. Подвал (site-footer) — единый аккуратный вид ──────── */
.site-footer__top { align-items: start !important; }
.site-footer h4 {
    margin-bottom: 14px !important;
    color: rgba(255, 255, 255, 0.55) !important;
}
.site-footer ul { gap: 10px !important; }
.site-footer__brand p {
    color: rgba(255, 255, 255, 0.62) !important;
    line-height: 1.6 !important;
}
.site-footer__venues-grid { gap: 10px clamp(20px, 3vw, 40px) !important; }
.site-footer a { transition: color 0.2s ease, transform 0.2s ease !important; }
.site-footer ul a:hover {
    color: var(--color-accent-2, var(--color-accent, #fdcb6e)) !important;
    transform: translateX(2px) !important;
}
.site-footer__bottom {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-top: clamp(20px, 3vh, 32px) !important;
    padding-top: clamp(18px, 2.4vh, 24px) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
}
.site-footer__bottom span { color: rgba(255, 255, 255, 0.5) !important; }
.site-footer__bottom a { color: rgba(255, 255, 255, 0.7) !important; }
.site-footer__bottom a:hover { color: var(--color-accent, #fdcb6e) !important; }