/* ==========================
   Stat Band
   ========================== */

.stat-band {
    flex-shrink: 0; /* main is a flex column - never compress this, .cards absorbs extra space instead */

    background: var(--color-secondary);
    color: #fff;
}

.stat-band-inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);

    width: min(2200px, calc(100% - 4rem));
    margin: 0 auto;
}

/* ==========================
   Info Panels
   ========================== */

.info-panel {
    display: flex;
    flex-direction: column;
    /* Centers the icon/title/text as a block within the panel's third
       of the row, rather than leaving it flush against the divider
       with all the leftover space trailing off to one side - the text
       itself stays left-aligned (unaffected by align-items), just the
       block as a whole sits centered. The weather panel opts back out
       (see below), since its own content is meant to stay left-flush. */
    align-items: center;

    padding: 1.75rem 2rem;

    border-left: 1px solid rgb(255 255 255 / 12%);
}

.weather-panel {
    /* Matches the other panels' centered treatment (see .info-panel
       above) - stretch had the header/temp/grid/link fill the full
       grid column width, which left the weather-grid's own compact
       2-column content sitting flush left with a wide gap of empty
       column trailing off to its right. */
    align-items: center;
}

/* The weather panel is a grid item wrapped in its own #weather-panel
   div (see home.html - its content is swapped in over fetch(), so it
   needs a stable element to fetch into), which puts its .info-panel
   one level deeper than the loop-rendered panels' direct-child
   .info-panel. Only the visually-first grid column should lose its
   border, so this covers both shapes rather than assuming .info-panel
   is always a direct child. */
.stat-band-inner > .info-panel:first-child,
.stat-band-inner > :first-child .info-panel {
    border-left: none;
}

.info-panel-icon {
    display: block;

    margin-bottom: 0.6rem;

    font-size: 1.5rem;
    color: var(--color-primary);
}

.info-panel h3 {
    margin: 0 0 0.5rem;

    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgb(255 255 255 / 65%);
}

.info-panel p {
    margin: 0 0 0.75rem;

    font-size: 1.05rem;
    font-weight: 600;
    line-height: 1.4;
    color: #fff;
}

.info-panel-link {
    /* Pushes the link to the bottom of the panel regardless of how
       much text precedes it - .info-panel is a flex column now (see
       above), and all three panels share one grid row's height, so
       without this each panel's link just fell wherever its own,
       differently-lengthed content happened to end. */
    margin-top: auto;

    color: #fff;

    font-size: 0.8rem;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
}

.info-panel-link:hover {
    color: var(--color-primary);
}

/* ==========================
   Responsive
   ========================== */

@media (max-width: 900px) {
    .stat-band-inner {
        grid-template-columns: 1fr;
    }

    .info-panel {
        border-left: none;
        border-top: 1px solid rgb(255 255 255 / 15%);
    }

    .stat-band-inner > .info-panel:first-child,
    .stat-band-inner > :first-child .info-panel {
        border-top: none;
    }
}

/* ==========================
   Weather Panel
   ========================== */

.weather-panel-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;

    margin-bottom: 0.5rem;
}

.weather-panel-icon {
    flex-shrink: 0;

    font-size: 1.5rem;
    color: var(--color-primary);
}

.weather-panel-header h3 {
    margin: 0;
}

/* A dedicated badge rather than coloring the icon - VFR/MVFR/IFR/LIFR
   is the kind of thing a pilot glances for specifically, so it reads
   clearer as its own labeled element than as an icon tint that also
   has to be decoded. Sits in normal flow right after the title - the
   panel is now sized to its own content (see .stat-band-inner) rather
   than stretched across a fixed grid column, so there's no leftover
   space to center the badge into; absolute-centering it here just
   overlapped the title instead. */
.flight-category {
    display: inline-block;
    padding: 0.15rem 0.5rem;

    border-radius: 4px;

    color: #fff;

    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.flight-category-vfr {
    background: #198754;
}

.flight-category-mvfr {
    background: #0d6efd;
}

.flight-category-ifr {
    background: #dc3545;
}

.flight-category-lifr {
    background: #9c27b0;
}

.weather-temp {
    margin: 0 0 0.75rem;

    font-size: 1.8rem;
    font-weight: 700;
    line-height: 1;
    color: #fff;
}

.weather-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem 1rem;

    /* align-items: center (see .weather-panel above) shrink-wraps
       this to its own content instead of stretching full column width
       - the stat labels/values alone are narrow enough that the whole
       panel read as cramped. Fixing a wider floor keeps it centered
       but gives it real presence again, and min() keeps it from
       overflowing a narrow single-column mobile layout. */
    width: min(100%, 24rem);
    /* Each stat cell is otherwise left-aligned inside its own column
       track, so short values (e.g. "Clear", "10+ SM") sit flush left
       within their half rather than centered under a full-width
       header/temp above - that's the asymmetry, not the grid's own
       position. justify-items centers each cell within its track;
       .weather-stat below centers its own label/value within the
       now-shrunk cell. */
    justify-items: center;

    margin: 0 0 0.9rem;
}

.weather-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.15rem;
}

.weather-stat-label {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: rgb(255 255 255 / 55%);
}

.weather-stat-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
}