/* =====================================================================
   The cards of the studies on the home page /eng/ (index.php), added 2026-10-21.
   Two views of one markup:
   - the grid, by default: two a row, the photograph (the preview 560 x 320) is the whole card,
     the words on its left side on a shade, the date and the views in the corner;
   - the list: one study a row, the photograph on the left, the words on the right; on computers and
     tablets (576px and wider), chosen with the switch at the end of the filter bar (wd-home-filters.css).
     The script of the switch is in index.php: it puts the class wd-cards--list on #mixitup-article.
   Phones (575px and narrower) have the grid only, with the author's mobile previews (375 x 425, the field MOBILE);
   a study without one shows its preview 560 x 320, whole, above the words.
   The photographs are never cut to another shape and never stretched much beyond their own size.
   The whole card is a link: the link is the title, its area covers the card.
   Loaded by header-home_eng.php after the theme's style-en.css.
   ===================================================================== */

/* ---------- what both views share ---------- */
#mixitup-article.wd-cards{--c-yellow:#ffc107;--c-text:#d5dce6;--c-soft:#c3cddb;--c-muted:#9fb2c8;
	container-type:inline-size;display:grid;grid-template-columns:minmax(0,1fr);gap:30px;width:100%;max-width:1320px;margin:34px auto 0!important;padding:0}
