/*
 * Candidate layouts for the tournament event card.
 *
 * Kept out of `style.css` on purpose: that file is a committed Tailwind build
 * artifact regenerated wholesale, so anything hand-written in it is lost on the
 * next build. This file is loaded only by the card component and holds the four
 * trial layouts (`?card=hero|rail|row|strip`). Once one is chosen, its rules
 * move into the real stylesheet source and this file goes away.
 *
 * Written as plain CSS rather than utility classes because `style.css` ships a
 * fixed set of Tailwind utilities and several of the ones these layouts need
 * were never generated.
 */

/* --- layout picker --------------------------------------------------------- */

/* The `?card=` picker on the series page. Hidden rather than removed so the
   candidate layouts stay one comment away: drop this rule to bring the links
   back. The markup only renders locally in the first place. */
.ec-layout-switch {
    display: none;
}

/* --- shared ---------------------------------------------------------------- */

.ec-num {
    color: var(--color-ash);
    font-size: 12px;
}

.ec-sep {
    opacity: 0.45;
}

.ec-stat {
    color: color-mix(in oklab, var(--color-ink) 78%, transparent);
    margin-top: 6px;
    font-size: 14px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ec-stat--gold {
    color: var(--color-gold);
}

/* Time / status header, shared by the hero and strip variants. */
.ec-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    color: color-mix(in oklab, var(--color-ink) 70%, transparent);
}

.ec-top__left,
.ec-top__right {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* --- hero: prize-first ----------------------------------------------------- */

.ec-hero {
    display: flex;
    flex-direction: column;
}

.ec-hero__title {
    margin-top: 12px;
    color: var(--color-gold);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.15;
}

.ec-hero__prize {
    display: flex;
    flex-direction: column;
    gap: 4px;
    /* Pushes the footer to the bottom edge, so cards of unequal title length
       still line their buy-in rows up across a grid row. */
    margin: auto 0 18px;
    padding-top: 18px;
}

.ec-hero__amount {
    color: var(--color-gold);
    font-size: clamp(22px, 4.4vw, 32px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
}

.ec-hero__label {
    color: var(--color-ash);
}

.ec-hero__foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid var(--color-line);
    padding-top: 12px;
}

.ec-pair {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ec-pair--end {
    align-items: flex-end;
}

.ec-pair__value {
    color: color-mix(in oklab, var(--color-ink) 80%, transparent);
    font-size: 14px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}

/* --- rail: time column ----------------------------------------------------- */

.ec-rail {
    display: flex;
    align-items: stretch;
    padding: 0;
    overflow: hidden;
}

.ec-rail__side {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 84px;
    padding: 16px 8px;
    border-right: 1px solid var(--color-line);
    background: rgba(0, 0, 0, 0.16);
    text-align: center;
}

.ec-rail__time {
    color: var(--color-ink);
    font-size: 20px;
    font-weight: 500;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.ec-rail__state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.ec-rail__level {
    color: color-mix(in oklab, var(--color-ink) 60%, transparent);
}

.ec-rail__body {
    flex: 1;
    min-width: 0;
    padding: 16px;
}

.ec-rail__title {
    color: var(--color-gold);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.15;
}

/* Content-sized tracks, not equal thirds: a VND guarantee runs to 13 digits
   while "Closed" is six characters, and equal columns overflow the middle one
   long before the row is actually full. Auto tracks still absorb the leftover
   width, so the row stays justified. */
.ec-rail__stats {
    display: grid;
    grid-template-columns: auto auto auto;
    gap: 10px;
    margin-top: 18px;
}

.ec-rail__stats .ec-stat {
    font-size: 13px;
}

.ec-rail__reg {
    text-align: right;
}

.ec-rail__progress {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 12px;
    color: color-mix(in oklab, var(--color-ink) 65%, transparent);
}

/* --- row: dense list ------------------------------------------------------- */

.ec-row {
    display: flex;
    position: relative;
    align-items: center;
    gap: 18px;
    padding: 12px 16px;
    overflow: hidden;
}

.ec-row__time {
    display: flex;
    flex: none;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    width: 76px;
}

.ec-row__clock {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--color-ink);
    font-size: 16px;
    font-weight: 500;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}

.ec-row__main {
    flex: 1;
    min-width: 0;
}

.ec-row__title {
    color: var(--color-gold);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ec-row__meta {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 4px;
    color: color-mix(in oklab, var(--color-ink) 60%, transparent);
}

.ec-row__stats {
    display: grid;
    flex: none;
    grid-template-columns: repeat(3, minmax(88px, auto));
    gap: 22px;
    text-align: right;
}

.ec-row__stats .ec-stat {
    margin-top: 3px;
}

/* A full-bleed watermark and a hover lift both read as noise on a list row;
   the tier becomes a left edge marker instead. */
.ec-row.highlight-emerald::before,
.ec-row.highlight-bronze::before {
    content: '';
    position: absolute;
    opacity: 1;
    inset: 0 auto 0 0;
    width: 3px;
    height: auto;
    background: var(--color-gold);
    transform: none;
}

.ec-row.highlight-emerald::before {
    background: #d4a72d;
}

.ec-row:hover {
    transform: none;
}

@media (max-width: 767px) {
    .ec-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
        padding: 16px;
    }

    .ec-row__time {
        flex-direction: row;
        align-items: center;
        gap: 10px;
        width: auto;
    }

    .ec-row__title {
        white-space: normal;
    }

    .ec-row__stats {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
        border-top: 1px solid var(--color-line);
        padding-top: 12px;
        text-align: left;
    }

    .ec-row__stats > div:last-child {
        text-align: right;
    }
}

/* --- strip: boxed stat panel ----------------------------------------------- */

.ec-strip {
    display: flex;
    flex-direction: column;
}

.ec-strip__title {
    margin-top: 12px;
    color: var(--color-gold);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.15;
}

.ec-strip__progress {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    color: color-mix(in oklab, var(--color-ink) 60%, transparent);
}

.ec-strip__stats {
    display: grid;
    /* Content-sized, for the same reason as the rail: a 13-digit guarantee does
       not fit a third of the card. The 1px gap between bordered cells is the
       divider — no pseudo-elements needed. */
    grid-template-columns: auto auto minmax(0, 1fr);
    gap: 1px;
    margin-top: auto;
    padding-top: 18px;
}

.ec-strip__stats .ec-stat {
    font-size: 13px;
}

.ec-strip__stats > div {
    padding: 10px 12px;
    border: 1px solid var(--color-line);
    background: rgba(0, 0, 0, 0.14);
}

.ec-strip__stats > div:first-child {
    border-radius: 10px 0 0 10px;
}

.ec-strip__stats > div:last-child {
    border-radius: 0 10px 10px 0;
}

.ec-strip__stats > div + div {
    border-left: 0;
}