/* ==========================================================================
   LojiTech Media: phone & tablet optimisation
   Loaded after site.css. Only small screens and touch devices are affected;
   the desktop layout stays exactly as defined in site.css.
   ========================================================================== */
.swipe-hint { display: none; }

/* Touch screens: comfortable tap targets (at least ~44px) */
@media (pointer: coarse), (max-width: 991.98px) {
    .chip { min-height: 44px; display: inline-flex; align-items: center; }
    .type-toggle__btn { min-height: 40px; }
    .btn-sm { min-height: 44px; }
    .link-arrow { min-height: 44px; }
    .form-check-input { width: 1.35em; height: 1.35em; }
    .consent { padding-left: 2.9rem; }
    .consent .form-check-input { margin-left: -1.9rem; margin-top: .1rem; }
    .site-footer__links li { margin-bottom: .15rem; }
    .site-footer__links a, .site-footer__legal a { display: inline-block; padding: .45rem 0; }
    .contact-list li { margin-bottom: .35rem; }
    .contact-list a { display: inline-block; padding: .2rem 0; }
    .short-placeholder__link { padding: .6rem .4rem; }
    .crumbs { align-items: center; }
    .crumbs a { display: inline-block; padding: .4rem 0; line-height: 1; }
}

@media (max-width: 767.98px) {
    /* Spacing tuned for small screens */
    .section { padding: 3.25rem 0; }
    .section-heading { margin-bottom: 2rem; }
    .section-title { font-size: clamp(1.6rem, 7vw, 2rem); }
    .section-lead { font-size: 1rem; }
    .page-hero { padding: calc(var(--header-h) + 2.25rem) 0 2.5rem; }
    .page-hero__title { font-size: clamp(1.9rem, 9vw, 2.4rem); }
    .page-hero__lead { font-size: 1rem; }
    .crumbs { margin-bottom: 1rem; }
    .cta { padding: 3.75rem 0; }
    .cta__title { font-size: clamp(1.7rem, 8vw, 2.2rem); }
    .cta__text { font-size: 1rem; margin-bottom: 1.75rem; }

    /* Slightly larger small labels */
    .eyebrow { font-size: .74rem; letter-spacing: .18em; }
    .media-placeholder__note { font-size: .68rem; }
    .short-placeholder__label { font-size: .72rem; }
    .badge-soft { font-size: .74rem; }
    .contact-card__label { font-size: .75rem; }
    .brand__sub { font-size: .7rem; }

    /* Homepage services (and testimonials): swipeable row instead of a tall stack */
    .services-rail {
        flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x mandatory; justify-content: flex-start !important;
        margin-left: -1rem; margin-right: -1rem; padding: .25rem 1rem 1rem; scroll-padding-left: 1rem;
        scrollbar-width: none; --bs-gutter-x: 1rem;
    }
    .services-rail::-webkit-scrollbar { display: none; }
    .services-rail > [class*="col"] { flex: 0 0 84%; max-width: 84%; scroll-snap-align: start; }
    .services-rail .service-card__text { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
    .swipe-hint { display: block; text-align: center; font-size: .82rem; color: var(--text-muted); margin: .25rem 0 0; }
    .section--dark .swipe-hint, .section--charcoal .swipe-hint { color: var(--text-light-muted); }
    .swipe-hint + .mt-5 { margin-top: 1.75rem !important; }

    /* Filter buttons: one swipeable row */
    .filter-bar {
        flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; scrollbar-width: none;
        margin-left: -1rem; margin-right: -1rem; padding: 0 1rem .25rem; margin-bottom: 1.25rem;
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 1rem, #000 calc(100% - 2rem), transparent);
                mask-image: linear-gradient(90deg, transparent 0, #000 1rem, #000 calc(100% - 2rem), transparent);
    }
    .filter-bar::-webkit-scrollbar { display: none; }
    .filter-bar .chip { flex: 0 0 auto; white-space: nowrap; }
    .portfolio-filters { align-items: stretch; }
    .type-toggle { align-self: center; }
    .gallery-status { margin-bottom: 1.25rem; }

    /* Galleries: two photos per row */
    .gallery--masonry { columns: 2; column-gap: .6rem; }
    .g-item { margin-bottom: .6rem; }
    .g-item__btn { border-radius: 6px; }
    .g-item__caption { padding: 1.75rem .6rem .55rem; }
    .g-item__title { font-size: .78rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
    .g-item__meta { display: none; }
    .g-item__play { width: 44px; height: 44px; margin: -22px 0 0 -22px; font-size: 1.45rem; box-shadow: 0 0 0 6px rgba(214, 173, 96, .2); }
    .g-item__download { width: 36px; height: 36px; right: .35rem; top: .35rem; }
    .client-gallery .g-item__caption { display: none; }

    /* Why choose us / values: compact cards */
    .feature { padding: 1.1rem; gap: .9rem; }
    .feature__icon { flex-basis: 42px; height: 42px; font-size: 1.15rem; }
    .value-card, .statement { padding: 1.5rem; }
    .approach-list li { padding: 1.1rem; }

    /* Services page */
    .service-tabs__list { padding: .6rem 0; }
    .service-detail { padding: 2.25rem 0; }
    .service-detail:first-child { padding-top: .5rem; }
    .service-detail__media { aspect-ratio: 16 / 10; }
    .service-detail__title { margin-bottom: .9rem; }
    .service-detail__footer { flex-direction: column; align-items: stretch; }
    .service-detail__footer .d-flex { display: grid !important; grid-template-columns: 1fr; }
    .service-detail__footer .btn { padding-left: .75rem; padding-right: .75rem; }
    .section.pt-5 { padding-top: 2rem !important; }

    /* Forms and cards */
    .form-card { padding: 1.35rem; }
    .side-card { padding: 1.35rem; }
    .contact-card { padding: 1rem; }
    .map-embed iframe { height: 320px; }

    /* Footer: leave room so the WhatsApp bubble never covers the last links */
    .site-footer { padding-top: 3.25rem; }
    .site-footer__bottom { margin-top: 2.5rem; padding-bottom: calc(1.5rem + 64px); }

    /* WhatsApp bubble: smaller, clear of the iPhone home bar, hidden on form pages and while typing */
    .whatsapp-float { height: 52px; min-width: 52px; right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom)); }
    .whatsapp-float i { font-size: 1.35rem; }
    body:has(form[data-validate]) .whatsapp-float,
    body:has(.client-gallery) .whatsapp-float,
    body.is-typing .whatsapp-float,
    body.lb-open .whatsapp-float { display: none; }
}

@media (max-width: 575.98px) {
    /* LojiTech TV: compact list (thumbnail beside the title) */
    .tutorial-card { display: grid; grid-template-columns: 136px 1fr; align-items: center; }
    .tutorial-card:hover { transform: none; }
    .tutorial-card__thumb { height: 100%; aspect-ratio: auto; min-height: 92px; }
    .tutorial-card__play { width: 34px; height: 34px; margin: -17px 0 0 -17px; font-size: 1.1rem; }
    .tutorial-card__body { padding: .75rem .85rem; }
    .tutorial-card__body .badge-soft { font-size: .7rem; padding: .15rem .5rem; }
    .tutorial-card__title { font-size: .9rem; margin: .35rem 0 .25rem; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
    .tutorial-card__date { font-size: .76rem; }
    .row.g-4:has(> [class*="col"] > .tutorial-card) { --bs-gutter-y: .75rem; }
    .tutorial-feature { margin-bottom: 2.5rem; padding-bottom: 2.5rem; }
    .tutorial-feature__title { font-size: 1.3rem; }
    .yt-player__play { width: 64px; height: 64px; margin: -32px 0 0 -32px; font-size: 2rem; }

    /* Hero: slightly tighter */
    .hero { padding-top: calc(var(--header-h) + 2rem); }
    .hero__eyebrow { margin-bottom: 1rem; font-size: .68rem; }
    .hero__title { margin-bottom: 1.1rem; }
    .hero__text { font-size: .98rem; line-height: 1.65; margin-bottom: 1.75rem; }
    .hero__actions { gap: .75rem; }

    /* How it works: smaller step numbers */
    .step { grid-template-columns: 56px 1fr; }
    .step__num { width: 56px; height: 56px; font-size: 1rem; }
    .steps { row-gap: 1.75rem; }
}