/* ══════════════════════════════════════════════════════════════
   MOBILE.CSS — responsive + clean alignment system
   Loaded AFTER yae.css
   v3 — hero always left, sections inherit alignment from parent
   ══════════════════════════════════════════════════════════════ */

/* ── Global overflow protection ────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}
img, svg, video, canvas, iframe { max-width: 100%; }
img, video { height: auto; }

/* ── iOS input zoom prevention ────────────────────────────── */
@supports (-webkit-touch-callout: none) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* ── Min-width safety for grid/flex children ───────────────── */
.container, .container--narrow,
.site-header__inner, .hero__inner,
.section > .container,
.lead-form, .split,
.venues, .formats, .reasons,
.contacts-grid, .transfer-grid,
.menu-packages, .decor-featured,
.v-split__grid, .v-gallery2__grid,
.site-footer__top {
    min-width: 0;
}

/* ══════════════════════════════════════════════════════════════
   ALIGNMENT SYSTEM v3

   Core principle: text-align is INHERITED from parent.
   Children DO NOT override their alignment — they trust the parent.

   Exceptions (forced alignment):
   1. HERO (.hero, .v-hero, .s-hero, .wed-hero) → always LEFT
   2. Card bodies (venue-card, format, reason, etc.) → always LEFT
   3. FAQ → LEFT
   4. Form labels/inputs → LEFT
   5. Footer → LEFT
   6. Buttons inner text → CENTER (just inside btn)

   Section headers that USED inline style="text-align: center" in HTML
   keep that alignment (we don't touch HTML).

   This guarantees: if a section is centered, its h2 AND p (lead) are both
   centered. If left, both left. No more jumping.
   ══════════════════════════════════════════════════════════════ */

/* ── 1. HERO: always LEFT on every page ────────────────────── */
.hero__inner,
.v-hero__inner,
.s-hero__inner,
.wed-hero__inner {
    text-align: left;
    align-items: flex-start;
    display: flex;
    flex-direction: column;
}
.hero__title, .hero__lead, .hero__eyebrow,
.v-hero__title, .v-hero__sub, .v-hero__eyebrow,
.s-hero__title, .s-hero__lead,
.wed-hero__title, .wed-hero__lead {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
}
.hero__cta,
.v-hero__cta,
.s-hero__cta,
.wed-hero__cta,
.hero__pills {
    justify-content: flex-start;
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}
.hero__facts {
    justify-content: flex-start;
    width: 100%;
}

/* ── 2. Section headers: INHERIT from inline style ─────────── */
/* If HTML has style="text-align: center" — already centered.
   We just make sure children inherit that alignment.            */
.section > .container > div > .eyebrow,
.section > .container > div > h2,
.section > .container > div > .h-1,
.section > .container > div > .h-display,
.section > .container > div > .lead,
.section > .container > div > p {
    text-align: inherit;
}

/* Centered lead paragraphs: keep auto margins for proper centering */
.section .lead {
    margin-left: auto;
    margin-right: auto;
}

/* Sub-headings (eyebrow + h2 + lead in same parent) ALWAYS inherit */
.eyebrow + .h-1,
.eyebrow + .h-display,
.eyebrow + h2,
.h-1 + .lead,
.h-display + .lead,
h2 + .lead,
h2 + p {
    text-align: inherit;
}

/* Named section heads (page-specific blocks) — centered with full inheritance */
.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;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: clamp(28px, 4vw, 48px);
    text-align: center;
}
.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;
    margin-left: auto;
    margin-right: auto;
}

/* ── 3. CARDS: bodies always LEFT (readability) ────────────── */
.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 * {
    text-align: left;
}
.venue-card__meta {
    justify-content: flex-start;
}

/* ── 4. FAQ: LEFT ──────────────────────────────────────────── */
.faq,
.faq *,
.faq__q,
.faq__a,
.faq__a p,
.faq__a div,
.faq__a ul,
.faq__a li {
    text-align: left;
}

/* ── 5. Forms: LEFT ────────────────────────────────────────── */
.form,
.form label,
.form input,
.form textarea,
.form select,
.form__heading,
.form__sub,
.form__field,
.form__consent {
    text-align: left;
}
.intake-form,
.intake-form * {
    text-align: left;
}

/* ── 6. Buttons: centered text inside ──────────────────────── */
.btn,
.btn-link,
.contacts-cta,
.intake-form__btn,
.form button[type="submit"] {
    text-align: center;
}

/* ── INTAKE BAND (under hero): two columns ─────────────────── */
.intake-band__inner { align-items: center; }
.intake-band__copy {
    text-align: left;
    max-width: 520px;
}
.intake-band__copy *,
.intake-band__copy .eyebrow,
.intake-band__title,
.intake-band__note {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
}

