/* =============================================================================
   Ana sayfa — telefon duzeni / Homepage — phone layout (<= 767px)
   Loaded only by templates/public/index.html, which adds body.lmb-home.

   Bu dosya yalnizca ana sayfanin telefon gorunumunu duzenler: sabit baslik,
   hero ust boslugu, yorumlar ve tedavi kutuphanesi seridi. Her kural
   767px medya sorgusunun icindedir; masaustu ve tablet degismez.
   Bolume ozel telefon kurallari kendi dosyalarinda kalir:
     hero              -> templates/theme_arctit/Components/Demos/index/slides.html
     What Lumben Does  -> static/css/lumben-demo.css
     Intelligence layer-> templates/theme_arctit/Components/Demos/index/lumben-difference.html

   This file only shapes the homepage on phones: the fixed header, the hero's
   top offset, testimonials and the treatment-library rail. Every rule sits in
   the 767px query, so desktop and tablet are untouched. Section-specific phone
   rules stay with their sections (see the list above).
   ========================================================================== */

/* The testimonial count is a phone-only addition (home-mobile.js). */
.lmb-home .hm-count { display: none; }

@media (max-width: 767px) {

    .lmb-home {
        --lmb-header-h: 72px;
        --lmb-header-total: calc(var(--lmb-header-h) + env(safe-area-inset-top, 0px));
    }

    /* ── Header ──────────────────────────────────────────────────────────
       Same see-through white as desktop (the theme's 45% white is left as
       is); the hero runs up underneath it, so there is no white band above
       the hero. One row, 72px. env(safe-area-inset-top) is 0 unless the page
       opts into viewport-fit=cover, so Safari gets no double gap. */
    .lmb-home .site-header {
        display: flex;
        align-items: center;
        height: var(--lmb-header-total);
        padding: env(safe-area-inset-top, 0px) 20px 0;
    }
    .lmb-home .site-header .extend-container {
        height: 100%;
        align-items: center !important;
    }
    .lmb-home .site-header .inner-header .main-logo { width: auto; }
    .lmb-home .site-header .main-logo a { min-height: 44px; }
    .lmb-home .site-header .main-logo img {
        width: auto;
        max-width: none;
        height: 40px;
    }
    .lmb-home .site-header .brand-name {
        margin-left: 10px !important;
        font-size: 17px !important;
        letter-spacing: 0.14em;
    }
    .lmb-home #lmb-mobile-hamburger {
        min-width: 44px;
        min-height: 44px;
        align-items: center !important;
        justify-content: flex-end;
        pointer-events: all;
    }

    /* ── Offsets under the fixed header ───────────────────────────────────
       The hero starts at the very top, behind the header; its own grid
       padding (slides.html) clears the header for the copy. */
    .lmb-home .dsn-slider-global {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    .lmb-home .dsn-slider-global,
    .lmb-home .dsn-root-slider,
    .lmb-home .content-slider,
    .lmb-home .bg-container,
    .lmb-home .slide-inner,
    .lmb-home .slide-item {
        min-height: 0 !important;
    }
    /* Swiper's a11y live region: swiper.min.css only takes it out of flow
       inside .swiper-container, which the theme's .slide-inner is not — on
       phones (auto height) it left a 19px strip under the hero. */
    .lmb-home .slide-inner > .swiper-notification {
        position: absolute;
        top: 0; left: 0;
        opacity: 0;
        pointer-events: none;
        z-index: -1000;
    }
    .lmb-home #lumben-demo,
    .lmb-home #lumben-difference,
    .lmb-home .testimonials-2,
    .lmb-home .our-blog {
        scroll-margin-top: calc(var(--lmb-header-total) + 12px);
    }
    .lmb-home #lumben-demo.section-margin { margin-top: 48px !important; margin-bottom: 8px !important; }

    /* ── Testimonials ────────────────────────────────────────────────────── */
    .lmb-home .testimonials-2.section-margin {
        margin-top: 8px !important;
        margin-bottom: 48px !important;
    }
    .lmb-home .testimonials-2 .box-title { margin-bottom: 20px !important; }
    .lmb-home .testimonials-2 .box-title p:empty { display: none; }
    .lmb-home .testimonials-2 .section-title { margin-bottom: 0 !important; }
    .lmb-home .testimonials-2 .testimonial-item p { color: #3e4a5a; }
    .lmb-home .testimonials-2 .dsn-pagination {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-top: 20px !important;
    }
    .lmb-home .testimonials-2 .swiper-pagination { display: none; }
    .lmb-home .hm-count {
        display: block;
        order: 1;
        font-size: 12px;
        letter-spacing: 0.12em;
        color: #4b5a6c;
        font-variant-numeric: tabular-nums;
    }
    .lmb-home .testimonials-2 .swiper-prev { order: 0; }
    .lmb-home .testimonials-2 .swiper-next { order: 2; }

    /* Shared 44px round arrows (testimonials + library). */
    .lmb-home .testimonials-2 .swiper-prev,
    .lmb-home .testimonials-2 .swiper-next,
    .lmb-home .our-blog .blog-nav .swiper-prev,
    .lmb-home .our-blog .blog-nav .swiper-next {
        position: static;
        transform: none;
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
        margin: 0;
        pointer-events: auto;
    }
    .lmb-home .testimonials-2 .container-inner,
    .lmb-home .our-blog .blog-nav .container-inner {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
    }
    .lmb-home .testimonials-2 .container-inner {
        border: 1px solid rgba(0, 28, 62, 0.22);
        background: #fff;
    }
    .lmb-home .testimonials-2 .container-inner::before,
    .lmb-home .testimonials-2 .container-inner::after,
    .lmb-home .testimonials-2 .circle { display: none; }
    .lmb-home .testimonials-2 .triangle { margin: 0; }
    .lmb-home .swiper-prev:focus-visible .container-inner,
    .lmb-home .swiper-next:focus-visible .container-inner { outline: 2px solid #1A72E8; outline-offset: 2px; }
    .lmb-home .swiper-prev:focus-visible,
    .lmb-home .swiper-next:focus-visible { outline: none; }

    /* ── Treatment library ───────────────────────────────────────────────
       Endless (looping) Swiper set up in index.html: 3 compact cards from
       390px, ~2.2 below so the next card peeks out; 4:5 images. Under the
       cards: prev arrow, a centred progress track, next arrow. */
    .lmb-home .our-blog.section-padding { padding-top: 48px !important; padding-bottom: 40px !important; }
    .lmb-home .our-blog > .container.mb-70 { margin-bottom: 22px !important; }
    .lmb-home .our-blog .blog-img-link { aspect-ratio: 4 / 5; border-radius: 10px; }
    .lmb-home .our-blog .blog-img-hint { display: none; }
    .lmb-home .our-blog .blog-item .content.pt-20 { padding-top: 10px !important; }
    .lmb-home .our-blog .blog-item .title-block {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        margin: 0;
        font-size: 13px !important;
        line-height: 1.3 !important;
        letter-spacing: 0.02em;
    }

    .lmb-home .our-blog .blog-nav {
        position: static;
        display: grid;
        grid-template-columns: 44px 1fr 44px;
        align-items: center;
        column-gap: 16px;
        height: auto;
        aspect-ratio: auto;
        margin-top: 18px;
        pointer-events: auto;
    }
    .lmb-home .our-blog .blog-nav .swiper-prev { grid-column: 1; grid-row: 1; }
    .lmb-home .our-blog .blog-nav .hm-rail-track { grid-column: 2; grid-row: 1; }
    .lmb-home .our-blog .blog-nav .swiper-next { grid-column: 3; grid-row: 1; }
    .lmb-home .hm-rail-track {
        position: relative;
        height: 3px;
        border-radius: 2px;
        background: rgba(255, 255, 255, 0.18);
        overflow: hidden;
    }
    .lmb-home .hm-rail-thumb {
        position: absolute;
        top: 0; bottom: 0; left: 0;
        border-radius: 2px;
        background: #38bdf8;
        transition: left .3s ease;
    }
}

/* The progress track is a phone-only addition (home-mobile.js). */
.lmb-home .hm-rail-track { display: none; }
@media (max-width: 767px) {
    .lmb-home .our-blog .blog-nav .hm-rail-track { display: block; }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
    .lmb-home .hm-rail-thumb { transition: none; }
}