/* Article elements: [jm_must_read] (mosaic) and [jm_posts] (cards). Wireframes 0 (home), 21 and 22 (blog). Tokens only; mobile first.
   Needs jm-blog.css for the base article card (loaded as its dependency). Loaded where an element prints. */

/* ---- Must Read: one large card, two medium, a list of four ---- */
.jm-must-read{margin:0}
.jm-must-read__head{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-4);margin:0 0 var(--s-5)}
.jm-must-read__head .jm-eyebrow{margin:0}
.jm-must-read__title{margin:var(--s-2) 0 0;font:500 var(--t-h2)/1.15 var(--font-display);color:var(--ink)}
.jm-must-read__more{flex:none;display:inline-flex;align-items:center;min-height:var(--tap-min);font:700 14px/1 var(--font-ui);color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.jm-must-read__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-4)}
.jm-must-read__lead{display:grid}
.jm-must-read__side{display:grid;gap:var(--s-4);align-content:space-between}
.jm-must-read__mid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3)}
.jm-must-read__list{display:grid;border-top:1px dashed var(--line)}
@media(min-width:1024px){
	.jm-must-read__grid{grid-template-columns:minmax(0,6fr) minmax(0,6fr);gap:var(--s-6)}
	.jm-must-read__side{gap:var(--s-6)}
	.jm-must-read__mid{gap:var(--s-6)}
	.jm-must-read__list{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s-6)}
}
/* Lead card: the picture fills it, the dark caption sits at the bottom left. */
.jm-must-read .jm-article-card--feature{position:relative;display:block;min-height:100%;overflow:hidden;border-radius:var(--r-sm);background:var(--ink)}
.jm-must-read .jm-article-card--feature .jm-article-card__media{aspect-ratio:auto;height:100%;min-height:360px;border-radius:0}
.jm-must-read .jm-article-card--feature .jm-article-card__img,.jm-must-read .jm-article-card--feature .jm-article-card__ph{position:absolute;inset:0;object-position:50% 12%} /* The lead follows the side column's height, not the photo's. */
.jm-must-read .jm-article-card--feature .jm-article-card__body{position:absolute;left:0;right:0;bottom:0;gap:var(--s-2);padding:var(--s-5);background:var(--ink);color:var(--white)}
.jm-must-read .jm-article-card--feature .jm-article-card__eyebrow{color:var(--white)}
.jm-must-read .jm-article-card--feature .jm-article-card__title{font:500 clamp(1.4rem,1.1rem + 1.2vw,2.25rem)/1.12 var(--font-display)}
.jm-must-read .jm-article-card--feature .jm-article-card__title a{color:var(--white)}
.jm-must-read .jm-article-card--feature .jm-article-card__excerpt{margin:0;font-size:14px;line-height:1.5;color:var(--line);-webkit-line-clamp:2}
@media(min-width:1024px){
	.jm-must-read .jm-article-card--feature .jm-article-card__media{min-height:520px}
	.jm-must-read .jm-article-card--feature .jm-article-card__body{right:auto;max-width:78%;padding:var(--s-6) var(--s-7)}
}
/* Medium cards: 3:2 picture, label, title. */
.jm-must-read__mid .jm-article-card{gap:var(--s-2)}
.jm-must-read__mid .jm-article-card__media{aspect-ratio:3/2;border-radius:var(--r-sm)}
.jm-must-read__mid .jm-article-card__title{font:500 var(--t-card)/1.25 var(--font-display)}
@media(min-width:768px){.jm-must-read__mid .jm-article-card__title{font-size:20px}}
.jm-must-read__mid .jm-article-card__excerpt{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:14px;line-height:1.5}
/* List rows: 96 x 64 picture, label, title, dashed rule. */
.jm-must-read__list .jm-article-card{grid-template-columns:96px minmax(0,1fr);align-items:center;gap:var(--s-3);padding:var(--s-3) 0;border-bottom:1px dashed var(--line)}
.jm-must-read__list .jm-article-card__media{aspect-ratio:3/2;border-radius:var(--r-xs)}
.jm-must-read__list .jm-article-card__body{gap:var(--s-1)}
.jm-must-read__list .jm-article-card__title{font:700 14px/1.35 var(--font-ui)}
.jm-must-read .jm-article-card__title a:hover{text-decoration:underline;text-underline-offset:3px}

/* ---- Article cards (home "Inspirație"): a snapping row on a phone, three columns from 768px ---- */
.jm-posts{display:flex;gap:var(--s-3);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.jm-posts::-webkit-scrollbar{display:none}
.jm-posts>.jm-article-card{flex:none;width:280px;scroll-snap-align:start}
.jm-posts .jm-article-card__media{aspect-ratio:3/2}
.jm-posts .jm-article-card__title{font:500 20px/1.25 var(--font-display)}
.jm-posts .jm-article-card__excerpt{font-size:14px;line-height:1.5;color:var(--ink-2)}
.jm-posts .jm-article-card__eyebrow{color:var(--ink-2)}
@media(min-width:768px){
	.jm-posts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-6);overflow:visible}
	.jm-posts>.jm-article-card{width:auto}
}