/* Discover (the news pages, functions/views/_news.js; 2026-09-28) and the home page's
   Discover block. Linked by route (functions/[[route]].js ROUTE_CSS 'discover') and by the
   home view when its block is there. The share button's own look is in style.css (shared). */

/* ---------- the topic art's colours (our own pictures: update/NEWS.md "Pictures") ----------
   Every colour is a token here (test/unit/theme.test.mjs); the art is the same in both
   themes, only dimmed a little in dark (--dv-dim). The letter marks' tones pass 4.5:1 with
   white letters. */
:root {
  --dv-prices-a: #0b6b4d; --dv-prices-b: #3fae83; --dv-launches-a: #9a5a1c; --dv-launches-b: #e0a445;
  --dv-regulation-a: #2c3a63; --dv-regulation-b: #6477b3; --dv-finance-a: #5a3290; --dv-finance-b: #a574d2;
  --dv-developers-a: #962c25; --dv-developers-b: #de7659; --dv-projects-a: #0d4f7c; --dv-projects-b: #3a9ccf;
  --dv-offplan-a: #34522a; --dv-offplan-b: #8aae55; --dv-market-a: #4f4033; --dv-market-b: #ad8e70;
  --dv-on-art: rgba(255, 255, 255, .93); --dv-glow: rgba(255, 255, 255, .34); --dv-shade: rgba(0, 0, 0, .22);
  --dv-dots: rgba(255, 255, 255, .24); --dv-stripe: rgba(255, 255, 255, .11); --dv-ring-line: rgba(255, 255, 255, .15);
  --dv-drop: rgba(0, 0, 0, .18);
  --dv-fav-0: #0b6b4d; --dv-fav-1: #8a5518; --dv-fav-2: #2c3a63; --dv-fav-3: #5a3290;
  --dv-fav-4: #962c25; --dv-fav-5: #0d4f7c; --dv-fav-6: #34522a; --dv-fav-7: #4f4033; --dv-on-fav: #ffffff;
  --dv-dim: rgba(0, 0, 0, 0); --dv-ring: var(--surface);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --dv-dim: rgba(6, 9, 12, .22); }
}
:root[data-theme="dark"] { --dv-dim: rgba(6, 9, 12, .22); }
.dv-t-prices     { --dv-a: var(--dv-prices-a); --dv-b: var(--dv-prices-b); }
.dv-t-launches   { --dv-a: var(--dv-launches-a); --dv-b: var(--dv-launches-b); }
.dv-t-regulation { --dv-a: var(--dv-regulation-a); --dv-b: var(--dv-regulation-b); }
.dv-t-finance    { --dv-a: var(--dv-finance-a); --dv-b: var(--dv-finance-b); }
.dv-t-developers { --dv-a: var(--dv-developers-a); --dv-b: var(--dv-developers-b); }
.dv-t-projects   { --dv-a: var(--dv-projects-a); --dv-b: var(--dv-projects-b); }
.dv-t-offplan    { --dv-a: var(--dv-offplan-a); --dv-b: var(--dv-offplan-b); }
.dv-t-market     { --dv-a: var(--dv-market-a); --dv-b: var(--dv-market-b); }

.dv-art {
  position: relative; overflow: hidden; margin: 0; aspect-ratio: 16 / 9; border-radius: var(--r-lg);
  color: var(--dv-on-art); background: linear-gradient(var(--dv-ang, 135deg), var(--dv-a, var(--dv-market-a)), var(--dv-b, var(--dv-market-b)));
  isolation: isolate;
}
.dv-art::before, .dv-art::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.dv-art::after { background: var(--dv-dim); z-index: 2; }
.dv-v0 { --dv-ang: 135deg; }
.dv-v0::before { background: radial-gradient(circle at 82% 18%, var(--dv-glow), transparent 46%),
                             radial-gradient(circle at 8% 110%, var(--dv-shade), transparent 55%); }
.dv-v1 { --dv-ang: 165deg; }
.dv-v1::before { background: radial-gradient(var(--dv-dots) 1.3px, transparent 1.7px) 0 0 / 16px 16px,
                             linear-gradient(0deg, var(--dv-drop), transparent 60%); }
