/* Tobor Explore More Widget — base defaults match Figma node 1768:24873 exactly. */

.tobor-explore {
    background-color: #f8fafc;
    padding: 64px 96px;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.tobor-explore__header {
    display: flex;
    gap: 17px;
    align-items: flex-start;
    width: 100%;
}

.tobor-explore__title {
    flex: 1;
    min-width: 0;
    margin: 0;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 48px;
    font-weight: 700;
    line-height: 56px;
    color: #171717;
}

.tobor-explore__intro {
    flex: 0 0 608px;
    width: 608px;
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 17px;
    align-items: flex-start;
}

.tobor-explore__intro-text {
    margin: 0;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
    color: #171717;
}

.tobor-explore__link {
    display: inline-flex;
    gap: 5px;
    align-items: center;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #506ccd;
    text-decoration: none;
    white-space: nowrap;
}

.tobor-explore__link:hover {
    color: #506ccd;
}

.tobor-explore__link img {
    width: 16px;
    height: 16px;
    display: block;
}

/* Cards */

.tobor-explore__cards {
    display: flex;
    gap: 16px;
    align-items: stretch;
    width: 100%;
    min-height: 272px;
}

.tobor-explore__banner {
    flex: 0 0 auto;
    width: 70%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 32px 64px;
    border-radius: 16px;
    background-color: #000607;
    background-size: cover;
    background-position: center;
    overflow: hidden;
}

.tobor-explore__banner::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background-image:
        linear-gradient(131deg, rgb(0, 0, 0) 26.531%, rgba(0, 0, 0, 0) 63.916%),
        linear-gradient(76deg, rgb(0, 0, 0) 25.055%, rgba(0, 0, 0, 0) 59.642%);
    pointer-events: none;
}

.tobor-explore__banner-content {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}

.tobor-explore__banner-title {
    margin: 0;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 28px;
    color: #ffffff;
}

.tobor-explore__banner-desc {
    margin: 0;
    max-width: 434px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #ffffff;
}

.tobor-explore__banner-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    /* Container gap is 8px; +8px = 16px between the body copy and the CTA. */
    margin-top: 8px;
    padding: 12px 20px;
    /* 2px border matches the outlined buttons' height. */
    border: 2px solid #99c300;
    background-color: #99c300;
    border-radius: 128px;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #171717;
    text-decoration: none;
    white-space: nowrap;
}

.tobor-explore__banner-btn:hover {
    background-color: #7da300;
    color: #171717;
}

/* Side cards */

.tobor-explore__side {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tobor-explore__card {
    flex: 1;
    min-height: 0;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 16px;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
}

.tobor-explore__card--brand {
    background-color: #506ccd;
}

.tobor-explore__card--action {
    background-color: #99c300;
}

.tobor-explore__card-title {
    margin: 0 0 4px 0;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
}

.tobor-explore__card-link {
    display: inline-flex;
    gap: 5px;
    align-items: center;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    text-decoration: none;
    white-space: nowrap;
}

.tobor-explore__card--brand .tobor-explore__card-title,
.tobor-explore__card--brand .tobor-explore__card-link {
    color: #ffffff;
}

.tobor-explore__card--action .tobor-explore__card-title,
.tobor-explore__card--action .tobor-explore__card-link {
    color: #171717;
}

.tobor-explore__card-link img {
    width: 16px;
    height: 16px;
    display: block;
}

.tobor-explore__card-icon {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 80px;
    height: 80px;
    pointer-events: none;
    z-index: 0;
}

/* Keep the copy above the decorative watermark icon. */
.tobor-explore__card-title,
.tobor-explore__card-link {
    position: relative;
    z-index: 1;
}

.tobor-explore__card-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Responsive */

/* Tablet — Figma 1639:16286 (768px frame): header stacks into one column,
   cards stay side by side with a fixed 356px side stack. */
@media (max-width: 1024px) {
    .tobor-explore {
        padding: 64px 32px;
    }

    .tobor-explore__header {
        flex-direction: column;
        gap: 17px;
    }

    .tobor-explore__title {
        flex: 0 0 auto;
        width: 100%;
        font-size: 40px;
        line-height: 48px;
    }

    .tobor-explore__intro {
        flex: 0 0 auto;
        width: 100%;
        max-width: 608px;
    }

    .tobor-explore__banner {
        flex: 1 1 auto;
        width: auto;
        min-width: 0;
        min-height: 272px;
        padding: 32px 16px;
    }

    /* Tablet/mobile use a flat 50% scrim instead of the desktop gradients. */
    .tobor-explore__banner::before {
        background-image: none;
        background-color: rgba(0, 0, 0, 0.5);
    }

    .tobor-explore__side {
        flex: 0 0 356px;
        width: 356px;
        min-height: 272px;
    }

    .tobor-explore__card {
        min-height: 128px;
    }
}

/* Mobile — Figma 1639:16380 (390px frame): everything stacked full width. */
@media (max-width: 767px) {
    .tobor-explore {
        padding: 32px 16px;
    }

    .tobor-explore__title {
        font-size: 32px;
        line-height: 40px;
    }

    .tobor-explore__intro {
        max-width: none;
    }

    .tobor-explore__cards {
        flex-direction: column;
    }

    .tobor-explore__banner {
        flex: 0 0 auto;
        width: 100%;
    }

    .tobor-explore__side {
        flex: 0 0 auto;
        width: 100%;
    }

    /* Shrink the watermark icon and fade it into the background so it no
       longer overlaps the card copy on narrow screens (task 90). */
    .tobor-explore__card-icon {
        width: 48px;
        height: 48px;
        right: 12px;
        opacity: 0.35;
    }
}

/* Wide screens: content capped at design width. */
.tobor-explore__header,
.tobor-explore__cards {
    width: 100%;
    max-width: 1248px;
    margin-left: auto;
    margin-right: auto;
}