/* =====================================================================
   The related studies under an article (template-parts/related-studies.php, single-eng.php), since 2026-10-23.
   One dark section between the comments and the block about the author, with no white between: it begins in the blue
   the comments end with and turns into the navy of the block about the author.
   Three cards in the design of the phone cards of the home page (the mobile preview of each study, 375 x 425; a study
   without one shows its preview 560 x 320, whole, above the words) and, at the end of the row, a tile: the number of
   the studies, the flags of their countries and the link to all of them (it was "More stories").
   Computers (1200px and wider): the four in a row. Tablets and phones: the cards one under another, the tile under them.
   The whole card is a link: the link is the title, its area covers the card.
   Loaded by header.php on articles, after the theme's style-en.css.
   ===================================================================== */

.wd-related{--r-yellow:#ffc107;--r-text:#d5dce6;--r-muted:#9fb2c8;--r-gut:clamp(16px,4vw,64px);
	position:relative;isolation:isolate;margin:0;padding:clamp(56px,5vw,88px) 0 clamp(8px,1vw,16px);
	background:radial-gradient(55% 45% at 82% 34%,rgba(58,111,134,.18) 0%,rgba(58,111,134,0) 70%),linear-gradient(180deg,#132744 0,#17253b 200px,#1a2334 380px);
	color:var(--r-text);font-family:Transat,sans-serif;font-weight:300;letter-spacing:0;text-align:left;-webkit-font-smoothing:antialiased}
.wd-related *,.wd-related *::before,.wd-related *::after{box-sizing:border-box}
.wd-related__in{width:min(1200px,100% - 2 * var(--r-gut));margin:0 auto}

/* the head: the title white with the yellow line, as on About and the home page; the line under it in the italic of the cards */
.wd-related__head{margin:0 0 clamp(26px,2.4vw,36px)}
.wd-related .wd-related__title{margin:0;padding:0;border:0;color:#fff;font-family:Transat,sans-serif;font-weight:700;font-size:clamp(28px,1.1vw + 17px,40px);line-height:1.15;letter-spacing:-.005em;text-align:left;text-transform:none;
	text-decoration:underline;text-decoration-color:var(--r-yellow);text-decoration-thickness:3px;text-underline-offset:.22em}
.wd-related .wd-related__sub{margin:14px 0 0;padding:0;color:var(--r-muted);font-family:gotic,Transat,sans-serif;font-style:italic;font-weight:300;font-size:17px;line-height:1.55;letter-spacing:.02em;text-align:left;text-transform:none}

/* the row: three cards and the tile */
.wd-related__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) minmax(0,.7fr);gap:24px;align-items:stretch}

/* ---------- the cards ---------- */
.wd-related .wd-card{--card-r:18px;position:relative;min-width:0;margin:0;container-type:inline-size}
.wd-related .wd-card__in{position:relative;display:grid;grid-template-columns:minmax(0,1fr);height:100%;isolation:isolate;border-radius:var(--card-r);background:#111827;
	box-shadow:0 30px 60px -40px rgba(0,0,0,.95);color:var(--r-text);font-family:Transat,sans-serif;font-weight:300;letter-spacing:0;text-align:left}
/* a hairline ring over the photograph */
.wd-related .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}
/* the photograph at its own proportion at the top, never cut; the words lie on its lower part, and when they need more room
   the card grows downwards on its dark ground, the photograph fading into it */
.wd-related .wd-card__media{position:relative;grid-area:1/1;align-self:start;z-index:0;overflow:hidden;aspect-ratio:375/425;border-radius:var(--card-r);background:#16263b}
.wd-related .wd-card__img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.wd-related .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%)}
/* the country: its flag and name on a small plate in the corner */
.wd-related .wd-card__places{grid-area:1/1;align-self:start;justify-self:start;z-index:2;display:flex;flex-wrap:wrap;gap:6px;margin:14px;max-width:calc(100% - 28px)}
.wd-related .wd-card__place{display:inline-flex;align-items:center;gap:8px;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;white-space:nowrap}
.wd-related .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 words with their own shade: darkest behind the button and the description, lighter behind the title */
.wd-related .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-related .wd-card__title{margin:0;padding:0;border:0;color:#fff;font-family:Transat,sans-serif;font-weight:700;font-size:20px;line-height:1.26;letter-spacing:0;text-transform:none;text-align:left;text-wrap:balance;text-shadow:0 1px 2px rgba(0,0,0,.5),0 0 20px rgba(0,0,0,.4)}
.wd-related .wd-card__link,.wd-related .wd-card__link:visited,.wd-related .wd-card__link:hover,.wd-related .wd-card__link:focus{color:inherit!important;text-decoration:underline;text-decoration-color:rgba(255,193,7,.72);text-decoration-thickness:2px;text-underline-offset:.24em}
.wd-related .wd-card__link::after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;border-radius:var(--card-r)}
.wd-related .wd-card__link:focus{outline:0}
.wd-related .wd-card__link:focus-visible::after{outline:2px solid var(--r-yellow);outline-offset:3px}
.wd-related .wd-card__text p{margin:0;padding:0;color:#dde3ec;font-family:gotic,Transat,sans-serif;font-style:italic;font-weight:300;font-size:14.5px;line-height:1.46;letter-spacing:.02em;text-align:left;text-shadow:0 1px 2px rgba(0,0,0,.55)}
/* the button on the left, the date and views on the right */
.wd-related .wd-card__foot{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin-top:4px}
.wd-related .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;white-space:nowrap;transition:background-color .2s ease}
.wd-related .wd-card__meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;margin:0;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;line-height:1.3}
.wd-related .wd-card__date,.wd-related .wd-card__views{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.wd-related .wd-card__date{color:#ffd56a}
.wd-related .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}
/* a study without a mobile photograph: its wide preview stands above the words, whole */
.wd-related .wd-card--no-mobile .wd-card__media{aspect-ratio:560/320;border-radius:var(--card-r) var(--card-r) 0 0}
.wd-related .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-related .wd-card--no-mobile .wd-card__body{grid-area:2/1;align-self:start;margin-top:-30px;padding-top:0;background:none}
/* a narrow card (the card itself under 300px wide, whatever the window): the date and views in one line above the button */
@container (max-width: 299.98px){
	.wd-related .wd-card__foot{flex-direction:column;align-items:flex-start;gap:10px}
	.wd-related .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)}
}

