/*
 * GFunnel — keyword search page (searchKeyword.php), after the references the
 * owner supplied. Rendered by inc/gf_search_page.inc.php; every rule is scoped
 * to a page carrying .gfsr, so nothing else on the site changes.
 *
 *  - The search HOME (no keyword, Bing's home page): a photograph behind the
 *    whole page, the search box in its upper part with pill buttons under it,
 *    and a frosted panel of thumbnail cards, "Recent on GFunnel".
 *  - The RESULTS (.gfsr-has-q): the same design - the photograph and the
 *    white search pill, the sections as frosted pills, then one column of
 *    dark panels: links as a numbered list, pictures as white cards.
 *
 * Tokens only below; the dark theme redefines tokens (the platform switches
 * with a `.dark` class, not the OS colour scheme).
 */

.gfsr,
body.gfsr-page #bx-page-search-keyword {
    --gfsr-card: #ffffff;
    --gfsr-card-border: rgba(15, 23, 42, .06);
    --gfsr-text: #111827;
    --gfsr-muted: #6b7280;
    --gfsr-box: #ffffff;
    --gfsr-box-text: #111827;
    --gfsr-accent: #f97316;
    --gfsr-shadow: 0 1px 3px rgba(15, 23, 42, .12);
    --gfsr-thumb: linear-gradient(135deg, #f3e8e2, #e4d4ec);
    --gfsr-line: #e5e7eb;
    --gfsr-link: #1a0dab;
    --gfsr-field: #f1f3f4;
    --gfsr-page: #1a1322;
    --gfsr-story: #1f1729;
    --gfsr-accent-deep: #c2410c;
}

.dark .gfsr,
.dark body.gfsr-page #bx-page-search-keyword {
    --gfsr-card: #241a2f;
    --gfsr-card-border: rgba(255, 255, 255, .08);
    --gfsr-text: #f1f5f9;
    --gfsr-muted: #94a3b8;
    --gfsr-box: #1f2937;
    --gfsr-box-text: #f1f5f9;
    --gfsr-shadow: 0 1px 3px rgba(0, 0, 0, .5);
    --gfsr-thumb: linear-gradient(135deg, #2d2238, #3a2c48);
    --gfsr-line: #3c4043;
    --gfsr-link: #8ab4f8;
    --gfsr-field: #303134;
}

/* ---- the page frame: the photograph runs edge to edge ------------------- */

/* The page's stock cover ("Search by Keyword" over a photo strip) would sit
   on top of the hero and say the same thing twice. */
body.gfsr-page #bx-content-with-cover-wrapper .bx-cover-gap {
    display: none;
}

/* Measured on the live page: the content sits inside .bx-page-wrapper's
   24px gutter and width cap (signed out) or #bx-content-wrapper's gutter
   (member shell), with a top margin on <main>. Only this page drops them;
   the panel below re-centres the results itself. */
body.gfsr-page .bx-page-wrapper {
    max-width: none;
    padding-left: 0;
    padding-right: 0;
}
body.gfsr-page #bx-content-wrapper {
    padding-left: 0;
    padding-right: 0;
}
body.gfsr-page #bx-content-main {
    margin-top: 0;
    margin-bottom: 0;
}

/* The hero's own block: no box around it. */
body.gfsr-page #bx-layout-cell-1 > .bx-page-block-container:first-child > .bx-db-container {
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}
body.gfsr-page #bx-layout-cell-1 > .bx-page-block-container:first-child .bx-db-content {
    padding: 0;
}

/* ---- the search home: a dark page, the photograph across its top ------- */

/* The owner's design: a deep plum page with the photograph at the top,
   fading into it. The photograph is a fixed layer behind the page - under
   the header at the top, as Bing's is - and the fade to the page colour
   runs over its lower part, so cards further down sit on the dark ground.
   Measured: only <body> paints a background on this page, and it is
   propagated to the canvas, which a z-index:-1 layer paints above. */
body.gfsr-page-home {
    background: #1a1322; /* = --gfsr-page, which is not defined on <body> */
}
/* A signed-in member's page carries the site canvas (gf_header.css: a
   lavender-to-mint gradient, !important, fixed). It must not show through
   either search page, so both are beaten here with the same weight and a
   higher specificity. */
