/*
 * =============================================================================
 * STYLESHEET: Gold List — Filterable Archive  (style.css)
 * =============================================================================
 *
 * HOW THIS FILE IS ORGANISED:
 *   1.  Reset / Base
 *   2.  Section wrapper & Container
 *   3.  Page heading
 *   4.  Toolbar (filter bar row)
 *   5.  Filter buttons (Region / Profession / Year triggers)
 *   6.  Filter dropdown panels
 *   7.  Checkbox grid inside dropdowns
 *   8.  Sort button & dropdown
 *   9.  Search input
 *   10. Selected filter pills
 *   11. Loading spinner
 *   12. Posts grid
 *   13. Article card
 *   14. Image wrapper, year badges, gold flag
 *   15. Category label & dot separator
 *   16. Article title
 *   17. No-results message
 *   18. Load More button
 *   19. Responsive breakpoints (tablet, mobile)
 *
 * FONTS USED:
 *   Instrument Sans  — UI text, labels, buttons (loaded via Google Fonts)
 *   Libre Caslon Display — Headings and article titles (loaded via Google Fonts)
 *
 * COLOR REFERENCE:
 *   #000 / #1a1a1a  — Primary text, borders, icons
 *   #555            — Hover state for links/buttons
 *   #999 / #ccc     — Borders on pills and search input
 *   #DBC883         — Gold bookmark flag colour
 *   #fff            — White backgrounds, pill backgrounds
 *   rgba(0,0,0,.12) — Box shadow on dropdowns
 * =============================================================================
 */

/* =============================================================================
   1. RESET / BASE
   Makes sure all elements inside the module use border-box sizing,
   so padding and borders don't add unexpected extra width.
   ============================================================================= */
.lx-gold-list-acf-block-section *,
.lx-gold-list-acf-block-section *::before,
.lx-gold-list-acf-block-section *::after {
    box-sizing: border-box;
}

/* =============================================================================
   2. SECTION WRAPPER & CONTAINER
   The outer <section> and the max-width container inside it.
   margin-top: 0 keeps it flush with whatever is above it.
   ============================================================================= */
.lx-gold-list-acf-block-section {
    margin: 0 0 64px;
    padding: 0;
    font-family: 'Instrument Sans', sans-serif;
    color: #1a1a1a;
    -webkit-font-smoothing: antialiased;
}

/* ── Container ───────────────────────────────────────────────────────────────── */
.lx-gold-list-acf-block-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0;
}

/* =============================================================================
   3. PAGE HEADING ("Gold List Honorees")
   ============================================================================= */
.lx-gold-list-acf-block-heading-wrapper {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 32px;
}

.lx-gold-list-acf-block-subheading {
    font-family: 'Libre Caslon Display', serif;
    font-size: 48px;
    line-height: 56px;
    font-weight: 400;
    margin: 0;
    padding: 0;
}

/* =============================================================================
   4. TOOLBAR (the filter bar row)
   Flexbox row with filters on the left and Search + Sort on the right.
   ============================================================================= */
.lx-gold-list-acf-block-selection-wrapper {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-bottom: 32px;
    padding-bottom: 0;
}

.lx-gold-list-acf-block-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.lx-gold-list-acf-block-toolbar-left {
    display: flex;
    align-items: center;
    gap: 16px;
    position: relative;
}

.lx-gold-list-acf-block-toolbar-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

/* =============================================================================
   5. FILTER BUTTONS (Region / Profession / Year triggers)
   The text + chevron buttons that open/close the dropdown panels.
   The .open class is added by JS when the dropdown is open — it rotates the chevron.
   ============================================================================= */
.lx-gold-list-acf-block-filter-btn {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 16px;
    font-weight: normal;
    letter-spacing: initial;
    line-height: 24px;
    color: #1a1a1a;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    transition: color 0.2s;
}

.lx-gold-list-acf-block-filter-btn:hover {
    color: #555;
}

.lx-gold-list-acf-block-filter-btn svg {
    transition: transform 0.25s ease;
    transform-origin: center;
    flex-shrink: 0;
}

