/**
 * CMC Forex / Markets Grid  [cmc_forex_grid]
 * Grid of TradingView mini-symbol-overview cards.
 */

/* ── Grid wrapper ───────────────────────────────────────────── */

.cmc-forex-grid {
    display: grid;
    gap: 4px;
    width: 100%;
    direction: ltr;
}

.cmc-forex-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
.cmc-forex-grid--cols-3 { grid-template-columns: repeat(3, 1fr); }
.cmc-forex-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.cmc-forex-grid--cols-1 { grid-template-columns: 1fr; }

/* ── Individual card ────────────────────────────────────────── */

.cmc-forex-card {
    overflow: hidden;
    display: block;
    min-height: 150px;
}

.cmc-forex-card .tradingview-widget-container,
.cmc-forex-card .tradingview-widget-container__widget {
    width: 100% !important;
    height: 100% !important;
}

/* ── Responsive: tablet → 2 columns ────────────────────────── */

@media (max-width: 960px) {
    .cmc-forex-grid--cols-4,
    .cmc-forex-grid--cols-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ── Responsive: mobile → 1 column ─────────────────────────── */

@media (max-width: 520px) {
    .cmc-forex-grid--cols-4,
    .cmc-forex-grid--cols-3,
    .cmc-forex-grid--cols-2 {
        grid-template-columns: 1fr;
    }
}