/* ==========================================================================
   PRODUCTS INDEX PAGE — products-index.css
   Follows the same design token system as header.css / contact.css
   ========================================================================== */

/* ── Shared page tokens (mirrors contact.css :root) ─────────────────────── */
:root {
    --pi-accent:        #0B4EDB;
    --pi-accent-hover:  #093eb3;
    --pi-primary:       #001A3A;
    --pi-primary-2:     #002B63;
    --pi-text-dark:     #071833;
    --pi-text-muted:    #64748B;
    --pi-bg-light:      #F5F7FA;
    --pi-bg-dark:       #001126;
    --pi-border:        #E2E8F0;
    --pi-radius-md:     8px;
    --pi-radius-lg:     12px;
    --pi-shadow-sm:     0 1px 3px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.02);
    --pi-shadow-md:     0 4px 6px -1px rgba(0,0,0,.05), 0 2px 4px -1px rgba(0,0,0,.03);
    --pi-shadow-lg:     0 10px 15px -3px rgba(0,0,0,.05), 0 4px 6px -2px rgba(0,0,0,.02);
    --pi-shadow-xl:     0 20px 25px -5px rgba(0,0,0,.08), 0 10px 10px -5px rgba(0,0,0,.03);
    --pi-transition:    all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

/* ── Reveal animation (mirrors contact.css .reveal-item) ────────────────── */
.reveal-item {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.7s cubic-bezier(0.23, 1, 0.32, 1),
                transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);
}
.reveal-item.is-revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ── Section header (mirrors contact.css .section-header) ───────────────── */
.section-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 48px;
}
.section-title {
    font-size: 32px;
    font-weight: 900;
    color: var(--pi-primary);
    letter-spacing: -0.02em;
    line-height: 1.2;
}
.section-link {
    color: var(--pi-accent);
    font-size: 14px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    transition: var(--pi-transition);
}
.section-link i { transition: transform 0.2s ease; }
.section-link:hover { color: var(--pi-accent-hover); }
.section-link:hover i { transform: translateX(4px); }

/* ==========================================================================
   HERO — products variant
   ========================================================================== */
.hero {
    position: relative;
    background-color: var(--pi-primary);
    color: #FFFFFF;
    min-height: 380px;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 60px 0;
}
.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    opacity: 0.38;
}
.hero-content {
    position: relative;
    z-index: 2;
    max-width: 680px;
}
.hero-products {
    min-height: 340px;
    padding-top: 44px;
    padding-bottom: 52px;
}