html:not(.dark) body.bx-def-color-bg-page.gfsr-page-home {
    background-color: #1a1322 !important;
    background-image: none !important;
}
.gfsr-backdrop {
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background-color: #3b2a4a;
    /* Without a photograph: a dusk sky over layered hills, drawn in CSS. */
    background-image:
        radial-gradient(circle at 70% 58%, rgba(255, 236, 200, .9) 0 4%, transparent 4.5%),
        radial-gradient(ellipse 120% 40% at 20% 100%, #3a2440 0 45%, transparent 46%),
        radial-gradient(ellipse 110% 38% at 85% 104%, #4a2c4c 0 45%, transparent 46%),
        linear-gradient(180deg, #3b3a6b 0%, #9a5a7a 40%, #e08a6a 70%, #f0b48a 100%);
    background-size: cover;
    background-position: center;
}
.gfsr-photo .gfsr-backdrop {
    background-image: var(--gfsr-photo);
    background-position: center 35%;
}
.gfsr-backdrop::after {
    /* Darker at the very top for the header, then a fade into the page. */
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 6, 16, .35) 0, rgba(10, 6, 16, 0) 22%, rgba(10, 6, 16, 0) 55%, var(--gfsr-page) 96%);
}

/* The header on the search home: glass over the photograph. The public
   header turns light-on-dark and drops its own search box (the page IS the
   search box); the member header keeps its colours on frosted white. */
body.gfsr-page #bx-toolbar {
    background: rgba(255, 255, 255, .72);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: none;
    border-bottom-color: transparent;
}
.dark body.gfsr-page #bx-toolbar,
body.dark.gfsr-page #bx-toolbar {
    background: rgba(17, 24, 39, .72);
}
body.gfsr-page #bx-toolbar.gf-pub {
    background: rgba(20, 12, 28, .28);
    border-bottom: 0;
}
body.gfsr-page #bx-toolbar.gf-pub .gf-pub-name,
body.gfsr-page #bx-toolbar.gf-pub .gf-pub-signin,
body.gfsr-page #bx-toolbar.gf-pub .gf-pub-search-mobile {
    color: #fff;
    text-shadow: 0 1px 8px rgba(0, 0, 0, .35);
}
body.gfsr-page #bx-toolbar.gf-pub .gf-pub-search,
body.gfsr-page #bx-toolbar.gf-pub .gf-pub-search-mobile {
    visibility: hidden;
}

/* ---- the hero: places the box and pills over the photograph ------------- */

.gfsr-hero {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    min-height: max(520px, calc(100vh - 64px));
    padding: 150px 24px 48px;
    box-sizing: border-box;
    color: #fff;
    background: none;
}
/* With a feed under it, the hero leaves the feed's top in view (Bing). */
.gfsr-has-feed .gfsr-hero {
    min-height: max(470px, calc(68vh - 64px));
}

.gfsr-hero-in {
    position: relative;
    width: 100%;
    max-width: 900px;
    text-align: center;
}

.gfsr-asked {
    display: inline-block;
    margin: 18px 0 0;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .35);
    font-size: 14px;
    color: #fff;
}

.gfsr-credit {
    position: absolute;
    right: max(32px, calc((100% - 1376px) / 2 + 32px));
    bottom: 12px;
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 14px;
    border-radius: 10px;
    background: rgba(20, 12, 28, .55);
    font-size: 13px;
    font-weight: 500;
    color: #fff;
}
.gfsr-has-q .gfsr-credit {
    display: none; /* a results page shows no photograph */
}

/* ---- the search box ---------------------------------------------------- */

