/* Country × month climate grid: photo card per country, tall coloured cells.
   Shared by the monsoon heatmap (/Monsoon/Heatmap) and the travel guide (/best-time). */

/* ── Legend ── */
.hm-legend { gap: 10px; font-size: .86rem; }
.hm-pill { display: inline-flex; align-items: center; gap: 4px; padding: 5px 13px;
           background: #f4f6f5; border: 1px solid #e3e7e5; border-radius: 999px; }
.hm-chip { display: inline-block; width: 14px; height: 14px; border-radius: 4px; }
.hm-now-dot { display: inline-block; width: 14px; height: 14px; border-radius: 4px;
              border: 2px solid #37474f; background: #fff; }

/* ── Grid ── */
.hm-scroll { overflow-x: auto; padding: 4px 2px 8px; }
.hm-table { border-collapse: separate; border-spacing: 5px; }
.hm-table th.hm-month { min-width: 58px; text-align: center; font-size: .8rem; font-weight: 700;
                        text-transform: uppercase; letter-spacing: .05em; color: #78909c;
                        padding: 6px 2px; }
.hm-table th.hm-month-now { background: #37474f; color: #fff; border-radius: 999px; }
.hm-table th.hm-month-click { cursor: pointer; }
.hm-table th.hm-month-click:hover { background: #cfd8dc; }

.hm-country { padding: 0 8px 0 0; position: sticky; left: 0; z-index: 2; background: #fff; }
.hm-country-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end;
                   width: 210px; height: 76px; padding: 8px 12px; border-radius: 12px; overflow: hidden;
                   background: #78909c center / cover no-repeat; text-decoration: none !important;
                   box-shadow: 0 3px 10px rgba(0,0,0,.18); transition: transform .15s ease, box-shadow .15s ease; }
.hm-country-card::before { content: ""; position: absolute; inset: 0;
                           background: linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.35) 60%, rgba(0,0,0,.1) 100%); }
.hm-country-card:hover { transform: translateX(3px); box-shadow: 0 6px 16px rgba(0,0,0,.28); }
.hm-country-name { position: relative; color: #fff; font-weight: 800; font-size: 1.08rem; line-height: 1.15;
                   text-shadow: 0 1px 4px rgba(0,0,0,.55); }
.hm-country-sub  { position: relative; color: rgba(255,255,255,.9); font-size: .74rem; font-weight: 600; }

.hm-cell { width: 58px; height: 76px; border-radius: 12px; text-align: center; vertical-align: middle;
           font-size: 1.25rem; cursor: default; padding: 0;
           box-shadow: inset 0 -3px 0 rgba(0,0,0,.08);
           transition: transform .12s ease, box-shadow .12s ease; }
.hm-cell span { filter: drop-shadow(0 1px 1px rgba(0,0,0,.25)); }
.hm-cell:hover { transform: scale(1.16); box-shadow: 0 8px 20px rgba(0,0,0,.3);
                 position: relative; z-index: 3; }
.hm-cell.hm-now { box-shadow: inset 0 0 0 3px #263238; }
.hm-cell.hm-now:hover { box-shadow: inset 0 0 0 3px #263238, 0 8px 20px rgba(0,0,0,.3); }
/* A cell that is a link fills the whole pill */
.hm-cell a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
             text-decoration: none !important; cursor: pointer; }

@media (max-width: 767.98px) {
    .hm-country-card { width: 150px; height: 64px; }
    .hm-country-name { font-size: .95rem; }
    .hm-cell { width: 46px; height: 64px; font-size: 1.05rem; }
    .hm-table th.hm-month { min-width: 46px; }
}

/* ── Floating tooltip ── */
#hm-tip { position: fixed; z-index: 4000; max-width: 320px; pointer-events: none;
          background: #263238; color: #eceff1; padding: 10px 14px; border-radius: 10px;
          box-shadow: 0 10px 30px rgba(0,0,0,.35); font-size: .82rem; line-height: 1.45; }
#hm-tip-title { font-weight: 700; font-size: .88rem; }
#hm-tip-verdict { margin: 2px 0 4px; font-weight: 600; }
#hm-tip-verdict.v-good { color: #81c784; }
#hm-tip-verdict.v-bad  { color: #ef9a9a; }
#hm-tip-verdict.v-none { color: #b0bec5; }
#hm-tip-desc:empty { display: none; }