/* ================= LARGE DESKTOP ================= */
@media screen and (min-width: 1400px) {

    .cards-section,
    .cards-wrap {
        grid-template-columns: repeat(4, 1fr);
        max-width: 1400px;
        margin: auto;
    }

    .cards-calc {
        height: 190px;
    }
}



/* ================= TABLET / 1024 ================= */
@media screen and (max-width: 1024px) and (min-width: 769px) {

    .cards-section,
    .cards-wrap {
        grid-template-columns: repeat(3, 1fr);
        gap: 18px;
        padding: 20px;
    }

    .cards-calc {
        height: 170px;
    }

    .dbt-title {
        font-size: 13px;
    }

    .dbt-number {
        font-size: 16px;
    }
}



/* ================= MOBILE / SMALL TABLET ================= */
@media screen and (max-width: 768px) {

    /* Header */
    .dbt-banner {
        flex-direction: column;
        text-align: center;
        padding: 10px;
    }

    .dbt-banner-left {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .dbt-banner img {
        max-width: 70px;
    }

    .dbt-banner-dept h1 {
        font-size: 14px;
    }

    .dbt-banner-dept h2 {
        font-size: 12px;
    }

    #clock {
        font-size: 12px;
        text-align: center;
    }

    /* Cards */
    .cards-section,
    .cards-wrap {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
        padding: 15px;
    }

    .cards-calc {
        height: 150px;
        text-align: center;
    }

    .dbt-more {
        text-align: center;
    }

    .dbt-img {
        width: 60px;
        margin: 5px auto;
    }

    /* Tooltip */
    .extra-info {
        top: 25px;
        left: -130px;
        width: 180px;
        font-size: 11px;
    }

    /* Footer */
    .footer-bottom,
    .footer-top-inner {
        flex-direction: column;
        text-align: center;
    }

    .copyright-text {
        margin-left: 0 !important;
        font-size: 12px;
    }

    .footer-bottom img {
        margin-top: 8px;
    }
}



/* ================= EXTRA SMALL MOBILE ================= */
@media screen and (max-width: 480px) {

    .cards-section,
    .cards-wrap {
        grid-template-columns: 1fr;
        padding: 10px;
    }

    .cards-calc {
        height: 145px;
        padding: 12px;
    }

    .dbt-title {
        font-size: 13px;
    }

    .dbt-number {
        font-size: 15px;
    }

    .dbt-more {
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .cards-wrap {
        grid-template-columns: 1fr !important;
        gap: 18px;
        padding: 16px;
    }

    .card {
        width: 100%;
    }
}

/* 425px and below – ensure 1 per row */
@media (max-width: 480px) {
    .cards-wrap {
        grid-template-columns: 1fr;
    }
}

/* 768px – 2 cards per row */
@media (min-width: 768px) {
    .cards-wrap {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* 1024px – 3 cards per row */
@media (min-width: 1024px) {
    .cards-wrap {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ---------- small phones: ensure 1-per-row remains ---------- */
@media (max-width: 479px) {
  .cards-wrap { gap: 16px; }
  .card { min-height: 130px; max-width: 100%; }
}

/* ---------- tablet / small-desktop: 2 cards per row ----------- */
/* Use min-width 768px to match your target dimension */
@media (min-width: 768px) and (max-width: 1023px) {
  .cards-wrap {
    /* each column will be at least 260px but can grow to fill space */
    grid-template-columns: repeat(2, minmax(260px, 1fr));
    gap: 24px;
    justify-items: stretch;   /* make cards stretch to fill column width */
  }

  .card {
    max-width: none;          /* allow card to fill column */
    width: 100%;
    min-height: 160px;
  }
}

/* ---------- desktop: 3 columns ---------- */
@media (min-width: 1024px) {
  .cards-wrap {
    grid-template-columns: repeat(3, minmax(260px, 1fr));
    gap: 26px;
  }
}