/* =============================================
   LivStayJapan — Responsive / Mobile styles
   CSS classes override Kotlin inline styles via !important
   ============================================= */

/* --- Split section columns (About, Statement) --- */
.ls-split-left,
.ls-split-right {
    flex: 1 1 340px;
    min-width: 0;
    align-self: stretch;
}

/* --- Hero gradient overlay (white left → transparent right) --- */
.ls-hero-overlay {
    background: linear-gradient(to right, rgba(255,255,255,0.95) 45%, rgba(255,255,255,0.0) 90%);
}

/* --- Service & Feature & Qual cards in flex grid --- */
.ls-card {
    flex: 1 1 220px;
    max-width: 280px;
    min-width: 0;
    box-sizing: border-box;
}

/* --- Text that needs \n line breaks to render --- */
.ls-preline { white-space: pre-line; }

/* --- Responsive font sizes (all screen sizes) --- */
.ls-hero-title    { font-size: clamp(26px, 5.5vw, 48px) !important; line-height: 1.3 !important; }
.ls-hero-subtitle { font-size: clamp(12px, 1.8vw, 14px) !important; }
.ls-tagline       { font-size: clamp(11px, 2.5vw, 14px) !important; }
.ls-section-title { font-size: clamp(22px, 4vw, 34px) !important; }
.ls-cta-title     { font-size: clamp(20px, 4vw, 32px) !important; }
.ls-statement-quote { font-size: clamp(18px, 3vw, 26px) !important; line-height: 1.9 !important; }

/* --- Tablet: 2-column card grid --- */
@media (max-width: 900px) {
    .ls-card {
        max-width: calc(50% - 14px);
    }
}

/* --- Mobile: single-column layout (≤ 600px) --- */
@media (max-width: 600px) {

    /* Hero gradient: full white on mobile so text is readable */
    .ls-hero-overlay {
        background: rgba(255,255,255,0.88) !important;
    }

    /* Cards: full width */
    .ls-card {
        flex: 1 1 100%;
        max-width: 100% !important;
    }

    /* Split sections stack vertically */
    .ls-split-left {
        padding: 48px 24px !important;
    }
    .ls-split-right {
        min-height: 260px !important;
    }

    /* Hero CTA button */
    .ls-hero-cta {
        width: 85% !important;
        text-align: center;
        padding-left: 24px !important;
        padding-right: 24px !important;
        box-sizing: border-box;
    }

    /* Gold CTA bar button */
    .ls-gold-btn {
        width: 85% !important;
        text-align: center;
    }

    /* Hide the email address in sticky bar */
    .ls-sticky-email {
        display: none !important;
    }

    /* Footer columns: stack vertically */
    .ls-footer-col {
        min-width: 100% !important;
        width: 100%;
    }
}

/* --- Small phone extras (≤ 400px) --- */
@media (max-width: 400px) {
    .ls-card {
        padding: 20px !important;
    }
    .ls-hero-cta,
    .ls-gold-btn {
        width: 92% !important;
    }
}