/* ================================================
   DATA TABLE BLOCK
   ================================================
   Filter bar + a two-column ranked table + pagination.

   THE the_content TABLE WRAPPER
   functions.php filters the_content and wraps EVERY <table> in
   <div class="table-scroll-wrapper">. Block output goes through that
   filter, so on the server the grid's children are those divs - while
   data-table.js appends bare <table> elements when it re-renders. The
   layout therefore hangs off `.data-table__cols > *`, which is the grid
   item in both cases, and never off `> table`.

   GLOBAL RULES BEING OUTRANKED (see CLAUDE.md section 4)
     table td { border: 1px solid #1e1e23 }  ->  reset the shorthand first
     h2 { font-size: 21px; font-weight: normal } -> restate the house 2rem
     button svg path { fill: #f0ebf0 } -> the pill's x is text, not an svg
   ================================================ */

.data-table {
    padding: 4rem 0;
    position: relative;
}

/* Same container as the Customer Stories listing, so the two blocks line up
   when they sit on the same page. */
.data-table__container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    width: 100% !important; /* Prevent external CSS from breaking the layout */
}

/* Section heading — the house standard (CLAUDE.md 4b), not the global 21px h2. */
.data-table .data-table__heading {
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.316;
    margin: 0 0 1rem;
    color: #1e1e23;
}

.data-table__intro {
    margin: 0 0 2rem;
    max-width: 60ch;
    color: #4a4a4a;
}

/* ------------------------------------------------
   Filter bar
   ------------------------------------------------ */

.data-table__filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
    padding: 1.5rem;
    background-color: #f7f7f8;
    border-radius: 12px;
}

.data-table__filter {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.data-table__label {
    font-size: 0.875rem;
    font-weight: 500;
    color: #4a4a4a;
}

.data-table__select-wrap {
    position: relative;
    display: block;
}

/*
 * Matched to .cs-listing__select so the two filter bars are the same control:
 * 52px, 6px radius, #d4d4d4 at rest, 0.9375rem.
 */
.data-table__select {
    /* Reset the theme's select styling rather than fight it piecemeal. */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    height: 52px;
    margin: 0;
    padding: 0 3rem 0 1rem;
    background-color: #ffffff;
    border: 1px solid #d4d4d4;
    border-radius: 6px;
    color: #1e1e23;
    font-family: inherit;
    font-size: 0.9375rem;
    line-height: 1.2;
    cursor: pointer;
}

.data-table__select:hover {
    border-color: #b4b4b4;
}

/*
 * BOTH :focus and :focus-visible, as the Customer Stories filters do. Styling
 * only :focus-visible left a plain mouse click falling through to the browser's
 * own focus ring - the blue/black outline that is not ours. Brand green, no
 * outline, same 3px halo as every other filter on the site.
 */
.data-table__select:focus,
.data-table__select:focus-visible {
    outline: none;
    border-color: #00e65f;
    box-shadow: 0 0 0 3px rgba(0, 230, 95, 0.22);
}

/* The chevron sits over the select; the select keeps the click target. */
.data-table__chevron {
    position: absolute;
    top: 50%;
    right: 1rem;
    transform: translateY(-50%);
    display: flex;
    color: #1e1e23;
    pointer-events: none;
}

/* ------------------------------------------------
   Active filter pills + result count
   ------------------------------------------------ */

.data-table__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 1.5rem 0 1.75rem;
    min-height: 2rem;
}

.data-table__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/*
 * Same label language as the Customer Story cards (.cs-card__tag): 0.75rem,
 * weight 600, 8px/14px, fully rounded, #f0ebf0 on #1e1e23. Those cards and
 * this block sit on the same site and a second pill style would read as a
 * different component. The only addition is the x, since unlike a card tag
 * these are interactive and remove the filter.
 *
 * `button.data-table__pill`, not `.data-table__pill`: the compiled stylesheet
 * styles buttons as small-caps chips (uppercase, 3.2px letter-spacing, 12px,
 * weight 300) at a specificity a single class cannot beat. The tag in the
 * selector is what wins, and without it the pills render as "AUTOMOTIVE".
 */
.data-table button.data-table__pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    /* Explicit reset: the global button rules add svg margins and a hover fill. */
    margin: 0;
    padding: 8px 14px;
    /* Fallback only: the real colour is set per value as an inline background,
       the same way .cs-card__tag takes its term colour. */
    background-color: #f5f5f5;
    border: 0;
    border-radius: 999px;
    color: #1e1e23;
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
    transition: background-color 0.18s ease;
    box-shadow: none;
}

/* The pill carries its own background, so hover darkens the x instead of
   fighting the inline colour. */