.gfsr-form {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 62px;
    box-sizing: border-box;
    padding: 6px 9px 6px 22px;
    border-radius: 31px;
    background: var(--gfsr-box);
    color: var(--gfsr-box-text);
    box-shadow: 0 10px 40px rgba(20, 10, 30, .35);
    text-align: left;
}
.gfsr-form:focus-within {
    box-shadow: 0 10px 40px rgba(20, 10, 30, .35), 0 0 0 3px rgba(234, 88, 12, .55);
}
.gfsr-icon {
    display: inline-flex;
    flex: none;
    color: var(--gfsr-accent-deep);
}
.gfsr-q {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    border: 0;
    outline: 0;
    background: transparent;
    color: inherit;
    font-size: 17px;
}
.gfsr-q::placeholder {
    color: var(--gfsr-muted);
}
.gfsr-sec {
    flex: none;
    max-width: 170px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--gfsr-card-border);
    border-radius: 999px;
    background: transparent;
    color: var(--gfsr-muted);
    font-size: 13px;
}
.gfsr-go {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
    min-width: max-content;
    height: 44px;
    padding: 0 20px;
    border: 0;
    border-radius: 22px;
    background: var(--gfsr-accent-deep);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}
.gfsr-go:hover {
    filter: brightness(1.08);
}

.gfsr-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---- the pill buttons under the box ------------------------------------ */

.gfsr-chips {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-top: 22px;
}
.gfsr-chip {
    display: inline-flex;
    align-items: center;
    height: 40px;
    box-sizing: border-box;
    padding: 0 16px;
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 20px;
    background: rgba(20, 12, 28, .3);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    text-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}
.gfsr-chip:hover {
    text-decoration: none;
    background: rgba(20, 12, 28, .5);
    color: #fff;
}
.gfsr-chip-on,
.gfsr-chip-on:hover {
    border-color: transparent;
    background: var(--gfsr-accent-deep);
    color: #fff;
    text-shadow: none;
}

/* ---- the search home's feed --------------------------------------------- */

.gfsr-feed {
    display: flex;
    flex-direction: column;
    gap: 16px;
    box-sizing: border-box;
    width: 100%;
    max-width: 1376px;
    margin: 0 auto;
    padding: 0 32px 72px;
}

/* A strip of small picture cards in a glass panel. */
.gfsr-strip {
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 18px;
    background: rgba(255, 255, 255, .14);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}
