@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
    --primary-color: #0b4a4f;
    --secondary-color: #e3f2f1;
    --text-white: #ffffff;
    --text-faded: rgba(255, 255, 255, 0.75);
    --star-color: #ff9900;
}

/* =====================
   BASE / DESKTOP STYLES
   ===================== */
body { font-family: 'Inter', sans-serif; background-color: #fff; margin: 0; padding: 0; }

.mc-wrapper { width: 100%; margin: 0 auto; overflow: hidden; padding: 80px 0; position: relative; }
.mc-viewport { width: 100%; overflow: visible; }

.mc-track { display: flex; align-items: center; transition: transform 0.65s cubic-bezier(0.55, 0, 1, 0.45); will-change: transform; }

.mc-slide { flex-shrink: 0; border-radius: 20px; overflow: hidden; box-sizing: border-box; transition: opacity 0.65s cubic-bezier(0.55, 0, 1, 0.45); position: relative; height: 400px; }
.mc-slide.active { background: var(--primary-color); box-shadow: 0 25px 60px rgba(11, 74, 79, 0.25); display: flex; align-items: center; padding: 45px 50px; color: var(--text-white); z-index: 2; min-height: 471px; opacity: 1 !important; }
.mc-slide.active .a-content, .mc-slide.active .a-photo-wrap { animation: mcFadeIn 0.8s ease forwards; }

@keyframes mcFadeIn { from { opacity: 0; } to { opacity: 1; } }

.mc-slide.active .a-photo-wrap { flex-shrink: 0; margin-right: 40px; }
.mc-slide.active .a-photo { width: 295px; height: 301px; border-radius: 50%; border: 2px solid #fff; object-fit: cover; display: block; }
.mc-slide.active .a-content { flex: 1; display: flex; flex-direction: column; justify-content: flex-start; }
.mc-slide.active .a-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 25px; }
.mc-slide.active .a-name { font-size: 36px; font-weight: 600; font-family: 'Archivo'; color: #A1D1C5; }
.mc-stars-container { display: flex; gap: 6px; align-items: center; }
.mc-stars-container svg { width: 24px; height: 24px; flex-shrink: 0; }

.mc-slide.active .a-text { font-size: 24px; color: rgba(255, 255, 255, 0.7); line-height: 1.6; margin-bottom: 35px; font-weight: 400; font-family: 'Archivo'; }
.mc-slide.active .a-date { font-size: 20px; color: #fff; font-weight: 400; margin-top: auto; }

.mc-slide.side { background: var(--secondary-color); height: 380px; display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0.9; position: relative; }
.mc-slide.side .s-photo { width: 200px; height: 200px; border-radius: 50%; object-fit: cover; opacity: 0.4; position: relative; z-index: 1; }

.mc-nav { display: flex; align-items: center; justify-content: center; gap: 60px; margin-top: 50px; }
.mc-arrow { background: none !important; background-color: none !important; border: none; cursor: pointer; color: var(--primary-color); width: 100px; height: 100px; display: flex; align-items: center; justify-content: center; padding: 0; outline: none; transition: all 0.2s; opacity: 0.6; }
.mc-arrow svg { width: 180px; height: 180px; stroke-width: 1.9; color: #0D585F; }
.mc-arrow:hover { opacity: 1; transform: scale(1.1); }
.mc-arrow:disabled { opacity: 0.2; cursor: default; transform: none; }

.mc-dots { display: flex; gap: 35px; align-items: center; }
.mc-dot { width: 25px; height: 25px; border-radius: 50%; background: #b2d4ce; border: none; cursor: pointer; outline: none; padding: 0; transition: all 0.45s cubic-bezier(0.55, 0, 1, 0.45); }
.mc-dot.active { background: var(--primary-color); transform: scale(1.1); }


/* =====================
   LIGHT THEME VARIANT
   ===================== */
.mc-wrapper--light .mc-slide.side {
    background: rgba(6, 32, 43, 0.6);
    opacity: 1;
    position: relative;
    overflow: hidden;
}
.mc-wrapper--light .mc-slide.side .s-photo {
    opacity: 1;
    filter: none;
    position: relative;
    z-index: 1;
}
.mc-wrapper--light .mc-slide.active {
    background: #ffffff;
    box-shadow: 0 25px 60px rgba(6, 32, 43, 0.15);
    color: #06202B;
}
.mc-wrapper--light .mc-slide.active .a-name { color: #06202B; }
.mc-wrapper--light .mc-slide.active .a-text { color: rgba(6, 32, 43, 0.75); }
.mc-wrapper--light .mc-slide.active .a-date { color: #06202B; }
.mc-wrapper--light .mc-slide.active .a-photo { border-color: #06202B; }
.mc-wrapper--light .mc-arrow { opacity: 0.7; }
.mc-wrapper--light .mc-arrow svg { color: #ffffff; }
.mc-wrapper--light .mc-arrow:hover { opacity: 1; }
.mc-wrapper--light .mc-arrow:disabled { opacity: 0.2; }
.mc-wrapper--light .mc-dot { background: rgba(255, 255, 255, 0.35); }
.mc-wrapper--light .mc-dot.active { background: #ffffff; }


/* =====================
   TABLET  (≤ 1366px)
   ===================== */
@media (max-width: 1366px) {
    .a-text { font-size: 14px; line-height: 18px; }
    .mc-slide.active { height: 100%; overflow: auto; }
}

@media (max-width: 1024px) {
    .mc-wrapper { padding: 50px 0; }
    .mc-slide.active { flex-direction: column; align-items: center; text-align: center; padding: 35px 30px; min-height: unset; height: auto; }
    .mc-slide.active .a-photo-wrap { margin-right: 0; margin-bottom: 25px; }
    .mc-slide.active .a-photo { width: 180px; height: 180px; }
    .mc-slide.active .a-top { flex-direction: column; gap: 10px; margin-bottom: 18px; }
    .mc-slide.active .a-name { font-size: 26px; }
    .mc-slide.active .a-text { font-size: 18px; margin-bottom: 20px; }
    .mc-slide.active .a-date { font-size: 16px; }
    .mc-stars-container svg { width: 20px; height: 20px; }
    .mc-slide.side { height: 300px; }
    .mc-slide.side .s-photo { width: 140px; height: 140px; }
    .mc-nav { gap: 35px; margin-top: 35px; }
    .mc-arrow { width: 80px; height: 80px; }
    .mc-arrow svg { width: 140px; height: 140px; }
    .mc-dots { gap: 22px; }
    .mc-dot { width: 20px; height: 20px; }
}


/* =====================
   MOBILE  (≤ 600px)
   ===================== */
@media (max-width: 600px) {

    /*
     * THE KEY FIX:
     * .mc-wrapper has overflow:hidden in base styles — that clips the card on mobile.
     * Override it to visible here. The card is sized to 100% viewport width by JS
     * so nothing bleeds outside anyway.
     */
    .mc-wrapper {
        padding: 30px 0;
        overflow: visible !important;
    }

    .mc-viewport {
        overflow: visible;
    }

    /* Side slides invisible but still in DOM so translateX math stays correct */
    .mc-slide.side {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none;
    }

    /* Active card: fills full width */
    .mc-slide.active {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 28px 16px;
        min-height: unset;
        height: auto;
        border-radius: 16px;
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
    }

    .mc-slide.active .a-photo-wrap { margin-right: 0; margin-bottom: 18px; }
    .mc-slide.active .a-photo { width: 110px; height: 110px; }
    .mc-slide.active .a-top { flex-direction: column; gap: 8px; margin-bottom: 14px; }
    .mc-slide.active .a-name { font-size: 20px; }
    .mc-slide.active .a-text { font-size: 15px; line-height: 1.6; margin-bottom: 16px; }
    .mc-slide.active .a-date { font-size: 13px; }
    .mc-stars-container svg { width: 18px; height: 18px; }

    .mc-nav { gap: 20px; margin-top: 24px; }
    .mc-arrow { width: 60px; height: 60px; }
    .mc-arrow svg { width: 100px; height: 100px; }
    .mc-dots { gap: 14px; }
    .mc-dot { width: 16px; height: 16px; }
}