/* WSR research + events (6 Nov 2026): the WordPress fit for the Research page, the report pages and the featured event box.
   Landon's site.css gives the look; this only covers what is printed differently on the server. */

/* The Research page's chips are links (they work without the script), so they get his pressed look from aria-current. */
a.chip{display:inline-flex;align-items:center;text-decoration:none}
.chip[aria-current="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.wsr-tb-go{display:flex;align-items:center;gap:8px}
.wsr-tb-go .btn{flex:none;min-height:44px;padding:8px 16px}

/* A card's name links to the report's own page. */
.lib h3 a{color:inherit;text-decoration:none}
.lib h3 a:hover{text-decoration:underline}

/* Report page */
.hero .chips-row{margin:0 0 18px}
.wsr-rcover .frame{display:block;max-width:300px;margin-left:auto}
.wsr-rcover img{display:block;width:100%;height:auto}
.wsr-rdetails{max-width:860px}
.wsr-rdetails .lt{aspect-ratio:auto;min-height:140px}
.wsr-rdetails .lbody{padding:22px 26px 14px}
.wsr-rdetails .badge{margin:18px 0 4px}
@media(min-width:700px){.wsr-rdetails .ev-dl{grid-template-columns:repeat(2,1fr)}}
/* 7 Nov 2026, Tom: "I'd like to see the report details down below, all in bold"; "The font looks scummy" (small .93rem
   regular in the body colour read thin): bold, full size, darkest ink. */
.wsr-rdetails .ev-dl dd{font-weight:600;font-size:1rem;color:var(--ink)}
.wsr-report-body p{max-width:72ch}
.wsr-report-text:has(.wsr-report-body:empty){display:none}
/* Event page (7 Nov 2026, Tom: "build the event page layout"): same frame as the report page. Blocks from the WSR Events
   plugin (event-page.php). Landon's .ev-price box was only styled inside his pop-up (.lb-ev), so it is repeated here. */
.wsr-evpage .ev-sub{margin:10px 0 0;font-weight:600;color:inherit;opacity:.9;max-width:60ch}
.wsr-evdetails{max-width:860px;padding:22px 26px 18px}
@media(min-width:700px){.wsr-evdetails .ev-dl{grid-template-columns:repeat(2,1fr)}}
.wsr-evpage .ev-price{display:grid;gap:2px;max-width:420px;margin:20px 0 14px;padding:14px 16px;border:1px solid var(--line);border-left:3px solid var(--ox);border-radius:6px;background:#fff}
.wsr-evpage .gal{margin-top:14px}
/* no picture: the hero text takes the full width instead of leaving the right half empty */
.wsr-evpage.nomedia .hero-grid{grid-template-columns:1fr}
.wsr-evpage.nomedia .hero-grid>div{max-width:860px}

/* Blog, video and team pages (7 Nov 2026, inc/blog.php). */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wsr-blog-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;margin:0 0 26px}
.wsr-blog-tools .chips-row{margin:0}
.wsr-search{display:flex;gap:8px;flex:1 1 280px;max-width:420px}
.wsr-search input{flex:1;min-width:0;min-height:44px;padding:8px 12px;border:2px solid var(--line);border-radius:var(--r);font:inherit;background:#fff;color:var(--ink)}
.wsr-search .btn{flex:none;min-height:44px}
.wsr-pc{display:flex;flex-direction:column}
.wsr-pc .tlink{margin-top:auto}
.wsr-pc-img{margin:-1px -1px 16px;border-radius:var(--r) var(--r) 0 0;overflow:hidden;aspect-ratio:16/9}
.wsr-pc-img img{width:100%;height:100%;object-fit:cover;display:block}
/* Post text: the old posts are Mailchimp campaign emails pasted in, with fixed-width tables and pictures (e.g. 564px);
   keep them inside the column on phones. */
.wsr-post-body{max-width:760px}
.wsr-post-body img{max-width:100%;height:auto}
.wsr-post-body table{max-width:100%!important;width:auto!important;height:auto!important}
.wsr-post-body td{max-width:100%}
.wsr-post-body iframe{max-width:100%}
.wsr-postnav{margin-top:8px}
/* Landon's .hero h1 is 16ch wide, made for his short headlines; post and event titles are long sentences, so with no
   picture beside them they get more room instead of wrapping into five lines. */
.wsr-evpage.nomedia h1{max-width:28ch}
/* A team or video entry with no text: no empty white band under the hero (Gary Blum, 7 Nov 2026). */
/* (WordPress prints nothing for empty post text, leaving an empty .wrap.) */
.sec:has(>.wrap:empty),.sec:has(.wsr-post-body:empty){display:none}
.wsr-video{position:relative;aspect-ratio:16/9;max-width:960px;border-radius:var(--r);overflow:hidden;background:#000}
.wsr-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.wsr-portrait{max-width:320px;margin-left:auto}
.wsr-portrait img{display:block;width:100%;height:auto}