.lx-gold-list-acf-block-filter-btn.open svg {
    transform: rotate(180deg);
}

/* =============================================================================
   6. FILTER DROPDOWN PANELS
   The white panel that appears below the filter button when clicked.
   Width is set dynamically by JavaScript to match the grid width exactly.
   Position anchors to .lx-gold-list-acf-block-toolbar-left (not to the individual button)
   so all dropdowns open from the same left edge.
   ============================================================================= */
.lx-gold-list-acf-block-filter-wrap {
    position: static;
}

.lx-gold-list-acf-block-filter-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 4px 48px 0px;
    z-index: 200;
    padding: 24px;
    width: auto; /* JS sets this to match .lx-gold-list-acf-block-grid width exactly */
}

.lx-gold-list-acf-block-filter-dropdown.active {
    display: block;
}

.lx-gold-list-acf-block-filter-dropdown-inner {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.lx-gold-list-acf-block-filter-dropdown-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-left: auto;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    transition: color 0.2s;
}

.lx-gold-list-acf-block-filter-dropdown-close:hover {
    color: #555;
}

/* =============================================================================
   7. CHECKBOX GRID INSIDE DROPDOWNS
   4-column grid layout for the filter checkboxes.
   accent-color: #000 makes the checkboxes black when ticked.
   ============================================================================= */
.lx-gold-list-acf-block-dropdown-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    flex: 1;
}

.lx-gold-list-acf-block-dropdown-grid label {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 16px;
    font-weight: normal;
    line-height: 24px;
    color: #000;
    cursor: pointer;
    letter-spacing: initial;
}

.lx-gold-list-acf-block-dropdown-grid input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
    accent-color: #000; /* makes checkboxes black when ticked */
    flex-shrink: 0;
}

/* =============================================================================
   8. SORT BUTTON & DROPDOWN
   The "Sort" button and its dropdown panel of sort options.
   .active class on a dropdown item shows it as underlined (current selection).
   ============================================================================= */
.lx-gold-list-acf-block-sort-btn {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 16px;
    font-weight: normal;
    letter-spacing: initial;
    line-height: 24px;
    color: #1a1a1a;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    transition: color 0.2s;
}

.lx-gold-list-acf-block-sort-btn:hover {
    color: #555;
}

.lx-gold-list-acf-block-sort-wrap {
    position: relative;
}

/* ── Sort dropdown ───────────────────────────────────────────────────────────── */
.lx-gold-list-acf-block-sort-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background-color: #fff;
    box-shadow: rgba(0, 0, 0, 0.12) 0px 4px 48px 0px;
    z-index: 200;
    padding: 8px 24px 16px;
    min-width: 180px;
}

.lx-gold-list-acf-block-sort-dropdown.active {
    display: block;
}

.lx-gold-list-acf-block-sort-dropdown-item {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 16px;
    font-weight: normal;
    line-height: 24px;
    color: #000;
    letter-spacing: initial;
    padding: 10px 0;
    cursor: pointer;
    user-select: none;
    transition: color 0.2s;
}

.lx-gold-list-acf-block-sort-dropdown-item:hover {
    color: #555;
}

.lx-gold-list-acf-block-sort-dropdown-item.active {
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* =============================================================================
   9. SEARCH INPUT
   Minimal text input with a bottom border only (no box).
   The border thickens on focus to indicate it's active.
   ============================================================================= */
.lx-gold-list-acf-block-search-wrap {
    display: flex;
    align-items: center;
    gap: 0;
}

.lx-gold-list-acf-block-search-input {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 16px;
    font-weight: normal;
    line-height: 24px;
    color: #000;
    background: none;
    border: none;
    border-bottom: 1px solid #ccc;
    outline: none;
    padding: 4px 0;
    width: 180px;
    transition: border-color 0.2s;
}

.lx-gold-list-acf-block-search-input:focus {
    border-bottom: 2px solid #000;
    padding-bottom: 3px;
}

.lx-gold-list-acf-block-search-input::placeholder {
    color: #aaa;
    font-size: 14px;
}

.lx-gold-list-acf-block-search-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 8px;
    color: #000;
    transition: color 0.2s;
}

