@charset "UTF-8";

/* ============================================================
   Kaoyan Clock-in Helper - Responsive layer
   Loaded after style.css: rules with equal specificity win
   because this stylesheet is sourced later.
   Breakpoints: <=1024 tablet / <=768 mobile / <=480 small phone
   ============================================================ */

html { max-width: 100%; }
img, svg, video { max-width: 100%; height: auto; }

/* =========================================================
   Safe-area insets (notched / rounded mobile screens)
   viewport-fit=cover is already set in index.html; these
   keep the fixed nav and bottom copyright clear of the
   notch / home indicator. env() is 0 on devices without
   a safe area, so this is harmless on desktop.
   ========================================================= */
.nav { padding-top: env(safe-area-inset-top, 0px); }
.footer-bottom { padding-bottom: env(safe-area-inset-bottom, 0px); }

/* =========================================================
   Tablet and below (<=1024px)
   ========================================================= */
@media (max-width: 1024px) {
    .section { padding: 80px 24px; }

    /* Showcases: drop to 1-col where side-by-side overflows on tablet */
    .collab-showcase,
    .widget-showcase,
    .countdown-showcase,
    .detail-showcase { grid-template-columns: 1fr; }

    .widget-showcase { flex-direction: column; align-items: stretch; gap: 36px; }
    .widget-features { width: 100%; }

    .detail-phone-group { flex-wrap: wrap; justify-content: center; gap: 20px; }

    /* Collab devices: keep phone + watch from overflowing */
    .collab-devices {
        flex-wrap: wrap;
        max-width: 100%;
        gap: 28px;
    }
    .phone-mockup-collab { max-width: 260px; }
    .watch-mockup-detailed { margin: 0 auto; }

    /* Card grids: 2 columns is fine on tablet */
    .tech-grid { grid-template-columns: repeat(2, 1fr); }
    .smart-grid { grid-template-columns: repeat(2, 1fr); }
    .collab-features { grid-template-columns: repeat(2, 1fr); }
    .detail-features { grid-template-columns: repeat(2, 1fr); }

    /* Phone mockups never exceed their container */
    .phone-mockup,
    .phone-mockup-small,
    .phone-mockup-dialog { max-width: 100%; }
}

/* =========================================================
   Mobile / small tablet (<=768px)
   ========================================================= */
