/*
 * Structural styling only — layout/spacing to make the component usable, not a
 * pixel match of the annotated XD spec (colours, exact spacing, tile aspect
 * ratios). Follow-up pass needed against the real design tokens once those are
 * available; see the "Integrations" spec artboards for the target look.
 */

.directory-grid-section {
    /* 30px per the spec artboard annotation for the H1-to-tabs gap — was 40px
       on both sides; only the top changes, bottom padding stays as it was. */
    padding: 30px 0 40px;
    position: relative;
}

/*
 * The shared base stylesheet's `.background-white` rule
 * (css/ModularPageBuilderBaseStyles.css) is `background-color: rgba(255, 255, 255)`
 * — invalid CSS (rgba needs 4 values), so browsers drop it and the section stays
 * transparent. That lets the page-wide fixed hero graphic
 * (`.talos_ts_background-top`/`-bottom`, also in that file) bleed through every
 * "white" section below the header instead of stopping at the hero band, which is
 * what broke the rainbow "Y" graphic on this page. That base rule is shared by
 * every Modular Page Builder page, so rather than edit it, these rules give this
 * component its own valid, scoped background so it actually occludes the graphic
 * as intended, without changing behaviour anywhere else.
 */
.directory-grid-section.background-white {
    background-color: #fff;
}

.directory-grid-section.background-glass {
    background-color: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(6px);
}

.directory-grid-section.background-clear {
    background-color: transparent;
}

.directory-grid-tabs {
    display: flex;
    gap: 24px;
    border-bottom: 1px solid #e5e5e5;
    margin-bottom: 24px;
}

.directory-grid-tab {
    padding: 8px 0;
    font-weight: 600;
    color: inherit;
    text-decoration: none;
    border-bottom: 2px solid transparent;
}

/* Rainbow underline on the active tab — same gradient stops as the card hover
   border and the theme's existing .btn-rainbow / pricing-table border-image,
   rather than the flat currentColor underline this had before. */
.directory-grid-tab.active {
    border-bottom-width: 3px;
    border-bottom-style: solid;
    border-image: linear-gradient(90deg, #67D1CE, #FFC424, #E22B7F) 1;
}

.directory-grid-heading {
    margin: 0 0 16px;
}

.directory-grid-sidebar {
    margin-bottom: 24px;
}

.directory-grid-search {
    position: relative;
}

.directory-grid-search-icon {
    position: absolute;
    top: 50%;
    left: 16px;
    transform: translateY(-50%);
    color: #9b9b9b;
    pointer-events: none;
}

.directory-grid-search-input {
    width: 100%;
    padding: 10px 14px 10px 38px;
    margin-bottom: 16px;
    border: 1px solid #d0d0d0;
    border-radius: 24px;
}

.directory-grid-filter {
    display: block;
    margin-bottom: 10px;
    padding-left: 4px;
    cursor: pointer;
}

/*
 * Sitewide reset in style.css — `:hover, :focus, :active { -webkit-appearance: none }`
 * on literally every element — strips the native radio circle the instant you hover
 * it, with nothing drawn in to replace it. Rather than touch that global rule (used
 * everywhere), these radios draw their own circle/dot so they render identically in
 * every state regardless of it.
 */
.directory-grid-filter input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    border: 1px solid #9b9b9b;
    border-radius: 50%;
    vertical-align: middle;
    position: relative;
    flex: none;
}

.directory-grid-filter input[type="radio"]:checked {
    border-color: #2ebffd;
}

.directory-grid-filter input[type="radio"]:checked::before {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #2ebffd;
}

.directory-grid-filters-toggle {
    display: none;
}

.directory-grid-tiles {
    row-gap: 20px;
}

.directory-tile-inner {
    position: relative;
    height: 100%;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    background: #fff;
    transition: box-shadow 0.2s ease;
}

