/* ============================================================
   Blog - index (/{lang}/blog) and posts (/{lang}/blog/:slug)
   in the fancy-v2-light design language (loaded after
   fancy.css). Same light, warm page as the press room, with
   the reading column a little wider and room for figures,
   tables and a sources list.
   ============================================================ */

/* ---------- Shared bits ---------- */

.bl-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--w-mut2);
  margin-bottom: 16px;
}

.bl-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  font-size: 13px;
  color: var(--w-mut2);
  margin-bottom: 14px;
}

.bl-chip {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 980px;
  background: var(--blue-light);
  color: var(--green-700);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* ---------- Hero ---------- */

.bl-hero {
  padding: 150px 0 44px;
  text-align: center;
}

.bl-hero h1 {
  font-size: clamp(38px, 5vw, 56px);
  color: var(--w-ink);
  margin: 14px 0 12px;
}

.bl-hero-sub {
  font-size: 18px;
  line-height: 1.6;
  color: var(--w-mut);
  max-width: 640px;
  margin: 0 auto;
}

/* ---------- Cards ---------- */

.bl-latest-sec { padding: 0 0 46px; }
.bl-list-sec { padding: 0 0 72px; }

.bl-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.bl-card {
  display: flex;
  flex-direction: column;
  gap: 18px;
  text-decoration: none;
  transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}

.bl-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-lg);
}

.bl-card h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--w-ink);
  margin: 0 0 10px;
}

.bl-card p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--w-mut);
  margin: 0 0 16px;
}

.bl-card-more {
  font-size: 14px;
  font-weight: 600;
  color: var(--green-700);
}

.bl-card-more i { margin-left: 6px; font-size: 11px; }

.bl-card-art {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 150px;
  padding: 18px;
  border-radius: 18px;
  background: var(--blue-light);
}

.bl-art-stickers {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
  max-width: 420px;
}

.bl-art-stickers img { display: block; width: 100%; height: auto; }

.bl-art-icons {
  display: flex;
  gap: 16px;
}

.bl-art-icons i {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.85);
  color: var(--green-700);
  font-size: 30px;
  box-shadow: 0 6px 18px rgba(32, 48, 31, 0.08);
}

.bl-art-icons i:nth-child(2) { transform: translateY(-10px); }

/* A screenshot of one of our sites (screenArt), tilted and pinned near the
   top of the card's art box, which crops it, so the card's text and not
   the picture sets the card's height. */
.bl-card-art:has(.bl-art-screen) {
  position: relative;
  height: 260px;
  overflow: hidden;
}

.bl-art-screen {
  position: absolute;
  top: 26px;
  left: 50%;
  display: block;
  width: min(330px, calc(100% - 40px));
  border-radius: 16px;
  overflow: hidden;
  background: #14171b;
  box-shadow: 0 18px 40px rgba(20, 32, 24, 0.22), 0 0 0 1px rgba(20, 32, 24, 0.12);
  transform: translateX(-50%) rotate(-2.5deg);
}

.bl-art-screen img {
  display: block;
  width: 100%;
  height: auto;
}

.bl-card-featured { padding: 34px 38px; }

.bl-card-featured h3 {
  font-size: clamp(24px, 3vw, 32px);
  line-height: 1.15;
  max-width: 780px;
}

.bl-card-featured p { font-size: 16.5px; max-width: 760px; }

@media (min-width: 900px) {
  .bl-card-featured:has(.bl-card-art) {
    flex-direction: row-reverse;
    align-items: stretch;
    gap: 34px;
  }
  .bl-card-featured .bl-card-art { flex: 0 0 38%; }
  .bl-card-featured .bl-card-art:has(.bl-art-screen) { height: auto; min-height: 280px; }
  .bl-card-featured .bl-card-text { align-self: center; }
}

/* ---------- Post ---------- */

.bl-art { padding: 130px 0 20px; }

.bl-art-wrap { max-width: 840px; }

.bl-breadcrumb {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--w-mut2);
  margin-bottom: 26px;
  flex-wrap: wrap;
}

.bl-breadcrumb a { color: var(--green-700); text-decoration: none; font-weight: 600; }
.bl-breadcrumb a:hover { text-decoration: underline; }
.bl-breadcrumb i { font-size: 10px; color: var(--w-faint); }

.bl-art-head { margin-bottom: 26px; }

.bl-art-head h1 {
  font-size: clamp(32px, 4.4vw, 48px);
  line-height: 1.08;
  color: var(--w-ink);
  margin: 0 0 16px;
}

.bl-dek {
  font-size: 19px;
  line-height: 1.6;
  color: var(--w-mut);
  margin: 0;
}

.bl-art-body { padding: 38px 44px; }

.bl-art-body > :first-child { margin-top: 0; }

.bl-art-body p,
.bl-art-body li {
  font-size: 16.5px;
  line-height: 1.75;
  color: var(--w-ink2);
}

.bl-art-body p { margin: 0 0 18px; }

.bl-art-body h2 {
  font-size: 25px;
  line-height: 1.2;
  color: var(--w-ink);
  margin: 38px 0 14px;
}