.lx-gold-list-acf-block-search-btn:hover {
    color: #555;
}

/* =============================================================================
   10. SELECTED FILTER PILLS
   The row of rounded pill buttons showing active filters.
   Each pill has an ✕ button to remove just that filter.
   The row is hidden (display: none) when no filters are active.
   "Clear all" link uses text-decoration underline to look like a link.
   ============================================================================= */
.lx-gold-list-acf-block-selected-filters {
    display: none;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.lx-gold-list-acf-block-selected-filters.active {
    display: flex;
}

.lx-gold-list-acf-block-selected-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 14px;
    font-weight: normal;
    line-height: 20px;
    color: #000;
    background: #fff;
    border: 1px solid #999;
    border-radius: 24px;
    padding: 6px 16px;
    white-space: nowrap;
}

.lx-gold-list-acf-block-selected-pill-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    flex-shrink: 0;
    transition: color 0.2s;
}

.lx-gold-list-acf-block-selected-pill-close:hover {
    color: #555;
}

.lx-gold-list-acf-block-selected-clear-all {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 14px;
    font-weight: normal;
    line-height: 20px;
    color: #000;
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
    padding: 0;
    margin-left: 4px;
    transition: color 0.2s;
}

.lx-gold-list-acf-block-selected-clear-all:hover {
    color: #555;
}

/* =============================================================================
   12. POSTS GRID
   3-column CSS grid at desktop. Responsive breakpoints change this to 2 or 1 col.
   position: relative is needed for the spinner overlay to position correctly.
   ============================================================================= */
.lx-gold-list-acf-block-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    min-height: 200px;
    position: relative;
}

/* =============================================================================
   11. LOADING SPINNER
   Shown as an overlay on the grid during AJAX requests.
   The spinner div is always in the DOM — the .lx-gl-acf-block-loading class on the grid
   switches it from display:none to display:flex.
   backdrop-filter: blur adds a subtle frosted-glass effect over the cards.
   ============================================================================= */
.lx-gold-list-acf-block-spinner {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 20;
    background: rgba(255, 255, 255, 0.75);
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.lx-gold-list-acf-block-grid.lx-gl-acf-block-loading .lx-gold-list-acf-block-spinner {
    display: flex;
}

.lx-gold-list-acf-block-spinner-ring {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-top-color: #000;
    animation: lx-spin 0.75s linear infinite;
}

@keyframes lx-spin {
    to { transform: rotate(360deg); }
}

/* Keep old ::after removed — spinner div handles overlay now */

/* =============================================================================
   13. ARTICLE CARD
   Each Gold List honoree card. The hover state scales the image slightly.
   ============================================================================= */
.lx-gold-list-acf-block-article {
    cursor: pointer;
}

.lx-gold-list-acf-block-article:hover .lx-gold-list-acf-block-article-image-wrapper img {
    transform: scale(1.03);
}

/* =============================================================================
   14. IMAGE WRAPPER, YEAR BADGES & GOLD FLAG
   The image wrapper is position:relative so the badges and gold flag
   can be positioned absolutely on top of the image.

   YEAR BADGES: White pill buttons at the bottom of the image.
   GOLD FLAG:   Gold bookmark SVG at the top-right. Hidden by default;
                CSS shows it only when the article has .lx-article-is-gold-list.
   ============================================================================= */
.lx-gold-list-acf-block-article-image-wrapper {
    position: relative;
    overflow: hidden;
    background-color: #e5e5e5;
    margin: 0 0 24px;
    padding: 0;
}

.lx-gold-list-acf-block-article-image-link {
    display: block;
    width: 100%;
    text-decoration: none;
    overflow: hidden;
}

.lx-gold-list-acf-block-article-image-wrapper img,
.lx-gold-list-acf-block-article-image {
    width: 100%;
    height: auto;
    max-height: 312px;
    min-height: 312px;
    object-fit: cover;
    display: block;
    margin: 0;
    padding: 0;
    transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ── Year badges on image ────────────────────────────────────────────────────── */
.lx-gold-list-acf-block-article-image-badges {
    position: absolute;
    bottom: 16px;
    left: 16px;
    right: 16px;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    pointer-events: none;
}

.lx-gold-list-acf-block-article-image-badge {
    background-color: #ffffff;
    padding: 8px 20px;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 13px;
    font-weight: 400;
    border-radius: 20px;
    display: inline-block;
    text-decoration: none;
    color: #000;
    line-height: 16px;
    white-space: nowrap;
}

/* ── Gold flag ───────────────────────────────────────────────────────────────── */
.lx-gold-list-acf-block-article-gold-flag {
    display: none;
    position: absolute;
    top: 0;
    right: 24px;
    z-index: 11;
    filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.3));
}

