/* Report cards: Market Reports listing, homepage "latest", related reports.
   NEW file (P0b). Replaces the ".report-row + .report-botanical" rules of reports.css
   (those crop the botanical by 12% and are fed by report-images.js). One link per card:
   the title link stretches over the whole card. */

.report-card{--rule:#753d4833;--muted:#6b554a;--disc:#c8cbb0;position:relative;display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);align-items:center;gap:44px;padding:30px 0;border-top:1px solid #753d4840}
.report-card-art{position:relative;margin:0;aspect-ratio:5/4;display:grid;place-items:center;min-width:0}
.report-card-art:before{content:'';position:absolute;inset:9% 4% 5% 8%;background:var(--disc,#c8cbb0);border-radius:49% 51% 45% 55%;opacity:.75}
.report-card-art img{position:relative;display:block;width:90%;height:90%;object-fit:contain;transition:transform .45s}
/* A report's own photo (usually a product shot on white): multiply lets the white dissolve into the disc and
   the page, so it reads like the botanicals instead of a white rectangle in a frame (Kon 2026-10-01). */
.report-card-art[data-kind=image] img{width:84%;height:84%;mix-blend-mode:multiply}
.report-card:hover .report-card-art img{transform:translateY(-4px)}
.report-card-body{min-width:0}
.report-card .report-meta{display:flex;flex-wrap:wrap;row-gap:2px;font-size:12px;line-height:1.5;letter-spacing:.03em;color:var(--muted)}
.report-card .report-meta,#report-list .report-card .report-meta{column-gap:0;flex-direction:row;padding:0}
.report-card .report-meta>:not(:last-child):after{content:'·';display:inline-block;margin:0 .6em;color:#753d4899}
.report-card h3{margin-top:10px;font:500 clamp(26px,2.3vw,35px)/1.17 var(--serif);overflow-wrap:break-word}
.report-card h3 a:after{content:'';position:absolute;inset:0;z-index:1}
.report-card:hover h3 a{color:var(--wine)}
.report-card h3 a:focus-visible{outline:none}
.report-card:has(h3 a:focus-visible){outline:2px solid var(--wine);outline-offset:6px}
.report-card-excerpt{margin-top:12px;max-width:62ch;font-size:16px;line-height:1.65;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* Newest report on the listing: the answer to "what is new?" */
.report-card--lead{grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:5vw;padding:44px 0 50px;border-top-color:#753d4866}
.report-card--lead .report-card-art{aspect-ratio:5/4}
.report-card--lead .eyebrow{margin:0 0 16px}
.report-card--lead h3{font-size:clamp(38px,3.6vw,56px);line-height:1.08;letter-spacing:-.015em}
.report-card--lead .report-card-excerpt{font-size:18px;-webkit-line-clamp:5}

/* Compact rows: homepage items 2-3. */
.report-card--compact{grid-template-columns:minmax(0,104px) minmax(0,1fr);gap:26px;padding:20px 0}
.report-card--compact h3{font-size:clamp(23px,1.9vw,28px);margin-top:6px}

/* Homepage: one art column for all three rows, so the titles align. */
.market-home .report-card{grid-template-columns:minmax(0,130px) minmax(0,1fr);gap:32px}
.market-home .report-card h3{font-size:clamp(24px,2vw,30px)}
.market-home .report-card-excerpt{font-size:17px;-webkit-line-clamp:4}
/* The cards column is taller than the heading: the heading travels with it instead of leaving a gap (Kon 2026-10-01). */
.market-home .market-heading{position:sticky;top:140px;align-self:start}

/* Stacked cards: "related reports" under an article. */
.report-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px;margin:36px 0 34px}
.report-card--stack{grid-template-columns:minmax(0,1fr);align-items:start;gap:18px;padding:26px 0 0}
.report-card--stack .report-card-art{aspect-ratio:16/10}
.report-card--stack h3{font-size:clamp(24px,2vw,30px)}

/* The listing filter sets [hidden]; display:grid above would otherwise win. */
.report-card[hidden]{display:none}

/* Listing and homepage containers keep their existing sections. */
#report-list .report-card:first-child{border-top:0}
.market-home .home-reports .report-card:first-child{border-top-color:#753d4866}
.listing-note{margin-top:30px;font-size:14px;color:var(--muted,#6b554a)}
.listing-note a{border-bottom:1px solid currentColor}

@media(max-width:850px){
 .report-card{grid-template-columns:minmax(0,104px) minmax(0,1fr);gap:20px;padding:22px 0;align-items:start}
 .report-card h3{font-size:23px;margin-top:6px}
 .report-card .report-meta,#report-list .report-card .report-meta{flex-direction:row;gap:2px 0;font-size:12px}
 .report-card-excerpt{font-size:15px;margin-top:8px;-webkit-line-clamp:3}
 .report-card--lead{grid-template-columns:minmax(0,1fr);gap:18px;padding:30px 0 34px}
 .report-card--lead .report-card-art{aspect-ratio:16/10}
 .report-card--lead h3{font-size:clamp(30px,8.4vw,38px)}
 .report-card--lead .report-card-excerpt{font-size:16px;-webkit-line-clamp:4}
 .report-card--compact,.market-home .report-card{grid-template-columns:minmax(0,88px) minmax(0,1fr);gap:20px}
 .market-home .report-card h3{font-size:23px}
 .market-home .report-card-excerpt{font-size:15px;-webkit-line-clamp:4}
 .market-home .market-heading{position:static}
 .report-grid{grid-template-columns:minmax(0,1fr);gap:0;margin:20px 0 26px}
 .report-card--stack{grid-template-columns:minmax(0,104px) minmax(0,1fr);gap:20px;padding:22px 0}
 .report-card--stack .report-card-art{aspect-ratio:5/4}
}
@media(prefers-reduced-motion:reduce){.report-card-art img{transition:none}.report-card:hover .report-card-art img{transform:none}}
body.still .report-card:hover .report-card-art img{transform:none}