/**
 * RackTrack — Save the Date widget (front end).
 *
 * Structural only: all colors, fonts, sizes and the background/overlay are
 * emitted inline (per-config) by the widget's render method, so this file only
 * lays out the block and handles responsiveness. Mirrors the Hero Banner CSS
 * approach (structural classes here, inline styling from the widget).
 *
 * @since 1.34.0
 */
.rt-std {
    position: relative;
    box-sizing: border-box;
    overflow: hidden;
    padding: 40px 24px;
    background-repeat: no-repeat;
}
.rt-std * {
    box-sizing: border-box;
}

/* Full-viewport breakout (optional per-instance) */
.rt-std-full {
    width: 100vw;
    margin-left: calc(50% - 50vw);
}
.rt-std-contained {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    border-radius: 8px;
}

/* Darkening/coloring overlay sits above the bg image, below the content */
.rt-std-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

/* Content column */
.rt-std-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 640px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-width: 0;
}
.rt-std-align-left  { text-align: left;  align-items: flex-start; }
.rt-std-align-center{ text-align: center;align-items: center; }
.rt-std-align-right { text-align: right; align-items: flex-end; }

/* League logo */
.rt-std-logo {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    margin: 0 auto;
}
.rt-std-align-left  .rt-std-logo { margin-left: 0;  margin-right: auto; }
.rt-std-align-right .rt-std-logo { margin-left: auto; margin-right: 0; }

/* Title */
.rt-std-title {
    margin: 0;
    line-height: 1.05;
    font-weight: 800;
    font-size: clamp(28px, 7vw, 64px);
}

/* Sections */
.rt-std-sections {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    /* In center/right mode .rt-std-inner uses align-items other than stretch,
       which would let this shrink-to-content and overflow. Force full width so
       rows are measured against the real column width. */
    align-self: stretch;
}
.rt-std-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}
.rt-std-heading {
    margin: 0 0 2px;
    font-weight: 800;
    line-height: 1.15;
    font-size: clamp(16px, 4.4vw, 26px);
}
.rt-std-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}
.rt-std-row {
    margin: 0;
    line-height: 1.3;
    font-size: clamp(13px, 3.6vw, 19px);
    /* Constrain to the list width so overflow is measured against the real
       available space (the auto-fit script reads clientWidth). */
    width: 100%;
    max-width: 100%;
    min-width: 0;
    /* Default to a single line; the front-end auto-fit script (save-the-date.js)
       shrinks the row's font-size to keep the name + date/pill on one line. When
       a row hits the readable floor and still doesn't fit, .rt-std-wrap is added
       to let just that row wrap. */
    white-space: nowrap;
    overflow: hidden;
}
.rt-std-row.rt-std-wrap {
    white-space: normal;
    overflow: visible;
}

/* -------- Countdown pill date style -------- */
/* Two-column rows: a LEFT column holds the date/countdown pill (right-aligned,
   so every pill's right edge lines up against the gap) and a RIGHT column holds
   the event name (left-aligned, so every name's left edge lines up). A small gap
   keeps the two columns subtly apart. Kept tight vertically so long lists stay
   short. */
.rt-std-countdown .rt-std-list { gap: 5px; }
.rt-std-countdown .rt-std-row {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 14px;                         /* the gap between the two columns */
    flex-wrap: nowrap;                 /* one line; auto-fit shrinks to keep it */
    text-align: left;
}
/* Floor reached and still too wide -> allow this row to wrap. */
.rt-std-countdown .rt-std-row.rt-std-wrap { flex-wrap: wrap; }
/* Left column wrapper: takes an equal half of the row (so the middle gap is
   centered on the widget and both halves are the same width); the pill inside is
   pushed to the column's RIGHT edge so every pill's right edge lines up against
   the gap. */
.rt-std-datecol {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    justify-content: flex-end;         /* right-align the pill within its column */
    align-items: center;
}
.rt-std-pill {
    flex: 0 0 auto;                    /* pill stays chip-sized (not stretched) */
    display: inline-flex;
    align-items: stretch;
    border-radius: 999px;
    overflow: hidden;
    font-weight: 800;
    white-space: nowrap;
    line-height: 1;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
}
.rt-std-pill-date {
    display: flex;
    align-items: center;
    padding: 4px 12px;
    font-size: .78em;
}
.rt-std-pill-cd {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px 4px 11px;
    font-size: .78em;
    background: rgba(0, 0, 0, .28);
}
/* Right column: the event name, left-aligned (its left edge lines up across
   every row). Equal half of the row so the middle gap is centered. */
.rt-std-pill-name {
    flex: 1 1 0;
    font-size: 1em;
    min-width: 0;
    text-align: left;
}
/* When a countdown row is allowed to wrap (floor reached), let the name wrap. */
.rt-std-countdown .rt-std-row.rt-std-wrap .rt-std-pill-name { word-break: break-word; }
/* The two-column split is fixed regardless of the board's center/right
   alignment, so those alignment classes don't re-justify the pill rows. */
.rt-std-align-center .rt-std-countdown .rt-std-row,
.rt-std-align-right  .rt-std-countdown .rt-std-row { justify-content: flex-start; }

@media (max-width: 480px) {
    .rt-std-pill-date, .rt-std-pill-cd { padding: 4px 10px; }
}

/* Sponsor logos row */
.rt-std-sponsors {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 18px 26px;
    width: 100%;
    margin-top: 12px;
}
.rt-std-align-left  .rt-std-sponsors { justify-content: flex-start; }
.rt-std-align-right .rt-std-sponsors { justify-content: flex-end; }
.rt-std-sponsor {
    display: inline-block;
    width: auto;
    max-width: 40%;
    object-fit: contain;
}

/* Admin-only empty-state nudge */
.rt-std-empty {
    color: #ddd;
    font-style: italic;
    text-align: center;
    padding: 20px;
}

/* -------- Responsive: keep the same vertical layout, scale down -------- */
@media (max-width: 768px) {
    .rt-std {
        padding: 28px 16px;
    }
    .rt-std-inner {
        gap: 14px;
        /* On narrow screens center the column regardless of desktop align so
           the board reads like the original graphic. */
        max-width: 100%;
    }
    .rt-std-sponsors {
        gap: 14px 18px;
    }
    .rt-std-sponsor {
        max-width: 44%;
    }
}
@media (max-width: 480px) {
    .rt-std {
        padding: 22px 12px;
    }
    .rt-std-inner {
        gap: 12px;
    }
    .rt-std-sections {
        gap: 12px;
    }
    .rt-std-sponsor {
        max-width: 46%;
    }
}