/* Article opening: a single frame with two equal panels, or two stacked panels. */
.wsl-page-visual.wsl-page-visual--article.wsl-article-split,
.wsl-page-visual.wsl-page-visual--article.wsl-article-split + .wsl-content-layout {
  box-sizing: border-box !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
}
.wsl-page-visual.wsl-page-visual--article.wsl-article-split {
  display: grid !important;
  grid-template: auto / repeat(2, minmax(0, 1fr)) !important;
  gap: 0 !important;
  padding: 0 !important;
  min-height: clamp(340px, 32vw, 480px) !important;
  height: auto !important;
  max-height: none !important;
  background: #fff !important;
  align-items: stretch !important;
}
.wsl-page-visual--article.wsl-article-split::before,
.wsl-page-visual--article.wsl-article-split::after { display: none !important; }
.wsl-page-visual.wsl-page-visual--article.wsl-article-split > :is(.wsl-page-visual__copy,.wsl-page-visual__media) {
  position: relative !important;
  inset: auto !important;
  margin: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  box-sizing: border-box !important;
  align-self: stretch !important;
  clip-path: none !important;
}
.wsl-page-visual.wsl-page-visual--article.wsl-article-split > .wsl-page-visual__copy {
  grid-area: 1 / 1 !important;
  padding: clamp(24px, 3.5vw, 52px) !important;
  background: linear-gradient(120deg,#06244c,#0a396e) !important;
  justify-content: center !important;
  overflow-wrap: anywhere;
}
.wsl-page-visual.wsl-page-visual--article.wsl-article-split > .wsl-page-visual__media {
  grid-area: 1 / 2 !important;
  display: grid !important;
  grid-template: minmax(0,1fr) auto / minmax(0,1fr) !important;
  min-height: 0 !important;
  padding: 0 !important;
  background: #fff !important;
}
.wsl-page-visual.wsl-page-visual--article.wsl-article-split > .wsl-page-visual__media > img {
  grid-area: 1 / 1;
  contain: size;
  display: block !important;
  position: static !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  background: #fff !important;
}
.wsl-article-split .wsl-project-caption {
  grid-area: 2 / 1;
  display: block;
  padding: 7px 14px;
  color: #3c5063;
  background: #f4f7fa;
  font: 400 14px/1.5 system-ui,sans-serif;
  text-align: center;
}
@media(max-width:900px) {
  .wsl-page-visual.wsl-page-visual--article.wsl-article-split {
    grid-template: auto auto / minmax(0,1fr) !important;
    min-height: 0 !important;
  }
  .wsl-page-visual.wsl-page-visual--article.wsl-article-split > .wsl-page-visual__media {
    grid-area: 2 / 1 !important;
    aspect-ratio: 3 / 2;
  }
}

/* Let a documented project photograph set its own height, including its caption.
   This keeps the photo edge aligned with the panel without cropping the subject. */
.wsl-page-visual.wsl-page-visual--article.wsl-article-split > .wsl-page-visual__media:has(> .wsl-project-caption) {
  aspect-ratio: auto;
  grid-template-rows: auto auto !important;
  align-content: center;
}
.wsl-page-visual.wsl-page-visual--article.wsl-article-split > .wsl-page-visual__media:has(> .wsl-project-caption) > img {
  height: auto !important;
  aspect-ratio: auto !important;
  contain: none;
}

/* Related reading on article detail pages. Keep links and reading order intact. */
.wsl-article-page .wsl-reading {
  box-sizing: border-box; width: 100%; min-width: 0;
  padding: clamp(16px,2.2vw,32px); background: #fff;
}
.wsl-reading__head {
  margin: 0 0 20px; padding-bottom: 16px; border-bottom: 1px solid #dbe4ee;
  text-align: start;
}
.wsl-reading__head > span { color:#aa142b; font-size: 14px; font-weight: 700; }
.wsl-reading__head > h2 { margin: 4px 0 0; color:#102b49; font-size:clamp(21px,2vw,29px); line-height:1.35; }
.wsl-reading__cards {
  --reading-gap: 16px;
  display: grid; gap: var(--reading-gap); grid-auto-flow: row;
  grid-template-columns: repeat(auto-fit, minmax(min(100%,max(225px,calc((100% - 3 * var(--reading-gap)) / 4))),1fr));
}
.wsl-reading__cards > a {
  min-width: 0; display: flex; flex-direction: column; gap: 10px; align-items: start;
  padding: clamp(16px,1.4vw,23px); box-sizing:border-box; height:auto;
  border:1px solid #d8e2ed; border-radius:8px; background:#fff; text-decoration:none;
}
.wsl-reading__cards > a:hover, .wsl-reading__cards > a:focus-visible { border-color:#526f90; background:#f8fafc; }
.wsl-reading__cards > a:focus-visible { outline:2px solid #174b7d; outline-offset:2px; }
.wsl-reading__cards time { font-size:13px; line-height:1.4; color:#52657b; font-variant-numeric:tabular-nums; }
.wsl-reading__cards h3 { margin:0; font-size:clamp(16px,1.2vw,19px); line-height:1.5; color:#102b49; }
.wsl-reading__cards p { margin:0; color:#495e73; font-size:14px; line-height:1.7; }
.wsl-reading__cards :is(h3,p) { white-space:normal; overflow-wrap:anywhere; }
.wsl-reading__cards > a > span { margin-top:auto; padding-top:4px; font-weight:700; color:#154f83; }
@supports (grid-template-rows: subgrid) {
  .wsl-reading__cards { row-gap:12px; }
  .wsl-reading__cards > a { display:grid; grid-row:span 4; grid-template-rows:subgrid; }
}
@media(max-width:1100px) {
  .wsl-reading__cards { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media(max-width:600px) {
  .wsl-reading__cards { grid-template-columns: minmax(0,1fr); }
  .wsl-reading__cards > a { display:flex; grid-row:auto; }
}

/* Article detail uses the full frame and one centred, readable column. */
.wsl-content-layout[data-article-reading] {
  display: block !important;
  grid-template-columns: none !important;
  padding: clamp(16px, 3vw, 40px) !important;
}
.wsl-content-layout[data-article-reading] > .wsl-article {
  box-sizing: border-box;
  width: 100% !important;
  max-width: 55rem !important;
  margin-inline: auto !important;
  min-width: 0;
}
:lang(en) .wsl-content-layout[data-article-reading] > .wsl-article { max-width: 80ch !important; }