/* ── SPLIT section: two columns, text LEFT ─────────────────── */
.split > div:first-child {
    text-align: left;
}
.split > div:first-child *,
.split .eyebrow,
.split .h-1,
.split .h-display,
.split .lead,
.split p {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
}
.split > div:first-child div[style*="display: flex"] {
    justify-content: flex-start;
}

/* ── LEAD FORM (dark): intro LEFT, form LEFT ───────────────── */
.lead-form {
    display: grid;
    grid-template-columns: minmax(0, .9fr) minmax(320px, 1fr);
    gap: clamp(28px, 4vw, 54px);
    align-items: center;
}
.lead-form__intro {
    max-width: 520px;
    margin: 0;
    text-align: left;
}
.lead-form__intro *,
.lead-form__intro .eyebrow,
.lead-form__intro h2,
.lead-form__intro .h-1,
.lead-form__intro p,
.lead-form__intro li,
.lead-form__intro ul {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
}

/* ── QUOTE BAND: number left-large, text LEFT ──────────────── */
.quote-band > div:not(.quote-band__num) {
    text-align: left;
}
.quote-band .lead {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
}

/* ── FOOTER: LEFT ──────────────────────────────────────────── */
.site-footer,
.site-footer * {
    text-align: left;
}
.site-footer__bottom {
    align-items: center;
}

/* ── CTA BANDS (full-width call to action): CENTER ─────────── */
.v-cta-band {
    text-align: center;
}
.v-cta-band .container { max-width: 860px; }
.v-cta-band *,
.v-cta-band h2,
.v-cta-band p {
    text-align: center;
}
.v-cta-band h2 { margin: 0 auto 16px; }
.v-cta-band p { max-width: 640px; margin: 0 auto; line-height: 1.65; }
.v-cta-band__buttons {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-top: 28px;
}

/* ── CONTACTS main block: CENTER ───────────────────────────── */
.contacts-main {
    max-width: 760px;
    margin: 0 auto clamp(36px, 5vw, 64px);
    padding: clamp(26px, 4vw, 42px);
    border: 1px solid rgba(48,44,36,.10);
    border-radius: 28px;
    background: linear-gradient(180deg, rgba(255,255,255,.82), rgba(248,241,229,.78));
    box-shadow: 0 22px 60px rgba(38,31,22,.08);
    text-align: center;
}
.contacts-main * { text-align: center; }
.contacts-main__cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 14px;
}

/* ── Contacts cards: CENTER ────────────────────────────────── */
.contacts-card__body {
    padding: 22px 20px 24px;
    text-align: center;
}
.contacts-card__body * { text-align: center; }

/* ── Typography balance ────────────────────────────────────── */
.h-display, .h-1,
.hero__title, .v-hero__title,
.s-hero__title, .wed-hero__title {
    text-wrap: balance;
    line-height: 1.04;
}
.lead, .hero__lead, .v-hero__sub,
.s-hero__lead, .wed-hero__lead,
.section p, .faq__a p {
    text-wrap: pretty;
    line-height: 1.58;
}

/* ── Section rhythm ────────────────────────────────────────── */
.section:not(.hero):not(.wed-hero):not(.s-hero):not(.v-hero) {
    padding-top: clamp(48px, 6vw, 80px);
    padding-bottom: clamp(48px, 6vw, 80px);
}

/* ── Wedding page packages ─────────────────────────────────── */
.page-service-svadba-pod-kluch .wed-formats__grid,
.page-service-svadba-pod-kluch .wed-locations__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
}
.page-service-svadba-pod-kluch .wed-pkgs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}
.page-service-svadba-pod-kluch .wed-pkg {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 26px;
    border: 1px solid rgba(168,126,70,.16);
    box-shadow: 0 18px 46px rgba(51,35,20,.08);
}
.page-service-svadba-pod-kluch .wed-pkg__body {
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-items: flex-start;
    text-align: left;
    flex: 1;
}

