/* Matichon Oil Price — values overlaid on oil-price.webp
 *
 * The price grid is positioned over the table band of the background image.
 * If the values don't line up with the baked-in rows, tune the CSS variables
 * on .mt-oil-price below (all are % of the card so they scale responsively).
 */

.mt-oil-price-container {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Sarabun', 'Noto Sans Thai', -apple-system, sans-serif;
}

.mt-oil-price {
    /* --- tuning knobs (match to oil-price.jpg) --- */
    --oil-date-top: 13%;
    /* vertical centre of the date line */
    --oil-grid-top: 24.5%;
    /* top of the first fuel row band  */
    --oil-grid-left: 39.5%;
    /* left edge of the "วันนี้" column */
    --oil-grid-width: 55%;
    /* spans วันนี้ + พรุ่งนี้ + ส่วนต่าง */
    --oil-grid-height: 63.7%;
    /* bottom of the last fuel row band */
    --oil-value-size: clamp(11px, 3.4vw, 18px);
    --oil-date-size: clamp(12px, 4vw, 20px);

    position: relative;
    width: 100%;
    max-width: 350px;
    line-height: 1;
}

.mt-oil-price__bg {
    display: block;
    width: 100%;
    height: auto;
}

/* Date line under the title */
.mt-oil-price__date {
    position: absolute;
    top: var(--oil-date-top);
    left: 0;
    width: 100%;
    text-align: center;
    font-family: "Sarabun", san-serif;
    font-size: var(--oil-date-size);
    font-weight: 400;
    color: #ffffff;
    transform: translateY(-50%);
}

/* 7 rows × 3 columns grid overlaid on the table band */
.mt-oil-price__grid {
    position: absolute;
    top: var(--oil-grid-top);
    left: var(--oil-grid-left);
    width: var(--oil-grid-width);
    height: var(--oil-grid-height);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(7, 1fr);
    align-items: center;
    justify-items: center;
}

.mt-oil-price__cell {
    text-align: center;
    font-size: var(--oil-value-size);
    font-weight: 500;
    color: #1f2937;
    white-space: nowrap;
}

/* Tomorrow value colour, driven by the diff sign */
.mt-oil-price__cell.is-up {
    color: #16a34a;
    /* green — price up tomorrow */
}

.mt-oil-price__cell.is-down {
    color: #dc2626;
    /* red — price down tomorrow */
}

/* Empty state */
.mt-oil-price--empty {
    max-width: 350px;
    padding: 24px 16px;
    text-align: center;
    color: #9ca3af;
    font-size: 13px;
    background: #0f172a;
    border-radius: 8px;
}

@media (min-width: 728px) {
    .mt-oil-price {
        --oil-value-size: clamp(11px, 3.4vw, 12px);
        --oil-date-size: clamp(12px, 4vw, 14px);
    }

}

@media (min-width: 1024px) {
    .mt-oil-price {
        --oil-value-size: clamp(11px, 3.4vw, 15px);
        --oil-date-size: clamp(12px, 4vw, 18px);
    }

}

@media (min-width: 1280px) {
    .mt-oil-price {
        --oil-value-size: clamp(11px, 3.4vw, 18px);
        --oil-date-size: clamp(12px, 4vw, 20px);
    }

}