/* =========================================================
   PRODUCTS - infinite auto-scrolling marquee of product cards.
   The cards reuse the Our Services card design (.dm-service-card in style.css,
   site-futuristic.css and service-icons.css): white card, icon dial, red line,
   check list - and on hover the real product photo appears under a dark overlay.
   main.js clones the cards; the track slides by -50% for a seamless loop.
========================================================= */

.logo-marquee {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 32px 0 30px;   /* just enough room for the press/hover zoom, the lift and the shadow */
    /* spotlight fade: the card in the middle is fully clear (the solid band is about one
       card wide); cards fade out gradually the further they move from the centre */
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .12) 10%, rgba(0, 0, 0, .45) 25%, #000 37%, #000 63%, rgba(0, 0, 0, .45) 75%, rgba(0, 0, 0, .12) 90%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .12) 10%, rgba(0, 0, 0, .45) 25%, #000 37%, #000 63%, rgba(0, 0, 0, .45) 75%, rgba(0, 0, 0, .12) 90%, transparent 100%);
}

.logo-marquee-track {
    display: flex;
    align-items: stretch;
    width: max-content;
    will-change: transform;
    animation: logoMarqueeScroll 30s linear infinite;
}
/* press / hover zoom: instant (no transition on `scale`); the row holds still meanwhile.
   `scale` is separate from the card's own hover `transform` (lift), so both apply */
.logo-marquee .dm-product-card { position: relative; }
.logo-marquee .dm-product-card:hover,
.logo-marquee .dm-product-card.is-pressed { scale: 1.08; z-index: 5; }
.logo-marquee.is-holding .logo-marquee-track { animation-play-state: paused; }

/* pause while the visitor is pointing at / tabbing through a card */
.logo-marquee:hover .logo-marquee-track,
.logo-marquee:focus-within .logo-marquee-track {
    animation-play-state: paused;
}

@keyframes logoMarqueeScroll {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}

/* card size in the row; margin (not gap) keeps the -50% loop exact.
   max-width / grid-column undo the services grid's tablet rules for its last card */
.logo-marquee .dm-product-card {
    flex: 0 0 360px;
    width: 360px;
    max-width: none;
    margin: 0 4px 0 0;
    grid-column: auto;
    justify-self: auto;
}
/* tall enough for both layouts (icon + text, and photo frame + text) so the row never jumps */
.logo-marquee .dm-product-card .dm-card-content { min-height: 440px; }

