/* ==========================================================================
   GPVS Search Plugin
   ========================================================================== */

.tx-gpvs-search {
    padding: 80px 0;
}

@media (max-width: 991.98px) {
    .tx-gpvs-search {
        padding: 60px 0;
    }
}

@media (max-width: 766.98px) {
    .tx-gpvs-search {
        padding: 48px 0;
    }
}

/* --------------------------------------------------------------------------
   Form fields — coarse (always visible, 2 columns)
   -------------------------------------------------------------------------- */

.tx-gpvs-search__coarse {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 40px;
    margin-bottom: 32px;
}

@media (max-width: 766.98px) {
    .tx-gpvs-search__coarse {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* --------------------------------------------------------------------------
   Fine filters (collapsible, 2 columns)
   -------------------------------------------------------------------------- */

.tx-gpvs-search__fine {
    margin-bottom: 32px;
    border-top: 1px solid rgba(11, 10, 10, 0.15);
    padding-top: 24px;
}

.tx-gpvs-search__fine > summary {
    cursor: pointer;
    font-family: "Gotham Narrow", sans-serif;
    font-size: 16px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-gray);
    list-style: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0;
    transition: color 0.3s ease;
}

.tx-gpvs-search__fine > summary::-webkit-details-marker {
    display: none;
}

.tx-gpvs-search__fine > summary::after {
    content: "+";
    font-size: 20px;
    line-height: 1;
    transition: transform 0.3s ease;
}

.tx-gpvs-search__fine[open] > summary::after {
    transform: rotate(45deg);
}

.tx-gpvs-search__fine > summary:hover {
    color: var(--color-font-color);
}

.tx-gpvs-search__fine-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px 40px;
    padding-top: 24px;
}

@media (max-width: 766.98px) {
    .tx-gpvs-search__fine-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

/* --------------------------------------------------------------------------
   Individual field
   -------------------------------------------------------------------------- */

.tx-gpvs-search__field label {
    display: block;
    width: 100%;
    margin-bottom: 8px;
    padding: 0 20px;
    font-family: "Gotham Narrow", sans-serif;
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-gray);
}

@media (max-width: 766.98px) {
    .tx-gpvs-search__field label {
        padding: 0 15px;
        letter-spacing: normal;
    }
}

/* --------------------------------------------------------------------------
   Actions row
   -------------------------------------------------------------------------- */

.tx-gpvs-search__actions {
    display: flex;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
    margin-top: 40px;
}

@media (max-width: 766.98px) {
    .tx-gpvs-search__actions {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
        margin-top: 28px;
    }
}

/* Submit — inherits .btn; override min-width to fit search context */
.tx-gpvs-search__submit.btn {
    min-width: 280px;
}

@media (max-width: 766.98px) {
    .tx-gpvs-search__submit.btn {
        min-width: unset;
        width: 100%;
    }
}

/* Reset link */
.tx-gpvs-search__reset {
    font-family: "Gotham Narrow", sans-serif;
    font-size: 16px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--color-gray);
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.3s ease;
}

.tx-gpvs-search__reset:hover,
.tx-gpvs-search__reset:focus {
    color: var(--color-red);
}

/* --------------------------------------------------------------------------
   Results section
   -------------------------------------------------------------------------- */

.tx-gpvs-search__results {
    margin-top: 60px;
    padding-top: 48px;
    border-top: 2px solid rgba(11, 10, 10, 0.15);
}

@media (max-width: 766.98px) {
    .tx-gpvs-search__results {
        margin-top: 40px;
        padding-top: 32px;
    }
}

.tx-gpvs-search__results h2 {
    display: flex;
    align-items: baseline;
    gap: 12px;
    margin-bottom: 32px;
}

.tx-gpvs-search__count {
    font-size: 0.6em;
    color: var(--color-gray);
    font-weight: 400;
    letter-spacing: 1px;
}