/* ---------- the tile: all the studies (it was "More stories") ---------- */
.wd-related .wd-related__tile{position:relative;isolation:isolate;display:flex;flex-direction:column;gap:12px;min-width:0;padding:24px 20px 20px;border-radius:18px;color:var(--r-text);text-decoration:none!important;
	background:radial-gradient(90% 60% at 100% 100%,rgba(58,111,134,.34) 0%,rgba(58,111,134,0) 62%),radial-gradient(70% 55% at 0% 0%,rgba(143,184,255,.08) 0%,rgba(143,184,255,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 About */
.wd-related .wd-related__tile::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,.26),rgba(255,255,255,.07) 28%,rgba(255,255,255,0) 52%,rgba(143,184,255,.14));
	-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-related .wd-related__tile:focus{outline:0}
.wd-related .wd-related__tile:focus-visible{outline:2px solid var(--r-yellow);outline-offset:3px}
.wd-related .wd-related__count{color:#fff;font-weight:700;font-size:30px;line-height:1.1;letter-spacing:-.005em;text-decoration:underline;text-decoration-color:var(--r-yellow);text-decoration-thickness:3px;text-underline-offset:.2em}
.wd-related .wd-related__what{color:var(--r-muted);font-family:gotic,Transat,sans-serif;font-style:italic;font-weight:300;font-size:15px;line-height:1.45;letter-spacing:.02em}
/* the flags of the countries: as many in a row as there is room for, the rows even, so that no flag is left alone on the last one
   (text-wrap: balance; the negative margins take back the spaces after the last flag of each row) */
.wd-related .wd-related__flags{display:block;margin:6px -6px -6px 0;font-size:0;line-height:0;text-wrap:balance}
.wd-related .wd-related__flags img{display:inline-block;vertical-align:top;width:26px;height:18px;max-width:none;margin:0 6px 6px 0;border-radius:3px;object-fit:cover;box-shadow:0 0 0 1px rgba(255,255,255,.25)}
/* the link: a light button, as "Browse all 70+ studies" on About */
.wd-related .wd-related__go{display:inline-flex;align-items:center;justify-content:center;width:100%;min-height:50px;margin-top:auto;padding:0 24px;border-radius:999px;background:#fff;color:#1a2334;
	font-family:Transat,sans-serif;font-weight:700;font-size:15.5px;line-height:1.2;letter-spacing:.01em;white-space:nowrap;transition:background-color .2s ease}

@media (hover: hover){
	.wd-related .wd-card:hover .wd-card__img{transform:scale(1.035)}
	.wd-related .wd-card:hover .wd-card__cta,.wd-related .wd-related__tile:hover .wd-related__go{background:var(--r-yellow);color:#1a2334}
	.wd-related .wd-card:hover .wd-card__title .wd-card__link{text-decoration-color:var(--r-yellow)}
}

/* ---------- tablets and phones (below 1200px): one column, the cards one under another, the tile under them ---------- */
@media (max-width: 1199.98px){
	.wd-related__in{width:min(460px,100% - 2 * var(--r-gut))}
	.wd-related__list{grid-template-columns:minmax(0,1fr);gap:20px}
	.wd-related .wd-related__tile{padding:22px 20px 20px}
	.wd-related .wd-related__go{margin-top:8px}
}
@media (max-width: 767.98px){
	.wd-related{padding-top:48px}
	.wd-related .wd-related__title{font-size:27px}
	.wd-related .wd-related__sub{margin-top:12px;font-size:16px}
}
@media (prefers-reduced-motion: reduce){
	.wd-related .wd-card__img,.wd-related .wd-card__cta,.wd-related .wd-related__go{transition:none}
	.wd-related .wd-card:hover .wd-card__img{transform:none}
}