/* wp-keyword.css — styling for keyword.html.
   Extracted from inline <style> blocks so the bytes are cached instead of
   re-sent with every HTML response. All blocks were Jinja-free, so this is a
   verbatim copy in original document order. The <link> replaces the largest
   block in-place, keeping the cascade position unchanged.
   Bump the ?v= on every edit. */

/* ── keyword landing layout ─────────────────────────────── */
  /* Per-keyword FAQ — matches the tool-page FAQ treatment (tools/detail.html)
     so the two page types read as one system. */
  .kw-faq { margin: 2rem 0 1rem; }
  .kw-faq h2 { font-size: 1.25rem; font-weight: 800; color: #1f2937; margin-bottom: 1rem; }
  .kw-faq details {
    border-top: 1px solid #e5e7eb; padding: .75rem 0;
  }
  .kw-faq details:last-of-type { border-bottom: 1px solid #e5e7eb; }
  .kw-faq summary { font-weight: 700; color: #1f2937; outline: none; cursor: pointer; }
  .kw-faq summary:focus-visible { outline: 2px solid #2464c4; outline-offset: 2px; }
  .kw-faq details p { color: #4b5563; line-height: 1.55; margin: .6rem 0 0; }

  /* Cascade-card tag overlay — wp-main.css sets `.tag { max-width: 60% }`
     which truncates short labels like "Cute Anime" to "A..." on narrow
     cards. Override with the full bar width + a sensible min so labels
     stay legible. */
  main.wallpaper figure .tag-bar .tag {
    max-width: 100% !important;
    min-width: 0;
  }
  main.wallpaper figure .tag-bar .tag a {
    max-width: 100%;
    white-space: nowrap;
  }

  main.wallpaper .filter-row {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    top: var(--sticky-header-h, 100px) !important;
    background: #fff;
    z-index: 50;       /* below header (1020) so the type-pill dropdown
                          panel always overlays this row when open */
  }

  /* ── Right-side house ad — fixed-position rail in the viewport's right
        gutter. JS sets `top` to follow the page until it hits the sticky
        threshold, then clamps. Initially hidden until it's been positioned
        below the related-pills row so it never overlaps the search/header. */
  .kw-with-sidebar { position: relative; }   /* anchor for the ad */
  .kw-right-ad {
    display: none;
    position: fixed;
    /* Pin to the actual right edge of the viewport (16px gutter), independent
       of cascade width. Works on any monitor wider than the cascade. */
    right: 24px;
    top: 100px;
    width: 300px; height: 600px;
    z-index: 30;
  }
  .kw-right-ad.is-visible { display: block; }
  /* When the paid creative (e.g. id=38) actually fills, hide the house
     fallback so the two don't render stacked (the "neon city" prompt was
     peeking out below "Your wall, generated"). */
  .kw-right-ad:has(.housead-paid .wpc-ad--filled) .housead-fallback { display: none; }
  /* Gap so the cascade's right edge doesn't butt up against the rail
     (ad-ops: "no space between the sidebar ad and the content"). */
  @media (min-width: 1280px) {
    .kw-cascade { padding-right: 28px; }
  }
  /* Show whenever the viewport has room for the cascade + a 300px rail.
     1280px viewport - gutters - 300px rail - 24px gap = ~900px cascade
     which is comfortable. Below 1280px we hide the rail and the cascade
     gets the full width. */
  @media (max-width: 1279px) {
    .kw-right-ad { display: none !important; }
    /* The theme reserves a 300px right gutter for the rail from 800px up
       (`main:not(.single).ad-enabled .content-row .container { max-width:
       calc(100% - 300px) }` in wp-main.css / wp-extras.css). But the rail
       only shows ≥1280px, so on tablet that gutter sits empty beside the
       gallery — the blank vertical band ad-ops flagged. Reclaim it below the
       rail's breakpoint so the grid fills the full width. */
    main.ad-enabled .content-row .container {
      width: auto !important;
      max-width: 100% !important;
    }
  }
  /* Right-sidebar house ad — paint a grey skeleton FIRST (rounded
     corners, no text), then fade to the actual banner when first paint
     completes. Avoids the "rich animated content distracting before
     anything loads" feel. */
  .kw-right-ad .housead-fallback,
  main.wallpaper .cascade-ad-card .housead-fallback {
    background: #f3f4f6;
    border-radius: 12px;
    overflow: hidden;
  }
  .kw-right-ad .housead-fallback > a,
  main.wallpaper .cascade-ad-card .housead-fallback > a {
    opacity: 0;
    animation: wpc-skel-in .4s ease-out .25s forwards;
  }
  @keyframes wpc-skel-in { to { opacity: 1; } }

  /* ── Cascade house-ad sizing — make the banner FILL the entire grid
        cell so the row-span = banner height exactly (no whitespace gap
        below). The cell height equals (grid-auto-rows × span) — currently
        40 × 6 = 240px for the standard mr ad, 40 × 12 = 480px for the
        large half-page. Banner's flex/grid internal layout adapts. */
  main.wallpaper .cascade-ad-card {
    background: transparent !important;
    border: none !important;
    overflow: hidden;
    padding: 0 !important;
  }
  main.wallpaper .cascade-ad-card.housead-mr   { height: 250px; }  /* fits 300×250 ad; span-6 area is 265px */
  main.wallpaper .cascade-ad-card.housead-hp   { height: 480px; }
  main.wallpaper .cascade-ad-card .housead-fallback > a.b-ad,
  main.wallpaper .cascade-ad-card .housead-fallback > a.a-ad {
    width: 100% !important;
    height: 100% !important;
    aspect-ratio: auto !important;
    min-height: 0 !important;
  }
  /* Paid-ad layer fills the cell when present; transparent until filled */
  main.wallpaper .cascade-ad-card .housead-paid .wpc-ad { width:100%; height:100%; }
  /* When the paid creative actually loads (JS adds .wpc-ad--filled),
     fade out the house ad behind it so we don't double-render. */
  main.wallpaper .cascade-ad-card .housead-paid .wpc-ad--filled
       ~ * { display: none; }
  main.wallpaper .cascade-ad-card:has(.housead-paid .wpc-ad--filled)
       .housead-fallback { display: none; }
  /* In-grid cascade ad is mobile/tablet only — on desktop (>1100px) the right
     sidebar carries the ads, so hide these to keep the grid unbroken. */
  .cascade-ad-mobile { display: none !important; }
  @media (max-width: 1100px) {
    .cascade-ad-mobile { display: block !important; }
  }
  /* Tablet fix — the cascade ad cell is `grid-column: span 2` inline, which
     on the multi-column tablet grid (≥800px → 3-4 cols) leaves an orphaned
     empty column beside it (the "empty vertical space beside the gallery"
     ad-ops flagged). Drop it to a single grid cell at tablet widths so the
     surrounding thumbnails pack in beside it. Mobile (<800px) is a 2-up grid
     where span-2 == full width, so it's left untouched. */
  @media (min-width: 800px) and (max-width: 1100px) {
    main .kw-contents .content-card.cascade-ad-card {
      grid-column: auto / span 1 !important;
    }
  }
  /* Low-end phones (set by the script below from deviceMemory/cores): drop the
     in-between "dense" ads so only every-12 remain — avoids OOM tab crashes. */
  html.wpc-lowend .cascade-ad-dense { display: none !important; }
  /* Mobile: uniform 2-up masonry — landscape cards drop to ONE column (they
     used to span both, stacking as a tall column of huge images on
     landscape-heavy keywords). Paired with the halved row_span_mobile so
     heights stay correct. */
  @media (max-width: 767px) {
    main .kw-contents .content-card.horizontal { grid-column-end: span 1 !important; }
  }
  /* Shrink the inner heading + CTA so they fit the narrower card */
  main.wallpaper .cascade-ad-card .b-head,
  main.wallpaper .cascade-ad-card .a-head { font-size: 1.05rem !important; }
  main.wallpaper .cascade-ad-card .b-cta,
  main.wallpaper .cascade-ad-card .a-cta { font-size: .78rem !important;
    padding: 6px 10px !important; }
  main.wallpaper .cascade-ad-card .b-pill,
  main.wallpaper .cascade-ad-card .a-pill { font-size: 9px !important; }
  main.wallpaper .cascade-ad-card .a-prompt { font-size: 9px !important; padding: 4px 6px !important; }
  main.wallpaper .cascade-ad-card .b-sub,
  main.wallpaper .cascade-ad-card .a-sub  { font-size: 10px !important; }
  main.wallpaper .content-row .container { padding-top: 0 !important; }
  main.wallpaper .nav-breadcrumbs { margin: 0 !important; }
  main.wallpaper .nav-breadcrumbs ol.breadcrumb { padding: .15rem 0 !important; }

  /* Match the content-detail page's top related-pill size (main.single):
     30px-tall flex pills with .65rem side padding. Without this the keyword
     page fell back to the flat base text links (~15px tall, no padding), so
     the same pills looked much smaller than on the detail page. */
  main.wallpaper .filter-row ul.related-tag {
    gap: .25rem !important;
    column-gap: .25rem !important;
    align-items: center !important;
  }
  main.wallpaper .filter-row ul.related-tag .image-tag {
    padding: 0 !important;
    margin: 0 !important;
    height: 30px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
  main.wallpaper .filter-row ul.related-tag .image-tag::before {
    display: none !important;
    content: none !important;
  }
  main.wallpaper .filter-row ul.related-tag .image-tag a::after {
    display: none !important;
    content: none !important;
  }
  main.wallpaper .filter-row ul.related-tag .image-tag a {
    height: 30px !important;
    min-height: 30px !important;
    padding: 0 .65rem !important;
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
  }
  main.wallpaper .filter-row ul.related-tag .image-tag a span {
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* ── Mobile font + spacing pass for keyword pages ──
        Default H1 is 2-3rem on desktop — way too big on phones. Also
        tighten the gap below the filter-row so the related-pills sit
        closer under the header strip. */
  @media (max-width: 767px) {
    main.wallpaper h1 {
      font-size: 1.45rem !important;
      line-height: 1.2 !important;
      margin: .5rem 0 .25rem !important;
    }
    main.wallpaper .kw-count, main.wallpaper .kw-sub {
      font-size: .9rem !important;
      margin-top: .15rem !important;
    }
    /* Pull the filter-row tight up under the header (was airy) */
    main.wallpaper .filter-row {
      margin-top: .15rem !important;
      margin-bottom: .25rem !important;
    }
    /* Even tighter pill gaps on phones (the global override drops to
       .3rem; keyword pages are denser still) */
    main.wallpaper .filter-row .tag-container ul.related-tag {
      column-gap: .25rem !important;
      padding: 0 .25rem !important;
    }
    main.wallpaper .filter-row .tag-container ul.related-tag .image-tag {
      padding: 2px 7px !important;
      font-size: .78rem !important;
    }
  }