/* ═══════════════════════════════════════════════════════════════════
   How long do you have?
   ═══════════════════════════════════════════════════════════════════
   Four cards, in the same hairlines and tokens as the categories above.
   The number of days is the loudest thing on each, because that is what
   the reader is matching against; everything under it is the answer.
   ═══════════════════════════════════════════════════════════════════ */

.tl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
}

.tl-card {
    display: flex;
    flex-direction: column;
    padding: 1.25rem 1.35rem 1.1rem;
    border: 1px solid var(--hub-hairline);
    border-radius: var(--hub-radius);
    background: var(--hub-elev);
}

/* ── Head ───────────────────────────────────────────────────────── */

.tl-head { margin-bottom: 0.7rem; }

.tl-days {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--hub-ink-muted);
}

.tl-days strong {
    font-size: 2rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1;
    margin-right: 0.3rem;
    color: var(--hub-accent-strong);
    font-variant-numeric: tabular-nums;
}

.tl-headline {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.3;
    text-wrap: balance;
}

.tl-body {
    margin: 0 0 1rem;
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--hub-ink-muted);
}

/* ── The measured part ──────────────────────────────────────────── */

.tl-facts {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    margin: 0 0 1rem;
    padding: 0.75rem 0;
    border-block: 1px solid var(--hub-hairline);
}

.tl-facts div { min-width: 0; }

.tl-facts dt {
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--hub-ink-muted);
    /* "Ground covered" wraps to two lines where "Regions" and "Stops" do not,
       which drops its value one line below theirs in the same row. Holding
       every label to two lines keeps the three values on one baseline. */
    min-height: 2.6em;
}

.tl-facts dd {
    margin: 0.15rem 0 0;
    font-size: 0.86rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

/* ── Where it reaches ───────────────────────────────────────────── */

.tl-places-label {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--hub-ink-muted);
}

.tl-places ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tl-places a {
    display: inline-flex;
    align-items: center;
    padding: 0.22rem 0.6rem;
    border: 1px solid var(--hub-hairline);
    border-radius: 999px;
    font-size: 0.78rem;
    color: var(--hub-ink-muted);
    text-decoration: none;
    white-space: nowrap;
}

.tl-places a:hover {
    border-color: rgb(var(--hub-accent-rgb) / 0.5);
    color: var(--hub-accent-strong);
}

/* ── What it does not reach ─────────────────────────────────────
   The most useful line on the card. A trip planner that only ever
   says yes is no help at all. */

.tl-missing {
    margin: 0.9rem 0 0;
    font-size: 0.8rem;
    line-height: 1.55;
    color: var(--hub-ink-muted);
}

.tl-missing span {
    font-weight: 700;
    color: var(--hub-ink);
}

/* ── Action ─────────────────────────────────────────────────────── */

.tl-cta {
    margin-top: auto;
    padding-top: 1rem;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--hub-accent-strong);
    text-decoration: none;
}

.tl-cta:hover { text-decoration: underline; }

@media (hover: none) and (pointer: coarse) {
    .tl-places a { min-height: 44px; }
    .tl-cta {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }
}

@media (max-width: 480px) {
    .tl-facts { grid-template-columns: repeat(2, 1fr); }
}