/* Breadcrumbs (mirrors contact.css .breadcrumbs) */
.breadcrumbs {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 500;
    color: #94A3B8;
    margin-bottom: 16px;
}
.breadcrumbs a { color: #94A3B8; transition: var(--pi-transition); }
.breadcrumbs a:hover { color: var(--pi-accent); }
.bc-divider { font-size: 8px; color: #64748B; }
.bc-current { color: #FFFFFF; }

.hero-title {
    font-size: 48px;
    font-weight: 900;
    line-height: 1.12;
    letter-spacing: -0.02em;
    margin-bottom: 20px;
}
.hero-desc {
    font-size: 17px;
    font-weight: 300;
    color: #E2E8F0;
    line-height: 1.65;
    max-width: 580px;
}

/* ==========================================================================
   ADVANTAGES BAR — white variant for products page
   ========================================================================== */
.benefits {
    background-color: var(--pi-bg-dark);
    color: #FFFFFF;
    padding: 24px 0;
    border-bottom: 1px solid #1E293B;
}

/* Products page overrides to white bar (mirrors contact-adv-bar) */
.products-adv-bar {
    background-color: #FFFFFF;
    border-bottom: 1px solid var(--pi-border);
    padding: 22px 0;
}

.products-adv-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}

.products-adv-grid .benefit-item {
    display: grid;
    grid-template-columns: 48px 1fr;
    align-items: center;
    gap: 18px;
    padding: 0 28px;
    border-left: none;
    border-right: 1px solid var(--pi-border);
}
.products-adv-grid .benefit-item:first-child { padding-left: 0; }
.products-adv-grid .benefit-item:last-child  { border-right: none; padding-right: 0; }

.products-adv-grid .benefit-icon {
    width: 48px;
    height: 48px;
    background-color: transparent;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.products-adv-grid .benefit-icon i {
    font-size: 34px;
    color: var(--pi-primary);
    line-height: 1;
}

.adv-title-small {
    font-size: 14px;
    font-weight: 800;
    color: var(--pi-primary);
    margin-bottom: 5px;
    line-height: 1.25;
}
.products-adv-grid .benefit-item p {
    font-size: 12px;
    color: var(--pi-text-dark);
    line-height: 1.45;
    margin: 0;
}

/* ==========================================================================
   PRODUCT CATEGORIES SECTION
   ========================================================================== */
.pi-categories {
    padding: 72px 0 60px;
    background-color: #FFFFFF;
}

.pi-cat-grid {
    display: grid;
    /* auto-fit + minmax: cards self-organise into columns based on available
       width. At ≥1200 px the minimum is wide enough to force exactly 3 cols;
       at narrower widths the grid drops to 2 or 1 col naturally. */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
    gap: clamp(20px, 1.5vw, 36px);
}

/* Category Card */
.pi-cat-card {
    background: #FFFFFF;
    border: 1px solid var(--pi-border);
    border-radius: var(--pi-radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: var(--pi-transition);
    box-shadow: var(--pi-shadow-sm);
}
.pi-cat-card:hover {
    box-shadow: var(--pi-shadow-xl);
    transform: translateY(-3px);
    border-color: transparent;
}

.pi-cat-card__top {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px 20px 16px;
}

/* Icon variants */
.pi-cat-card__icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.pi-cat-card__icon i { font-size: 20px; color: #FFFFFF; }

.pi-icon--blue   { background: var(--pi-accent); }
.pi-icon--teal   { background: #0FA88E; }
.pi-icon--purple { background: #7C3AED; }
.pi-icon--orange { background: #F07C1A; }
.pi-icon--blue2  { background: #2563EB; }
.pi-icon--teal2  { background: #0891B2; }

.pi-cat-card__info { flex: 1; min-width: 0; }
.pi-cat-card__title {
    font-size: 16px;
    font-weight: 800;
    color: var(--pi-text-dark);
    margin-bottom: 5px;
    line-height: 1.25;
}
.pi-cat-card__desc {
    font-size: 12px;
    color: var(--pi-text-muted);
    line-height: 1.55;
}

.pi-cat-card__img {
    overflow: hidden;
    flex-shrink: 0;
}
.pi-cat-card__img img {
    width: 100%;
    /* clamp keeps the image tall enough on large screens while preventing
       it from becoming a thin banner on ultra-wide monitors.
       Formula: floor(~13 % of viewport width), clamped between 175 px and
       240 px — this gives ~195 px at 1440 px, ~210 px at 1920 px, and
       ~240 px (capped) at 2560 px, so the card always looks proportional. */
    height: clamp(175px, 13.5vw, 240px);
    object-fit: cover;
    display: block;
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}
.pi-cat-card:hover .pi-cat-card__img img { transform: scale(1.05); }

.pi-cat-card__link {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 13px 20px;
    font-size: 13px;
    font-weight: 700;
    color: var(--pi-accent);
    border-top: 1px solid var(--pi-border);
    transition: var(--pi-transition);
    margin-top: auto;
}
.pi-cat-card__link i { font-size: 11px; transition: transform 0.2s ease; }
.pi-cat-card__link:hover { background: var(--pi-bg-light); }
.pi-cat-card__link:hover i { transform: translateX(4px); }

/* ==========================================================================
   BRANDS SECTION
   ========================================================================== */
.pi-brands {
    padding: 60px 0;
    background-color: var(--pi-bg-light);
}

.pi-brands__sub {
    font-size: 14px;
    color: var(--pi-text-muted);
    margin-top: 8px;
    line-height: 1.6;
}

/* Marquee scroll keyframes */
@keyframes pi-brands-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.pi-brands__logos {
    border: 1px solid var(--pi-border);
    border-radius: var(--pi-radius-lg);
    overflow: hidden;
    background: #FFFFFF;
    /* Fade edges for a polished look */
    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        #000 6%,
        #000 94%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to right,
        transparent 0%,
        #000 6%,
        #000 94%,
        transparent 100%
    );
}

/* The scrolling track — contains original + duplicate items */
.pi-brands__track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: pi-brands-scroll 22s linear infinite;
    will-change: transform;
}

/* Pause on hover */
.pi-brands__logos:hover .pi-brands__track {
    animation-play-state: paused;
}

.pi-brand-logo {
    flex-shrink: 0;
    width: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 20px;
    border-right: 1px solid var(--pi-border);
    transition: background 0.2s;
}
.pi-brand-logo:hover { background: var(--pi-bg-light); }

.pi-brand-logo img {
    /* Unified height — forces all logos to the same visual size regardless of source resolution */
    height: 52px;
    width: auto;
    max-width: 140px;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.65;
    transition: filter 0.25s ease, opacity 0.25s ease;
}
.pi-brand-logo:hover img { filter: grayscale(0%); opacity: 1; }

/* Sun Ace has a near-square logo with significant internal whitespace;
   override the shared height constraint so it renders at a comparable
   visual size to horizontally-oriented logos. */
.pi-brand-logo--sunace img {
    height: auto;
    width: auto;
    max-width: 120px;
    max-height: 68px;
    transform: scale(1.35);
    transform-origin: center;
}

.pi-brand-logo--more {
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
}
.pi-brand-logo__dots {
    font-size: 20px;
    font-weight: 700;
    color: var(--pi-text-muted);
    letter-spacing: 3px;
    line-height: 1;
}
.pi-brand-logo--more span:last-child {
    font-size: 11px;
    font-weight: 700;
    color: var(--pi-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ==========================================================================
   WHY US SECTION
   ========================================================================== */
.pi-why-us {
    background-color: var(--pi-bg-dark);
    color: #FFFFFF;
    padding: 56px 0;
}
.pi-why-us__title {
    color: #FFFFFF !important;
    margin-bottom: 40px;
}

.pi-why-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.pi-why-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}
.pi-why-card__icon {
    width: 52px;
    height: 52px;
    background: rgba(255,255,255,.08);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.25s;
}
.pi-why-card:hover .pi-why-card__icon { background: rgba(11,78,219,.25); }
.pi-why-card__icon i { font-size: 22px; color: #FFFFFF; }
.pi-why-card strong {
    display: block;
    font-size: 15px;
    font-weight: 700;
    margin-bottom: 5px;
    color: #FFFFFF;
}
.pi-why-card p {
    font-size: 13px;
    color: rgba(255,255,255,.6);
    margin: 0;
    line-height: 1.5;
}

/* ==========================================================================
   CTA BANNER (mirrors contact.css .cta-banner-sec / .cta-banner)
   ========================================================================== */
.cta-banner-sec { margin: 48px 0; }

.cta-banner {
    background: linear-gradient(135deg, var(--pi-primary) 0%, var(--pi-primary-2) 100%);
    border-radius: var(--pi-radius-lg);
    padding: 32px 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
    box-shadow: var(--pi-shadow-lg);
    position: relative;
    overflow: hidden;
}
.cta-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.05;
    background-image: linear-gradient(to right, #808080 1px, transparent 1px),
                      linear-gradient(to bottom, #808080 1px, transparent 1px);
    background-size: 24px 24px;
}

.cta-content-wrapper {
    display: flex;
    align-items: center;
    gap: 24px;
    position: relative;
    z-index: 1;
}
.cta-icon-large {
    font-size: 40px;
    color: rgba(255,255,255,.25);
    flex-shrink: 0;
    line-height: 1;
}
.cta-text { max-width: 600px; }
.cta-text h2 {
    font-size: 26px;
    font-weight: 900;
    color: #FFFFFF;
    line-height: 1.25;
    margin-bottom: 10px;
}
.cta-text p {
    font-size: 14px;
    font-weight: 300;
    color: #D1D5DB;
    line-height: 1.6;
}
.cta-action {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

/* Large screens ≥ 1440px */
@media (min-width: 1440px) {
    .hero-title { font-size: 56px; }
    .section-title { font-size: 36px; }

    /* Lock the grid to exactly 3 columns on large desktops so cards never
       become wider than ~460 px on a 1440-px viewport. */
    .pi-cat-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ≥ 1920px — Full-HD and above */
@media (min-width: 1920px) {
    .pi-categories { padding: 88px 0 72px; }

    /* Switch to 3 columns with a tighter minmax so cards stay proportional
       and the grid doesn't sprawl across the full viewport. */
    .pi-cat-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 32px;
    }

    .pi-cat-card__top { padding: 24px 24px 18px; }
    .pi-cat-card__title { font-size: 17px; }
    .pi-cat-card__desc  { font-size: 13px; }
    .pi-cat-card__link  { padding: 15px 24px; font-size: 14px; }
}

/* ≥ 2200px — QHD / 2560px monitors */
@media (min-width: 2200px) {
    /* At this width a 3-col grid would make each card ~700 px wide, which
       is too wide. Switch to 4 columns (6 cards → 4+2 layout) and keep
       the image height proportional via the clamp already applied. */
    .pi-cat-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 36px;
    }

    /* With 4 cols the last row has only 2 cards; centre them so they don't
       hug the left edge. */
    .pi-cat-grid > .pi-cat-card:nth-child(5) {
        grid-column: 1 / 2;
    }
    .pi-cat-grid > .pi-cat-card:nth-child(6) {
        grid-column: 2 / 3;
    }

    .pi-cat-card__top { padding: 26px 26px 20px; }
    .pi-cat-card__title { font-size: 18px; }
    .pi-cat-card__desc  { font-size: 13px; }
}

/* ≤ 1200px */
@media (max-width: 1200px) {
    .pi-cat-grid { grid-template-columns: repeat(3, 1fr); }
}

/* ≤ 992px */
@media (max-width: 992px) {
    .pi-cat-grid { grid-template-columns: repeat(2, 1fr); }
    .pi-why-grid { grid-template-columns: repeat(2, 1fr); }
    .products-adv-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .products-adv-grid .benefit-item {
        padding: 12px 0;
        border-right: none;
        border-bottom: 1px solid var(--pi-border);
    }
    .products-adv-grid .benefit-item:last-child { border-bottom: none; }
    .section-header { flex-direction: column; align-items: flex-start; gap: 12px; }
    .cta-banner { flex-direction: column; text-align: center; padding: 28px 32px; }
    .cta-content-wrapper { flex-direction: column; gap: 12px; }
    .cta-icon-large { display: none; }
}

/* ≤ 768px */
@media (max-width: 768px) {
    .hero-title { font-size: 34px; }
    .hero-desc { font-size: 15px; }
    .hero-products { min-height: 260px; padding-top: 32px; padding-bottom: 36px; }
    .pi-cat-grid { grid-template-columns: 1fr; }
    /* On mobile the card is full-width; override the vw-based clamp so the
       image stays at a fixed comfortable height rather than scaling with
       viewport width (which would make it too tall on wide phones). */
    .pi-cat-card__img img { height: 200px; }
    .pi-why-grid { grid-template-columns: 1fr; gap: 20px; }
    /* Brands marquee: keep scrolling on mobile, just slow it down slightly */
    .pi-brands__track { animation-duration: 18s; }

    /* ── Mobile brand logo wall fix ─────────────────────────────────────────
       Ensure every logo card is uniform in size, and logos are perfectly
       centred without distortion. The mask-image fade is removed on mobile
       to prevent edge clipping on narrow viewports.
    ─────────────────────────────────────────────────────────────────────── */
    .pi-brands__logos {
        -webkit-mask-image: none;
        mask-image: none;
        overflow: hidden;
    }

    .pi-brands__track {
        display: flex;
        align-items: center;
        /* Let the animation drive horizontal movement; no manual scroll needed */
    }

    .pi-brand-logo {
        flex: 0 0 160px;
        width: 160px;
        height: 96px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 18px 24px;
        box-sizing: border-box;
        border-right: 1px solid var(--pi-border);
    }

    .pi-brand-logo img {
        /* Override the desktop fixed-height rule; use max constraints instead
           so every logo fits within the same bounding box without distortion */
        height: auto;
        width: auto;
        max-width: 110px;
        max-height: 46px;
        object-fit: contain;
        display: block;
    }

    .pi-brand-logo--sunace img {
        max-width: 110px;
        max-height: 58px;
        transform: scale(1.3);
        transform-origin: center;
    }
    .section-title { font-size: 26px; }
    .cta-banner { padding: 24px 20px; }
    .cta-text h2 { font-size: 20px; }
}

/* ≤ 480px */
@media (max-width: 480px) {
    .products-adv-grid { grid-template-columns: 1fr; }
    .pi-cat-grid { grid-template-columns: 1fr; }
    /* Brands marquee on small screens */
    .pi-brands__track { animation-duration: 15s; }

    .pi-brand-logo {
        flex: 0 0 150px;
        width: 150px;
        height: 90px;
        padding: 16px 20px;
    }

    .pi-brand-logo img {
        max-width: 100px;
        max-height: 42px;
    }

    .pi-brand-logo--sunace img {
        max-width: 100px;
        max-height: 54px;
        transform: scale(1.3);
        transform-origin: center;
    }
}