/* ==========================================================================
   PintR — Responsive Stylesheet
   --------------------------------------------------------------------------
   Mobile-first breakpoints:
     - Base       : < 576px   (small phones)
     - sm         : ≥ 576px   (large phones)
     - md         : ≥ 768px   (tablets)
     - lg         : ≥ 992px   (laptops)
     - xl         : ≥ 1200px  (desktops)
     - xxl        : ≥ 1400px  (large desktops)
   Also handles landscape orientation + reduced motion.
   ========================================================================== */


/* ==========================================================================
   BASE / MOBILE FIRST (< 576px)
   Defaults tuned for smallest screens. Anything set here applies everywhere
   unless overridden by a larger breakpoint below.
   ========================================================================== */

/* Header — mobile menu closed by default */
.main-nav {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    background: var(--color-white);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--space-4);
    box-shadow: var(--shadow-lg);
    border-bottom: 1px solid var(--color-border);
    max-height: calc(100vh - var(--header-height));
    overflow-y: auto;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: transform var(--dur) var(--ease),
                opacity var(--dur) var(--ease),
                visibility var(--dur) var(--ease);
}
.main-nav.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
}
.main-nav .nav-link {
    width: 100%;
    padding: 14px 12px;
    border-radius: var(--radius-md);
    font-size: var(--fs-base);
    border-bottom: 1px solid var(--color-border);
}
.main-nav .nav-link:last-child { border-bottom: 0; }
.main-nav .nav-link::after { display: none; }
.main-nav .nav-link:hover,
.main-nav .nav-link.active { background: var(--color-bg); }

/* Dropdown collapses to inline list on mobile */
.nav-item.has-dropdown .nav-dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    padding: 4px 0 8px 12px;
    min-width: 0;
}

.nav-toggle { display: inline-flex; }
.header-cta { display: none; }

/* Solid header on mobile so overlaid menu items remain readable */
.site-header {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--color-border);
}

/* Hero: single column on mobile */
.hero {
    padding-top: calc(var(--header-height) + var(--space-6));
    padding-bottom: var(--space-8);
    text-align: left;
}
.hero-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
}
.hero h1 { font-size: clamp(2rem, 8vw, 2.5rem); }
.hero-lead { font-size: var(--fs-base); }
.hero-actions .btn { width: 100%; }
.hero-visual { order: -1; max-width: 460px; margin: 0 auto; width: 100%; }
.hero-visual .floating-chip { display: none; }
.hero-trust { flex-wrap: wrap; }

/* Sections: tighter padding */
.section     { padding: var(--space-8) 0; }
.section-sm  { padding: var(--space-6) 0; }
.section-title { margin-bottom: var(--space-6); }

/* Cards / grids default to 1 column on very small screens */
.card-grid,
.product-grid,
.testimonial-grid,
.values-grid,
.leader-grid { grid-template-columns: 1fr; }

.steps { grid-template-columns: repeat(2, 1fr); }
.stats-grid { grid-template-columns: repeat(2, 1fr); }

/* Two-column blocks stack */
.two-col { grid-template-columns: 1fr; gap: var(--space-6); }

/* Form: stack fields */
.form-row { grid-template-columns: 1fr; }
.form-card { padding: var(--space-5); }

/* Footer stacks */
.footer-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
}
.footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

/* Typography scaling */
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }

/* CTA band tightens */
.cta-band { padding: var(--space-7) var(--space-5); }

/* Stats block padding */
.stats { padding: var(--space-7) var(--space-5); border-radius: var(--radius-xl); }

/* Container gutters */
.container,
.container-lg,
.container-xl,
.container-xxl {
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}

/* WhatsApp float */
.whatsapp-float {
    right: 14px; bottom: 14px;
    width: 52px; height: 52px;
}


/* ==========================================================================
   SM: ≥ 576px  (large phones)
   ========================================================================== */
@media (min-width: 576px) {
    .card-grid,
    .product-grid,
    .testimonial-grid,
    .values-grid,
    .leader-grid { grid-template-columns: repeat(2, 1fr); }

    .form-row { grid-template-columns: 1fr 1fr; }

    .hero-actions .btn { width: auto; }

    .stats-grid { grid-template-columns: repeat(4, 1fr); }

    h1 { font-size: var(--fs-4xl); }
    h2 { font-size: var(--fs-3xl); }
}


/* ==========================================================================
   MD: ≥ 768px  (tablets)
   ========================================================================== */
@media (min-width: 768px) {
    .section     { padding: var(--space-9) 0; }
    .section-sm  { padding: var(--space-7) 0; }

    .hero { padding-bottom: var(--space-9); }
    .hero h1 { font-size: clamp(2.5rem, 5vw, 3rem); }

    .steps { grid-template-columns: repeat(3, 1fr); }

    .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; }
    .footer-bottom { flex-direction: row; align-items: center; }

    .two-col { grid-template-columns: 1fr 1fr; gap: var(--space-7); }

    .card-grid { grid-template-columns: repeat(3, 1fr); }
}


