/* =================================================================== LIVE PREP section css =================================================================== */
.live-prep {
    padding-block: var(--sectionGap) 0;

    & .live-prep__panel {
        display: grid;
        grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
        align-items: center;
        gap: var(--sp50);
        padding: var(--sp60);
        background: var(--surface-1);
        border: 1px solid var(--line);
        border-radius: var(--r-md);
    }

    & .live-prep__intro {
        display: flex; flex-direction: column;
        gap: var(--sp12);
        & p { font-size: var(--f18); }
    }

    & .live-prep__title { font-size: var(--f40); color: var(--black); }

    & .live-prep__row {
        display: grid;
        grid-template-columns: 96px 1fr auto;
        align-items: center;
        gap: var(--sp25);
        padding: var(--sp25);
        background: var(--white);
        border: 1px solid var(--line);
        border-radius: var(--r-md);
        box-shadow: var(--shadow-sm);
        transition: var(--transition);

        &:hover { box-shadow: var(--shadow-sm); transform: translateY(-4px); }
        &:hover .live-prep__go { background: var(--primary); color: var(--white); }
    }

    & .live-prep__cover {
        width: 96px; height: 110px;
        object-fit: contain;
        filter: drop-shadow(0 10px 14px rgba(0, 12, 52, .2));
    }

    & .live-prep__txt { display: flex; flex-direction: column; gap: var(--sp4); }

    & .live-prep__tag { font-size: var(--f13); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--primary); }

    & .live-prep__name { font-size: var(--f24); font-weight: 600; letter-spacing: -.01em; color: var(--black); }

    & .live-prep__desc { font-size: var(--f15); line-height: 1.5; color: var(--body); }

    & .live-prep__go {
        display: grid; place-items: center;
        width: 52px; height: 52px;
        background: var(--blue-50);
        border-radius: var(--r-full);
        color: var(--primary);
        transition: var(--transition);
    }
}

/* =================================================================== RESPONSIVE =================================================================== */
@media (max-width: 991.98px) {
    .live-prep {
        & .live-prep__panel { grid-template-columns: 1fr; padding: var(--sp40); }
    }
}

@media (max-width: 575.98px) {
    .live-prep {
        & .live-prep__panel { padding: var(--sp30) var(--sp20); }
        & .live-prep__row { grid-template-columns: 64px 1fr; gap: var(--sp15); padding: var(--sp20) var(--sp15); }
        & .live-prep__cover { width: 64px; height: 76px; }
        & .live-prep__go { display: none; }
    }
}