.dv-v2 { --dv-ang: 210deg; }
.dv-v2::before { background: repeating-linear-gradient(135deg, var(--dv-stripe) 0 9px, transparent 9px 24px); }
.dv-v3 { --dv-ang: 115deg; }
.dv-v3::before { background: repeating-radial-gradient(circle at 100% 100%, var(--dv-ring-line) 0 2px, transparent 2px 24px); }
.dv-ico { position: absolute; z-index: 1; width: 34%; height: auto; max-width: 150px; inset-block-end: 12%; inset-inline-end: 8%;
          filter: drop-shadow(0 6px 14px var(--dv-drop)); }
.dv-v1 .dv-ico { inset-block: 12% auto; inset-inline: 8% auto; }
.dv-v3 .dv-ico { inset-block-end: 50%; inset-inline-end: 50%; translate: 50% 50%; }
[dir="rtl"] .dv-v3 .dv-ico { translate: -50% 50%; }
.dv-art-hero { border-radius: var(--r-xl); }
.dv-art-hero .dv-ico { width: 30%; max-width: 190px; }
/* the outlet's own picture (switch news.source_images, off by default), credited */
.dv-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dv-credit { position: absolute; z-index: 3; inset-block-end: 8px; inset-inline-start: 8px; max-width: calc(100% - 16px);
             padding: 2px 8px; border-radius: var(--r-pill); font-size: 12px; color: var(--on-photo); background: var(--photo-glass);
             overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- the page head: title, lede, topic chips ---------- */
.dv-head { display: grid; gap: var(--space-2); max-width: 70ch; }
.dv-head > * { margin: 0; }
.dv-title { font-size: clamp(30px, 4.4vw, 44px); letter-spacing: -.02em; }
.dv-lede { font-size: 15.5px; }
.dv-filters { display: grid; gap: var(--space-3); margin-block-start: var(--space-5); }
.dv-top { padding-block-end: 0; }
.dv-page { padding-block-start: var(--space-5); }
.dv-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-block: 2px; margin-inline: calc(-1 * var(--gut)); padding-inline: var(--gut);
            scroll-padding-inline: var(--gut); }
.dv-chips::-webkit-scrollbar { display: none; }
.dv-chips .chip { flex: none; white-space: nowrap; }
@media (min-width: 1000px) { .dv-chips { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding-inline: 0; } }
.dv-source .lbl { margin: 0; }