/* Table scroll wrapper */
.tx-gpvs-search__table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Table */
.tx-gpvs-search__table {
    width: 100%;
    min-width: 900px;
    font-family: "Gotham Narrow", sans-serif;
    border-collapse: collapse;
}

.tx-gpvs-search__table thead th {
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--color-gray);
    padding: 0 12px 12px;
    text-align: left;
    border-bottom: 2px solid rgba(11, 10, 10, 0.15);
    white-space: nowrap;
}

/* Sortable column headers */
.tx-gpvs-search__sort-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: color 0.3s ease;
}

.tx-gpvs-search__sort-link:hover,
.tx-gpvs-search__sort-link:focus {
    color: var(--color-font-color);
}

.tx-gpvs-search__th--active .tx-gpvs-search__sort-link {
    color: var(--color-font-color);
}

.tx-gpvs-search__sort-indicator {
    font-size: 0.85em;
    line-height: 1;
    color: var(--color-red);
}

/* Neutral up/down caret on inactive (not currently sorted) columns: a muted
   sortability affordance that stays clearly weaker than the active red arrow. */
.tx-gpvs-search__sort-indicator--neutral {
    color: inherit;
    opacity: 0.4;
}

.tx-gpvs-search__sort-link:hover .tx-gpvs-search__sort-indicator--neutral,
.tx-gpvs-search__sort-link:focus .tx-gpvs-search__sort-indicator--neutral {
    opacity: 0.7;
}

.tx-gpvs-search__table tbody td {
    padding: 14px 12px;
    font-size: 16px;
    color: var(--color-font-color);
    border-bottom: 1px solid rgba(11, 10, 10, 0.08);
    vertical-align: middle;
}

@media (max-width: 991.98px) {
    .tx-gpvs-search__table tbody td {
        font-size: 15px;
    }
}

.tx-gpvs-search__table tbody tr:hover td {
    background-color: rgba(11, 10, 10, 0.03);
}

/* Award badge */
.tx-gpvs-search__badge--nominated {
    display: inline-block;
    font-family: "Gotham Narrow", sans-serif;
    font-size: 11px;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    padding: 4px 10px;
    background-color: var(--color-red);
    color: var(--color-white);
}

.tx-gpvs-search__medal {
    font-family: "Gotham Narrow", sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-font-color);
}

.tx-gpvs-search__medal-icon {
    height: 1.4em;
    width: auto;
    vertical-align: middle;
}

/* Empty state */
.tx-gpvs-search__empty {
    padding: 48px 0;
    text-align: center;
    font-family: "Gotham Narrow", sans-serif;
    font-size: 18px;
    color: var(--color-gray);
    letter-spacing: 1px;
}

/* ==========================================================================
   GPVS Wine-Search Teaser (homepage promo)
   ========================================================================== */

.tx-gpvs-teaser {
    padding: 80px 0;
}

@media (max-width: 991.98px) {
    .tx-gpvs-teaser {
        padding: 60px 0;
    }
}

@media (max-width: 766.98px) {
    .tx-gpvs-teaser {
        padding: 48px 0;
    }
}

.tx-gpvs-teaser__inner {
    max-width: 860px;
    margin: 0 auto;
    padding: 56px 48px;
    text-align: center;
    /* Designer redesign (#78, "Wedges.pdf"): rounded white card floating on the
       cream page background, wrapped in a soft, diffuse red glow ("Schatten").
       No top-border accent — the mockup has none. */
    background-color: var(--color-white);
    color: var(--color-font-color);
    border-radius: 28px;
    box-shadow: 0 0 60px rgba(255, 38, 69, 0.30),
                0 24px 60px rgba(255, 38, 69, 0.22);
}

@media (max-width: 766.98px) {
    .tx-gpvs-teaser__inner {
        padding: 40px 24px;
    }
}

.tx-gpvs-teaser__heading {
    margin: 0 0 16px;
    color: var(--color-red);
}