/* ══════════════════════════════════════════════════════════════
   TABLET (≤1100px) — collapse nav
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
    .site-nav { display: none; }
    .site-header__inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 12px;
    }
    .site-header__cta {
        min-width: 0;
        justify-content: flex-end;
    }
    .site-header__phone { display: none; }
    .site-header__burger { display: inline-flex !important; }
}

/* ══════════════════════════════════════════════════════════════
   TABLET (≤900px)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    /* Layouts: single column */
    .split,
    .quote-band,
    .intake-band__inner,
    .lead-form,
    .site-footer__top {
        grid-template-columns: 1fr;
    }
    .v-split__grid {
        grid-template-columns: 1fr;
        width: 100%;
        margin: 0;
    }
    .v-split__media {
        width: 100%;
        max-width: 100%;
        margin: 0;
        overflow: hidden;
    }
    .v-split__media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

    /* Info pages: single column */
    .menu-packages,
    .contacts-grid,
    .transfer-grid {
        grid-template-columns: 1fr;
    }
    .decor-featured {
        grid-template-columns: 1fr 1fr;
    }

    /* Service pages */
    .s-hero__grid,
    .s-tiers,
    .s-process__steps {
        grid-template-columns: 1fr;
    }

    /* Wedding page grids */
    .page-service-svadba-pod-kluch .wed-formats__grid,
    .page-service-svadba-pod-kluch .wed-locations__grid,
    .page-service-svadba-pod-kluch .wed-pkgs {
        grid-template-columns: 1fr;
    }

    /* Hero typography */
    .hero__title, .v-hero__title,
    .s-hero__title, .wed-hero__title {
        font-size: clamp(34px, 8vw, 64px);
        line-height: 1.02;
    }
    .hero__lead, .v-hero__sub,
    .s-hero__lead, .wed-hero__lead {
        font-size: clamp(16px, 3.8vw, 20px);
    }

    /* Sticky CTA spacing */
    .sticky-cta {
        bottom: max(12px, env(safe-area-inset-bottom));
    }
}

/* ══════════════════════════════════════════════════════════════
   PHONE (≤720px)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
    .hero__inner,
    .v-hero__inner,
    .s-hero__inner,
    .wed-hero__inner {
        padding-left: var(--gutter, 20px);
        padding-right: var(--gutter, 20px);
    }
    /* Hero stays LEFT even on mobile per spec */

    /* ══════════════════════════════════════════════════════════
       MOBILE INLINE-STYLE NEUTRALIZER
       Desktop was hand-aligned in the zero-block editor with fixed
       inline px (transform:translate, font-size, max-width, width).
       Those leak to mobile and push text off-screen. Here we cancel
       ONLY the off-screen-breaking parts — desktop HTML is untouched.
       ══════════════════════════════════════════════════════════ */

    /* 1. Kill horizontal/large translate offsets that shove text
          outside the viewport. Keep layout in normal flow. */
    [style*="translate"] {
        transform: none !important;
    }

    /* 2. Fixed px font-size set for desktop is too large on phones.
          Re-flow with fluid sizing for the main text elements. */
    h1[style*="px"], h2[style*="px"], h3[style*="px"],
    .h-display[style*="px"], .h-1[style*="px"],
    .hero__title[style*="px"], .v-hero__title[style*="px"],
    .s-hero__title[style*="px"], .wed-hero__title[style*="px"] {
        font-size: clamp(26px, 7.5vw, 40px) !important;
        line-height: 1.08 !important;
    }
    p[style*="px"], span[style*="px"], li[style*="px"],
    .lead[style*="px"], .hero__lead[style*="px"],
    .v-hero__sub[style*="px"], .s-hero__lead[style*="px"],
    .wed-hero__lead[style*="px"] {
        font-size: clamp(15px, 4.2vw, 18px) !important;
        line-height: 1.55 !important;
    }

    /* 3. Fixed px max-width/width from desktop must never exceed the
          screen. Cap everything to the container width. */
    [style*="max-width"][style*="px"],
    [style*="width:"][style*="px"] {
        max-width: 100% !important;
        width: auto !important;
    }

    /* 4. Header tagline keeps its tiny intentional size, but never
          overflow the logo area. */
    .site-header__tagline[style*="px"] {
        font-size: 6px !important;
        max-width: 100% !important;
        transform: none !important;
    }
}