.gfsr-strip-in {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scrollbar-width: none;
}
.gfsr-strip-in::-webkit-scrollbar {
    height: 0;
}
.gfsr-story {
    display: flex;
    flex: 1 0 158px;
    flex-direction: column;
    max-width: 240px;
    border-radius: 12px;
    overflow: hidden;
    background: var(--gfsr-story);
    color: #fff;
    text-decoration: none;
}
.gfsr-story:hover {
    color: #fff;
    text-decoration: none;
    filter: brightness(1.12);
}
.gfsr-story-t {
    padding: 9px 12px;
    overflow: hidden;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.gfsr-story-img {
    position: relative;
    display: block;
    height: 92px;
    background-color: #2d2238;
    background-size: cover;
    background-position: center;
}
.gfsr-story-tag {
    position: absolute;
    left: 8px;
    bottom: 8px;
    max-width: calc(100% - 16px);
    overflow: hidden;
    padding: 3px 7px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff;
}

/* The grid: one large story, a card, a numbered list, then a row of cards. */
.gfsr-feed-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    grid-auto-flow: dense;
    gap: 16px;
}
.gfsr-card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-radius: 18px;
    overflow: hidden;
    background: var(--gfsr-card);
    color: var(--gfsr-text);
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease;
}
.gfsr-card:hover {
    text-decoration: none;
    color: var(--gfsr-text);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(10, 6, 16, .35);
}
.gfsr-card-img {
    display: block;
    height: 175px;
    flex: none;
    background-color: #d6d3dc;
    background-size: cover;
    background-position: center;
}
.gfsr-card-noimg {
    height: 64px;
    background-image: var(--gfsr-thumb);
}
.gfsr-card-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 8px;
    padding: 16px 18px 18px;
}
.gfsr-card-type {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.gfsr-card-title,
.gfsr-card-ex {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.gfsr-card-title {
    -webkit-line-clamp: 3;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.3;
}
.gfsr-card-ex {
    -webkit-line-clamp: 2;
    font-size: 14px;
    line-height: 1.45;
    color: var(--gfsr-muted);
}
.gfsr-card-go {
    margin-top: auto;
    padding-top: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--gfsr-accent-deep);
}

/* The colour of a content type: a label on a card, a tag on a story. */
.gfsr-card-type.gfsr-k0 { color: #dc2626; }
.gfsr-card-type.gfsr-k1 { color: #1d4ed8; }
.gfsr-card-type.gfsr-k2 { color: #047857; }
.gfsr-card-type.gfsr-k3 { color: #c2410c; }
.gfsr-card-type.gfsr-k4 { color: #6d28d9; }
.gfsr-story-tag.gfsr-k0 { background: #dc2626; }
.gfsr-story-tag.gfsr-k1 { background: #1d4ed8; }
.gfsr-story-tag.gfsr-k2 { background: #047857; }
.gfsr-story-tag.gfsr-k3 { background: #c2410c; }
.gfsr-story-tag.gfsr-k4 { background: #6d28d9; }

/* The lead story: two columns wide, its title over the picture. */
.gfsr-lead {
    grid-column: span 2;
    min-height: 400px;
    color: #fff;
}
.gfsr-lead:hover {
    color: #fff;
}
.gfsr-lead .gfsr-card-img {
    position: absolute;
    inset: 0;
    height: auto;
}
.gfsr-lead .gfsr-card-body {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    gap: 10px;
    padding: 90px 28px 26px;
    background: linear-gradient(180deg, rgba(15, 10, 22, 0), rgba(15, 10, 22, .85));
}
.gfsr-lead .gfsr-card-type {
    align-self: flex-start;
    padding: 3px 8px;
    border-radius: 5px;
    background: #dc2626;
    color: #fff;
}
.gfsr-lead .gfsr-card-type.gfsr-k1 { background: #1d4ed8; }
.gfsr-lead .gfsr-card-type.gfsr-k2 { background: #047857; }
.gfsr-lead .gfsr-card-type.gfsr-k3 { background: #c2410c; }
.gfsr-lead .gfsr-card-type.gfsr-k4 { background: #6d28d9; }
.gfsr-lead .gfsr-card-title {
    font-size: 30px;
    line-height: 1.2;
}
.gfsr-lead .gfsr-card-ex {
    color: #e5e7eb;
}

/* The numbered list: dark, like the page. */
.gfsr-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px 22px;
    border: 1px solid #3a2c48;
    border-radius: 18px;
    background: #24192f;
    color: #fff;
}
.gfsr-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: #c4b5d4;
}
.gfsr-list-h {
    margin: 0;
    font-size: 17px;
    font-weight: 600;
    color: #fff;
}
.gfsr-list ol {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.gfsr-list a {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 9px 0;
    border-bottom: 1px solid #3a2c48;
    font-size: 15px;
    color: #fff;
    text-decoration: none;
}
.gfsr-list a:hover {
    color: #fdba74;
}
.gfsr-list-n {
    flex: none;
    width: 22px;
    font-weight: 700;
    color: #fb923c;
}
.gfsr-list-t {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.gfsr-list-k {
    flex: none;
    font-size: 12px;
    color: #c4b5d4;
}

/* ---- no left navigation on search ------------------------------------ */

/* Search is a destination of its own: the member shell's left rail is
   removed here (the workspace picker's idiom) and the content takes the
   full width, so the glass sheet has the room. The header still goes
   everywhere. Body class, never :has(), so every browser gets it. */
body.gfsr-page #sidebar,
body.gfsr-page #sidebarBackdrop,
body.gfsr-page .gf-chrome .gf-sidebar-toggler {
    display: none !important;
}
body.gfsr-page #main-content {
    margin-left: 0 !important;
}

/* ---- the results page: the owner's design, carried over -------------- */

/* The results page is the same page as the search home, in the design the
   owner supplied: the photograph behind the whole page, the white search
   pill and the frosted pills under it, then the results on ONE sheet of light
   frosted glass over the photograph (the start-page shape the owner pointed
   at), each section a white card on that glass. */
body.gfsr-page-q {
    background: #1a1322;
}
html:not(.dark) body.bx-def-color-bg-page.gfsr-page-q {
    background-color: #1a1322 !important;
    background-image: none !important;
}
/* The backdrop is fixed, so the photograph stays behind the glass all the
   way down; only the top darkens a little for the header. */
.gfsr-has-q .gfsr-backdrop::after {
    background: linear-gradient(180deg, rgba(10, 6, 16, .35) 0, rgba(10, 6, 16, .08) 22%, rgba(10, 6, 16, .12) 100%);
}

/* Results tokens: dark text on white cards. */
body.gfsr-page-q #bx-page-search-keyword {
    --gfsr-text: #1f1a24;
    --gfsr-muted: #6b6274;
    --gfsr-line: rgba(31, 26, 36, .08);
    --gfsr-link: #1f1a24;
    --gfsr-panel: #ffffff;
}

/* The hero: the box and the pills over the photograph, shorter than home. */
.gfsr-has-q .gfsr-hero {
    min-height: 0;
    padding: 56px 24px 40px;
}
.gfsr-has-q .gfsr-asked {
    display: none; /* the box already shows what was asked */
}

/* Whatever follows the hero - the results or the "nothing found" box. */
body.gfsr-page-q #bx-layout-cell-1 > .bx-page-block-container:first-child + .bx-page-block-container {
    position: relative;
    box-sizing: border-box;
    width: 100%; /* a flex item in the layout cell: it would shrink to its content */
    max-width: 1376px;
    margin: 0 auto 48px;
    padding: 0 32px;
}

body.gfsr-page-q #bx-page-search-keyword #bx-search-results-keyword {
    display: flex; /* the platform's own rule sets three columns */
    flex-direction: column;
    gap: 14px;
    columns: auto;
    padding: 14px;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 24px;
    /* Strong enough white to read on its own where backdrop-filter is missing. */
    background: rgba(255, 255, 255, .42);
    -webkit-backdrop-filter: blur(24px) saturate(1.3);
    backdrop-filter: blur(24px) saturate(1.3);
    box-shadow: 0 10px 40px rgba(10, 6, 16, .18);
}

/* Each section is a white card on the glass sheet. */
body.gfsr-page #bx-page-search-keyword #bx-search-results-keyword > .bx-page-block-container {
    margin: 0;
}
body.gfsr-page #bx-page-search-keyword #bx-search-results-keyword > .bx-page-block-container > .bx-db-container {
    padding: 18px 20px 20px;
    border: 0;
    border-radius: 16px;
    background: var(--gfsr-panel, #ffffff);
    box-shadow: 0 1px 3px rgba(10, 6, 16, .08);
    color: var(--gfsr-text);
}
body.gfsr-page #bx-page-search-keyword #bx-search-results-keyword .bx-db-header {
    padding: 0 0 12px;
}
body.gfsr-page #bx-page-search-keyword #bx-search-results-keyword .bx-dbt-ttl {
    font-size: 18px;
    font-weight: 700;
    color: var(--gfsr-text);
}
body.gfsr-page #bx-page-search-keyword #bx-search-results-keyword .bx-db-content {
    padding: 0;
}

/* Links (pages and the like) as the design's numbered list rows. */
#bx-search-results-keyword .bx-search-result-block {
    counter-reset: gfsr-n;
}
#bx-search-results-keyword .bx-sys-search-results-pages {
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--gfsr-line);
    counter-increment: gfsr-n;
}
#bx-search-results-keyword .bx-sys-search-results-pages::before {
    content: counter(gfsr-n);
    flex: none;
    width: 18px;
    font-weight: 700;
    color: var(--gfsr-accent);
}
#bx-search-results-keyword .bx-sys-search-results-pages:last-child {
    border-bottom: 0;
}
#bx-search-results-keyword .bx-sys-search-results-pages > a {
    flex: 1 1 auto;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.35;
    color: var(--gfsr-link);
}
#bx-search-results-keyword .bx-sys-search-results-pages > a:hover {
    color: var(--gfsr-accent);
    text-decoration: none;
}
/* What the page is about (gfSearchPageDescHtml): its own line under the
   title, lined up with it rather than under the number. */
