/* ============================================================
   Product video cover + play button
   ------------------------------------------------------------
   The .martin-video-cover component and its modal are used on
   pages that do NOT load home.css (product, category, solution
   and guide pages), so the styles that originally lived in
   home.css never applied there: the cover image rendered at its
   natural size and the play button had no dimensions.

   Loaded only on pages that use the component.
   ============================================================ */

.martin-video-cover {
    position: relative;
    display: block;
    width: 100%;
    max-width: 640px;
    margin: 16px 0;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    line-height: 0;
}

/* Some product templates lay the hero out as a grid (product-page.css)
   and others as a flex row (product.css). Handle both: in a grid the
   cover spans all columns; in a flex row it wraps onto its own line
   instead of being squeezed to zero width by its siblings. */
.product-hero-inner:has(> .martin-video-cover) {
    flex-wrap: wrap;
}

.product-hero-inner > .martin-video-cover {
    grid-column: 1 / -1;
    justify-self: start;
    flex: 1 1 100%;
}

/* ------------------------------------------------------------
   Two-column hero for the flex-based product template
   (product.css). Left: gallery. Right: key features, CTA and
   the video cover stacked underneath.
   ------------------------------------------------------------ */
.product-hero-inner.hero-2col {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 24px 48px;
    align-items: start;
}

.product-hero-inner.hero-2col > .product-gallery {
    grid-column: 1;
    grid-row: 1 / span 3;
}

.product-hero-inner.hero-2col > .product-info {
    grid-column: 2;
    grid-row: 1;
}

.product-hero-inner.hero-2col > .cta-group {
    grid-column: 2;
    grid-row: 2;
}

.product-hero-inner.hero-2col > .martin-video-cover {
    grid-column: 2;
    grid-row: 3;
    justify-self: start;
    flex: 0 0 auto;
}

.martin-video-cover img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    /* cover, not contain: contain leaves black letterbox bars whose hard
       edges read as vertical lines at the sides of the image. */
    object-fit: cover;
    background: #000;
    pointer-events: none;
    transition: transform 0.3s ease;
}

.martin-video-cover:hover img {
    transform: scale(1.03);
}

.play-button-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 68px;
    height: 48px;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.55);
    border-radius: 10px;
    pointer-events: none;
    transition: transform 0.2s ease, background 0.2s ease;
}

.play-button-overlay::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-35%, -50%);
    border-style: solid;
    border-width: 11px 0 11px 18px;
    border-color: transparent transparent transparent #fff;
}

.martin-video-cover:hover .play-button-overlay {
    transform: translate(-50%, -50%) scale(1.06);
    background: rgba(0, 0, 0, 0.72);
}

@media (max-width: 992px) {
    .product-hero-inner.hero-2col {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .product-hero-inner.hero-2col > .product-gallery,
    .product-hero-inner.hero-2col > .product-info,
    .product-hero-inner.hero-2col > .cta-group,
    .product-hero-inner.hero-2col > .martin-video-cover {
        grid-column: 1;
        grid-row: auto;
    }
}

@media (max-width: 768px) {
    .martin-video-cover {
        max-width: 100%;
        margin: 12px 0;
        border-radius: 6px;
    }

    .play-button-overlay {
        width: 56px;
        height: 40px;
    }

    .play-button-overlay::after {
        border-width: 9px 0 9px 15px;
    }
}