/*
 * Soft blurred rainbow glow behind the card on hover, matching the mock (a diffuse
 * halo, not a crisp border line — that was my previous attempt and isn't the
 * target look). A pseudo-element sized slightly larger than the card, blurred and
 * faded in on hover, sitting behind it (z-index: -1) so it radiates outward past
 * the edges rather than tracing them. Needs to live on .directory-tile-inner
 * itself rather than .directory-tile-clip, since the clip wrapper's
 * `overflow: hidden` (for the full-bleed image) would cut the glow off — that's
 * also why the image/text got split into their own wrapper in tile.php.
 */
.directory-tile-inner::before {
    content: "";
    position: absolute;
    inset: -6px;
    z-index: -1;
    border-radius: 16px;
    background: linear-gradient(90deg, #67D1CE, #FFC424, #E22B7F);
    filter: blur(18px);
    opacity: 0;
    transition: opacity 0.2s ease;
}

.directory-tile-inner:hover {
    box-shadow: 0 16px 32px -16px rgba(0, 0, 0, 0.3);
}

.directory-tile-inner:hover::before {
    opacity: 0.55;
}

.directory-tile-clip {
    height: 100%;
    border-radius: inherit;
    overflow: hidden;
}

/*
 * Full-bleed, edge-to-edge — matches the mock, where the logo/brand-colour image
 * fills the entire top of the card with no surrounding box or padding.
 * `.directory-tile-clip`'s `overflow: hidden` above clips this to the card's
 * rounded top corners without needing radius on the image itself. `object-fit:
 * cover` fills the box exactly
 * like the mock's full-bleed brand tiles (TotalJobs/Microsoft/Twilio); a source
 * image with a lot of built-in transparent padding (rather than a tile graphic
 * cropped to this ratio) will get cropped tighter than it would under `contain` —
 * worth flagging to whoever uploads these that a pre-cropped tile graphic, same as
 * the brand-colour ones already are, is what this treatment expects.
 */
.directory-tile-img {
    aspect-ratio: 21 / 9;
}

.directory-tile-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.directory-tile-text {
    /* 20px per the "1920 Integrations spec" artboard annotation, not the 16px
       guess this had before */
    padding: 20px;
    border-top: 1px solid #ececec;
}

/*
 * Mobile-only: image left, text right, instead of stacked image-on-top like
 * every wider layout. 575px matches the tile's own `col-sm-6` breakpoint —
 * this is exactly the width where tiles are already full-width/single-column,
 * so it only kicks in for the layout this was actually designed for.
 */
@media (max-width: 575.98px) {
    /* Grey border around each tile card removed on mobile — matches the
       reference, which shows plain white cards with no outline at this size. */
    .directory-tile-inner {
        border: none;
    }

    /*
     * The rainbow glow is a :hover effect (see the base .directory-tile-inner
     * rules) — mobile browsers commonly trigger :hover on tap and then leave
     * it "stuck" on until something else is tapped, since touch doesn't
     * really have a hover state the way a mouse does. Removing it here
     * rather than from the base rule, so desktop/tablet pointer devices keep
     * the effect as intended.
     */
    .directory-tile-inner:hover::before {
        opacity: 0 !important;
    }

    .directory-tile-inner:hover {
        box-shadow: none !important;
    }

    .directory-tile-clip {
        display: flex;
        /* flex-start, not center: the logo's top edge lines up with the
           title's top edge, rather than centering against the full height of
           title+subtitle together. */
        align-items: flex-start;
    }

    .directory-tile-img {
        /* Not a square any more — that made it as tall as the full 2-line
           title+subtitle block. A shorter, wider chip that sits at the top
           without stretching down to match the text, per the reference. */
        width: 100px;
        height: 56px;
        flex: none;
        /*
         * A separate, floating rounded card of its own — not flush against
         * the tile's edges. The grey "border" reported before was actually
         * .directory-tile-inner's own card border (removed above), not this
         * box's shadow — this element's own overflow:hidden only clips its
         * *children* (the <img>), not its own box-shadow, so the shadow was
         * never actually the problem and is safe to bring back here.
         */
        margin: 10px;
        border-radius: 14px;
        background: #fff;
        overflow: hidden;
        box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.2);
    }

    .directory-tile-img img {
        /* Cropping to fill a square (object-fit: cover, the desktop/tablet
           behaviour) was cutting logos off — "twilio", "Facebook" and the
           "Video Interview" text were all clipped. `contain` shows the whole
           image, matching "we should see the whole image". */
        width: 100%;
        height: 100%;
        object-fit: contain;
        padding: 8px;
        box-sizing: border-box;
    }

    .directory-tile-text {
        flex: 1;
        min-width: 0;
        border-top: 0;
        padding: 12px 16px;
    }
}