.lx-article-is-gold-list .lx-gold-list-acf-block-article-gold-flag {
    display: block;
}

/* =============================================================================
   15. CATEGORY LABEL & DOT SEPARATOR
   Shows the profession label (e.g. "ARCHITECT") in small uppercase text.
   Dots (•) are used to separate multiple labels if there are more than one.
   pointer-events: none prevents the labels from being clickable.
   ============================================================================= */
.lx-gold-list-acf-block-article-categories {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    margin: 0 0 16px;
    padding: 0;
    flex-wrap: wrap;
}

.lx-gold-list-acf-block-article-categories a,
.lx-gold-list-acf-block-article-categories span.lx-cat-label {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 12px;
    font-weight: normal;
    letter-spacing: 1.8px;
    line-height: 16px;
    text-transform: uppercase;
    color: #000;
    text-decoration: none;
    display: inline-block;
    cursor: default;
    pointer-events: none;
}

.lx-gold-list-acf-block-article-category-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 12px;
    line-height: 16px;
    color: #000;
}

.lx-gold-list-acf-block-article-title,
.lx-gold-list-acf-block-article-title a {
    font-family: 'Libre Caslon Display', serif;
    font-size: 28px;
    line-height: 36px;
    font-weight: 400;
    color: #000;
    margin: 0 0 0;
    padding: 0;
    text-decoration: none;
}

.lx-gold-list-acf-block-article-title a {
    display: block;
    transition: color 0.2s;
}

.lx-gold-list-acf-block-article-title a:hover {
    color: #555;
}

/* =============================================================================
   17. NO RESULTS MESSAGE
   Shown when no posts match the active filters.
   Spans all grid columns (grid-column: 1 / -1) so it's full-width.
   ============================================================================= */
.lx-gold-list-acf-block-no-results {
    grid-column: 1 / -1;
    padding: 48px 0;
    text-align: center;
    font-family: 'Instrument Sans', sans-serif;
    font-size: 16px;
    color: #888;
}

/* =============================================================================
   18. LOAD MORE BUTTON
   Centered below the grid. Inverts to white-on-black on hover.
   .lx-gl-acf-block-hidden hides it when all posts are loaded.
   .lx-gl-acf-block-loading-btn dims it and shows a wait cursor while AJAX is running.
   ============================================================================= */
.lx-gold-list-acf-block-load-more-wrap {
    display: flex;
    justify-content: center;
    margin-top: 48px;
}

.lx-gold-list-acf-block-load-more-btn {
    font-family: 'Instrument Sans', sans-serif;
    font-size: 14px;
    font-weight: normal;
    letter-spacing: 1.8px;
    line-height: 16px;
    text-transform: uppercase;
    color: #000;
    background: #fff;
    border: 1px solid #000;
    padding: 0 32px;
    height: 48px;
    min-width: 64px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s, color 0.3s;
}

.lx-gold-list-acf-block-load-more-btn:hover {
    background: #000;
    color: #fff;
}

.lx-gold-list-acf-block-load-more-btn.lx-gl-acf-block-loading-btn {
    opacity: 0.6;
    cursor: wait;
    pointer-events: none;
}