#bx-search-results-keyword .bx-sys-search-results-pages {
    flex-wrap: wrap;
}
#bx-search-results-keyword .gfsr-page-desc {
    flex: 1 1 100%;
    margin: -8px 0 0 32px;
    font-size: 14px;
    line-height: 1.45;
    color: var(--gfsr-muted);
}
#bx-search-results-keyword .bx-sys-search-results-pages .bx-def-font-grayed {
    flex: none;
    font-size: 13px;
    color: var(--gfsr-muted);
}

/* Anything with pictures - people, businesses, posts, listings - is a strip
   of the design's white cards that scrolls sideways. */
#bx-search-results-keyword .bx-search-result-block:has(> .bx-def-gal-unit-size, > .bx-base-pofile-unit-with-cover) {
    display: flex;
    gap: 16px;
    margin: 0;
    padding: 2px 2px 6px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
}
/* The same strip without :has(), for the platform's gallery wrapper class. */
#bx-search-results-keyword .bx-search-result-block.bx-base-text-unit-gallery-wrapper {
    display: flex;
    gap: 16px;
    margin: 0;
    padding: 2px 2px 6px;
    overflow-x: auto;
}
#bx-search-results-keyword .bx-search-result-block > .bx-def-gal-unit-size,
#bx-search-results-keyword .bx-search-result-block > .bx-base-pofile-unit-with-cover {
    flex: 0 0 260px;
    width: 260px;
    max-width: none;
    margin: 0;
    padding: 0;
    scroll-snap-align: start;
}
/* A "this is private" placeholder is not a result. */
#bx-search-results-keyword .bx-search-result-block > .bx-base-text-unit:not(:has(a)) {
    display: none;
}
#bx-search-results-keyword .bx-base-text-unit-cnt,
#bx-search-results-keyword .bx-base-pofile-unit-with-cover > div {
    border: 1px solid rgba(31, 26, 36, .08);
    border-radius: 14px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: none;
    color: #111827;
}
#bx-search-results-keyword .bx-def-gal-img-column {
    margin: 0;
}
#bx-search-results-keyword .bx-base-text-unit .bx-base-text-unit-text {
    padding: 16px 18px 18px;
}
/* A title reads in full over two lines instead of being cut to "Establ…". */
#bx-search-results-keyword .truncate {
    overflow: hidden;
    white-space: normal;
    text-overflow: clip;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
