/*
 * The guest-count selector.
 *
 * Rendered by resources/views/components/site/filter/capacity-range.blade.php and
 * driven by resources/js/shared/capacity-range/. All three placements -- the
 * homepage hero pane, its mobile sheet and the /venues toolbar dropdown -- are
 * this one component and differ in outer width only.
 *
 * The dual-handle logarithmic rail this replaces needed ~180 lines of ion.rangeSlider
 * skin overrides, four of them !important. None of that is here: a text input, a
 * helper line and an optional second box need no overrides.
 *
 * Interactive sizes are held in tokens and are the same at every width. The
 * narrow block below tightens spacing and nothing else.
 */

.capacity-range {
    /* Palette. One grey per role, so nothing drifts into a near-twin. */
    --capacity-ink: #181a1b;
    --capacity-muted: #6b6f70;
    --capacity-placeholder: var(--vw-placeholder, #a0a0a0);
    --capacity-border: #e2e2e2;
    --capacity-surface: #f4f4f4;
    --capacity-danger: #b3261e;

    /* Rhythm. A 4px scale, used deliberately. */
    --capacity-gap-rows: 16px;
    --capacity-gap-columns: 16px;
    --capacity-gap-bottom: 24px;

    /* The smallest target a thumb can rely on. */
    --capacity-touch: 44px;

    display: flex;
    flex-direction: column;
    gap: var(--capacity-gap-rows);
    width: 100%;

    /* Padding rather than a margin on the last row: the component is a plain
       block, so a last-child bottom margin collapses straight through it and the
       spacing vanishes in exactly the containers that need it most. */
    padding-bottom: var(--capacity-gap-bottom);
}

/* ── Fields ──────────────────────────────────────────────────────────────── */

.capacity-range__fields {
    display: grid;
    gap: var(--capacity-gap-columns);
    grid-template-columns: 1fr;
}

/* Two columns from the moment the second field is on screen, so it opens beside
   the first rather than under it. Keyed on --has-max, not --range: --range only
   lands once a maximum has actually been typed, so the field used to appear below
   and then jump up alongside on the next keystroke. */
.capacity-range--has-max .capacity-range__fields {
    grid-template-columns: 1fr 1fr;
}

.capacity-range__field {
    min-width: 0;
}

.capacity-range__field[hidden] {
    display: none;
}

.capacity-range__label {
    color: var(--capacity-muted);
    display: block;
    font-size: 0.8125rem;
    line-height: 1.3;
    margin-bottom: 6px;
}

.capacity-range__control {
    position: relative;
}

.capacity-range .capacity-range__input {
    appearance: none;
    background-color: #fff;
    border: 1px solid var(--capacity-border);
    border-radius: 0.625rem;
    /* Stated rather than inherited: the right padding is what keeps the value
       clear of the unit suffix, and without this the input overflows its field by
       exactly that much wherever a global border-box reset is not in play. */
    box-sizing: border-box;
    color: var(--capacity-ink);
    font-size: 1.125rem;
    height: 3.5rem;
    min-width: 0;
    padding: 0 4.25rem 0 1rem;
    transition: border-color 0.15s ease-in-out;
    width: 100%;
}

.capacity-range .capacity-range__input::placeholder {
    color: var(--capacity-placeholder);
    opacity: 1;
}

.capacity-range .capacity-range__input:hover {
    border-color: #d0d0d0;
}

/* A ring, so focus never changes the field's size. */
.capacity-range .capacity-range__input:focus,
.capacity-range .capacity-range__input:focus-visible {
    border-color: var(--capacity-ink);
    box-shadow: 0 0 0 3px rgb(24 26 27 / 8%);
    outline: none;
}

.capacity-range .capacity-range__input[aria-invalid="true"] {
    border-color: var(--capacity-danger);
}

.capacity-range .capacity-range__input[aria-invalid="true"]:focus,
.capacity-range .capacity-range__input[aria-invalid="true"]:focus-visible {
    border-color: var(--capacity-danger);
    box-shadow: 0 0 0 3px rgb(179 38 30 / 12%);
}

/* Inside the field rather than after it, so the number and its unit read as one
   value and the label above stays free to say Minimum or Maximum. */
.capacity-range__unit {
    color: var(--capacity-muted);
    font-size: 0.9375rem;
    pointer-events: none;
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
}

/* ── Helper and validation ───────────────────────────────────────────────── */

.capacity-range__help {
    color: var(--capacity-muted);
    font-size: 0.875rem;
    line-height: 1.4;
    margin: 0;
}

.capacity-range__error {
    color: var(--capacity-danger);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.4;
    margin: 0;
}

.capacity-range__error[hidden] {
    display: none;
}

/* ── Maximum disclosure ──────────────────────────────────────────────────── */

/* A text button, aligned left with the field above it: it is a secondary path,
   and dressing it as a button would make it compete with Apply. */
.capacity-range__disclose {
    align-self: flex-start;
    background: none;
    border: 0;
    border-radius: 0.375rem;
    color: var(--capacity-ink);
    cursor: pointer;
    font-size: 0.9375rem;
    /* Left-aligned text with a full-height target either side of it. */
    margin-left: -0.5rem;
    min-height: var(--capacity-touch);
    padding: 0 0.5rem;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.capacity-range__disclose[hidden] {
    display: none;
}

.capacity-range__disclose:hover {
    color: var(--capacity-muted);
}

.capacity-range__disclose:focus-visible {
    outline: 2px solid var(--capacity-ink);
    outline-offset: 2px;
}

/* ── Narrow ──────────────────────────────────────────────────────────────── */

/* The application's own breakpoint. Spacing tightens; nothing interactive
   shrinks, which is the whole point of holding the targets in tokens. */
@media (max-width: 1027px) {
    .capacity-range {
        --capacity-gap-rows: 14px;
        --capacity-gap-columns: 12px;
        --capacity-gap-bottom: 20px;
    }

    .capacity-range .capacity-range__input {
        font-size: 1.0625rem;
        padding: 0 4rem 0 0.875rem;
    }
}

/* The two boxes stack rather than squeeze: at 320px a 1fr 1fr grid leaves each
   field too narrow for a five-digit guest count plus its unit. */
@media (max-width: 380px) {
    .capacity-range--has-max .capacity-range__fields {
        grid-template-columns: 1fr;
    }
}