/* ══════════════════════════════════════════════════════════════
   PHONE (≤560px)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 560px) {
    :root { --gutter: 18px; }

    .container, .container--narrow {
        width: 100%;
        padding-left: var(--gutter, 18px);
        padding-right: var(--gutter, 18px);
    }

    .section:not(.hero):not(.wed-hero):not(.s-hero):not(.v-hero) {
        padding-top: 44px;
        padding-bottom: 44px;
    }

    /* Word break safety */
    h1, h2, h3, h4 {
        word-break: break-word;
        overflow-wrap: break-word;
    }
    .h-display, .h-1,
    .hero__title, .v-hero__title,
    .s-hero__title, .wed-hero__title {
        max-width: 100%;
        font-size: clamp(30px, 9vw, 42px);
        line-height: 1.04;
    }
    .lead, .hero__lead, .v-hero__sub,
    .s-hero__lead, .wed-hero__lead,
    .section p {
        max-width: 100%;
        font-size: 16px;
        line-height: 1.55;
    }

    /* Gallery grids: tight 2-col */
    .v-gallery2__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 4px;
        overflow: hidden;
    }
    .v-gallery2__cell {
        min-width: 0;
        max-width: 100%;
        overflow: hidden;
    }
    .v-gallery2__cell--mobile-hidden { display: none; }
    .v-gallery2__cell img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    /* CTA buttons: full-width stack on mobile */
    .hero__cta,
    .v-hero__cta,
    .s-hero__cta,
    .wed-hero__cta {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .v-cta-band__buttons,
    .contacts-main__cta {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .hero__cta .btn,
    .v-hero__cta .btn,
    .s-hero__cta .btn,
    .wed-hero__cta .btn,
    .v-cta-band__buttons .btn,
    .contacts-cta,
    .intake-form__btn,
    .form .btn {
        width: 100%;
        max-width: none;
    }

    /* Grids: single column */
    .venues, .formats, .reasons,
    .contacts-grid, .menu-packages,
    .transfer-grid, .decor-featured,
    .s-pains, .s-included__grid,
    .s-tiers, .s-process__steps {
        grid-template-columns: 1fr;
    }

    /* Card media: consistent aspect */
    .venue-card__media,
    .contacts-card__media,
    .wed-pkg__media {
        min-height: 210px;
        aspect-ratio: 16 / 10;
    }

    /* Card padding */
    .venue-card__body,
    .format,
    .reason,
    .menu-card,
    .transfer-card,
    .contacts-card__body,
    .form,
    .s-tier,
    .wed-pkg__body {
        padding: 20px;
    }

    /* Form: compact */
    .lead-form { gap: 16px; }
    .form { padding: 18px; gap: 12px; }
    .form__row { grid-template-columns: 1fr; }
    .form__heading { font-size: 18px; }
    .form .btn { width: 100%; padding: 14px 20px; }

    /* Sticky CTA */
    .sticky-cta {
        left: 12px;
        right: 12px;
        width: auto;
        transform: none;
        justify-content: center;
    }

    /* Drawer */
    .site-drawer {
        width: 100vw;
        max-width: 100vw;
        padding: 52px var(--gutter, 18px) 24px;
        gap: 24px;
    }
    .site-drawer__nav a {
        font-size: clamp(18px, 6vw, 24px);
    }
    .site-drawer__close { font-size: 26px; top: 14px; }
}

/* ══════════════════════════════════════════════════════════════
   EXTRA SMALL PHONES (≤375px)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 375px) {
    .hero__title { font-size: 28px; }
    .hero__lead { font-size: 14px; }
    .hero__cta .btn { font-size: 13px; padding: 11px 16px; }

    .v-hero__title { font-size: 26px; }

    .form { padding: 14px; }
    .form__heading { font-size: 16px; }

    .site-drawer__nav a { font-size: 20px; }

    .container, .container--narrow {
        padding-left: 16px;
        padding-right: 16px;
    }
    .venue-card__body, .format, .reason,
    .menu-card, .transfer-card,
    .contacts-card__body, .form,
    .s-tier, .wed-pkg__body {
        padding: 16px;
    }
}

/* ══════════════════════════════════════════════════════════════
   REDUCED MOTION
   ══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ══════════════════════════════════════════════════════════════
   GALLERY → MODAL (phones ≤720px, driven by gallery-modal.js)
   ══════════════════════════════════════════════════════════════ */
@media (max-width: 720px) {
    .ya-gal-collapsed {
        display: none !important;
    }
    .ya-gal-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        margin: 4px 0 8px;
        padding: 14px 20px;
        border: none;
        border-radius: 14px;
        background: var(--color-bg-dark, #25251f);
        color: var(--color-bg, #fff);
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
    }
    .ya-gal-btn:active {
        opacity: 0.85;
    }
}

.ya-gal-overlay {
    position: fixed;
    inset: 0;
    z-index: 2147480000;
    display: none;
    background: rgba(20, 18, 14, 0.96);
    overscroll-behavior: contain;
}
.ya-gal-overlay.is-open {
    display: block;
}
.ya-gal-track {
    position: absolute;
    inset: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 56px 12px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ya-gal-photo {
    width: 100%;
    height: auto;
    border-radius: 12px;
    display: block;
}
.ya-gal-close {
    position: fixed;
    top: 10px;
    right: 12px;
    z-index: 2147480001;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
}
html.ya-gal-lock,
html.ya-gal-lock body {
    overflow: hidden;
}