/**
 * Deposit Bonus Terms Section
 *
 * @package Bonusovekody
 * @since 2.0.0
 */

/* ============================================
 * HEADER - TITLE, DESCRIPTION AND IMAGE
 * ============================================ */

.deposit-bonus-terms__header {
    display: grid;
    grid-template-columns: 2fr 0.7fr;
    gap: var(--space-7);
    margin-bottom: var(--space-7);
}

.deposit-bonus-terms__header-content {
    display: flex;
    flex-direction: column;
    max-width: 656px;
}

.deposit-bonus-terms__title {
    margin-top: 33px;
    margin-bottom: var(--space-6);
}

.deposit-bonus-terms__highlight {
    color: #2D7AE9;
}

.deposit-bonus-terms__header-image {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
}

.deposit-bonus-terms__header-image img {
    max-width: 100%;
    max-height: 240px;
    width: auto;
    height: auto;
}

.deposit-bonus-terms .bookmakerComparisonTableWrapper {
    margin: 0;
}

/* ============================================
 * TWO-COLUMN LAYOUT - REVERSED
 * ============================================ */

.deposit-bonus-terms__layout {
    display: grid;
    grid-template-columns: 2fr 0.7fr;
    gap: var(--space-7);
}

/* ============================================
 * MAIN CONTENT (Left Column - Wider)
 * ============================================ */

.deposit-bonus-terms__main {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

/* ============================================
 * SIDEBAR (Right Column - Narrower)
 * ============================================ */

.deposit-bonus-terms__sidebar {
    display: flex;
    flex-direction: column;
}

.deposit-bonus-terms-card {
    position: relative;
    background: var(--blue-500);
    border-radius: var(--radius-md);
    padding: var(--space-7);
    color: var(--white);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

.deposit-bonus-terms-card__title {
    font-size: var(--font-size-h2);
    line-height: var(--line-height-h2);
    color: var(--white);
    margin-bottom: 0;
}

.deposit-bonus-terms-card__description {
    color: #EAF2FD;
    font-family: Rubik, 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: var(--font-size-base);
    font-style: normal;
    font-weight: var(--font-weight-normal);
    line-height: var(--line-height-base);
    margin: 0;
}

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

@media (max-width: 1024px) {
    .deposit-bonus-terms__layout {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .deposit-bonus-terms__header {
        gap: 16px;
        margin-bottom: 0;
    }   

    .deposit-bonus-terms__layout .bookmakerComparisonTableWrapper {
        margin: 0;
    }
}

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

@media (max-width: 767px) {
    .deposit-bonus-terms__header {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .deposit-bonus-terms__title {
        margin-top: 0;
        margin-bottom: 16px;
    }

    .deposit-bonus-terms__header-image {
        justify-content: center;
        margin-bottom: 16px;
    }

    .deposit-bonus-terms__layout {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .deposit-bonus-terms__description {
        margin-bottom: 0;
    }

    .deposit-bonus-terms__header-image img {
        max-height: 200px;
    }
}