/* AuDHD batch — vendor page heroes
 *
 * Replaces the "bare metric / vendor name" hero pattern with
 * "headline + state subtitle". Tado's hero stays unchanged; the rest
 * (Unifi, HeatPump, Pool, Water, Solar, Energy) now use a phrase-based
 * headline with a live state line below.
 *
 * The original hero-title class scales metric values to 64px+; for the
 * new pattern we want the headline to read as a phrase, not a number.
 * .hero-title without the legacy --solar / --pool / --heatpump modifiers
 * uses calmer phrase-typography.
 *
 * Subtitle gets slightly more weight than the legacy version so the
 * state line is the second-loudest thing on the page (after the
 * headline) — important for AuDHD scanning: the user wants the
 * device's current state, not its name.
 */

/* Headline — phrase-style. Smaller than the bare-metric variant the
   page-specific modifiers used to set, so a multi-word phrase doesn't
   wrap awkwardly on 1280px desktops. */
.hero .hero-title:not(.hero-title--solar):not(.hero-title--pool):not(.hero-title--heatpump) {
    font-size: clamp(1.7rem, 2.4vw, 2.4rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
}

/* Subtitle — give the state line a bit more weight than the legacy
   "describe what this page does" subtitle. Not bold, but readable. */
.hero .hero-subtitle {
    font-weight: 500;
    color: var(--color-text-muted);
    line-height: 1.4;
}

/* MELCloud schedule rows — fixed Ma..Zo positions (T1.4 AuDHD batch).
   Backend may emit days in any order; the visual order must stay
   stable across rows so users keep their spatial map of "Tuesday is
   always the second cell". Inactive slots render as muted placeholders
   to preserve column alignment. */
.schedule-days--fixed {
    display: inline-flex;
    gap: 0.35rem;
    align-items: center;
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' 1;
}

.schedule-day-slot {
    display: inline-block;
    min-width: 1.4rem;
    text-align: center;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--color-text-faint);
    opacity: 0.55;
    letter-spacing: 0.04em;
}

.schedule-day-slot--active {
    color: var(--color-text);
    opacity: 1;
    font-weight: 700;
}