/*
 * Per the spec artboard: title is the theme's "small heading" style (19px,
 * semibold) and subtitle is plain "Body" copy — both literal references to the
 * site's real type system (style.css: h1-h5 use Raleway; the ModularPageBuilder
 * scope overrides plain <p> to Montserrat — see ModularPageBuilderBaseStyles.css),
 * not values to invent. Title is set to Raleway explicitly because it's a <p>
 * tag styled to look like a heading, so it would otherwise inherit the
 * Montserrat-for-<p> override instead of the heading font.
 */
.directory-tile-title {
    font-family: 'Raleway', sans-serif;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.25;
    margin: 0 0 2px;
}

.directory-tile-subtitle {
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    margin: 0;
}

.directory-tile-badge {
    position: absolute;
    top: 12px;
    right: 12px;
    padding: 3px 10px;
    border-radius: 20px;
    background: #62d1cf;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    z-index: 1;
}

.directory-tile-link {
    position: absolute;
    inset: 0;
}

.directory-grid-load-more-wrap {
    text-align: center;
    margin-top: 24px;
}

/* Matches .load-more-button a.load-more-integrations in css/integrations.css —
   same pill-bordered blue link used on the original Integrations/Features/Guides
   "load more", rather than a plain grey button. */
.directory-grid-load-more {
    display: inline-block;
    padding: 10px 32px;
    border: 1px solid #cccccc;
    border-radius: 40px;
    color: #2ebffd;
    font-weight: 600;
    text-decoration: none;
    background: transparent;
}

.directory-grid-load-more:hover,
.directory-grid-load-more:focus {
    border-color: #2ebffd;
    color: #2ebffd;
}

.directory-grid-load-more i {
    margin-left: 10px;
}

.directory-grid-section.loading {
    opacity: 0.6;
    pointer-events: none;
}

/*
 * Mobile tabs/filters dropdowns — matching the site's own mobile nav menu
 * accordion exactly (Components/main_nav/style.css: .tnav__mobile-toggle /
 * .tnav__mobile-submenu), per the spec's "style dropdown same as mobile menu"
 * note. Same row height (53px), same collapsed toggle styling, same gradient
 * border + chevron rotation on open, same #fcfcfc revealed-list background —
 * values copied directly from that component rather than invented here.
 */