#bx-search-results-keyword .bx-base-text-unit-title,
#bx-search-results-keyword .bx-base-text-unit-title a,
#bx-search-results-keyword .bx-base-tut-title,
#bx-search-results-keyword .bx-base-tut-title a {
    max-height: none;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    color: #111827;
}
#bx-search-results-keyword .bx-base-text-unit-info,
#bx-search-results-keyword .bx-base-text-unit-info a {
    color: #6b7280;
}
/* The picture borrowed from the entry's own text (gfSearchFillTiles). */
#bx-search-results-keyword .gfsr-pulled {
    width: 100%;
    aspect-ratio: 16 / 9;
    background-color: #f6ece6;
    background-size: cover, 56px auto;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 0;
}
/* A result with no picture at all gets the placeholder: the GFunnel mark on
   a soft gradient, in place of the platform's flat coloured tile. */
#bx-search-results-keyword .bx-base-text-unit-no-thumb {
    aspect-ratio: 16 / 9;
    border-radius: 0;
    background: url(../images/gf_logo.png) center / 56px auto no-repeat, linear-gradient(135deg, #fbe3d4, #ead9f3);
}

/* The pager's arrows are icon glyphs this site does not load, so they drew
   as empty boxes; they are words here, on a frosted pill. */
#bx-search-results-keyword .bx-paginate-btn .sys-icon {
    display: inline;
    width: auto;
    height: auto;
    font-family: inherit;
    font-size: inherit;
    font-style: normal;
    white-space: nowrap;
}
#bx-search-results-keyword .bx-paginate-btn-prev .sys-icon::before {
    content: "\2039  Previous";
}
#bx-search-results-keyword .bx-paginate-btn-next .sys-icon::before {
    content: "More \203A";
}
#bx-search-results-keyword .bx-paginate-btn.bx-btn-disabled {
    display: none;
}
#bx-search-results-keyword .bx-paginate-btn {
    width: auto;
    height: 36px;
    padding: 0 16px;
    border: 1px solid rgba(31, 26, 36, .12);
    border-radius: 999px;
    background: #ffffff;
    color: #1f1a24;
    font-size: 13px;
    font-weight: 600;
}
#bx-search-results-keyword .bx-paginate-btn .sys-icon,
#bx-search-results-keyword .bx-paginate-btn .sys-icon::before {
    color: #1f1a24;
    opacity: 1;
}
#bx-search-results-keyword .bx-paginate-btn:hover {
    background: #f4f1f7;
}

