/* ============================
   MATCH CENTER – BASE LAYOUT
   ============================ */

.mc-wrapper {
    background: #F2F8FF;
}

/* ============================
   HERO SECTION
   ============================ */

.mc-hero-title {
    margin-bottom: 20px;
}

.heroinnerpages {
    clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%);
    background: url('../assets/images/herobg.png') no-repeat;
    background-size: 100% 100%;
    background-position: center;
}

.mc-hero {
    padding: 70px 0 100px;
    text-align: center;
}

.mc-hero-inner {
    max-width: 800px;
    margin: 0 auto;
}

/* Hover for the FIRST button only */
.mc-hero .filledbtn:hover:not(.viewdealbtn-btn) {
    color: #053A81 !important;
}

/* ============================
   SECOND BUTTON – NO HOVER
   ============================ */

.viewdealbtn a {
    display: inline-block !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

.viewdealbtn a:hover {
    color: #ffffff !important;
    text-decoration: none !important;
}

.viewdealbtn button,
.viewdealbtn button:hover {
    color: #ffffff !important;
    background: none !important;
    border-color: #ffffff !important;
    box-shadow: none !important;
    outline: none !important;
    transform: none !important;
    padding: 6px 14px !important;
}

/* ============================
   INTRO – NOW USING CONTAINER
   ============================ */

.mc-intro {
    padding: 30px 0 10px;
}

.mc-intro p {
    margin-bottom: 16px !important;
    line-height: 1.6;
}

/* ============================
   LAYOUT: MAIN + SIDEBAR
   ============================ */

.mc-main-with-sidebar {
    padding: 40px 0;
}

.mc-layout {
    display: flex;
    gap: 30px;
}

.mc-main-column {
    flex: 0 0 62%;
    max-width: 62%;
}

.mc-sidebar {
    flex: 0 0 38%;
    max-width: 38%;
}

/* ============================
   SECTIONS
   ============================ */

.mc-section {
    margin-bottom: 40px;
}

/* ============================
   SHORT TEXT / TOP10 / LONG TEXT
   NOW USING .container WIDTH
   ============================ */

.mc-short-text .content,
.mc-section-intro .content,
.mc-seo-text {
    line-height: 1.6;
}

.mc-short-title,
.mc-section-title {
    margin-bottom: 20px;
}

/* ============================
   MATCH CARDS – NEW SYSTEM
   ============================ */

.mc-matches-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 20px;
}

/* Strong, balanced day colors */
.mc-match-card.day-1 { background: #E3ECF7; }
.mc-match-card.day-2 { background: #DFF3F0; }
.mc-match-card.day-3 { background: #E6F4E8; }
.mc-match-card.day-4 { background: #EEE7F7; }
.mc-match-card.day-5 { background: #E0EBFF; }
.mc-match-card.day-6 { background: #D8F2F0; }
.mc-match-card.day-7 { background: #F9E6DA; }

.mc-match-card {
    border: 1px solid #ccc;
    border-radius: 12px;
    padding: 18px;
    margin-bottom: 10px;
    transition: 0.2s;
}

/* ============================
   TITLE (TEAM NAMES)
   ============================ */

.mc-card-title {
    margin-bottom: 15px;
    color: #000814;
    font-size: 22px;
    font-weight: 800;
}

/* ============================
   INNER BOX
   ============================ */

.mc-card-inner {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 12px;
    margin-bottom: 15px;
    transition: 0.2s;
}

.mc-card-inner:hover {
    background: #fdf7e6;
    border-color: #f0c14b;
}

/* ============================
   ROWS (DATE / TIME / VENUE / TOURNAMENT)
   ============================ */

.mc-card-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 16px;
    font-weight: 600;
}

.mc-card-row strong {
    color: #b33f00;
    font-weight: 700;
}

.mc-card-row span {
    color: #222;
    font-weight: 600;
}

.ibm-match-card-datetime {
    font-size: 16px !important;
    font-weight: 600 !important;
}

.mc-icon {
    font-size: 18px;
    flex-shrink: 0;
}

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

.mc-card-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.mc-brand-btn,
.mc-details-btn {
    background: #0023a7;
    color: #fff !important;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.2s;
}

.mc-brand-btn:hover,
.mc-details-btn:hover {
    background: #fcc50a;
    color: #0023a7 !important;
}

.mc-event-btn {
    background: #ff8c00;
    color: #fff !important;
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid #cc6f00;
    transition: 0.2s;
}

.mc-event-btn:hover {
    background: #fcc50a;
    color: #0023a7 !important;
}

/* ============================
   BRANDS SECTION
   ============================ */

.mc-brands-table-wrapper {
    margin-top: 20px;
}

/* ============================
   RESPONSIVE
   ============================ */

@media (max-width: 900px) {

    .mc-layout {
        flex-direction: column;
    }

    .mc-main-column,
    .mc-sidebar {
        max-width: 100%;
        flex: 0 0 100%;
    }

    .mc-sidebar {
        display: none;
    }

    .mc-matches-cards {
        grid-template-columns: 1fr;
    }
}

/* ============================
   BREADCRUMB – LAST ITEM WHITE
   ============================ */

body.page-template-match-center .breadcrumb li:last-child,
body.page-template-match-center .breadcrumb li:last-child *,
body.page-template-match-center .breadcrumb li:last-child a {
    color: #ffffff !important;
}

/* ============================================
   FIX: SHORT TEXT + TOP10 TEXT FULL CONTAINER WIDTH
   ============================================ */

/* short text */
.mc-short-text .content {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0;
}

/* top-10 intro text */
.mc-section-intro .content {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0;
}

/* Breadcrumb – last item white on hero background */
.heroinnerpages .ibm-breadcrumb li:last-child {
    color: #ffffff !important;
}