@media (max-width: 991px) {
    /*
     * Cancels out the header component's own `.py-50` bottom padding (50px —
     * ModularPageBuilderBaseStyles.css, shared by other pages, not something
     * to edit directly) rather than fighting it from this side with more
     * padding of my own. This section's 30px top padding is then the *only*
     * visible gap, matching the spec exactly instead of stacking on top of
     * that 50px.
     */
    .directory-grid-section {
        margin-top: -50px;
    }

    /*
     * Text/padding and the border line are handled separately here: the
     * toggle itself keeps zero left padding so its label aligns with the H1
     * above (that H1 sits flush against the page's own natural gutter —
     * adding this component's own left padding on top of it was pushing the
     * label further right than the H1, which is the "alignment is still
     * off"). The border line is a full-bleed pseudo-element instead of the
     * button's own border-bottom, so it reaches the true screen edges rather
     * than stopping at this column's padded width.
     */
    .directory-grid-tabs-toggle,
    .directory-grid-filters-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-height: 53px;
        padding: 0 20px 0 0;
        background: none;
        border: 0;
        font-size: 16px;
        font-weight: 700;
        color: #1e1e1e;
        text-align: left;
        cursor: pointer;
        position: relative;
    }

    .directory-grid-tabs-toggle::after,
    .directory-grid-filters-toggle::after {
        content: "";
        position: absolute;
        left: 50%;
        bottom: 0;
        width: 100vw;
        transform: translateX(-50%);
        border-bottom: 1px solid #efefef;
    }

    /* First toggle in the stack had no boundary above it at all — only the
       line below it. This closes the top of that first dropdown box. */
    .directory-grid-tabs-toggle::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 0;
        width: 100vw;
        transform: translateX(-50%);
        border-top: 1px solid #efefef;
    }

    .directory-grid-tabs-toggle i,
    .directory-grid-filters-toggle i {
        transition: transform 0.2s ease;
        flex-shrink: 0;
        margin-left: 8px;
    }

    /*
     * "'Types' dropdown sticks to top on scroll" — per the spec artboard
     * annotation. top:65px/background:white are the same values already
     * established for this exact behaviour elsewhere in the theme
     * (css/marketplace.css .mobile-sticky) — kept for consistency even though
     * the mechanism had to change.
     *
     * position:sticky (what this used to say) can't actually work on this
     * page: this section's ancestor #ModularPageBuilder has overflow:hidden
     * (needed to clip the rainbow corner graphic to the header on this hero
     * style — shared by other pages using it, so not something to remove),
     * and *any* overflow other than visible on an ancestor breaks sticky
     * completely. scripts.js now switches this to position:fixed via JS
     * once scrolled past instead, with a placeholder holding its space in
     * the layout — background/z-index are applied there since the fixed
     * positioning itself is inline (JS-set), not from this class.
     */
    .directory-grid-sidebar.mobile-sticky {
        background: #fff;
    }

    .directory-grid-sidebar-placeholder {
        height: 0;
    }

    /* Tabs dropdown gets the gradient only while open — the grey line is
       what separates it from the filters dropdown below it at rest. */
    .directory-grid-tabs-wrap.is-open > .directory-grid-tabs-toggle::after {
        border-bottom: 1px solid;
        border-image: linear-gradient(90deg, #67D1CE, #FFC424, #E22B7F) 1;
    }

    /* The final/last dropdown (filters) carries the rainbow bottom always,
       not just while open — marks it as the last item in the stack. */
    .directory-grid-filters-toggle::after {
        border-bottom: 1px solid;
        border-image: linear-gradient(90deg, #67D1CE, #FFC424, #E22B7F) 1;
    }

    .directory-grid-tabs-wrap.is-open > .directory-grid-tabs-toggle i,
    .directory-grid-filters.is-open > .directory-grid-filters-toggle i {
        transform: rotate(180deg);
    }

    /* Keyword search dropped entirely on mobile. */
    .directory-grid-search {
        display: none;
    }

    /* Revealed tab list — hidden until .is-open, then styled as a vertical
       list of rows rather than the desktop horizontal tab bar. */
    .directory-grid-tabs {
        display: none;
        border-bottom: 0;
        margin-bottom: 0;
        background: #fcfcfc;
    }

    .directory-grid-tabs-wrap.is-open .directory-grid-tabs {
        display: block;
    }

    .directory-grid-tabs-wrap .directory-grid-tab {
        display: block;
        min-height: 53px;
        line-height: 53px;
        padding: 0 20px 0 32px;
        font-size: 16px;
        font-weight: 500;
        font-family: 'Montserrat', sans-serif;
        border-bottom: 1px solid #efefef;
        /* The desktop gradient underline reads as a tab strip, not a list
           row — same colour-change treatment main_nav uses for its own
           active nested item instead. */
        border-bottom-width: 1px !important;
        border-image: none !important;
    }

    .directory-grid-tabs-wrap .directory-grid-tab.active {
        color: #25837D;
    }

    /* Revealed filters list — same treatment. */
    .directory-grid-filters-list {
        display: none;
        background: #fcfcfc;
    }

    .directory-grid-filters.is-open .directory-grid-filters-list {
        display: block;
    }

    .directory-grid-filters-list .directory-grid-filter {
        display: flex;
        align-items: center;
        min-height: 53px;
        margin-bottom: 0;
        padding: 0 20px;
        font-size: 16px;
        font-weight: 500;
        font-family: 'Montserrat', sans-serif;
        border-bottom: 1px solid #efefef;
    }
}