/* ═══════════════════════════════════════════════════════════
   TENDERSLAB — GLOBAL MOBILE STYLESHEET
   Applied to all inner pages. Breakpoints: 768px / 480px
═══════════════════════════════════════════════════════════ */

/* ── Global container ───────────────────────────────────── */
@media (max-width: 768px) {
    .container {
        padding: 0 20px;
    }
    .tl-container {
        padding: 0 20px;
    }
}
@media (max-width: 480px) {
    .container {
        padding: 0 16px;
    }
    .tl-container {
        padding: 0 16px;
    }
}

/* ── Nav clearance for fixed 60px mobile nav bar ──────── */
@media (max-width: 992px) {
    body > .container:first-of-type,
    .page-body,
    .contact-page,
    .about-page {
        padding-top: 0;
    }
    /* Sections that start at page top need nav clearance */
    .contact-hero,
    .svc-hero,
    .about-header,
    .cavia-hero-wrap,
    .dw-hero,
    .updates-hero,
    .projects-hero {
        padding-top: 80px;
    }
}

/* ═══════════════════════════════════════════════════════════
   CONTACT PAGE
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .contact-hero {
        padding: 80px 20px 40px;
        text-align: center;
    }
    .contact-hero h1,
    .contact-hero-title { font-size: clamp(2rem, 8vw, 2.6rem); }

    .contact-card {
        padding: 28px 20px;
        border-radius: 16px;
        margin: 0 0 32px;
    }

    .form-row {
        flex-direction: column !important;
        gap: 16px;
    }
    .form-group {
        width: 100% !important;
    }
    .form-group input,
    .form-group textarea,
    .form-group select {
        font-size: 16px; /* prevent iOS zoom */
        min-height: 48px;
        padding: 12px 16px;
        box-sizing: border-box;
    }
    .form-group textarea { min-height: 120px; }

    .form-submit {
        width: 100%;
        min-height: 52px;
        font-size: 1rem;
    }

    .contact-email-strip {
        flex-direction: column;
        gap: 12px;
        text-align: center;
        padding: 24px 20px;
    }

    .faq-section { padding: 40px 0; }
    .faq-item { padding: 16px 0; }
    .faq-question {
        font-size: 1rem;
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    .faq-answer { font-size: 0.93rem; }

    .contact-body {
        flex-direction: column;
        gap: 24px;
    }
}

/* ═══════════════════════════════════════════════════════════
   ABOUT PAGE
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .about-header {
        padding: 80px 20px 40px;
        text-align: center;
    }
    .about-header h1 { font-size: clamp(2rem, 8vw, 2.6rem); }
    .about-intro { font-size: 1rem; }

    /* Journey timeline: horizontal scroll → vertical stack */
    .journey-timeline {
        flex-direction: column;
        gap: 16px;
        overflow-x: visible;
        padding-bottom: 0;
    }
    .jt-card-col { min-width: 100%; width: 100%; }
    .jt-card {
        padding: 20px 16px;
        border-radius: 14px;
    }

    /* Values grid: 1 column */
    .values-container {
        grid-template-columns: 1fr !important;
        gap: 16px;
    }
    .value-card { padding: 24px 20px; }

    /* Team / history */
    .ht-connector-row { display: none; } /* hide desktop connectors */
    .ht-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    /* Founder section already uses tl-section so home-redesign.css covers it */
}

