/* ============================================================
   mobile.css — minimal cross-page mobile additions.
   Loaded LAST. Per-page mobile overhauls live in their own
   @media (max-width: 560px) blocks inside yae.css / info.css /
   service.css / venue.css; this file only adds what's not there
   and avoids overriding those carefully tuned styles.
   ============================================================ */

/* ── Small tablet (561–720px) ─────────────────────────────── */
@media (max-width: 720px) and (min-width: 561px) {
    .container { padding-left: 20px; padding-right: 20px; }
    .sticky-cta { display: none !important; }
    .form input,
    .form select,
    .form textarea {
        font-size: 16px;       /* prevent iOS zoom on focus */
        padding: 14px 16px;
        box-sizing: border-box;
        width: 100%;
    }
}

/* ── Phone (≤560px) — universal additions ───────────────── */
@media (max-width: 560px) {
    /* Container & body */
    .container { padding-left: 16px; padding-right: 16px; }
    body { font-size: 15px; padding-bottom: 76px; /* room for fixed sticky-cta */ }

    /* Sticky CTA — keep original dark pill design from yae.css,
       just guarantee fixed position + safe-area on phones. */
    .sticky-cta {
        position: fixed !important;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%);
        bottom: max(12px, env(safe-area-inset-bottom, 0px) + 8px) !important;
        margin: 0 !important;
        z-index: 40;
        display: inline-flex !important;
    }
    .sticky-cta a { padding: 10px 18px; font-size: 12.5px; }

    /* Drawer nav */
    .site-drawer__nav a { font-size: 22px; }

    /* Footer single column */
    .site-footer__top {
        grid-template-columns: 1fr !important;
        gap: 24px;
    }
    .site-footer__brand { grid-column: auto !important; }

    /* Forms — single column, iOS-zoom-safe inputs */
    .form,
    .form__row {
        grid-template-columns: 1fr !important;
        gap: 12px;
    }
    .form input,
    .form select,
    .form textarea {
        width: 100%;
        box-sizing: border-box;
        font-size: 16px;
        padding: 14px 16px;
    }

    /* ── Info-page hero (.hero on menu/transfer/contacts/dekor) ──
       Match the venue page (.v-hero) feel: short, calm, image-led.
       The desktop hero block is too tall and overloaded for phones. */
    section.hero {
        min-height: 280px;
        max-height: 380px;
        align-items: end;
    }
    .hero__media { background-position: center 35%; }
    .hero__inner { padding: 0 0 22px; }
    .hero__eyebrow {
        font-size: 9px;
        letter-spacing: 0.22em;
        margin-bottom: 10px;
    }
    .hero__title {
        font-size: clamp(26px, 7.5vw, 34px);
        line-height: 1.05;
        margin-bottom: 0;
        max-width: 16ch;
    }
    .hero__lead { display: none; }
    .hero__cta {
        margin-top: 14px;
        gap: 8px;
        flex-wrap: nowrap;
    }
    .hero__cta .btn {
        padding: 11px 16px;
        font-size: 12.5px;
        flex: 0 1 auto;
    }
    .hero__cta .btn--ghost { display: none; }
    .hero__facts { display: none; }

    /* ── Info-section heads ── */
    .info-section { padding: 36px 0; }
    .info-section__head {
        margin-bottom: 18px;
        text-align: center;
        max-width: 28ch;
        margin-left: auto;
        margin-right: auto;
    }
    .info-section__head h2 {
        font-size: clamp(22px, 6vw, 28px);
        line-height: 1.12;
        margin: 0 0 8px;
    }
    .info-section__head p { font-size: 13.5px; line-height: 1.55; }

    /* ── Info cards: equal width single column with consistent radius ── */
    .menu-packages,
    .transfer-grid,
    .contacts-grid {
        grid-template-columns: 1fr !important;
        gap: 12px;
        max-width: 460px;
        margin-left: auto;
        margin-right: auto;
    }
    .menu-card,
    .transfer-card,
    .contacts-card {
        width: 100%;
        border-radius: 14px;
    }

    /* Menu card — fix the ::before bullet that breaks two-column rows */
    .menu-card { padding: 18px 16px; gap: 10px; }
    .menu-card__name { font-size: 20px; }
    .menu-card__price { font-size: 18px; }
    .menu-card__sub { font-size: 13px; line-height: 1.55; }
    .menu-card__sections { gap: 8px; padding-top: 12px; }
    .menu-card__sections li {
        display: flex !important;
        gap: 14px;
        padding: 0;
        font-size: 13.5px;
    }
    .menu-card__sections li::before { content: none !important; }
    .menu-card__sections li span:first-child {
        flex: 1 1 auto;
        color: var(--color-text);
    }
    .menu-card__sections li span:last-child {
        flex: 0 0 auto;
        color: var(--color-text-mute);
        font-size: 12.5px;
        white-space: nowrap;
    }
    .menu-card__highlights { padding-top: 10px; }
    .menu-card__highlights li { font-size: 12.5px; line-height: 1.5; }

    /* Transfer card */
    .transfer-card { padding: 16px 18px; gap: 6px; }
    .transfer-card__name { font-size: 18px; }
    .transfer-card__price { font-size: 17px; }
    .transfer-card__price small { font-size: 12px; margin-left: 6px; }
    .transfer-card__sub { font-size: 13px; line-height: 1.5; }

    /* Transfer features grid (the 6 perks above the price grid) */
    .transfer-features {
        grid-template-columns: 1fr !important;
        gap: 10px;
        max-width: 460px;
    }
    .transfer-features li { padding: 14px 16px; border-radius: 12px; }
    .transfer-features li strong { font-size: 15px; }
    .transfer-features li span { font-size: 12.5px; line-height: 1.5; }

    /* Contacts card — uniform aspect-ratio, tighter body */
    .contacts-card__media { aspect-ratio: 16 / 10; }
    .contacts-card__body { padding: 14px 16px 16px; gap: 4px; }
    .contacts-card__kicker { font-size: 10px; letter-spacing: 0.16em; }
    .contacts-card__name { font-size: 19px; margin: 2px 0 4px; }
    .contacts-card__address,
    .contacts-card__metro { font-size: 13px; }

    .contacts-main { margin-bottom: 32px; }
    .contacts-main__phone {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        padding: 12px 22px;
        background: var(--color-bg-alt);
        border: 1px solid var(--color-line-soft);
        border-radius: 999px;
        font-size: 22px;
        margin-bottom: 12px;
        color: var(--color-text);
    }
    .contacts-main__phone::before {
        content: "\260E";   /* ☎ */
        font-size: 18px;
        line-height: 1;
        color: var(--color-accent);
    }
    .contacts-main__lines { font-size: 13px; }

    /* ── Service-page tier cards (korporativ / yubiley / svadba) ── */
    .s-tiers,
    .s-pains,
    .s-included,
    .s-process,
    .s-venues {
        grid-template-columns: 1fr !important;
        gap: 12px;
        max-width: 460px;
        margin-left: auto;
        margin-right: auto;
    }

    /* CTA band buttons stack uniformly */
    .v-cta-band__buttons,
    .hero__cta {
        max-width: 360px;
    }

    /* ── Galleries: even uniform grid ── */
    .v-gallery2__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 4px;
    }
    .v-gallery2__cell { aspect-ratio: 1 / 1; border-radius: 0; }

    /* Lead-form section: column stack + readable bg */
    .lead-form { gap: 24px; }
    .lead-form-section__bg { min-height: 180px; }
}