/* ==========================================================================
   LG: ≥ 992px  (laptops)
   ========================================================================== */
@media (min-width: 992px) {

    /* Restore transparent header on hero */
    .site-header {
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-bottom: 0;
    }
    .site-header.is-scrolled,
    .site-header.is-solid {
        background: rgba(255, 255, 255, 0.85);
        backdrop-filter: saturate(180%) blur(14px);
        -webkit-backdrop-filter: saturate(180%) blur(14px);
        border-bottom: 1px solid var(--color-border);
    }

    /* Restore horizontal nav */
    .main-nav {
        position: static;
        flex-direction: row;
        align-items: center;
        background: transparent;
        padding: 0;
        box-shadow: none;
        border-bottom: 0;
        max-height: none;
        overflow: visible;
        transform: none;
        opacity: 1;
        visibility: visible;
        transition: none;
    }
    .main-nav .nav-link {
        width: auto;
        padding: 10px 14px;
        border-bottom: 0;
        font-size: 0.95rem;
    }
    .main-nav .nav-link::after { display: block; }
    .main-nav .nav-link:hover,
    .main-nav .nav-link.active { background: transparent; }

    /* Dropdown returns to popover style */
    .nav-item.has-dropdown .nav-dropdown {
        position: absolute;
        opacity: 0;
        visibility: hidden;
        transform: translateY(8px);
        padding: 10px;
        min-width: 260px;
        box-shadow: var(--shadow-lg);
        border: 1px solid var(--color-border);
    }
    .nav-item.has-dropdown:hover .nav-dropdown,
    .nav-item.has-dropdown:focus-within .nav-dropdown {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .nav-toggle { display: none; }
    .header-cta { display: inline-flex; }

    /* Hero returns to 2 columns */
    .hero {
        padding-top: calc(var(--header-height) + var(--space-9));
        padding-bottom: var(--space-10);
    }
    .hero-grid {
        grid-template-columns: 1.05fr 1fr;
        gap: var(--space-8);
    }
    .hero-visual { order: 0; max-width: none; }
    .hero-visual .floating-chip { display: inline-flex; }
    .hero h1 { font-size: clamp(2.75rem, 4.6vw, 3.75rem); }

    .steps        { grid-template-columns: repeat(6, 1fr); }
    .card-grid    { grid-template-columns: repeat(4, 1fr); }
    .product-grid { grid-template-columns: repeat(3, 1fr); }
    .testimonial-grid { grid-template-columns: repeat(3, 1fr); }
    .values-grid  { grid-template-columns: repeat(4, 1fr); }
    .leader-grid  { grid-template-columns: repeat(4, 1fr); }

    .footer-grid  { grid-template-columns: 1.4fr 1fr 1fr 1fr; }

    .section      { padding: var(--space-10) 0; }

    .form-card    { padding: var(--space-7); }

    /* Contact page: two-column layout */
    .contact-layout {
        display: grid;
        grid-template-columns: 1.2fr 1fr;
        gap: var(--space-7);
        align-items: start;
    }
}


/* ==========================================================================
   XL: ≥ 1200px  (desktops)
   ========================================================================== */
@media (min-width: 1200px) {
    .container,
    .container-lg,
    .container-xl,
    .container-xxl {
        padding-left: var(--space-6);
        padding-right: var(--space-6);
    }

    .hero h1 { font-size: 4rem; }

    .product-grid { grid-template-columns: repeat(4, 1fr); }
}


/* ==========================================================================
   XXL: ≥ 1400px  (large desktops)
   ========================================================================== */
@media (min-width: 1400px) {
    :root { --container-max: 1280px; }
}


/* ==========================================================================
   LANDSCAPE PHONES (short viewports)
   Reduce hero top padding when height is very small so users see content
   without scrolling.
   ========================================================================== */
@media (max-height: 500px) and (orientation: landscape) {
    .hero {
        padding-top: calc(var(--header-height) + var(--space-5));
        padding-bottom: var(--space-6);
    }
    .hero h1 { font-size: 2rem; }
    .hero-visual .hero-illustration { max-height: 260px; }
}


/* ==========================================================================
   HOVER-CAPABLE DEVICES ONLY
   Disable hover-lift on touch devices to prevent stuck :hover states.
   ========================================================================== */
@media (hover: none) {
    .p-card:hover,
    .product-card:hover,
    .testimonial:hover,
    .step:hover,
    .info-item:hover,
    .leader:hover {
        transform: none;
        box-shadow: var(--shadow-xs);
    }
    .btn:hover { transform: none; }
}


/* ==========================================================================
   PRINT
   Simple, ink-friendly rendering when the user prints a page.
   ========================================================================== */
@media print {
    .site-header,
    .site-footer,
    .whatsapp-float,
    .cta-band,
    .nav-toggle { display: none !important; }

    body { background: #fff; color: #000; }
    .section { padding: 12pt 0; }
    a { color: #000; text-decoration: underline; }
    .p-card, .product-card, .testimonial, .step {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
        break-inside: avoid;
    }
}

/* End of responsive.css */