/* ═══════════════════════════════════════════════════════════
   SERVICES PAGE
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .svc-hero {
        padding: 80px 20px 52px;
        text-align: center;
        min-height: auto;
    }
    .svc-hero-title { font-size: clamp(2.2rem, 9vw, 3rem); }
    .svc-hero-sub { font-size: 0.95rem; }
    .svc-hero-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .svc-hero-actions a,
    .svc-hero-actions button {
        display: flex;
        justify-content: center;
        min-height: 52px;
        width: 100%;
        box-sizing: border-box;
    }

    /* Service cards: stack content */
    .services-section { padding: 40px 0; }
    .service-card {
        flex-direction: column !important;
        padding: 28px 20px;
        gap: 20px;
    }
    .service-card > * { width: 100% !important; }
    .svc-header { flex-wrap: wrap; gap: 8px; }

    /* Process steps */
    .process-steps {
        flex-direction: column;
        gap: 24px;
    }
    .process-step {
        width: 100%;
        padding: 20px 16px;
    }

    /* Stats bar */
    .stat-item { text-align: center; }
    .stat-number { font-size: clamp(2rem, 8vw, 2.6rem); }

    /* CTA section */
    .cta-section-svc {
        padding: 48px 20px;
        text-align: center;
    }
    .cta-inner {
        flex-direction: column;
        gap: 16px;
        align-items: stretch;
    }
    .cta-inner a,
    .cta-inner button {
        display: flex;
        justify-content: center;
        min-height: 52px;
        width: 100%;
        box-sizing: border-box;
    }
}

/* ═══════════════════════════════════════════════════════════
   CAVIA PRODUCT PAGE
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .hero-section {
        flex-direction: column !important;
        padding: 80px 20px 40px;
        gap: 32px;
        text-align: center;
    }
    .hero-content { max-width: 100%; }
    .hero-content h1 { font-size: clamp(2rem, 9vw, 2.8rem); }
    .hero-buttons {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .hero-buttons a,
    .hero-buttons button {
        display: flex;
        justify-content: center;
        min-height: 52px;
        width: 100%;
        box-sizing: border-box;
    }

    /* Phone showcase */
    .phone-showcase { justify-content: center; }
    .phones-row {
        gap: 12px;
        justify-content: center;
    }
    .phone-frame {
        width: 140px !important;
    }

    /* CTA split */
    .cta-split {
        flex-direction: column;
        gap: 16px;
        align-items: stretch;
    }
    .cta-split a,
    .cta-split button {
        display: flex;
        justify-content: center;
        min-height: 52px;
        width: 100%;
        box-sizing: border-box;
    }
    .cta-panel { padding: 36px 20px; }
    .bottom-section { padding: 36px 0; }
}

/* ═══════════════════════════════════════════════════════════
   DAYWATCH PRODUCT PAGE
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .dw-referral {
        padding: 80px 20px 52px;
        text-align: center;
    }
    .dw-referral-title { font-size: clamp(2rem, 8vw, 2.6rem); }
    .dw-referral-cta {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }
    .dw-referral-cta a,
    .dw-referral-cta button {
        display: flex;
        justify-content: center;
        min-height: 52px;
        width: 100%;
        box-sizing: border-box;
    }
}

/* ═══════════════════════════════════════════════════════════
   UPDATES PAGE
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .filter-bar {
        flex-wrap: wrap;
        gap: 8px;
    }
    .filter-bar button,
    .filter-bar a {
        min-height: 40px;
        padding: 8px 16px;
        font-size: 0.9rem;
    }

    .update-card {
        padding: 20px 16px;
        border-radius: 14px;
    }

    .subscribe-strip-inner {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }
    .subscribe-strip-form {
        flex-direction: column;
        gap: 10px;
        width: 100%;
    }
    .subscribe-strip-form input {
        font-size: 16px; /* prevent iOS zoom */
        min-height: 48px;
        width: 100%;
        box-sizing: border-box;
    }
    .subscribe-strip-form button {
        min-height: 48px;
        width: 100%;
    }
}

