/* Mobile optimizations — Lapin Manuaaliterapia */

:root {
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --nav-height: 5rem;
}

html {
    -webkit-text-size-adjust: 100%;
    overflow-x: clip;
}

body {
    overflow-x: clip;
}

body.nav-menu-open {
    overflow: hidden;
    touch-action: none;
}

a,
button {
    -webkit-tap-highlight-color: rgba(74, 159, 212, 0.18);
}

@media (max-width: 767px) {
    :root {
        --nav-height: 3.75rem;
    }

    .px-margin-mobile {
        padding-left: max(1rem, var(--safe-left)) !important;
        padding-right: max(1rem, var(--safe-right)) !important;
    }

    .py-section-gap {
        padding-top: 3.5rem !important;
        padding-bottom: 3.5rem !important;
    }

    .py-24 {
        padding-top: 2.75rem !important;
        padding-bottom: 2.75rem !important;
    }

    .py-16 {
        padding-top: 2.5rem !important;
        padding-bottom: 2.5rem !important;
    }

    section[id] {
        scroll-margin-top: calc(var(--nav-height) + 0.5rem);
    }

    /* Typography */
    .text-headline-lg,
    .font-headline-lg.text-headline-lg {
        font-size: clamp(1.5rem, 6vw, 1.875rem) !important;
        line-height: 1.25 !important;
        letter-spacing: 0.04em !important;
    }

    .text-headline-md,
    .font-headline-md.text-headline-md {
        font-size: 1.2rem !important;
        line-height: 1.35 !important;
    }

    .headline-display-mobile {
        font-size: clamp(1.65rem, 7.5vw, 2.5rem) !important;
        letter-spacing: 0.05em !important;
        line-height: 1.15 !important;
    }

    .hero-eyebrow {
        letter-spacing: 0.12em !important;
        font-size: 0.6875rem !important;
        line-height: 1.4;
    }

    .hero-lead,
    .hero-support {
        font-size: 1rem !important;
    }

    /* Navigation */
    nav.fixed.top-0 {
        padding-top: var(--safe-top);
    }

    .nav-bar-inner {
        height: var(--nav-height);
        min-height: var(--nav-height);
    }

    #menu-toggle {
        min-width: 2.75rem;
        min-height: 2.75rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-right: calc(-1 * var(--safe-right));
    }

    #mobile-menu {
        max-height: calc(100dvh - var(--nav-height) - var(--safe-top));
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding-bottom: max(1rem, var(--safe-bottom));
    }

    #mobile-menu a,
    #mobile-menu button#mobile-palvelut-toggle {
        min-height: 2.75rem;
        align-items: center;
    }

    #mobile-menu .ice-button {
        width: 100%;
        justify-content: center;
        min-height: 3rem;
        margin-top: 0.5rem;
    }

    /* Homepage hero */
    #etusivu.min-h-screen {
        min-height: calc(100dvh - var(--nav-height) - var(--safe-top)) !important;
        padding-top: 5.5rem !important;
        padding-bottom: 2rem !important;
    }

    .hero-content {
        padding: 1.5rem 1.125rem !important;
        border-radius: 1.25rem !important;
        margin-inline: 0;
    }

    .hero-content .ice-button {
        display: flex;
        width: 100%;
        max-width: 18rem;
        margin-inline: auto;
        justify-content: center;
        align-items: center;
        padding: 0.875rem 1.5rem !important;
        font-size: 1rem !important;
    }

    /* Service / subpage heroes */
    main#sisalto > header.relative.flex {
        min-height: 52dvh !important;
    }

    main#sisalto > header.relative.flex .pt-32 {
        padding-top: 6.5rem !important;
    }

    main#sisalto > header.relative.flex .pb-16 {
        padding-bottom: 2.5rem !important;
    }

    main.pt-20,
    body.pt-20 {
        padding-top: calc(var(--nav-height) + var(--safe-top)) !important;
    }

    /* Benefits spacing */
    .space-y-32 > :not([hidden]) ~ :not([hidden]) {
        margin-top: 3rem !important;
    }

    /* Final CTA */
    #ajanvaraus .glass-panel {
        padding: 2rem 1.25rem !important;
        border-radius: 1.5rem !important;
    }

    #ajanvaraus .flex.flex-col.sm\:flex-row {
        width: 100%;
    }

    #ajanvaraus .ice-button,
    #ajanvaraus a.rounded-full {
        width: 100%;
        max-width: 100%;
        padding: 0.875rem 1.25rem !important;
        font-size: 1rem !important;
        text-align: center;
        justify-content: center;
    }

    #ajanvaraus .text-xl {
        font-size: 1rem !important;
    }

    /* Cards & promos */
    .image-card__body {
        padding: 1.25rem 1.125rem 1.5rem;
    }

    .image-card .flex.flex-wrap.gap-4 {
        flex-direction: column;
        align-items: stretch;
    }

    .image-card .ice-button,
    .image-card .flex.flex-wrap .ice-button {
        width: 100%;
        justify-content: center;
    }

    .service-cards-grid .image-card__actions {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .service-cards-grid .image-card__actions .ice-button {
        width: auto;
    }

    .promo-card {
        padding: 1.375rem 1.25rem;
    }

    .promo-card .font-headline-md {
        font-size: 1.2rem !important;
    }

    .profile-chip {
        padding: 1.5rem 1.25rem;
    }

    .glass-panel.p-8,
    .glass-panel[class*="p-8"] {
        padding: 1.5rem 1.25rem !important;
    }

    /* Price rows */
    ul[aria-label*="hinnasto"] li,
    .image-card__body li.flex {
        gap: 0.5rem;
    }

    ul[aria-label*="hinnasto"] .font-label-caps {
        flex-shrink: 0;
    }

    /* Service page CTA column */
    .flex.flex-col.gap-3 .ice-button,
    .flex.flex-col.gap-3 > a.rounded-full {
        width: 100%;
        text-align: center;
    }

    /* Google reviews summary */
    .google-reviews__panel {
        text-align: center;
    }

    .google-reviews__brand,
    .google-reviews__center {
        justify-content: center;
    }

    .google-reviews__stars-wrap {
        align-items: center;
    }

    .google-reviews__stars {
        justify-content: center;
    }

    .google-reviews__meta {
        text-align: center;
    }

    .google-reviews__cta {
        width: 100%;
        max-width: 16rem;
        justify-self: center;
    }

    /* Testimonial carousel — single-card mobile layout */
    .testimonial-carousel__stage {
        height: auto !important;
        min-height: 0;
        margin-bottom: 1rem;
        perspective: none;
    }

    .testimonial-carousel__card {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        max-width: none !important;
        transform: none !important;
        filter: none !important;
        opacity: 0;
        pointer-events: none;
        display: none;
        margin: 0;
        padding: 1.375rem 1.125rem 1.25rem;
    }

    .testimonial-carousel__card.is-active {
        display: block;
        opacity: 1 !important;
        pointer-events: auto !important;
        z-index: 1;
    }

    .testimonial-carousel__card.is-prev,
    .testimonial-carousel__card.is-next {
        display: none !important;
    }

    .testimonial-carousel__text {
        font-size: 0.8125rem !important;
        margin-bottom: 1rem;
        line-height: 1.5 !important;
    }

    .testimonial-carousel__card.is-active .testimonial-carousel__text {
        font-size: 0.875rem !important;
    }

    .testimonial-carousel__quote-icon {
        font-size: 2.25rem;
        top: 0.75rem;
        right: 0.75rem;
    }

    .testimonial-carousel__controls {
        gap: 1rem;
        padding-inline: 0.25rem;
    }

    .testimonial-carousel__arrow {
        width: 3rem;
        height: 3rem;
        flex-shrink: 0;
    }

    .testimonial-carousel__dot {
        width: 0.625rem;
        height: 0.625rem;
    }

    .testimonial-carousel__dot.is-active {
        width: 2rem;
    }

    /* Trust grid */
    .grid.grid-cols-1.md\:grid-cols-3.gap-12 {
        gap: 2rem !important;
    }

    /* Magazine stats */
    .grid.grid-cols-1.md\:grid-cols-3.gap-8 .text-4xl {
        font-size: 1.75rem !important;
    }

    /* Footer */
    footer .mt-16 {
        margin-top: 2.5rem !important;
        padding-top: 1.5rem !important;
    }

    footer .text-xs.tracking-widest {
        font-size: 0.625rem;
        letter-spacing: 0.08em !important;
        line-height: 1.5;
        padding-inline: 0.25rem;
    }

    .error-page {
        padding: 3rem 1rem;
        min-height: calc(100dvh - var(--nav-height));
    }

    .error-page__panel {
        padding: 2rem 1.25rem !important;
    }

    .error-page nav.flex {
        flex-direction: column;
        align-items: stretch;
    }

    .error-page nav .ice-button,
    .error-page nav a.rounded-full {
        width: 100%;
    }
}

@media (max-width: 380px) {
    .hero-content h1 {
        word-break: break-word;
        hyphens: auto;
    }
}

/* Touch devices: avoid sticky hover lift */
@media (hover: none) and (pointer: coarse) {
    .image-card:hover,
    .photo-card:hover,
    .promo-card:hover {
        transform: none;
        box-shadow:
            0 1px 2px rgba(30, 51, 72, 0.04),
            0 8px 28px rgba(30, 51, 72, 0.07);
    }

    .image-card:hover .image-card__media img,
    .photo-card:hover .photo-card__inner img {
        transform: none;
    }
}