/*
 * Public event page: tariff grid. On desktop each row shares one grid template
 * (name, one column per price period, action); on phones each row becomes a card with the
 * running price, the next change and one progress segment per period.
 * --event-period-count is set from the server in show-public.blade.php.
 *
 * The switch depends on the width the grid actually has (container query), not on the screen:
 * the main column is narrow on tablets in landscape too. Two cards sit side by side when they fit.
 */

.event-landing-tariffs {
    container: tariffs / inline-size;
    display: flex;
    flex-direction: column;
    gap: var(--rg-space-5);
    scroll-margin-top: 84px;
}

.event-landing-tariffs__empty {
    color: var(--rg-color-ink-muted);
    font-size: var(--rg-font-size-lg);
}

.event-landing-tariffs__card {
    padding: var(--rg-space-2) var(--rg-space-2) var(--rg-space-1);
}

.event-landing-tariffs__scroller {
    overflow-x: auto;
    scrollbar-width: thin;
}

.event-landing-tariffs__grid {
    --tariff-columns: minmax(180px, 1.6fr) repeat(var(--event-period-count), minmax(84px, 1fr)) 150px;

    display: flex;
    flex-direction: column;
    min-width: calc(330px + var(--event-period-count) * 88px);
}

.event-landing-tariffs__head,
.event-landing-tariffs__row {
    display: grid;
    grid-template-columns: var(--tariff-columns);
    gap: var(--rg-space-1);
}

.event-landing-tariffs__head {
    align-items: end;
    padding: var(--rg-space-4) var(--rg-space-4) var(--rg-space-3);
}

.event-landing-tariffs__head-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    color: var(--rg-color-text-muted);
    font-size: var(--rg-font-size-sm);
    text-align: center;
}

.event-landing-tariffs__head-cell--name {
    text-align: left;
}

.event-landing-tariffs__head-caption {
    color: var(--rg-color-text-ghost);
    font-size: var(--rg-font-size-xs);
}

.event-landing-tariffs__head-cell--current .event-landing-tariffs__head-caption {
    color: var(--event-accent);
}

.event-landing-tariffs__head-cell--current .event-landing-tariffs__head-label {
    color: var(--rg-color-ink);
}

.event-landing-tariffs__row {
    align-items: center;
    padding: 10px var(--rg-space-2) 10px var(--rg-space-4);
    border-top: 1px solid var(--rg-color-canvas);
}

.event-landing-tariffs__lead {
    min-width: 0;
}

.event-landing-tariffs__name {
    display: flex;
    flex-direction: column;
    gap: var(--rg-space-1);
    min-width: 0;
}

.event-landing-tariffs__name-title {
    color: var(--rg-color-ink);
    font-size: var(--rg-font-size-xl);
    letter-spacing: -0.3px;
    overflow-wrap: anywhere;
}

.event-landing-tariffs__name-meta {
    color: var(--rg-color-text-muted);
    font-size: var(--rg-font-size-sm);
}

.event-landing-tariffs__summary {
    display: none;
}

.event-landing-tariffs__cell {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    border-radius: var(--rg-radius-md);
    color: var(--rg-color-ink-muted);
    font-size: 16px;
    letter-spacing: -0.3px;
    white-space: nowrap;
}

.event-landing-tariffs__cell--current {
    background: var(--rg-color-canvas);
    color: var(--rg-color-ink);
    font-size: var(--rg-font-size-2xl);
}

.event-landing-tariffs__cell--past {
    color: var(--rg-color-text-ghost);
    text-decoration: line-through;
}

.event-landing-tariffs__cell--empty {
    color: var(--rg-color-text-ghost);
}

.event-landing-tariffs__row--sold_out .event-landing-tariffs__cell--current {
    text-decoration: line-through;
    color: var(--rg-color-text-faint);
}

.event-landing-tariffs__action {
    display: flex;
}

.event-landing-tariffs__button {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    gap: var(--rg-space-2);
    height: var(--rg-control-height);
    margin-left: var(--rg-space-2);
    border-radius: var(--rg-radius-pill);
    background: var(--rg-color-ink);
    color: var(--rg-color-inverse-text);
    font-size: var(--rg-font-size-base);
    font-weight: var(--rg-font-weight-medium);
    transition: background var(--rg-transition);
}

.event-landing-tariffs__button:hover,
.event-landing-tariffs__button:focus-visible {
    background: var(--rg-color-ink-soft);
    color: var(--rg-color-inverse-text);
}

.event-landing-tariffs__button .uil {
    font-size: 16px;
}

.event-landing-tariffs__button--disabled,
.event-landing-tariffs__button--disabled:hover {
    background: transparent;
    color: var(--event-accent);
    box-shadow: inset 0 0 0 1px var(--event-accent);
    cursor: not-allowed;
}

@container tariffs (max-width: 759px) {
    .event-landing-tariffs__card,
    .event-landing-tariffs__scroller {
        display: contents;
    }

    .event-landing-tariffs__grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        min-width: 0;
        gap: var(--rg-space-3);
    }

    .event-landing-tariffs__head {
        display: none;
    }

    .event-landing-tariffs__row {
        grid-template-columns: repeat(var(--event-period-count), minmax(0, 1fr));
        gap: 14px 3px;
        padding: var(--rg-space-4);
        border: 0;
        border-radius: var(--rg-space-5);
        background: var(--rg-color-surface);
    }

    .event-landing-tariffs__lead {
        grid-column: 1 / -1;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: var(--rg-space-3);
    }

    .event-landing-tariffs__summary {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 2px;
        flex-shrink: 0;
        text-align: right;
    }

    .event-landing-tariffs__summary-now {
        color: var(--rg-color-ink);
        font-size: 26px;
        line-height: 28px;
        letter-spacing: -0.8px;
    }

    .event-landing-tariffs__summary-next {
        color: var(--rg-color-text-muted);
        font-size: var(--rg-font-size-xs);
    }

    /* Each period becomes a segment of the progress bar */
    .event-landing-tariffs__cell {
        height: 4px;
        border-radius: var(--rg-radius-pill);
        background: var(--rg-color-line-strong);
        font-size: 0;
        overflow: hidden;
    }

    .event-landing-tariffs__cell--current {
        background: var(--rg-color-ink);
    }

    .event-landing-tariffs__cell--past,
    .event-landing-tariffs__cell--empty {
        background: var(--rg-color-dot-idle);
    }

    .event-landing-tariffs__price {
        display: none;
    }

    .event-landing-tariffs__action {
        grid-column: 1 / -1;
    }

    .event-landing-tariffs__button {
        height: 48px;
        margin-left: 0;
    }
}

@container tariffs (min-width: 540px) and (max-width: 759px) {
    .event-landing-tariffs__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .event-landing-tariffs {
        gap: var(--rg-space-3);
    }
}