/*
    Public Salmon Reel Selector page.

    Activity-log note:
    This stylesheet is display-only. Durable product, catalogue, inventory, and
    cart actions should be logged in their respective controllers/models, not
    from this public selector presentation layer.
*/

.reel-selector-page {
    /*
        Staff adjustment point: page footprint.
        Keep this at 100% to match the broad catalogue-page / Salmon Fly
        Order Form layout. Lower it slightly, such as 95%, if this tool ever
        needs to be inset again without changing the card grid rules below.
    */
    --reel-selector-page-width: 100%;

    box-sizing: border-box;
    width: var(--reel-selector-page-width, 100%);
    max-width: none;
    margin: 0 auto;
    padding: 0;
}

.reel-selector-header {
    padding: 1.15rem 1.35rem;
    margin-bottom: 1rem;
    background: #fff;
}

.reel-selector-header h1 {
    margin: 0 0 0.85rem 0;
    text-align: center;
    font-size: 1.75rem;
}

.reel-selector-header p {
    /*
        Keep the introductory text using the full width of the white header
        panel. Earlier versions capped this text at 940px, which left the
        header visually narrower than the reel cards and the Salmon Fly
        Order Form header.

        Staff adjustment point: change this font size if the reel selector
        introduction should become larger or smaller later. Both paragraphs
        share this rule so the "Let's face it..." paragraph and the
        "Results are limited..." paragraph remain visually uniform.
    */
    max-width: none;
    margin: 0 0 0.65rem 0;
    font-size: 0.95rem;
    line-height: 1.25;
}

.reel-selector-header p:last-child {
    margin-bottom: 0;
}

.reel-selector-rule {
    color: #333;
}

.reel-selector-form {
    display: grid;
    grid-template-columns: auto minmax(110px, 140px) minmax(110px, 140px) minmax(220px, 1fr) auto;
    gap: 0.75rem 1rem;
    align-items: end;
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
    background: #fff;
}

.reel-selector-field label,
.reel-selector-field span {
    display: block;
    margin-bottom: 0.25rem;
    font-weight: bold;
}

.reel-selector-field select {
    width: 100%;
}

.reel-selector-field-price-label {
    align-self: center;
}

.reel-selector-field-price-label span {
    margin-bottom: 0;
}

.reel-selector-field-compact {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.35rem;
    align-items: center;
}

.reel-selector-field-compact label {
    margin-bottom: 0;
}

.reel-selector-display-method {
    min-width: 220px;
}

.reel-selector-actions {
    display: flex;
    gap: 0.45rem;
    flex-wrap: wrap;
}

.reel-selector-count {
    margin-bottom: 0.75rem;
    font-weight: bold;
}

.reel-selector-empty {
    padding: 1rem;
    background: #fff;
    border: 1px solid #c8cdd5;
}

.reel-selector-results {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));
    gap: 0.9rem;
}

.reel-selector-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 0.8rem;
    background: #fff;
    border: 1px solid #d7dce2;
    text-align: center;
}

.reel-selector-image {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 155px;
    margin-bottom: 0.6rem;
}

.reel-selector-image img {
    display: block;
    max-width: 100%;
    max-height: 150px;
    object-fit: contain;
}

.reel-selector-card-body {
    flex: 1 1 auto;
}

.reel-selector-card h2 {
    margin: 0 0 0.35rem 0;
    font-size: 1rem;
    line-height: 1.25;
}

.reel-selector-series {
    margin-bottom: 0.35rem;
    font-size: 0.92rem;
}

.reel-selector-specs {
    margin: 0.45rem 0 0 0;
    font-size: 0.92rem;
}

.reel-selector-specs div {
    margin-bottom: 0.25rem;
}

.reel-selector-specs dt {
    display: inline;
    font-weight: bold;
}

.reel-selector-specs dt::after {
    content: ": ";
}

.reel-selector-specs dd {
    display: inline;
    margin: 0;
}

.reel-selector-card-footer {
    margin-top: 0.7rem;
}

.reel-selector-price {
    margin-bottom: 0.5rem;
    font-weight: bold;
    font-size: 1.05rem;
}

@media (max-width: 850px) {
    .reel-selector-form {
        grid-template-columns: repeat(2, minmax(150px, 1fr));
    }

    .reel-selector-field-price-label,
    .reel-selector-display-method,
    .reel-selector-actions {
        grid-column: 1 / -1;
    }
}

@media (max-width: 520px) {
    .reel-selector-page {
        width: 100%;
        padding: 0;
    }

    .reel-selector-header {
        padding: 1rem;
    }

    .reel-selector-form {
        grid-template-columns: 1fr;
    }

    .reel-selector-field-price-label,
    .reel-selector-display-method,
    .reel-selector-actions {
        grid-column: auto;
    }
}