/* ═══════════════════════════════════════════════════════════════════════════════
   Public Heatmap Component — Full width, creative title
   ═══════════════════════════════════════════════════════════════════════════════ */

.public-heatmap {
    padding: 0;
    margin-top: 24px;
}
.public-heatmap__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 6px;
    padding: 20px 14px 14px;
}
.public-heatmap__emoji img { display: block; }
.public-heatmap__title {
    font-size: 20px;
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.03em;
    line-height: 1.2;
    background: linear-gradient(135deg, var(--ink) 40%, var(--accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.public-heatmap__subtitle {
    font-size: 11px;
    color: var(--muted);
    margin: 0;
    font-weight: 500;
}
.public-heatmap__subtitle strong {
    color: var(--accent);
    font-weight: 700;
}
.public-heatmap__map {
    width: 100%;
    height: 240px;
    overflow: hidden;
    background: var(--surface-2);
    border-top: 1px solid var(--line);
}

/* Tablet */
@media (min-width: 768px) {
    .public-heatmap__header { padding: 28px 20px 16px; }
    .public-heatmap__map { height: 300px; }
    .public-heatmap__title { font-size: 24px; }
}

/* Desktop */
@media (min-width: 1024px) {
    .public-heatmap__map { height: 360px; }
    .public-heatmap__title { font-size: 26px; }
}