/* =========================================
   MOSTPLAY PARTNERS - PRODUCTS SECTION
========================================= */

.mp-products {
    background: linear-gradient(125deg, #08285c, #0754a5);
    color: #ffffff;
    padding: 85px 0;
    overflow: hidden;
}

.mp-products__container {
    width: min(1480px, 92%);
    margin: 0 auto;

    display: grid;
    grid-template-columns: 38% minmax(0, 1fr);
    align-items: center;
    gap: 25px;
}

/* =========================================
   LEFT CONTENT
========================================= */

.mp-products__content {
    position: relative;
    z-index: 2;
    min-width: 0;
}

/* Section subtitle */

.mp-products__eyebrow {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 35px;
}

.mp-products__eyebrow::after {
    content: "";
    display: block;
    width: 40px;
    height: 4px;
    background: #ffcc00;
    margin-top: 15px;
}

/* Main heading */

.mp-products__heading {
    color: #ffffff;
    font-size: clamp(30px, 3vw, 49px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -1px;
    margin: 0 0 35px;
}

/* =========================================
   PRODUCT BUTTONS
========================================= */

.mp-products__buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 480px;
}

.mp-products__button {
    display: flex;
    align-items: center;
    gap: 20px;

    width: 100%;
    min-height: 85px;
    padding: 14px 22px;

    border: 1px solid #0879e8;
    border-radius: 15px;

    background: #05265a;
    color: #ffffff;

    text-align: left;
    cursor: pointer;

    transition:
        border-color 0.2s ease,
        background-color 0.2s ease,
        box-shadow 0.2s ease;
}

.mp-products__button:hover {
    border-color: #ffcc00;
}

.mp-products__button:focus-visible {
    outline: 3px solid #ffcc00;
    outline-offset: 3px;
}

/* Active product */

.mp-products__button.is-active {
    border-color: #ffcc00;
    box-shadow: inset 5px 0 0 #ffcc00;
}

/* Product icon */

.mp-products__icon {
    width: 48px;
    height: 48px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Product button text */

.mp-products__button-copy {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}

.mp-products__button-title {
    font-size: 20px;
    font-weight: 800;
    color: #ffffff;
}

.mp-products__button-subtitle {
    font-size: 14px;
    color: #d6e7ff;
}

/* Right arrow */

.mp-products__arrow {
    color: #ffcc00;
    font-size: 38px;
    font-weight: 700;
    line-height: 1;
    flex-shrink: 0;
}

/* =========================================
   RIGHT SIDE - PRODUCT VISUAL
========================================= */

.mp-products__visual {
    min-width: 0;
    padding-left: 45px;
}

.mp-products__panel {
    width: 100%;
}

/* Inactive product panels */

.mp-products__panel[hidden] {
    display: none !important;
}

/* Active product heading */

.mp-products__panel-heading {
    display: inline-block;
    color: #ffcc00;
    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 4px;
    margin-bottom: 25px;
}

.mp-products__panel-heading::after {
    content: "";
    display: block;
    width: 35px;
    height: 4px;
    background: #ffcc00;
    margin-top: 12px;
}

/* =========================================
   PRODUCT CARDS GRID
========================================= */

.mp-products__cards {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

/* Individual card */

.mp-products__card {
    position: relative;
    min-width: 0;

    overflow: visible;

    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* Card image */

.mp-products__card-image {
    display: block;
    width: 100%;
    height: auto;

    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* Optional text-only card */

.mp-products__card-title {
    padding: 14px;
    color: #ffffff;
    text-align: center;
    font-size: 22px;
    font-weight: 800;
    text-transform: uppercase;
}

/* =========================================
   SEQUENTIAL CARD REVEAL ANIMATION
========================================= */

/*
   Cards remain hidden until JavaScript
   adds .is-revealing to the active panel.

   IMPORTANT:
   Do not trigger animation using .is-active.
*/

.mp-products .mp-products__card {
    opacity: 0;
    transform: translateY(22px);
    animation: none;
}

/*
   JavaScript adds .is-revealing when:
   1. The visitor first scrolls to Products.
   2. A product button is clicked.

   PHP provides --card-index for each card.
*/

.mp-products .mp-products__panel.is-revealing .mp-products__card {
    animation-name: mp-products-card-reveal;
    animation-duration: 0.7s;
    animation-timing-function: ease-out;
    animation-fill-mode: both;

    animation-delay: calc(var(--card-index, 0) * 0.22s);
}

/* Single animation definition */

@keyframes mp-products-card-reveal {

    0% {
        opacity: 0;
        transform: translateY(22px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }

}

/* =========================================
   RESPONSIVE - TABLET
========================================= */

@media (max-width: 1024px) {

    .mp-products__container {
        grid-template-columns: 1fr;
        gap: 45px;
    }

    .mp-products__visual {
        padding-left: 0;
    }

    .mp-products__buttons {
        max-width: 100%;
    }

    .mp-products__heading {
        font-size: clamp(30px, 4.5vw, 45px);
    }

}

/* =========================================
   RESPONSIVE - MOBILE
========================================= */

@media (max-width: 600px) {

    .mp-products {
        padding: 55px 0;
    }

    .mp-products__container {
        width: 92%;
        gap: 35px;
    }

    .mp-products__eyebrow {
        font-size: 12px;
        letter-spacing: 3px;
        margin-bottom: 25px;
    }

    .mp-products__heading {
        font-size: clamp(28px, 7vw, 38px);
        line-height: 1.15;
        letter-spacing: -0.5px;
        margin-bottom: 28px;
    }

    /* Buttons */

    .mp-products__buttons {
        gap: 10px;
    }

    .mp-products__button {
        min-height: 75px;
        padding: 12px 16px;
        gap: 14px;
        border-radius: 12px;
    }

    .mp-products__icon {
        width: 40px;
        height: 40px;
    }

    .mp-products__button-title {
        font-size: 17px;
    }

    .mp-products__button-subtitle {
        font-size: 12px;
    }

    .mp-products__arrow {
        font-size: 32px;
    }

    /* Product heading */

    .mp-products__panel-heading {
        font-size: 13px;
        letter-spacing: 3px;
        margin-bottom: 20px;
    }

    /* Two-column cards */

    .mp-products__cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    .mp-products__card-title {
        font-size: 15px;
        padding: 10px;
    }

}

/* =========================================
   ACCESSIBILITY - REDUCED MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {

    .mp-products .mp-products__card,
    .mp-products .mp-products__panel.is-revealing .mp-products__card {
        animation: none !important;
        opacity: 1;
        transform: none;
    }

    .mp-products__button {
        transition: none;
    }

}



/* ==========================================
   PRODUCTS — RESPONSIVE HEADING IMPROVEMENT
   Mobile + tablet only (1024px and below)
   Desktop remains unchanged
========================================== */

/* Keep the original desktop appearance */
@media (min-width: 1025px) {
    .mp-products__heading-space {
        display: none;
    }
}

/* Tablet and mobile */
@media (max-width: 1024px) {

    /* Remove forced desktop line breaks */
    .mp-products__heading-break {
        display: none !important;
    }

    /* Restore natural spaces between words */
    .mp-products__heading-space {
        display: inline !important;
        white-space: pre;
    }

    .mp-products .mp-products__heading {
        font-size: clamp(25px, 4.5vw, 36px) !important;
        font-weight: 600 !important;
        line-height: 1.32 !important;
        letter-spacing: 0 !important;

        text-align: left !important;
        text-wrap: balance;
        overflow-wrap: normal;
        word-break: normal;

        margin-bottom: 30px !important;
    }
}

/* All mobile screen sizes */
@media (max-width: 767px) {

    .mp-products .mp-products__heading {
        font-size: clamp(23px, 5.9vw, 30px) !important;
        font-weight: 600 !important;
        line-height: 1.35 !important;
        letter-spacing: 0 !important;

        margin-top: 0 !important;
        margin-bottom: 28px !important;
    }

    .mp-products .mp-products__eyebrow {
        margin-bottom: 26px !important;
    }
}

/* Very small phones */
@media (max-width: 360px) {

    .mp-products .mp-products__heading {
        font-size: 23px !important;
        line-height: 1.38 !important;
    }
}