/* hidden until MixItUp shows them (it puts display:inline-block on the cards it shows), as the theme did with .header-article */
#mixitup-article .mix{display:none}
.wd-card{--card-r:20px;position:relative;min-width:0;margin:0!important}
.wd-card__in{position:relative;height:100%;border-radius:var(--card-r);color:var(--c-text);font-family:Transat,sans-serif;font-weight:300;letter-spacing:0;text-align:left;-webkit-font-smoothing:antialiased}
.wd-card *,.wd-card *::before,.wd-card *::after{box-sizing:border-box}
.wd-card__media{position:relative;overflow:hidden;background:#16263b}
.wd-card__media picture{display:contents}
.wd-card__img{display:block;width:100%;height:100%;max-width:none;object-fit:cover}
.wd-card__places{display:flex;flex-wrap:wrap;gap:6px}
.wd-card__place{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.wd-card__flag{display:block;flex:none;width:20px;height:14px;max-width:none;border-radius:2px;object-fit:cover;box-shadow:0 0 0 1px rgba(255,255,255,.28)}
/* the title is the link; the link covers the whole card */
.wd-card__title{margin:0;padding:0;color:#fff;font-weight:700;letter-spacing:0;text-transform:none;text-decoration:none;text-wrap:balance}
.wd-card__link,.wd-card__link:visited,.wd-card__link:hover,.wd-card__link:focus{color:inherit!important;text-decoration:none}
.wd-card__link::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;border-radius:var(--card-r)}
.wd-card__link:focus{outline:0}
.wd-card__link:focus-visible::after{outline:2px solid var(--c-yellow);outline-offset:3px}
.wd-card__text p{margin:0;padding:0;color:var(--c-soft);font-family:gotic,Transat,sans-serif;font-style:italic;font-weight:300;letter-spacing:.02em}
.wd-card__meta{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;color:var(--c-muted);font-size:14px;line-height:1.3}
.wd-card__date,.wd-card__views{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.wd-card__ico{display:block;flex:none;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.wd-card__cta{white-space:nowrap}

/* ---------- phones (575px and narrower): the grid only, with the author's mobile photograph (375 x 425) ----------
   The photograph and the words share one cell of the card: the photograph keeps its own proportion at the top,
   never cut and never stretched beyond the width of the card; the words lie on its lower part. When the words
   need more room than the photograph, the card grows downwards on its dark ground and the photograph fades into it. */
@media (max-width: 575.98px){
	#mixitup-article.wd-cards{gap:20px;max-width:460px;margin-top:26px!important}
	.wd-card{--card-r:18px}
	.wd-card__in{display:grid;grid-template-columns:minmax(0,1fr);isolation:isolate;background:#111827;box-shadow:0 30px 60px -40px rgba(0,0,0,.95)}
	.wd-card__in::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:4;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);pointer-events:none}
	.wd-card__media{grid-area:1/1;align-self:start;z-index:0;aspect-ratio:375/425;border-radius:var(--card-r)}
	/* only a breath of shade at the top (the country has its own plate); at the very foot the photograph
	   goes into the ground of the card, for the cards that grow taller than their photograph */
	.wd-card__media::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,rgba(11,17,28,.24) 0%,rgba(11,17,28,0) 16%,rgba(17,24,39,0) 86%,rgba(17,24,39,.85) 100%)}
	.wd-card__places{grid-area:1/1;align-self:start;justify-self:start;z-index:2;margin:14px;max-width:calc(100% - 28px)}
	.wd-card__place{padding:6px 11px 6px 8px;border-radius:10px;background:rgba(13,20,32,.62);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);color:#fff;font-size:14px;line-height:1.2}
	/* the words with their own shade (since 21.10 lighter, and it begins just above the title): measured from the foot of the words,
	   it is darkest behind the button and the description and lighter behind the title, so the photograph shows through it.
	   A bright photograph of a clear day still leaves the words readable: contrast 4.5:1 or more on its brightest spots */
	.wd-card__body{grid-area:1/1;align-self:end;z-index:2;display:flex;flex-direction:column;gap:8px;padding:46px 16px 16px;border-radius:0 0 var(--card-r) var(--card-r);
		background:linear-gradient(0deg,rgba(17,24,39,.8) 0,rgba(17,24,39,.72) 56px,rgba(17,24,39,.66) 140px,rgba(17,24,39,.5) calc(100% - 46px),rgba(17,24,39,.2) calc(100% - 22px),rgba(17,24,39,0) 100%)}
	.wd-card__title{font-size:20px;line-height:1.26;text-shadow:0 1px 2px rgba(0,0,0,.5),0 0 20px rgba(0,0,0,.4)}
	.wd-card .wd-card__title .wd-card__link{text-decoration:underline;text-decoration-color:rgba(255,193,7,.72);text-decoration-thickness:2px;text-underline-offset:.24em}
	.wd-card__text p{font-size:14.5px;line-height:1.46;color:#dde3ec;text-shadow:0 1px 2px rgba(0,0,0,.55)}
	/* the button on the left, the date and views on the right, as on a computer */
	.wd-card__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:4px}
	.wd-card__cta{order:-1;display:inline-flex;align-items:center;height:38px;padding:0 16px;border-radius:999px;background:#fff;color:#1a2334;font-weight:700;font-size:14px}
	.wd-card__meta{flex-direction:column;align-items:flex-end;gap:4px;padding:6px 10px;border-radius:12px;background:rgba(13,20,32,.42);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);color:#dfe5ec;font-size:12.5px}
	.wd-card__date{color:#ffd56a}
	/* a study without a mobile photograph: its wide preview stands above the words at its own proportion, never cut */
	.wd-card--no-mobile .wd-card__media{aspect-ratio:560/320;border-radius:var(--card-r) var(--card-r) 0 0}
	.wd-card--no-mobile .wd-card__media::after{background:linear-gradient(180deg,rgba(11,17,28,.36) 0%,rgba(11,17,28,0) 26%,rgba(17,24,39,0) 50%,rgba(17,24,39,.72) 80%,#111827 100%)}
	.wd-card--no-mobile .wd-card__body{grid-area:2/1;align-self:start;margin-top:-30px;padding-top:0;background:none}
}
/* narrow phones (379px and less): the date and views in one line above the button, so the two never run out of the card */
@media (max-width: 379.98px){
	.wd-card__foot{flex-direction:column;align-items:flex-start;gap:10px}
	.wd-card__meta{order:-2;flex-direction:row;align-items:center;gap:6px 16px;padding:0;background:none;box-shadow:none;text-shadow:0 1px 2px rgba(0,0,0,.55)}
}

/* ---------- computers and tablets (576px and wider): the grid and the list, with the switch ---------- */
@media (min-width: 576px){
	/* ===== the grid (D), what its two layouts share ===== */
	#mixitup-article.wd-cards:not(.wd-cards--list){grid-template-columns:repeat(2,minmax(0,1fr))}
	.wd-cards:not(.wd-cards--list) .wd-card__in{isolation:isolate;background:#121a28;box-shadow:0 34px 64px -40px rgba(0,0,0,.95)}
	.wd-cards:not(.wd-cards--list) .wd-card__in::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:4;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);pointer-events:none}
	.wd-cards:not(.wd-cards--list) .wd-card__media::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}
	.wd-cards:not(.wd-cards--list) .wd-card__img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
	.wd-cards:not(.wd-cards--list) .wd-card .wd-card__title .wd-card__link{text-decoration:underline;text-decoration-color:rgba(255,193,7,.72);text-decoration-thickness:2px;text-underline-offset:.24em;transition:text-decoration-color .25s ease}
	.wd-cards:not(.wd-cards--list) .wd-card__title{text-shadow:0 1px 14px rgba(0,0,0,.35)}
	.wd-cards:not(.wd-cards--list) .wd-card__text p{color:#cdd5e0}
	/* the link: a light button, as "Write to me" in the block about the author */
	.wd-cards:not(.wd-cards--list) .wd-card__cta{display:inline-flex;align-items:center;height:42px;padding:0 20px;border-radius:999px;background:#fff;color:#1a2334;font-weight:700;font-size:15px;transition:background-color .2s ease}
	/* the date and the views: a small glass plate; the date in yellow, as now */
	.wd-cards:not(.wd-cards--list) .wd-card__meta{flex-direction:column;align-items:flex-end;gap:7px;padding:10px 14px 10px 13px;border-radius:12px;
		background:rgba(13,20,32,.48);-webkit-backdrop-filter:blur(12px) saturate(1.3);backdrop-filter:blur(12px) saturate(1.3);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);color:#dfe5ec;font-size:13.5px}
	.wd-cards:not(.wd-cards--list) .wd-card__date{color:#ffd56a}

	/* ===== the list (C): one study a row, the photograph on the left ===== */
	#mixitup-article.wd-cards.wd-cards--list{gap:22px;max-width:1180px}
	.wd-cards--list .wd-card{--card-r:24px}
	.wd-cards--list .wd-card__in{display:grid;grid-template-columns:minmax(0,448px) minmax(0,1fr);grid-template-rows:auto 1fr;grid-template-areas:"media places" "media body";column-gap:34px;padding:12px;
		background:radial-gradient(70% 90% at 100% 100%,rgba(58,111,134,.26) 0%,rgba(58,111,134,0) 60%),linear-gradient(160deg,#22314d 0%,#1b283f 52%,#16263b 100%);box-shadow:0 30px 60px -40px rgba(0,0,0,.9)}
	/* the thin line of light on the upper left edge, as on the panels of the About page */
	.wd-cards--list .wd-card__in::before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:1;border-radius:inherit;padding:1px;pointer-events:none;
		background:linear-gradient(160deg,rgba(255,255,255,.24),rgba(255,255,255,.06) 30%,rgba(255,255,255,0) 55%,rgba(143,184,255,.12));
		-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
	.wd-cards--list .wd-card__media{grid-area:media;align-self:start;aspect-ratio:560/320;border-radius:15px}
	.wd-cards--list .wd-card__places{grid-area:places;padding:16px 16px 0 0}
	.wd-cards--list .wd-card__place{color:var(--c-text);font-size:14.5px;line-height:1.2}
	.wd-cards--list .wd-card__body{grid-area:body;display:flex;flex-direction:column;gap:12px;padding:12px 18px 6px 0}
	.wd-cards--list .wd-card__title{font-size:clamp(22px,.55vw + 15px,27px);line-height:1.24}
	.wd-cards--list .wd-card__text p{max-width:62ch;font-size:17px;line-height:1.6}
	.wd-cards--list .wd-card__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px;margin-top:auto;padding-top:6px}
	.wd-cards--list .wd-card__cta{display:inline-flex;align-items:center;height:42px;padding:0 20px;border-radius:999px;background:#fff;color:#1a2334;font-weight:700;font-size:15px;transition:background-color .2s ease}

	@media (hover: hover){
		.wd-cards:not(.wd-cards--list) .wd-card:hover .wd-card__img{transform:scale(1.035)}
		.wd-cards:not(.wd-cards--list) .wd-card:hover .wd-card__title .wd-card__link{text-decoration-color:var(--c-yellow)}
		.wd-card:hover .wd-card__cta{background:var(--c-yellow)}
	}
}

/* ===== the grid on computers and large tablets (768px and wider): the photograph is the whole card, the words on the left =====
   The card is at least as tall as the photograph (560 x 320) at its width. When its words need more room, the card grows:
   the photograph keeps its proportion at the top, never cut, and fades into the dark ground of the card at its foot.
   The cards of one row stay of one height. 100cqw is the width of the grid of cards (100vw for the browsers without it). */
@media (min-width: 768px){
	.wd-cards:not(.wd-cards--list) .wd-card__in{display:grid;grid-template-columns:minmax(0,62%) minmax(0,1fr);grid-template-rows:auto auto auto 1fr auto;column-gap:16px;
		min-height:calc((min(100vw - 100px, 1320px) - 30px) / 2 * 320 / 560);min-height:calc((100cqw - 30px) / 2 * 320 / 560);padding:28px 26px 24px 30px}
	.wd-cards:not(.wd-cards--list) .wd-card__body,.wd-cards:not(.wd-cards--list) .wd-card__foot{display:contents}
	.wd-cards:not(.wd-cards--list) .wd-card__media{position:absolute;top:0;left:0;right:0;z-index:0;aspect-ratio:560/320;border-radius:var(--card-r)}
	/* the shade: dark on the left, under the words; the photograph clear on the right; at its foot it goes into the ground of the card */
	.wd-cards:not(.wd-cards--list) .wd-card__media::after{
		background:linear-gradient(90deg,rgba(18,26,40,.95) 0%,rgba(18,26,40,.88) 36%,rgba(18,26,40,.62) 56%,rgba(18,26,40,.24) 78%,rgba(18,26,40,.04) 100%),
			linear-gradient(0deg,#121a28 0%,rgba(18,26,40,.62) 9%,rgba(18,26,40,.32) 20%,rgba(18,26,40,0) 36%)}
	.wd-cards:not(.wd-cards--list) .wd-card__places{grid-column:1;grid-row:1;z-index:2;margin-bottom:12px}
	.wd-cards:not(.wd-cards--list) .wd-card__place{color:#e6ebf2;font-size:13.5px;line-height:1.2}
	/* the title one level above the other words: the area of its link then covers the whole card, the button too */
	.wd-cards:not(.wd-cards--list) .wd-card__title{grid-column:1;grid-row:2;z-index:3;font-size:clamp(21px,.4vw + 16px,25px);line-height:1.3}
	.wd-cards:not(.wd-cards--list) .wd-card__text{grid-column:1;grid-row:3;z-index:2;margin-top:12px}
	.wd-cards:not(.wd-cards--list) .wd-card__text p{font-size:15.5px;line-height:1.55}
	.wd-cards:not(.wd-cards--list) .wd-card__cta{grid-column:1;grid-row:5;justify-self:start;align-self:end;z-index:2;margin-top:20px}
	/* the date and the views in the corner, where the views stand now */
	.wd-cards:not(.wd-cards--list) .wd-card__meta{grid-column:2;grid-row:4/6;justify-self:end;align-self:end;z-index:2}
}
/* large tablets: the grid one a row, no wider than 640px, so the 560px photographs stay sharp; the list narrower */
@media (min-width: 768px) and (max-width: 1199.98px){
	#mixitup-article.wd-cards:not(.wd-cards--list){grid-template-columns:minmax(0,1fr);max-width:640px;gap:26px}
	.wd-cards:not(.wd-cards--list) .wd-card__in{min-height:calc(min(100vw - 100px, 640px) * 320 / 560);min-height:calc(100cqw * 320 / 560)}
}
@media (min-width: 576px) and (max-width: 1199.98px){
	.wd-cards--list .wd-card__in{grid-template-columns:minmax(0,40%) minmax(0,1fr);column-gap:26px}
	.wd-cards--list .wd-card__text p{font-size:16px}
}

/* ===== small tablets and phones held sideways (576-767px): the grid one a row; the words would not fit beside
   a 560 x 320 photograph here, so the photograph stands above them at its own proportion, never cut ===== */
@media (min-width: 576px) and (max-width: 767.98px){
	#mixitup-article.wd-cards:not(.wd-cards--list){grid-template-columns:minmax(0,1fr);max-width:600px;gap:24px}
	.wd-cards:not(.wd-cards--list) .wd-card__in{display:flex;flex-direction:column;background:linear-gradient(180deg,#141d2d 0%,#111827 100%)}
	.wd-cards:not(.wd-cards--list) .wd-card__media{position:relative;aspect-ratio:560/320;border-radius:var(--card-r) var(--card-r) 0 0}
	.wd-cards:not(.wd-cards--list) .wd-card__media::after{background:linear-gradient(180deg,rgba(11,17,28,.36) 0%,rgba(11,17,28,0) 24%,rgba(20,29,45,0) 50%,rgba(20,29,45,.72) 80%,#141d2d 100%)}
	.wd-cards:not(.wd-cards--list) .wd-card__places{position:absolute;left:16px;top:16px;z-index:2;max-width:calc(100% - 32px)}
	.wd-cards:not(.wd-cards--list) .wd-card__place{padding:6px 11px 6px 8px;border-radius:10px;background:rgba(13,20,32,.62);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);color:#fff;font-size:14px;line-height:1.2}
	.wd-cards:not(.wd-cards--list) .wd-card__body{z-index:2;display:flex;flex-direction:column;gap:12px;margin-top:-34px;padding:0 24px 22px}
	.wd-cards:not(.wd-cards--list) .wd-card__title{font-size:22px;line-height:1.3}
	.wd-cards:not(.wd-cards--list) .wd-card__text p{font-size:15.5px;line-height:1.55}
	.wd-cards:not(.wd-cards--list) .wd-card__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:6px}
	/* the button on the left, the date and views on the right, as on a computer */
	.wd-cards:not(.wd-cards--list) .wd-card__cta{order:-1}

	.wd-cards--list .wd-card__in{column-gap:20px;padding:10px}
	.wd-cards--list .wd-card__places{padding-top:10px}
	.wd-cards--list .wd-card__body{padding:10px 10px 4px 0;gap:10px}
	.wd-cards--list .wd-card__title{font-size:20px}
	.wd-cards--list .wd-card__text p{font-size:15px;line-height:1.55}
	.wd-cards--list .wd-card__meta{font-size:13px;gap:6px 14px}
	.wd-cards--list .wd-card__cta{height:38px;padding:0 16px;font-size:14px}
}
/* ---------- the browsers without aspect-ratio (Safari 14 and older): the photographs keep their proportions anyway ---------- */
@supports not (aspect-ratio: 1 / 1){
	.wd-card__media{height:0;padding-bottom:57.143%}
	.wd-card__img{position:absolute;top:0;left:0}
	@media (max-width: 575.98px){
		.wd-card:not(.wd-card--no-mobile) .wd-card__media{padding-bottom:113.333%}
	}
}
@media (prefers-reduced-motion: reduce){
	.wd-card *{transition:none!important}
	.wd-card:hover .wd-card__img{transform:none!important}
}