/* inline SVG icons inside the services-style icon dial */
.dm-product-card .dm-service-icon svg {
    position: relative;
    z-index: 1;
    width: 32px;
    height: 32px;
    fill: none;
    stroke: #14244a;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: stroke .35s ease;
}
/* on hover the dial turns white (light theme), so the icon stays dark to remain visible */
html[data-theme="dark"] .dm-product-card .dm-service-icon svg { stroke: #e6eefc; }

/* =========================================================
   NORMAL STATE (not hovered): the Mobility-page product-card layout -
   the real photo sits in a rounded frame across the top of the card and
   the title, description and feature list move down below it, in their
   normal colours (instead of the services card's full-card photo + dark overlay).
========================================================= */
.logo-marquee .dm-product-card .dm-card-image {
    transition: opacity .45s ease, transform .6s ease, inset .45s ease, height .45s ease, border-radius .45s ease;
}
.logo-marquee .dm-product-card .dm-card-content {
    transition: padding-top .45s cubic-bezier(.2, .8, .2, 1);
}
.logo-marquee .dm-product-card .dm-service-icon {
    transition: opacity .3s ease, transform .3s ease, height .35s ease, margin .35s ease;
}

.logo-marquee .dm-product-card:not(:hover) .dm-card-image {
    inset: 14px 14px auto 14px;          /* framed photo at the top, like .product-image-area */
    height: 170px;
    z-index: 1;
    border-radius: 10px;
    opacity: 1;
    transform: none;
    box-shadow: 0 6px 18px rgba(16, 39, 68, .18);
}
.logo-marquee .dm-product-card:not(:hover) .dm-card-overlay { opacity: 0; }

/* the icon dial steps aside to make room for the photo */
.logo-marquee .dm-product-card:not(:hover) .dm-service-icon {
    height: 0;
    margin-bottom: 0;
    opacity: 0;
    transform: scale(.6);
}
.logo-marquee .dm-product-card:not(:hover) .dm-card-content {
    padding-top: 202px;                  /* photo frame (14 + 170) + breathing room */
}

/* keep the normal text colours (the services hover turns them white for the overlay) */
.logo-marquee .dm-product-card:not(:hover) .dm-card-content h3 { color: #102744; }
.logo-marquee .dm-product-card:not(:hover) .dm-card-content p,
.logo-marquee .dm-product-card:not(:hover) .dm-service-list li { color: #5b6b80; }
.logo-marquee .dm-product-card:not(:hover) .dm-service-list li::before { color: #e91d2b; border-color: #e91d2b; }
.logo-marquee .dm-product-card:not(:hover) .dm-card-line { background: #ff3b35; }
html[data-theme="dark"] .logo-marquee .dm-product-card:not(:hover) .dm-card-content h3 { color: #ffffff; }
html[data-theme="dark"] .logo-marquee .dm-product-card:not(:hover) .dm-card-content p,
html[data-theme="dark"] .logo-marquee .dm-product-card:not(:hover) .dm-service-list li { color: rgba(255, 255, 255, .72); }
html[data-theme="dark"] .logo-marquee .dm-product-card:not(:hover) .dm-service-list li::before { color: #a78bfa; border-color: #a78bfa; }

/* GPS device cards: product photos are on white, so show the whole device (not cropped) */
.logo-marquee .dm-device-card:not(:hover) .dm-card-image {
    background-color: #ffffff;
    background-size: contain;
    background-origin: content-box;
    padding: 10px;
    box-sizing: border-box;
}
/* badge from the Mobility page (Best Seller / New / AIS140) */
.dm-device-badge {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 3;
    padding: 5px 11px;
    border-radius: 999px;
    background: #e91d2b;
    color: #ffffff;
    font: 700 11px/1 'Montserrat', Arial, Helvetica, sans-serif;
    letter-spacing: .04em;
    text-transform: uppercase;
    box-shadow: 0 4px 12px rgba(233, 29, 43, .3);
}
html[data-theme="dark"] .dm-device-badge { background: #a78bfa; box-shadow: 0 4px 12px rgba(167, 139, 250, .3); }
/* four features per device: a neat 2 x 2 grid (the 3-column grid wrapped them onto 3 lines) */
.logo-marquee .dm-device-card .dm-service-list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 8px; margin-bottom: 8px; }
/* device photo frame a little shorter than the category cards', so all the text fits */
.logo-marquee .dm-device-card:not(:hover) .dm-card-image { height: 150px; }
.logo-marquee .dm-device-card:not(:hover) .dm-card-content { padding-top: 178px; }
.logo-marquee .dm-device-card:not(:hover) .dm-card-content p { margin-bottom: 14px; }
.logo-marquee .dm-device-card:not(:hover) .dm-device-badge { top: 24px; right: 24px; }

@media (max-width: 768px) {
    .logo-marquee .dm-product-card:not(:hover) .dm-card-image { height: 140px; }
    .logo-marquee .dm-product-card:not(:hover) .dm-card-content { padding-top: 170px; }
    .logo-marquee .dm-device-card:not(:hover) .dm-card-image { height: 130px; }
    .logo-marquee .dm-device-card:not(:hover) .dm-card-content { padding-top: 156px; }
}

@media (max-width: 768px) {
    .logo-marquee {
        -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .35) 8%, #000 18%, #000 82%, rgba(0, 0, 0, .35) 92%, transparent 100%);
        mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .35) 8%, #000 18%, #000 82%, rgba(0, 0, 0, .35) 92%, transparent 100%);
    }
    .logo-marquee .dm-product-card {
        flex-basis: 280px;
        width: 280px;
        margin-right: 4px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .logo-marquee-track { animation-duration: 120s !important; }
}

/* section: same pure white as Our Services in the light theme (the dark theme
   makes it transparent in site-futuristic.css), and no extra space below the row */
.products-section { background: #ffffff; padding-bottom: 0; }
html[data-theme="dark"] .products-section { background: transparent; }
@media (max-width: 768px) {
    .products-section { padding-bottom: 0; }
}

/* HOVER: the Our Services card effect (style.css .dm-service-card:hover) - the photo grows to
   fill the whole card under the dark blue overlay, the text turns white and the icon dial
   comes back. The photo frame morphs smoothly between the two states. */
.logo-marquee .dm-product-card:hover .dm-card-image { inset: 0; height: 100%; border-radius: 0; box-shadow: none; }
.logo-marquee .dm-product-card:hover .dm-service-icon svg { stroke: #14244a; }

/* each card's own photo shows in the normal state (set inline as --photo); on hover the
   card takes the matching Our Services card's photo + overlay instead:
   GPS cards -> Mobility & Vehicle (vehicles, blue), CCTV -> Security (blue),
   Branding / Software / Social Media / SEO -> Digital Branding (business, purple) */
.logo-marquee .dm-product-card:not(:hover) .dm-card-image { background-image: var(--photo); }

/* =========================================================
   3 CARDS AT A TIME: the row is as wide as the Our Services card grid above it
   (max 1280px, same side margins) and each card is a third of it - so the row shows
   three cards lined up with the three Services cards (2 on tablets, 1 on phones).
   Only a thin soft fade at the two edges, so all three cards are clear.
========================================================= */
.logo-marquee {
    --pm-row: min(1280px, calc(100vw - 2 * clamp(16px, 5.6vw, 80px)));
    --pm-gap: 4px;                                    /* = the card's margin-right */
    --pm-cols: 3;
    width: var(--pm-row);
    margin-left: auto;
    margin-right: auto;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 2.5%, #000 97.5%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 2.5%, #000 97.5%, transparent 100%);
}
.logo-marquee .dm-product-card {
    flex: 0 0 calc((var(--pm-row) - (var(--pm-cols) - 1) * var(--pm-gap)) / var(--pm-cols));
    width: calc((var(--pm-row) - (var(--pm-cols) - 1) * var(--pm-gap)) / var(--pm-cols));
    margin-right: var(--pm-gap);
}
@media (max-width: 1023px) { .logo-marquee { --pm-cols: 2; } }
@media (max-width: 640px)  { .logo-marquee { --pm-cols: 1; } }