/* ═══════════════════════════════════════════════════════════
   PROJECTS PAGE
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .projects-grid,
    .featured-projects-grid {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }
    .project-card,
    .featured-project-card {
        padding: 24px 16px;
    }
}

/* ═══════════════════════════════════════════════════════════
   CASE STUDY PAGES
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .case-study-hero,
    .cs-dark-hero {
        padding: 80px 20px 48px;
        text-align: center;
    }
    .case-study-hero h1,
    .cs-dark-hero h1 { font-size: clamp(1.8rem, 7vw, 2.4rem); }

    .case-study-grid,
    .cs-two-col {
        grid-template-columns: 1fr !important;
        gap: 24px;
    }

    .cs-metric-grid,
    .metrics-grid {
        grid-template-columns: 1fr 1fr !important;
        gap: 16px;
    }

    .cs-image-wrap img {
        width: 100%;
        height: auto;
        border-radius: 12px;
    }
}

/* ═══════════════════════════════════════════════════════════
   SERVICE DETAIL PAGES (services/*)
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .service-detail-hero {
        padding: 80px 20px 48px;
        text-align: center;
    }
    .service-detail-hero h1 { font-size: clamp(1.9rem, 8vw, 2.6rem); }
    .service-detail-grid {
        grid-template-columns: 1fr !important;
        gap: 24px;
    }
}

/* ═══════════════════════════════════════════════════════════
   SHARED SECTION PATTERNS — all pages
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* 2-column grids → 1 column */
    .two-col-grid,
    .split-grid,
    [class*="-grid"]:not(.metrics-grid):not(.cs-metric-grid) {
        grid-template-columns: 1fr !important;
    }

    /* Typography scale-down */
    h1 { font-size: clamp(1.8rem, 8vw, 2.6rem) !important; }
    h2 { font-size: clamp(1.4rem, 6vw, 2rem) !important; }
    h3 { font-size: clamp(1.1rem, 5vw, 1.4rem) !important; }

    /* Section padding */
    section { padding-top: 52px; padding-bottom: 52px; }

    /* Text inputs: prevent iOS auto-zoom (must be ≥16px) */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="search"],
    textarea,
    select {
        font-size: 16px !important;
    }

    /* Horizontal scroll tables */
    table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
    }

    /* Images */
    img { max-width: 100%; height: auto; }
}

/* ═══════════════════════════════════════════════════════════
   SMALL MOBILE (≤ 480px)
═══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .container { padding: 0 16px; }
    section { padding-top: 40px; padding-bottom: 40px; }

    .cs-metric-grid,
    .metrics-grid {
        grid-template-columns: 1fr !important;
    }

    .phone-frame { width: 120px !important; }

    /* Chips / tags: wrap properly */
    .chip { font-size: 0.78rem; padding: 4px 10px; }
}

/* ═══════════════════════════════════════════════════════════
   TOUCH DEVICE — disable hover transforms
═══════════════════════════════════════════════════════════ */
@media (hover: none) {
    .value-card:hover,
    .jt-card:hover,
    .service-card:hover,
    .update-card:hover,
    .project-card:hover,
    .contact-card:hover { transform: none; }
}

/* ═══════════════════════════════════════════════════════════
   FOOTER — MOBILE
═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    /* Tighter padding */
    .site-footer {
        padding: 48px 20px 28px !important;
    }
    .site-footer .container {
        padding: 0 !important;
    }

    /* 1 column immediately at 768px */
    .footer-columns {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        margin-bottom: 24px;
    }

    /* Column: border-top separator between sections */
    .footer-column {
        padding: 20px 0;
        border-top: 1px solid rgba(255,255,255,0.07);
    }
    .footer-column:first-child {
        border-top: none;
        padding-top: 0;
    }
    .footer-column:last-child {
        padding-bottom: 0;
    }

    /* Section heading */
    .footer-column h4 {
        margin-bottom: 12px;
        font-size: 0.7rem;
    }

    /* Links: min 44px touch target */
    .footer-column ul li {
        margin-bottom: 0;
        padding: 0;
    }
    .footer-column ul li a {
        display: block;
        padding: 9px 0;
        min-height: 44px;
        display: flex;
        align-items: center;
        font-size: 0.92rem;
        color: rgba(255,255,255,0.7);
    }

    /* Bottom bar: stack copyright + links, centered */
    .footer-bottom {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 12px;
        padding-top: 20px;
        border-top: 1px solid rgba(255,255,255,0.08);
    }

    .footer-copy {
        font-size: 0.8rem;
        opacity: 0.6;
    }

    .footer-links {
        justify-content: center;
        gap: 8px 16px;
        flex-wrap: wrap;
        margin-top: 0;
    }

    .footer-links a {
        padding: 6px 4px;
        font-size: 0.82rem;
    }
}

@media (max-width: 480px) {
    .site-footer {
        padding: 40px 16px 24px !important;
    }
}