.data-table button.data-table__pill:hover .data-table__pill-x {
    opacity: 1;
}

/* Flag on the country pills. */
.data-table__pill-flag {
    display: block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    object-fit: cover;
    /* The artwork is drawn edge to edge; a hairline keeps a white or very pale
       flag from dissolving into a pale pill. */
    box-shadow: inset 0 0 0 1px rgba(30, 30, 35, 0.15);
    flex: none;
}

.data-table button.data-table__pill:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 230, 95, 0.35);
}

.data-table button.data-table__pill .data-table__pill-x {
    font-size: 1rem;
    line-height: 1;
    opacity: 0.7;
}

.data-table__count {
    margin: 0;
    color: #6b6b70;
    font-size: 0.9375rem;
}

/* ------------------------------------------------
   The table
   ------------------------------------------------ */

.data-table__cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 3rem;
    margin-top: 0.5rem;
    /*
     * Without this the grid stretches both items to the tallest, and a <table>
     * given surplus height distributes it across its rows. A short right-hand
     * column (say 5 rows against 10) then renders as five double-height rows
     * with what look like empty rows between them. `start` lets each table be
     * its natural height.
     */
    align-items: start;
}

/*
 * The grid item is the table OR the_content's .table-scroll-wrapper around it,
 * depending on whether the server or the JS rendered this page. min-width: 0
 * stops a long domain forcing the column wider than its share.
 */
.data-table__cols > * {
    min-width: 0;
}

.data-table .data-table__table {
    width: 100%;
    margin: 0;
    border: 0;
    border-collapse: collapse;
    background: none;
    /* Only reached via JS focus() after a page change; never a visible ring. */
    outline: none;
}

.data-table .data-table__th {
    padding: 0 0 1rem;
    border: 0;
    border-bottom: 1px solid rgba(30, 30, 35, 0.15);
    background: none;
    color: #6b6b70;
    font-size: 0.9375rem;
    font-weight: 400;
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
    white-space: nowrap;
}

.data-table .data-table__td {
    /* The global `table td { border: 1px solid #1e1e23 }` puts a black box on
       every cell. Reset the shorthand before drawing the one edge we want. */
    border: 0;
    border-bottom: 1px solid rgba(30, 30, 35, 0.08);
    padding: 1rem 0;
    background: none;
    color: #1e1e23;
    font-size: 1rem;
    line-height: 1.4;
    vertical-align: top;
}

.data-table .data-table__table tbody tr:last-child .data-table__td {
    border-bottom: 0;
}

.data-table .data-table__th--rank,
.data-table .data-table__td--rank {
    width: 4rem;
    padding-right: 1rem;
}

.data-table .data-table__td--rank {
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.data-table .data-table__th--domain,
.data-table .data-table__td--domain {
    padding-right: 1.5rem;
}

.data-table .data-table__td--domain {
    overflow-wrap: anywhere;
}

.data-table .data-table__td--source_type {
    color: #4a4a4a;
}

.data-table__empty {
    margin: 2rem 0;
    padding: 2rem;
    background-color: #f7f7f8;
    border-radius: 12px;
    color: #4a4a4a;
    text-align: center;
}

/* ------------------------------------------------
   Pagination
   Styled by the shared component:
   template-parts/snippets/pagination.css
   ------------------------------------------------ */

.data-table__pagination {
    margin-top: 2.5rem;
}

.data-table__pagination:empty {
    margin-top: 0;
}

/* ------------------------------------------------
   Responsive
   ------------------------------------------------ */

@media (max-width: 1024px) {
    .data-table {
        padding: 3rem 0;
    }

    .data-table .data-table__heading {
        font-size: 1.75rem;
    }

    .data-table__cols {
        gap: 0 2rem;
    }
}

@media (max-width: 900px) {
    /* Two ten-row columns side by side stop being readable well before the
       phone breakpoint, so they stack early. */
    .data-table__cols {
        grid-template-columns: 1fr;
        gap: 0;
    }

    /* Stacked, the second table's header row would repeat directly under the
       first table's last row; the border keeps them visibly separate. */
    .data-table__cols > * + * {
        margin-top: 2rem;
    }
}

@media (max-width: 768px) {
    .data-table .data-table__heading {
        font-size: 1.5rem;
    }

    .data-table__container {
        padding: 0 15px;
    }

    .data-table__filters {
        grid-template-columns: 1fr;
        padding: 1.25rem;
    }

    .data-table__meta {
        justify-content: flex-start;
    }

    .data-table .data-table__td,
    .data-table .data-table__th {
        font-size: 0.9375rem;
    }
}