/* ── Extra-small phones (≤380px) ────────────────────────── */
@media (max-width: 380px) {
    .container { padding-left: 14px; padding-right: 14px; }
    .hero__title { font-size: 24px; }
    .hero__cta .btn { padding: 11px 14px; font-size: 12px; }
    .menu-card__sections li,
    .menu-card__highlights li { font-size: 12.5px; }
    .info-section__head h2 { font-size: 20px; }
}

/* ── Footer accordion on phones ─────────────────────────────
   Footer has 4 columns (brand / venues / formats / contacts). On
   phones we collapse the link sections into <details> accordions
   (when JS injects them) — but as a pure-CSS fallback we just
   tighten the headings and link spacing. */
@media (max-width: 560px) {
    .site-footer { padding-bottom: 80px; /* clear sticky-cta */ }
    .site-footer__top h4 {
        font-size: 13px;
        letter-spacing: 0.18em;
        text-transform: uppercase;
        margin: 0 0 10px;
        color: var(--color-text-mute);
    }
    .site-footer__top ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
    .site-footer__top a { font-size: 14px; }
    .site-footer__brand p { font-size: 13.5px; line-height: 1.55; }
    .site-footer__venues-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px 14px;
    }
    .site-footer__bottom {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
        font-size: 12px;
    }
}