.lx-gold-list-acf-block-load-more-btn.lx-gl-acf-block-hidden,
.lx-gl-acf-block-hidden {
    display: none !important;
}

/* =============================================================================
   19. RESPONSIVE BREAKPOINTS
   ─────────────────────────────────────────────────────────────────────────────
   ≥ 1280px  (large desktop)  → 3-column grid, large heading
   768–1279px (tablet)        → 2-column grid, medium heading
   ≤ 992px                    → dropdown grid switches to 2 columns
   ≤ 767px   (mobile)         → 1-column grid, toolbar stacks vertically
   ≤ 600px                    → dropdown grid switches to 1 column
   ≤ 500px                    → search/sort stack vertically
   ============================================================================= */

/* Desktop large */
@media (min-width: 1280px) {
    .lx-gold-list-acf-block-subheading {
        font-size: 48px;
        line-height: 56px;
    }

    .lx-gold-list-acf-block-selection-wrapper {
        margin-bottom: 32px;
    }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1279px) {
    .lx-gold-list-acf-block-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .lx-gold-list-acf-block-article-image-wrapper img,
    .lx-gold-list-acf-block-article-image {
        max-height: 400px;
        min-height: 400px;
    }

    .lx-gold-list-acf-block-subheading {
        font-size: 36px;
        line-height: 44px;
    }
}

