/* ==========================================================================
   Style Journal — wide-screen feed layout
   ==========================================================================
   A news-feed grid for the blog listing: one 2x2 lead story, rows of four
   cards, and catalogue tiles woven between them.

   SCOPE — this file only ever adds desktop behaviour:
     * every new element (.bx-*) is display:none by default, so phones and
       tablets render precisely what they rendered before this file existed;
     * every layout rule lives inside @media (min-width: 992px), which is the
       exact complement of mobile-home.css's (max-width: 991.98px), so the two
       can never both apply;
     * nothing here is !important — the desktop rules win on specificity or on
       source order (this file loads after stylo.css).
   ========================================================================== */

/* Hidden everywhere by default; the media query below turns them on. */
.bx-lead,
.bx-stat,
.bx-react,
.bx-source-card { display: none; }

@media (min-width: 992px) {

    /* ── Page frame ──────────────────────────────────────────────────── */
    /* Scoped on .blog-wrap, which only the listing view renders. The body class
       is `page-blog.index` — a literal dot from the route name — so a
       body-class selector would need escaping to match at all. */
    .blog-wrap { background: #f3f3f3; }

    .blog-wrap .container { max-width: 1600px; }

    /* The masthead shrinks: a feed leads with stories, not with a title block. */
    .blog-masthead { padding: 18px 0 6px; }
    .blog-masthead-title { font-size: 30px; margin-bottom: 4px; }
    .blog-masthead-lead { font-size: 14px; max-width: 720px; margin-bottom: 0; }

    .blog-filters { gap: 6px; padding: 10px 0 14px; flex-wrap: wrap; }

    /* The phone hero and the section head are replaced by the lead tile. */
    .blog-hero,
    .blog-listhead { display: none; }

    /* ── The feed grid ───────────────────────────────────────────────── */
    .blog-wrap .blog-grid {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 14px;
        /* Stretch, not start: every tile in a row shares the row's height, so a
           double-width overlay tile is exactly as tall as the singles beside
           it. The row shapes come from feedPlan(), so nothing needs to reflow
           and `dense` would only scramble the order. */
        align-items: stretch;
        /* A fixed row height is what keeps a double-width tile the same height
           as the singles beside it. Left to itself the wide tile is as tall as
           its photo's aspect ratio at two columns (~444px), which dragged the
           whole row taller and left a band of white inside every single card. */
        grid-auto-rows: 322px;
    }

    /* ── Shared tile skin ────────────────────────────────────────────── */
    .blog-wrap .blog-grid > .blog-card,
    .blog-wrap .blog-grid > .bx-stat,
    .blog-wrap .blog-grid > .bx-lead {
        background: #fff;
        border: 1px solid #e6e6e6;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .04);
        transition: box-shadow .16s ease, transform .16s ease;
        height: 100%;
        margin: 0;
    }

    .blog-wrap .blog-grid > .blog-card:hover,
    .blog-wrap .blog-grid > .bx-stat:hover,
    .blog-wrap .blog-grid > .bx-lead:hover {
        box-shadow: 0 6px 18px rgba(0, 0, 0, .10);
        transform: translateY(-2px);
    }

    /* ── Lead tile ───────────────────────────────────────────────────
       Two columns by ONE row — the same shape as every other wide tile in the
       feed, which is what makes the rows line up. */
    .bx-lead {
        display: block;
        grid-column: span 2;
        position: relative;
    }

    .bx-lead-link { display: block; height: 100%; text-decoration: none; color: inherit; position: relative; }

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

    /* Headline sits over the photograph, so the tile reads as one unit. */
    .bx-lead-body {
        position: absolute;
        inset: auto 0 0 0;
        padding: 20px 18px 12px;
        color: #fff;
        background: linear-gradient(to top, rgba(0,0,0,.88) 0%, rgba(0,0,0,.62) 45%, rgba(0,0,0,0) 100%);
    }

    .bx-lead-title {
        font-family: var(--stylo-serif, Georgia, serif);
        font-size: 23px;
        line-height: 1.24;
        font-weight: 800;
        color: #fff;
        margin: 7px 0 2px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .bx-lead-excerpt {
        font-size: 14px;
        line-height: 1.5;
        color: rgba(255, 255, 255, .88);
        margin: 0 0 10px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .bx-badge {
        display: inline-block;
        background: var(--stylo-accent, #c45a3c);
        color: #fff;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .04em;
        text-transform: uppercase;
        padding: 4px 9px;
        border-radius: 4px;
    }

    /* ── Article cards ───────────────────────────────────────────────── */
    .blog-wrap .blog-grid > .blog-card {
        display: flex;
        flex-direction: column;
        position: relative;
    }

    .blog-wrap .blog-card-media { display: block; position: relative; }

    .blog-wrap .blog-card-media img {
        width: 100%;
        height: 152px;
        object-fit: cover;
        display: block;
    }

    /* The card carries the source line instead; the pill duplicates it. */
    .blog-wrap .blog-card-cat { display: none; }

    .blog-wrap .blog-card-body {
        padding: 10px 12px 8px;
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        gap: 6px;
    }

    /* Date/read-time is the phone's meta line — the feed uses .bx-source. */
    .blog-wrap .blog-card-body .blog-meta { display: none; }

    .blog-wrap .blog-card-title {
        font-size: 15px;
        line-height: 1.32;
        font-weight: 700;
        margin: 0;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .blog-wrap .blog-card-title a { color: #1a1a1a; text-decoration: none; }
    .blog-wrap .blog-card-title a:hover { color: var(--stylo-accent, #c45a3c); }

    .blog-wrap .blog-card-excerpt {
        font-size: 12.5px;
        line-height: 1.45;
        color: #5a5a5a;
        margin: 0;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* ── Double-width tile ───────────────────────────────────────────
       Same markup as a single card, restyled: the photo fills the tile and the
       text sits over it, which is how the reference layout distinguishes its
       lead stories. The phone never sees any of this — .is-wide carries no
       rules outside this media query. */
    .blog-wrap .blog-grid > .blog-card.is-wide { grid-column: span 2; }

    .blog-wrap .blog-grid > .blog-card.is-wide .blog-card-media {
        position: absolute;
        inset: 0;
    }

    .blog-wrap .blog-grid > .blog-card.is-wide .blog-card-media img {
        width: 100%;
        height: 100%;
    }

    .blog-wrap .blog-grid > .blog-card.is-wide .blog-card-body {
        position: absolute;
        inset: auto 0 0 0;
        z-index: 1;
        padding: 26px 18px 12px;
        background: linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,.6) 55%, rgba(0,0,0,0) 100%);
        gap: 4px;
    }

    .blog-wrap .blog-grid > .blog-card.is-wide .blog-card-title {
        font-family: var(--stylo-serif, Georgia, serif);
        font-size: 21px;
        line-height: 1.26;
        -webkit-line-clamp: 2;
    }

    .blog-wrap .blog-grid > .blog-card.is-wide .blog-card-title a { color: #fff; }
    .blog-wrap .blog-grid > .blog-card.is-wide .blog-card-title a:hover { color: #fff; text-decoration: underline; }

    /* The wide tile leads with the headline only — an excerpt over a photograph
       is what makes these tiles look cluttered rather than confident. */
    .blog-wrap .blog-grid > .blog-card.is-wide .blog-card-excerpt { display: none; }

    .blog-wrap .blog-grid > .blog-card.is-wide .bx-source { color: rgba(255, 255, 255, .88); }
    .blog-wrap .blog-grid > .blog-card.is-wide .bx-rx { color: rgba(255, 255, 255, .9); }
    .blog-wrap .blog-grid > .blog-card.is-wide .bx-rx:hover { background: rgba(255, 255, 255, .2); color: #fff; }
    .blog-wrap .blog-grid > .blog-card.is-wide .blog-save { color: #fff; }

    /* ── Source line ─────────────────────────────────────────────────── */
    .bx-source {
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 11.5px;
        color: #6b6b6b;
        font-weight: 500;
    }

    .bx-source img { border-radius: 3px; flex: none; }
    .bx-source .bx-dot { opacity: .55; }
    .bx-lead .bx-source { color: rgba(255, 255, 255, .85); }

    /* ── Reactions ───────────────────────────────────────────────────── */
    .bx-react {
        display: flex;
        align-items: center;
        gap: 2px;
        margin-top: auto;
        padding-top: 6px;
        position: relative;
    }

    /* Inside the gradient panel, so it cannot collide with the headline. */
    .bx-react-wide { margin-top: 0; padding-top: 2px; }

    .bx-rx {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        border: 0;
        background: transparent;
        color: #6b6b6b;
        font-size: 13px;
        line-height: 1;
        padding: 6px 7px;
        border-radius: 999px;
        cursor: pointer;
        transition: background .14s ease, color .14s ease;
    }

    .bx-rx:hover { background: #efefef; color: #1a1a1a; }
    .bx-react-wide .bx-rx { color: rgba(255, 255, 255, .9); }
    .bx-react-wide .bx-rx:hover { background: rgba(255, 255, 255, .2); color: #fff; }

    /* Outline by default, solid once chosen — the fill is the "on" state. */
    .bx-rx .bi-hand-thumbs-up-fill,
    .bx-rx .bi-hand-thumbs-down-fill { display: none; }

    .bx-rx[aria-pressed="true"] .bi-hand-thumbs-up,
    .bx-rx[aria-pressed="true"] .bi-hand-thumbs-down { display: none; }

    .bx-rx[aria-pressed="true"] .bi-hand-thumbs-up-fill,
    .bx-rx[aria-pressed="true"] .bi-hand-thumbs-down-fill { display: inline-block; }

    .bx-rx[data-bx-like][aria-pressed="true"] { color: #1a7f37; }
    .bx-rx[data-bx-dislike][aria-pressed="true"] { color: #b3261e; }
    .bx-rx-label { font-size: 12px; font-weight: 600; }

    .bx-rx-done {
        font-size: 11.5px;
        font-weight: 600;
        color: #1a7f37;
        margin-left: 4px;
    }
    .bx-react-wide .bx-rx-done { color: #fff; }

    /* The save bookmark moves out of the way of the reaction row. */
    .blog-wrap .blog-grid > .blog-card .blog-save { top: 8px; right: 8px; }

    /* ── Catalogue tiles ─────────────────────────────────────────────── */
    .bx-stat { display: block; }

    /* The tile stretches to whatever height the photo cards set for the row,
       so the content is centred rather than stranded at the top with a band of
       empty white beneath it. The CTA still pins to the bottom edge. */
    .bx-stat-link {
        display: flex;
        flex-direction: column;
        justify-content: center;
        gap: 7px;
        height: 100%;
        padding: 16px 14px 13px;
        text-decoration: none;
        color: inherit;
    }

    /* A figure tile carries less content than a chart, so it gets a larger
       number instead of more whitespace. */
    .bx-stat-link > .bx-stat-figure { margin-top: 2px; }

    .bx-stat-eyebrow {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .05em;
        text-transform: uppercase;
        color: var(--stylo-accent, #c45a3c);
    }

    .bx-stat-figure {
        font-family: var(--stylo-serif, Georgia, serif);
        font-size: 38px;
        font-weight: 800;
        line-height: 1.02;
        color: #1a1a1a;
        letter-spacing: -.02em;
    }

    .bx-stat-label { font-size: 13px; color: #3d3d3d; line-height: 1.35; }
    .bx-stat-label-top { font-weight: 700; color: #1a1a1a; }
    .bx-stat-sub { font-size: 12px; color: #6b6b6b; }

    /* No margin-top:auto here — it would absorb all the free space and undo the
       centring above, stranding the figure at the top of a tall tile. */
    .bx-stat-cta {
        padding-top: 10px;
        font-size: 12px;
        font-weight: 700;
        color: var(--stylo-accent, #c45a3c);
    }

    /* Accent variant, so the feed has an occasional dark tile like the sample.
       Selector matches the `.blog-grid > .bx-stat` skin rule above class for
       class — a bare `.bx-stat-accent` loses to it and the tile renders white
       text on a white ground, i.e. blank. */
    .blog-wrap .blog-grid > .bx-stat-accent { background: #1a1a1a; border-color: #1a1a1a; }
    .bx-stat-accent .bx-stat-figure,
    .bx-stat-accent .bx-stat-label { color: #fff; }
    .bx-stat-accent .bx-stat-sub { color: rgba(255, 255, 255, .7); }
    .bx-stat-accent .bx-stat-eyebrow,
    .bx-stat-accent .bx-stat-cta { color: #f0a58c; }

    /* ── Bar chart inside a tile ─────────────────────────────────────── */
    .bx-bars { display: flex; flex-direction: column; gap: 7px; margin-top: 2px; }

    .bx-bar {
        display: grid;
        grid-template-columns: 62px 1fr auto;
        align-items: center;
        gap: 8px;
        font-size: 11.5px;
        color: #4a4a4a;
    }

    .bx-bar-name {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: 600;
    }

    .bx-bar-track {
        height: 7px;
        background: #ececec;
        border-radius: 999px;
        overflow: hidden;
    }

    .bx-bar-fill {
        display: block;
        height: 100%;
        border-radius: 999px;
        background: linear-gradient(90deg, var(--stylo-accent, #c45a3c), #e0916f);
    }

    .bx-bar-val { font-variant-numeric: tabular-nums; color: #6b6b6b; }

    .bx-stat-accent .bx-bar { color: rgba(255, 255, 255, .82); }
    .bx-stat-accent .bx-bar-track { background: rgba(255, 255, 255, .16); }
    .bx-stat-accent .bx-bar-val { color: rgba(255, 255, 255, .7); }
}

/* ==========================================================================
   Search bar above the feed — wide screens only
   ========================================================================== */
.bx-search,
.bx-search-state,
.bx-search-empty { display: none; }

@media (min-width: 992px) {

    .bx-search {
        display: flex;
        align-items: center;
        gap: 18px;
        flex-wrap: wrap;
        padding: 4px 0 14px;
    }

    .bx-search-form {
        position: relative;
        display: flex;
        align-items: center;
        flex: 0 1 640px;
        background: #fff;
        border: 1px solid #dcdcdc;
        border-radius: 999px;
        padding: 4px 4px 4px 16px;
        transition: border-color .15s ease, box-shadow .15s ease;
    }

    .bx-search-form:focus-within {
        border-color: var(--stylo-accent, #c45a3c);
        box-shadow: 0 0 0 3px rgba(196, 90, 60, .14);
    }

    .bx-search-ic { color: #8a8a8a; font-size: 15px; margin-right: 9px; }

    .bx-search-input {
        flex: 1 1 auto;
        border: 0;
        outline: 0;
        background: transparent;
        font-size: 14px;
        color: #1a1a1a;
        padding: 8px 0;
        min-width: 0;
    }

    .bx-search-input::placeholder { color: #9a9a9a; }

    /* The suggestions panel is injected as a sibling of the input by
       suggest.js and positions against the nearest positioned ancestor. */
    .bx-search-form .sg-panel { top: calc(100% + 8px); left: 0; right: 0; }

    .bx-search-btn {
        flex: none;
        border: 0;
        border-radius: 999px;
        background: var(--stylo-accent, #c45a3c);
        color: #fff;
        font-size: 13px;
        font-weight: 700;
        padding: 9px 18px;
        cursor: pointer;
        white-space: nowrap;
        transition: filter .15s ease;
    }

    .bx-search-clear {
        flex: none;
        border: 0;
        background: transparent;
        color: #9a9a9a;
        font-size: 12px;
        padding: 6px 8px;
        cursor: pointer;
        border-radius: 50%;
    }
    .bx-search-clear:hover { color: #1a1a1a; background: #f0f0f0; }

    /* ── Article dropdown ────────────────────────────────────────────
       Article headlines only. It is built from the tiles already in the grid,
       so there is no path by which a product could appear here. */
    .bx-search-panel {
        position: absolute;
        top: calc(100% + 8px);
        left: 0;
        right: 0;
        z-index: 40;
        background: #fff;
        border: 1px solid #e2e2e2;
        border-radius: 10px;
        box-shadow: 0 12px 32px rgba(0, 0, 0, .13);
        padding: 6px;
        max-height: 340px;
        overflow-y: auto;
    }

    .bx-search-panel[hidden] { display: none; }

    .bx-sp-item {
        display: flex;
        align-items: flex-start;
        gap: 9px;
        padding: 9px 11px;
        border-radius: 7px;
        font-size: 13.5px;
        line-height: 1.35;
        color: #1a1a1a;
        text-decoration: none;
    }

    .bx-sp-item:hover { background: #f5f5f5; color: var(--stylo-accent, #c45a3c); }
    .bx-sp-item i { color: var(--stylo-accent, #c45a3c); font-size: 13px; margin-top: 2px; flex: none; }

    .bx-sp-empty,
    .bx-sp-more {
        padding: 10px 12px;
        font-size: 12.5px;
        color: #7a7a7a;
    }
    .bx-sp-more { border-top: 1px solid #eee; font-weight: 600; }

    /* ── Result state ────────────────────────────────────────────────── */
    .bx-search-state {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        flex-wrap: wrap;
        padding: 2px 0 12px;
    }

    .bx-search-count { margin: 0; font-size: 14px; color: #3d3d3d; }
    .bx-search-count strong { color: #1a1a1a; }

    .bx-search-reset {
        font-size: 13px;
        font-weight: 700;
        color: var(--stylo-accent, #c45a3c);
        text-decoration: none;
    }
    .bx-search-reset:hover { text-decoration: underline; }

    /* display is restated because the block above hides this by default for
       phones; without it the panel stayed hidden on desktop too. */
    .bx-search-empty {
        display: block;
        background: #fff;
        border: 1px solid #e6e6e6;
        border-radius: 10px;
        padding: 44px 28px;
        text-align: center;
        margin-bottom: 18px;
    }

    .bx-search-empty i { font-size: 30px; color: #c9c9c9; }
    .bx-search-empty h2 { font-size: 20px; font-weight: 800; margin: 12px 0 6px; }
    .bx-search-empty p { font-size: 14px; color: #6b6b6b; margin: 0 0 14px; }

    .bx-search-empty-cta {
        display: inline-block;
        font-size: 13px;
        font-weight: 700;
        color: #fff;
        background: var(--stylo-accent, #c45a3c);
        border-radius: 999px;
        padding: 9px 20px;
        text-decoration: none;
    }

    .bx-search-btn:hover { filter: brightness(1.07); }

    .bx-search-chips { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }

    .bx-search-chips-label {
        font-size: 11px;
        font-weight: 700;
        letter-spacing: .06em;
        text-transform: uppercase;
        color: #8a8a8a;
    }

    .bx-search-chip {
        font-size: 12.5px;
        color: #3d3d3d;
        text-decoration: none;
        background: #fff;
        border: 1px solid #e0e0e0;
        border-radius: 999px;
        padding: 5px 12px;
        transition: border-color .15s ease, color .15s ease;
    }

    .bx-search-chip:hover {
        border-color: var(--stylo-accent, #c45a3c);
        color: var(--stylo-accent, #c45a3c);
    }
}