/* The "nothing found" box only - never the box that holds the results. */
body.gfsr-page-q #bx-layout-cell-1 > .bx-page-block-container:first-child + .bx-page-block-container:not(:has(#bx-search-results-keyword)) > .bx-db-container {
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 24px;
    background: rgba(255, 255, 255, .72);
    -webkit-backdrop-filter: blur(24px) saturate(1.3);
    backdrop-filter: blur(24px) saturate(1.3);
    box-shadow: 0 10px 40px rgba(10, 6, 16, .18);
    color: #1f1a24;
}

/* The footer sits on the photograph: a frosted pill of light links. */
body.gfsr-page #bx-footer .bx-footer-cnt {
    display: flex;
    justify-content: center;
}
body.gfsr-page #bx-menu-footer {
    padding: 8px 18px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .08);
}
body.gfsr-page #bx-menu-footer a {
    color: #c4b5d4;
}
/* On the results page the photograph runs to the bottom of the window, so
   the pill is the same frosted glass as the results, with dark links. */
body.gfsr-page-q #bx-menu-footer {
    border: 1px solid rgba(255, 255, 255, .55);
    background: rgba(255, 255, 255, .6);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}
body.gfsr-page-q #bx-menu-footer a {
    color: #3a3242;
}
/* The member shell draws its footer as a white card under the page. */
body.gfsr-page #main-content > footer {
    background: transparent;
    box-shadow: none;
}

@media (max-width: 640px) {
    .gfsr-hero {
        min-height: 420px;
        padding: 64px 12px 56px;
    }
    .gfsr-has-feed .gfsr-hero {
        min-height: 380px;
    }
    .gfsr-photo .gfsr-backdrop {
        background-image: var(--gfsr-photo-sm, var(--gfsr-photo));
    }
    .gfsr-form {
        height: 54px;
        padding-left: 16px;
        gap: 8px;
    }
    .gfsr-go {
        width: 42px;
        height: 42px;
        padding: 0;
    }
    .gfsr-go-t,
    .gfsr-sec {
        display: none;
    }
    .gfsr-chips {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        margin-inline: -12px;
        padding: 0 12px 6px;
        scrollbar-width: none;
    }
    .gfsr-chip {
        flex: none;
    }
    .gfsr-credit {
        right: 12px;
        bottom: 10px;
        height: 28px;
        font-size: 12px;
    }
    .gfsr-feed {
        padding: 0 12px 48px;
        gap: 12px;
    }
    .gfsr-lead {
        grid-column: auto;
        min-height: 320px;
    }
    .gfsr-lead .gfsr-card-body {
        padding: 70px 18px 18px;
    }
    .gfsr-lead .gfsr-card-title {
        font-size: 22px;
    }
    body.gfsr-page-q #bx-layout-cell-1 > .bx-page-block-container:first-child + .bx-page-block-container {
        padding: 0 12px;
    }
    body.gfsr-page-q #bx-page-search-keyword #bx-search-results-keyword {
        padding: 8px;
        border-radius: 18px;
    }
    .gfsr-has-q .gfsr-hero {
        padding: 24px 12px 28px;
    }
    /* On a phone the cards stack, full width, rather than scroll sideways. */
    #bx-search-results-keyword .bx-search-result-block.bx-base-text-unit-gallery-wrapper {
        flex-direction: column;
        overflow: visible;
    }
    #bx-search-results-keyword .bx-search-result-block > .bx-def-gal-unit-size,
    #bx-search-results-keyword .bx-search-result-block > .bx-base-pofile-unit-with-cover {
        flex: 0 0 auto;
        width: 100%;
    }
}