/* --- Platforms ---
   One card per place the product runs. Three of the six are not downloads yet,
   so the state is part of the card rather than something the visitor discovers
   by following a link into a page that does not exist. (#288) */

.toddyi-section__lead {
    margin: var(--toddyi-size-6px) 0 0;
    font-size: var(--toddyi-size-0-88rem);
    color: var(--text-muted);
}

.toddyi-platform-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--toddyi-size-14px);
}

.toddyi-platform-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: var(--surface);
    border: var(--toddyi-size-1px) solid var(--border);
    border-radius: var(--radius);
    padding: var(--toddyi-size-20px) var(--toddyi-size-18px);
    box-shadow: var(--shadow-sm);
    transition: border-color var(--transition), box-shadow var(--transition);
}

/* Only the cards you can act on lift on hover. A card that is still a promise
   should not answer the pointer as though it were a button. */
.toddyi-platform-card--live:hover {
    box-shadow: var(--shadow);
    border-color: color-mix(in srgb, var(--toddyi-secondary) 40%, var(--border));
}

.toddyi-platform-card--planned {
    background: color-mix(in srgb, var(--accent-light) 40%, var(--surface));
}

.toddyi-platform-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--toddyi-size-40px);
    height: var(--toddyi-size-40px);
    border-radius: var(--toddyi-size-10px);
    background: var(--accent-light);
    margin-bottom: var(--toddyi-size-12px);
}

/* "Installationsanleitung" is one word and this column can be 200px wide.
   Hyphenate first, break inside the word only if that is not enough. (#358) */
.toddyi-platform-card__title {
    margin: 0 0 var(--toddyi-size-6px);
    font-size: var(--toddyi-size-0-98rem);
    font-weight: 800;
    color: var(--text);
    hyphens: auto;
    overflow-wrap: anywhere;
}

.toddyi-platform-card__desc {
    margin: 0 0 var(--toddyi-size-12px);
    font-size: var(--toddyi-size-0-85rem);
    line-height: 1.6;
    color: var(--text-muted);
    hyphens: auto;
}

/* Pushed to the bottom so the state and the link line up across cards whose
   descriptions run to different lengths. */
.toddyi-platform-card__state {
    margin: auto 0 0;
    padding: var(--toddyi-size-3px) var(--toddyi-size-10px);
    border-radius: var(--toddyi-size-99px);
    font-size: var(--toddyi-size-0-68rem);
    font-weight: 700;
    letter-spacing: var(--toddyi-size-0-08em);
    text-transform: uppercase;
    color: var(--text-muted);
    background: var(--accent-light);
}

.toddyi-platform-card--live .toddyi-platform-card__state {
    color: var(--primary);
    background: color-mix(in srgb, var(--toddyi-secondary) 18%, var(--accent-light));
}

/* Two links on one card - Linux has an install guide and a Build Service
   project - so they wrap rather than forcing the column wider than the 200px
   the grid gives it. The margin lives here instead of on the link, so a card
   with two of them does not get twice the gap above the first. */
.toddyi-platform-card__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--toddyi-size-4px) var(--toddyi-size-14px);
    margin: var(--toddyi-size-12px) 0 0;
}

.toddyi-platform-card__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--toddyi-size-4px);
    font-size: var(--toddyi-size-0-85rem);
    font-weight: 700;
    color: var(--primary);
    /* A link label is a translation: "Installationsanleitung" is one word and
       wider than the 200px column it sits in. */
    overflow-wrap: anywhere;
}

/* Where you can go today is in colour; where you cannot stays beige. The
   distinction was carried only by a pill of text at the bottom of the card,
   which is the last thing read and the first thing missed. (#358) */
.toddyi-platform-card--live .toddyi-platform-card__icon {
    background: var(--toddyi-gradient-primary);
    color: var(--text-on-dark);
}