/* ============================================================
   Arquivo: filex/css/index.css
   Só o específico do index (market summary + grid wrapper).
   As partes de ofertas vivem em ofertas.css.
   ============================================================ */

/* ---------- MARKET SUMMARY ---------- */
.market-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    padding: 1rem 1.25rem;
    box-shadow: var(--shadow-border);
}

.market-pair {
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.025em;
    color: var(--color-muted);
}

.market-price-row {
    margin-top: 0.25rem;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-family: var(--font-mono);
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.market-price-row .unit {
    font-family: var(--font-sans);
    font-size: 0.875rem;
    color: var(--color-muted);
}

.market-variation {
    font-size: 0.875rem;
    color: var(--color-buy);
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
}

.market-detail { margin-top: 0.25rem; font-size: 0.75rem; color: var(--color-muted); }

/* ---------- GRID WRAPPER ---------- */
.grid-main {
    margin-top: 1.5rem;
    display: grid;
    min-width: 0;
    align-items: start;
    gap: 1.5rem;
}

/* ---------- RESPONSIVO MOBILE (só market-summary) ---------- */
@media (max-width: 1023px) {
    .main { width: 100%; max-width: 100%; padding: 0; }

    .market-summary {
        display: block;
        margin: 0 20px 20px;
        padding: 22px;
        border-radius: 24px;
    }

    .market-pair { font-size: 15px; letter-spacing: 0.02em; text-transform: none; font-weight: 500; }

    .market-price-row {
        margin-top: 6px;
        font-size: 34px;
        gap: 10px;
        flex-wrap: wrap;
    }

    .market-price-row .unit { font-size: 16px; }
    .market-variation { font-size: 17px; }
    .market-detail { font-size: 13px; margin-top: 6px; }

    .grid-main { display: block; margin-top: 0; }
}

@media (max-width: 640px) {
    .market-summary { margin: 0 18px 18px; padding: 20px; border-radius: 22px; }
    .market-price-row { font-size: 32px; }
}

@media (max-width: 480px) {
    .market-summary { margin: 0 16px 16px; padding: 18px; }
    .market-price-row { font-size: 30px; }
}

@media (max-width: 380px) {
    .market-summary {
        margin: 0 14px 14px;
        padding: 16px;
        border-radius: 20px;
        margin-top: 25px;
    }
    .market-price-row { font-size: 27px; }
    .market-price-row .unit { font-size: 14px; }
    .market-variation { font-size: 15px; }
    .market-detail { font-size: 12px; }
}

/* ---------- DESKTOP ---------- */
@media (min-width: 1024px) {
    .grid-main { grid-template-columns: minmax(0, 1fr); }
}