@media (max-width: 768px) {

    /* Containers and section spacing */
    .nav-inner,
    .section-inner { padding-left: 20px; padding-right: 20px; }

    .section { padding: 72px 20px; }
    .section-header { margin-bottom: 44px; max-width: 100%; }

    /* Navigation: show hamburger, collapse links into dropdown */
    .nav-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        padding: 10px;
    }
    .nav-cta { display: none !important; }

    /* Lock background scroll while the mobile dropdown menu is open */
    body.nav-open { overflow: hidden; }
    .nav-links {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        gap: 0;
        background: rgba(10, 10, 10, 0.97);
        backdrop-filter: var(--glass-blur);
        -webkit-backdrop-filter: var(--glass-blur);
        border-bottom: 1px solid var(--glass-border);
        padding: 6px 20px 14px;
        display: none;
        box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5);
    }
    .nav-links.active { display: flex; }
    .nav-link {
        width: 100%;
        padding: 14px 4px;
        font-size: 16px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }
    .nav-link:last-child { border-bottom: none; }
    .nav-link::after { display: none; }

    /* Hero: stack vertically and center */
    .hero {
        min-height: auto;
        padding: 104px 20px 56px;
    }
    .hero-content {
        grid-template-columns: 1fr;
        gap: 44px;
        text-align: center;
    }
    .hero-text { max-width: 100%; }
    .hero-title { font-size: clamp(34px, 11vw, 50px); }
    .hero-subtitle { font-size: 16px; }
    .hero-actions { justify-content: center; flex-wrap: wrap; }
    .hero-stats { justify-content: center; flex-wrap: wrap; gap: 18px 28px; }
    .hero-bg-orb-1,
    .hero-bg-orb-2,
    .hero-bg-orb-3 { opacity: 0.45; }

    /* Multi-column showcase -> single column */
    .countdown-showcase,
    .features-showcase,
    .detail-showcase,
    .detail-features,
    .ai-showcase,
    .reminder-showcase,
    .widget-features { grid-template-columns: 1fr; gap: 40px; }

    .features-showcase { grid-template-columns: 1fr; }
    .dialog-showcase { grid-template-columns: 1fr; gap: 32px; }

    /* Widget showcase: stack preview above feature cards */
    .widget-showcase { flex-direction: column; gap: 36px; align-items: stretch; }
    .widget-features { width: 100%; }
    .widget-card-display { width: 100%; max-width: 100%; padding: 32px; }

    /* Detail phone group: allow the two phones to wrap */
    .detail-phone-group { flex-wrap: wrap; gap: 20px; }

    .collab-showcase { grid-template-columns: 1fr; gap: 44px; }
    .collab-features { grid-template-columns: 1fr; gap: 24px; }

    /* Collab devices: stack phone + watch vertically, never overflow */
    .collab-devices {
        flex-direction: column;
        flex-wrap: wrap;
        max-width: 100%;
        gap: 24px;
    }
    .phone-mockup-collab { width: 100%; max-width: 260px; }
    /* Round watch: enlarge on phones so the dial content is not clipped by the circle */
    .collab-devices { gap: 20px; }
    .watch-mockup-detailed {
        width: 250px;
        max-width: 100%;
        margin: 0 auto;
    }
    .watch-mockup-detailed .watch-frame {
        width: 240px;
        height: 240px;
    }
    .watch-mockup-detailed .watch-band { width: 82px; }
    .watch-mockup-detailed .watch-band-top,
    .watch-mockup-detailed .watch-band-bottom { height: 55px; }
    .watch-mockup-detailed .watch-crown { right: -6px; width: 7px; height: 30px; }

    .watch-screen-app { border-radius: 50%; overflow: hidden; }
    .watch-app-bg { padding: 8px; gap: 5px; }
    .watch-sync-bar { padding: 4px 8px; }
    .watch-sync-status { padding: 3px 8px; border-radius: 10px; gap: 4px; }
    .watch-sync-text { font-size: 10px; }
    .watch-refresh-btn { font-size: 10px; padding: 3px 10px; }

    .watch-countdown-card { padding: 8px 6px; border-radius: 16px; }
    .watch-countdown-label { font-size: 9px; }
    .watch-countdown-num { font-size: 24px; }

    .watch-plan-card { padding: 8px; border-radius: 16px; gap: 4px; }
    .watch-cat-tag { font-size: 10px; padding: 3px 7px; }
    .watch-clockin-btn { font-size: 10px; padding: 4px 12px; border-radius: 12px; }
    .watch-plan-name {
        font-size: 11px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
    }
    .watch-progress-bar { height: 5px; margin: 3px 0; }
    .watch-plan-stats { gap: 6px; }
    .watch-plan-days,
    .watch-plan-absent { font-size: 9px; }

    .features-showcase .phone-mockup,
    .countdown-showcase .phone-mockup,
    .ai-showcase .phone-mockup,
    .dialog-showcase .phone-mockup { margin: 0 auto; }

    /* Card grids: full-width stack */
    .tech-grid { grid-template-columns: 1fr; gap: 18px; }
    .smart-grid { grid-template-columns: 1fr; gap: 18px; }

    /* Theme cards: stack to single column on phones so color rows fit */
    .theme-showcase {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 16px !important;
    }
    .theme-card {
        flex: none !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        padding: 28px 24px;
        box-sizing: border-box;
    }
    .theme-card-label { font-size: 18px; margin-bottom: 18px; }
    .theme-color-row { gap: 10px; font-size: 13px; flex-wrap: wrap; align-items: baseline; }
    .theme-color-hex { flex-shrink: 0; }
    .theme-color-text { flex: 1 1 100%; min-width: 0; word-break: break-word; }

    /* Phone / watch mockup scaling (inner frame is 100%, just cap outer width) */
    .phone-mockup { width: 100%; max-width: 300px; }
    .phone-mockup-small { width: 100%; max-width: 248px; margin: 0 auto; }
    .phone-mockup-dialog { width: 100%; max-width: 220px; margin: 0 auto; }

    /* Footer: vertical stack */
    .footer { padding: 48px 20px 26px; }
    .footer-inner {
        flex-direction: column;
        gap: 28px;
    }
    .footer-brand { max-width: 100%; }
    .footer-links {
        flex-wrap: wrap;
        gap: 28px 40px;
    }
    .footer-team { margin-top: 16px; }
    .footer-bottom { margin-top: 28px; padding-top: 20px; }

    /* Typography tweaks */
    .section-title { font-size: clamp(28px, 8vw, 38px); }
    .section-desc { font-size: 15px; }
}

/* =========================================================
   Small phone (<=480px)
   ========================================================= */
@media (max-width: 480px) {
    .nav-inner,
    .section-inner { padding-left: 16px; padding-right: 16px; }

    .section { padding: 56px 16px; }
    .section-header { margin-bottom: 36px; }

    .hero { padding: 92px 16px 48px; }
    .hero-title { font-size: clamp(30px, 12vw, 42px); }
    .hero-subtitle { font-size: 15px; }

    .hero-actions { flex-direction: column; align-items: stretch; }
    .hero-actions .btn { width: 100%; }
    .btn-lg { padding: 15px 28px; font-size: 16px; }

    .section-title { font-size: clamp(26px, 9vw, 34px); }

    .tech-grid,
    .smart-grid { grid-template-columns: 1fr; }

    .footer { padding: 40px 16px 22px; }
    .footer-links { gap: 22px 28px; }

    .collab-features { gap: 16px; }

    /* Countdown card: let it shrink inside the narrow grid column */
    .countdown-big-card { min-width: 0; padding: 28px 20px; }

    /* Phone mockups: never exceed the narrow container on small phones */
    .phone-mockup,
    .phone-mockup-small,
    .phone-mockup-dialog,
    .phone-mockup-collab { max-width: 100%; }
}