/* ---------- shared bits of the hero, the cards and the story ---------- */
.dv-eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; font-size: 13px; font-weight: 600; color: var(--jade); }
.dv-eyebrow > span:not(.dv-tag) + span:not(.dv-tag)::before { content: "·"; margin-inline-end: 10px; color: var(--ink-3); }
.dv-eyebrow .dv-age { color: var(--ink-2); font-weight: 500; }
.dv-tag { display: inline-flex; padding: 1px 8px; border-radius: var(--r-pill); background: var(--surface-2); color: var(--ink-2); font-size: 12px; font-weight: 600; }
.dv-sum { margin: 0; color: var(--ink-2); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.dv-sum-3 { -webkit-line-clamp: 3; line-clamp: 3; }
.dv-meta { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 14px; color: var(--ink-2); }
.dv-clock { flex: none; }
.dv-foot { display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap; margin-block-start: auto; font-size: 13.5px; color: var(--ink-2); }
.dv-foot .dv-menu { margin-inline-start: auto; margin-block: -6px; }
.dv-age { white-space: nowrap; }
.dv-srcs { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.dv-favs { display: inline-flex; }
.dv-fav { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-size: 11.5px; font-weight: 700; line-height: 1;
          color: var(--dv-on-fav); box-shadow: 0 0 0 2px var(--dv-ring); }
.dv-fav + .dv-fav { margin-inline-start: -7px; }
.dv-f0 { background: var(--dv-fav-0); } .dv-f1 { background: var(--dv-fav-1); } .dv-f2 { background: var(--dv-fav-2); } .dv-f3 { background: var(--dv-fav-3); }
.dv-f4 { background: var(--dv-fav-4); } .dv-f5 { background: var(--dv-fav-5); } .dv-f6 { background: var(--dv-fav-6); } .dv-f7 { background: var(--dv-fav-7); }
/* a headline in the Latin languages takes a serif, the way a news page reads; Arabic keeps
   the site's own face (no Arabic serif is shipped, and none is downloaded for this) */
:root:not([lang|="ar"]) .dv-hero-h, :root:not([lang|="ar"]) .dv-story-h {
  font-family: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; font-weight: 700; letter-spacing: -.015em;
}

/* the whole card is the link: the headline's link covers it, the ⋯ menu sits above */
.dv-link { color: inherit; }
.dv-link::after { content: ""; position: absolute; inset: 0; border-radius: inherit; z-index: 1; }
.dv-link:focus-visible { outline: none; }
.dv-card:has(.dv-link:focus-visible), .dv-hero:has(.dv-link:focus-visible) { outline: 3px solid var(--jade); outline-offset: 3px; }
.dv-menu, .dv-foot a, .dv-eyebrow a { position: relative; z-index: 2; }

/* ---------- the lead story ---------- */
.dv-hero { position: relative; display: grid; gap: var(--space-5); align-items: center; padding: var(--space-3); border-radius: var(--r-xl);
           background: var(--surface); border: 1px solid var(--line); box-shadow: var(--sh-1); transition: border-color .16s, box-shadow .16s; }
.dv-hero-body { display: grid; gap: var(--space-3); align-content: center; padding: var(--space-2) var(--space-3) var(--space-3); min-width: 0; }
.dv-hero-body > * { min-width: 0; }
.dv-hero-h { font-size: clamp(24px, 3vw, 38px); line-height: 1.15; overflow-wrap: anywhere; }
.dv-hero:hover { border-color: var(--line-2); box-shadow: var(--sh-2); }
.dv-hero:hover .dv-hero-h { color: var(--jade); }
@media (min-width: 860px) {
  .dv-hero { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); gap: var(--space-6); }
  .dv-hero .dv-art-hero { aspect-ratio: 4 / 3; }
  .dv-hero-body { padding-inline-end: var(--space-5); }
}
.dv-hl-link { margin: var(--space-3) 0 0; }
.dv-more-h { font-size: clamp(20px, 2.4vw, 26px); margin: var(--space-6) 0 var(--space-4); }

/* ---------- the grid of cards ---------- */
.dv-grid { display: grid; gap: var(--space-5) var(--space-4); grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.dv-grid-3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.dv-card { position: relative; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-2) var(--space-2) var(--space-4);
           border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line); transition: border-color .16s, box-shadow .16s, translate .16s; }
.dv-card:hover { border-color: var(--line-2); box-shadow: var(--sh-2); }
.dv-card:hover .dv-h { color: var(--jade); }
@media (prefers-reduced-motion: no-preference) { .dv-card:hover { translate: 0 -2px; } }
.dv-card .dv-art { border-radius: calc(var(--r-lg) - 6px); }
.dv-body { display: flex; flex-direction: column; gap: var(--space-2); flex: 1; padding-inline: var(--space-2); min-width: 0; }
.dv-body > * { min-width: 0; }
.dv-h { font-size: 17.5px; line-height: 1.3; margin: 0; overflow-wrap: anywhere;
        display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
.dv-card .dv-foot { padding-block-start: var(--space-1); flex-wrap: nowrap; }
.dv-card .dv-srcs > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv-grid > .spon { align-self: stretch; }

/* ---------- a story ---------- */
.dv-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--ink-3); }
.dv-story { display: grid; gap: var(--space-4); margin-block-start: var(--space-4); }
.dv-story > * { margin: 0; min-width: 0; }
.dv-story-h { font-size: clamp(28px, 4.2vw, 44px); line-height: 1.14; overflow-wrap: anywhere; }
.dv-meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); font-size: 14px; color: var(--ink-2);
               padding-block: var(--space-3); border-block: 1px solid var(--line); }
.dv-actions { margin-inline-start: auto; display: inline-flex; gap: var(--space-2); }
.dv-story .dv-art-hero { aspect-ratio: 16 / 8; }
.dv-related { border-block-start: 1px solid var(--line); margin-block-start: var(--space-5); }
.dv-related .dv-more-h { margin-block-start: var(--space-2); }
/* a card's eyebrow stays one line: the topic gives way (…), the age and the tags do not */
.dv-card .dv-eyebrow { flex-wrap: nowrap; }
.dv-card .dv-eyebrow > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dv-card .dv-eyebrow > .dv-age, .dv-card .dv-eyebrow > .dv-tag { flex: none; white-space: nowrap; }