.bl-art-body h3 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--w-ink);
  margin: 26px 0 10px;
}

.bl-art-body ul,
.bl-art-body ol {
  margin: 0 0 20px;
  padding-left: 22px;
}

.bl-art-body li { margin-bottom: 8px; }

/* Links in running text are underlined: colour alone fails Lighthouse. */
.bl-art-body a {
  color: var(--green-700);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.bl-art-body a:hover { color: var(--w-ink); }

.bl-art-body strong { color: var(--w-ink); }

.bl-callout {
  margin: 26px 0;
  padding: 22px 26px;
  border-left: 3px solid var(--green-400);
  background: var(--blue-light);
  border-radius: 0 16px 16px 0;
}

.bl-callout p:last-child { margin-bottom: 0; }

.bl-callout-title {
  display: block;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--w-ink);
  margin-bottom: 6px;
}

/* ---------- Figures ---------- */

.bl-figure { margin: 28px 0; }

.bl-figure figcaption {
  font-size: 14px;
  line-height: 1.55;
  color: var(--w-mut);
  margin-top: 10px;
  text-align: center;
}

.bl-sticker-wall {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 18px;
  border-radius: 20px;
  background: var(--blue-light);
}

.bl-sticker {
  display: block;
  border-radius: 14px;
  transition: transform var(--dur-base) var(--ease-standard);
}

.bl-sticker:hover { transform: scale(1.06) rotate(-2deg); }

.bl-art-body .bl-sticker { text-decoration: none; }

.bl-sticker img {
  display: block;
  width: 100%;
  height: auto;
}

/* Example heads-ups for the feed (headsUpFigure): the feed page's dark
   local panel, two tiles a row, the hashtags in the feed's link blue. */
.bl-hu {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 18px;
  border-radius: 20px;
  background:
    radial-gradient(circle at 10% 0%, rgba(111, 211, 155, 0.16), transparent 48%),
    radial-gradient(circle at 92% 100%, rgba(230, 179, 76, 0.12), transparent 50%),
    #202327;
}

.bl-hu-item {
  padding: 14px 14px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.07);
}

.bl-hu-who {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}

.bl-hu-who i {
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: rgba(111, 211, 155, 0.14);
  color: #6fd39b;
  font-size: 14px;
}

.bl-art-body p.bl-hu-post {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: #14171b;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
  color: #e8eaed;
  font-size: 14.5px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.bl-hu-tag { color: #4aa3ff; font-weight: 600; }

/* ---------- Tables ---------- */

.bl-table-wrap {
  margin: 24px 0;
  overflow-x: auto;
  border-radius: 16px;
  border: 1px solid var(--w-line, rgba(32, 48, 31, 0.12));
}

.bl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.5;
  min-width: 560px;
}

.bl-table th,
.bl-table td {
  padding: 12px 16px;
  text-align: left;
  vertical-align: top;
  color: var(--w-ink2);
  border-bottom: 1px solid var(--w-line, rgba(32, 48, 31, 0.12));
}

.bl-table thead th {
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--w-ink);
  background: var(--blue-light);
}

.bl-table tbody th {
  font-weight: 600;
  color: var(--w-ink);
  width: 26%;
}

.bl-table tr:last-child th,
.bl-table tr:last-child td { border-bottom: none; }

/* ---------- Sources, prev/next, back ---------- */

.bl-sources {
  margin-top: 36px;
  padding-top: 24px;
  border-top: 1px solid var(--w-line, rgba(32, 48, 31, 0.12));
}

.bl-sources h2 {
  font-size: 18px;
  margin: 0 0 12px;
}

.bl-art-body .bl-sources li {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--w-mut);
  margin-bottom: 6px;
  overflow-wrap: anywhere;
}

.bl-prevnext {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  margin-top: 20px;
}

.bl-pn {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 48%;
  padding: 16px 20px;
  text-decoration: none;
}

.bl-pn:hover { box-shadow: var(--shadow-lg); }
.bl-pn-older { margin-left: auto; text-align: right; }

.bl-pn-label {
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--w-mut2);
}

.bl-pn-title { font-weight: 600; color: var(--green-700); font-size: 15px; }

.bl-back {
  margin: 26px 0 60px;
  font-size: 15px;
}

.bl-back a { color: var(--green-700); font-weight: 600; text-decoration: none; }
.bl-back a:hover { text-decoration: underline; }
.bl-back i { margin-right: 8px; font-size: 12px; }

/* ---------- Responsive ---------- */

@media (max-width: 900px) {
  .bl-list { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 760px) {
  .bl-hero { padding-top: 120px; }
  .bl-art { padding-top: 110px; }
  .bl-art-body { padding: 26px 20px; }
  .bl-card-featured { padding: 24px 22px; }
  .bl-sticker-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 12px; gap: 6px; }
  .bl-hu { grid-template-columns: minmax(0, 1fr); padding: 12px; gap: 10px; }
  .bl-prevnext { flex-direction: column; }
  .bl-pn { max-width: none; }
  .bl-pn-older { text-align: left; margin-left: 0; }
}