.tx-gpvs-teaser__intro {
    margin: 0 auto 40px;
    max-width: 620px;
    font-family: "Gotham Narrow", sans-serif;
    font-size: 18px;
    line-height: 1.5;
    /* Designer redesign (#78): intro now red like the heading. */
    color: var(--color-red);
}

@media (max-width: 766.98px) {
    .tx-gpvs-teaser__intro {
        font-size: 16px;
        margin-bottom: 28px;
    }
}

/* Form — fields row above a centred submit button on its own row (per #78 mockup),
   stacked on mobile. */
.tx-gpvs-teaser__form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

@media (max-width: 766.98px) {
    .tx-gpvs-teaser__form {
        gap: 24px;
    }
}

.tx-gpvs-teaser__fields {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    width: 100%;
}

@media (max-width: 766.98px) {
    .tx-gpvs-teaser__fields {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }
}

.tx-gpvs-teaser__field {
    flex: 1 1 220px;
    min-width: 0;
    text-align: left;
}

@media (max-width: 766.98px) {
    /* Once .tx-gpvs-teaser__fields flips to a column, flex-basis is measured on
       the (now vertical) main axis: the 220px above would be read as a field
       HEIGHT, pinning the input to the top of a 220px-tall box with a large gap
       below. Reset to auto so each stacked field is only as tall as its
       label + input. Placed after the base rule so it wins on source order. */
    .tx-gpvs-teaser__field {
        flex: 0 0 auto;
    }
}

.tx-gpvs-teaser__label {
    display: block;
    margin-bottom: 8px;
    font-family: "Gotham Narrow", sans-serif;
    font-size: 14px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--color-font-color);
}

/* Scoped under .tx-gpvs-teaser__form so these declarations outrank the global
   `input[type=text], … { … }` rule (main.css:8348, specificity (0,1,1)); a bare
   `.tx-gpvs-teaser__input` (0,1,0) loses to it, silently voiding the border and
   background below. The descendant selector lifts this block to (0,2,0). */
.tx-gpvs-teaser__form .tx-gpvs-teaser__input {
    width: 100%;
    padding: 14px 18px;
    font-family: "Gotham Narrow", sans-serif;
    font-size: 16px;
    color: var(--color-font-color);
    /* Designer redesign (#78): sharp-cornered ("Eckige Textfelder") cream field,
       borderless — the cream fill alone separates it from the white card. */
    background-color: var(--color-body-bg);
    border: 0;
    border-radius: 0;
}

.tx-gpvs-teaser__form .tx-gpvs-teaser__input::placeholder {
    /* WCAG AA on the new cream field fill (#ede7db): #6E6E6E only reaches ~4.1:1
       there, so darken to #5f5f5f (~5.2:1). Kept teaser-scoped so the global
       --color-gray-1 (used elsewhere at its white-background contrast) is untouched. */
    color: #5f5f5f;
    opacity: 1;
}

.tx-gpvs-teaser__form .tx-gpvs-teaser__input:focus {
    outline: 2px solid var(--color-font-color);
    outline-offset: 1px;
}

/* Submit — inherits .btn; centred on its own row below the fields (#78 mockup).
   Teaser-scoped colour override (does not touch the shared .btn base):
   red button by default, black on hover/focus so it never dissolves into
   the red accents on the light card (avoids the red-on-red hover defect). */
.tx-gpvs-teaser__submit.btn {
    flex: 0 0 auto;
    min-width: 200px;
    color: var(--color-white);
    background-color: var(--color-red);
}

/* Trailing arrow as a decorative affordance — deliberately a pseudo-element so it
   is never part of the FlexForm-editable button label. */
.tx-gpvs-teaser__submit.btn::after {
    content: "\2192";
    margin-left: 14px;
    font-weight: 400;
}

.tx-gpvs-teaser__submit.btn:hover,
.tx-gpvs-teaser__submit.btn:focus {
    color: var(--color-white);
    background-color: var(--color-black);
}

@media (max-width: 766.98px) {
    .tx-gpvs-teaser__submit.btn {
        width: 100%;
        min-width: unset;
    }
}