/* Tablet grid */
@media (max-width: 992px) {
    .lx-gold-list-acf-block-dropdown-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Mobile */
@media (max-width: 767px) {
    .lx-gold-list-acf-block-section {
        margin: 0 0 32px;
    }

    .lx-gold-list-acf-block-toolbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .lx-gold-list-acf-block-toolbar-right {
        width: 100%;
        justify-content: space-between;
    }

    .lx-gold-list-acf-block-grid {
        grid-template-columns: 1fr;
    }

    .lx-gold-list-acf-block-article-image-wrapper img,
    .lx-gold-list-acf-block-article-image {
        max-height: 400px;
        min-height: 400px;
    }

    .lx-gold-list-acf-block-subheading {
        font-size: 32px;
        line-height: 40px;
    }

    .lx-gold-list-acf-block-sort-dropdown {
        right: auto;
        left: 0;
    }
}

/* Very small */
@media (max-width: 600px) {
    .lx-gold-list-acf-block-dropdown-grid {
        grid-template-columns: 1fr;
    }

    .lx-gold-list-acf-block-toolbar-left {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        width: 100%;
    }

    .lx-gold-list-acf-block-filter-dropdown {
        max-width: calc(100vw - 24px);
    }
}

@media (max-width: 500px) {
    .lx-gold-list-acf-block-toolbar-right {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .lx-gold-list-acf-block-sort-wrap,
    .lx-gold-list-acf-block-search-wrap {
        width: 100%;
    }

    .lx-gold-list-acf-block-sort-dropdown,
    .lx-gold-list-acf-block-filter-dropdown {
        position: relative;
        top: auto;
        left: 0;
        right: 0;
        width: 100%;
        max-width: 100%;
        margin-top: 8px;
    }

    .lx-gold-list-acf-block-search-input {
        width: 100%;
    }
}
/* =============================================================================
   EDITOR PARITY (Gutenberg block editor only)
   =============================================================================
   The block editor injects its own defaults (underlined links, boxed inputs,
   its own typography and block-gap margins) via .editor-styles-wrapper
   selectors, which override the block styles above inside the editor iframe.
   These rules re-assert the frontend appearance with editor-level specificity
   so the editor preview always matches the frontend. They have no effect on
   the frontend because .editor-styles-wrapper never exists there.
   ============================================================================= */

/* Section base typography */
.editor-styles-wrapper .lx-gold-list-acf-block-section {
  font-family: "Instrument Sans", sans-serif !important;
  color: #1a1a1a !important;
  margin: 0 !important;
}

/* Heading */
.editor-styles-wrapper .lx-gold-list-acf-block-subheading {
  font-family: "Libre Caslon Display", serif !important;
  font-size: 48px !important;
  line-height: 56px !important;
  font-weight: 400 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-decoration: none !important;
}

/* Kill the editor's default link underline / colors inside the block */
.editor-styles-wrapper .lx-gold-list-acf-block-section a,
.editor-styles-wrapper .lx-gold-list-acf-block-section a:visited,
.editor-styles-wrapper .lx-gold-list-acf-block-section a:focus {
  text-decoration: none !important;
  color: inherit !important;
  box-shadow: none !important;
}

/* Article title */
.editor-styles-wrapper .lx-gold-list-acf-block-article-title,
.editor-styles-wrapper .lx-gold-list-acf-block-article-title a {
  font-family: "Libre Caslon Display", serif !important;
  font-size: 28px !important;
  line-height: 36px !important;
  font-weight: 400 !important;
  color: #000 !important;
  text-decoration: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
.editor-styles-wrapper .lx-gold-list-acf-block-article-title a {
  display: block !important;
}

/* Category labels + badges */
.editor-styles-wrapper .lx-gold-list-acf-block-article-categories,
.editor-styles-wrapper .lx-gold-list-acf-block-article-image-badge {
  font-family: "Instrument Sans", sans-serif !important;
}

/* Toolbar buttons (filters / sort / search / pills) — strip editor button chrome */
.editor-styles-wrapper .lx-gold-list-acf-block-filter-btn,
.editor-styles-wrapper .lx-gold-list-acf-block-sort-btn,
.editor-styles-wrapper .lx-gold-list-acf-block-search-btn,
.editor-styles-wrapper .lx-gold-list-acf-block-filter-dropdown-close,
.editor-styles-wrapper .lx-gold-list-acf-block-selected-pill,
.editor-styles-wrapper .lx-gold-list-acf-block-selected-pill-close,
.editor-styles-wrapper .lx-gold-list-acf-block-selected-clear-all,
.editor-styles-wrapper .lx-gold-list-acf-block-load-more-btn {
  font-family: "Instrument Sans", sans-serif !important;
  background: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #000 !important;
}
.editor-styles-wrapper .lx-gold-list-acf-block-filter-btn,
.editor-styles-wrapper .lx-gold-list-acf-block-sort-btn,
.editor-styles-wrapper .lx-gold-list-acf-block-search-btn,
.editor-styles-wrapper .lx-gold-list-acf-block-filter-dropdown-close,
.editor-styles-wrapper .lx-gold-list-acf-block-selected-clear-all {
  border: none !important;
}
.editor-styles-wrapper .lx-gold-list-acf-block-load-more-btn {
  border: 1px solid #000 !important;
}

/* Search input — bottom border only, no editor box styling */
.editor-styles-wrapper .lx-gold-list-acf-block-search-input {
  font-family: "Instrument Sans", sans-serif !important;
  font-size: 16px !important;
  line-height: 24px !important;
  color: #000 !important;
  background: none !important;
  border: none !important;
  border-bottom: 1px solid #ccc !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 4px 0 !important;
  width: 180px !important;
  min-height: 0 !important;
}
.editor-styles-wrapper .lx-gold-list-acf-block-search-input:focus {
  border-bottom: 2px solid #000 !important;
  padding-bottom: 3px !important;
}

/* Neutralise editor block-gap margins injected between elements */
.editor-styles-wrapper .lx-gold-list-acf-block-section > *,
.editor-styles-wrapper .lx-gold-list-acf-block-container > * {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}
.editor-styles-wrapper .lx-gold-list-acf-block-heading-wrapper {
  margin-bottom: 32px !important;
}
.editor-styles-wrapper .lx-gold-list-acf-block-selection-wrapper {
  margin-bottom: 32px !important;
}
.editor-styles-wrapper .lx-gold-list-acf-block-load-more-wrap {
  margin-top: 48px !important;
}

/* Let the block span the editor canvas like the frontend container */
.editor-styles-wrapper .wp-block[data-type="acf/gold-list-filtering"] {
  max-width: 1280px !important;
}