/* dv-oda (2026-10-27): the page about the project supported by ODA. Kit tokens and components only, in the look of the
   retailer pages: Literata for titles, Onest for the rest, the house greens, white cards on the ground, the band for the
   questions. Prefix oda-. */

.pg-oda {
  --oda-green: #3A6E20;                 /* the house link green: white on it 6.1:1, it on white 5.9:1 */
  --oda-tint: rgb(76 140 43 / .09);     /* leaf over white */
  --oda-card-shadow: 0 1px 2px rgb(26 23 27 / .05), 0 12px 32px -24px rgb(26 23 27 / .25);
}
.oda-h2 { margin: 0 0 var(--sp-4); }

/* ---- Head: text left, the two logos on a white card right (top on phones) ---------------------------------------- */
.oda-hero { padding-block: var(--sp-5) var(--sp-7); }
.oda-hero__grid { display: grid; gap: var(--sp-5); grid-template-areas: "logos" "text"; }
.oda-hero__text { grid-area: text; min-width: 0; }
.oda-hero__logos { grid-area: logos; }
.oda-crumbs { margin-bottom: var(--sp-4); }
.oda-eyebrow { margin-bottom: var(--sp-2); color: var(--oda-green); }
.oda-hero__title { max-width: 22ch; }
.oda-lead { margin-top: var(--sp-4); }
.oda-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-5); }
.oda-actions .dvh-btn .dvh-icon { opacity: .8; }

.oda-hero__logos {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-4); min-width: 0;
  padding: var(--sp-4) var(--sp-5); background: var(--surface); border-radius: var(--radius-media); box-shadow: var(--oda-card-shadow);
}
.oda-logo { display: inline-flex; align-items: center; justify-content: center; min-width: 0; }
a.oda-logo { border-radius: var(--radius-control); }
a.oda-logo:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.oda-logo__img { display: block; height: auto; }
.oda-logo__img--funder { width: 9.5rem; }   /* ODA's own artwork from oda.md (images/logo/oda_right.svg), about 6:1 */
.oda-logo__img--ours { width: 5.5rem; }
.oda-logo__rule { flex: none; align-self: stretch; width: 1px; background: var(--line); }

@media (min-width: 900px) {
  .oda-hero { padding-block: var(--sp-6) var(--sp-8); }
  .oda-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "text logos"; gap: var(--col-gap); align-items: center; }
  .oda-hero__logos { flex-direction: column; gap: var(--sp-6); padding: var(--sp-7) var(--sp-6); }
  .oda-logo__img--funder { width: 16rem; }
  .oda-logo__img--ours { width: 9rem; }
  .oda-logo__rule { align-self: center; width: 64px; height: 1px; }
}

/* ---- Text and "Pe scurt" ---------------------------------------------------------------------------------------- */
.oda-main { padding-top: 0; }
.oda-main__grid { display: grid; gap: var(--sp-7); }
.oda-text > :first-child { margin-top: 0; }
.oda-text h2 { margin-top: var(--sp-7); font-size: var(--fs-h2); line-height: var(--lh-h2); }
.oda-text h2:first-child { margin-top: 0; }
.oda-text a, .oda-brief a { color: var(--link); text-underline-offset: .18em; }
.oda-text ul, .oda-text ol { padding-left: 1.4em; max-width: var(--text-measure); }
.oda-text li + li { margin-top: var(--sp-2); }

.oda-brief { align-self: start; min-width: 0; padding: var(--sp-5); background: var(--surface); border-radius: var(--radius-media); box-shadow: var(--oda-card-shadow); }
.oda-brief__title { margin-bottom: var(--sp-3); font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: var(--fw-title); }
.oda-facts { margin: 0; }
.oda-facts__row { display: grid; gap: 2px; padding-block: var(--sp-3); border-top: 1px solid var(--line); }
.oda-facts dt { font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--muted); }
.oda-facts dd { margin: 0; font-size: var(--fs-ui); line-height: 1.5; overflow-wrap: anywhere; text-wrap: pretty; }
.oda-facts a .dvh-icon, .oda-links a .dvh-icon { display: inline-block; width: 14px; height: 14px; margin-left: 4px; vertical-align: -2px; opacity: .8; }
.oda-brief__sub { margin: var(--sp-5) 0 var(--sp-2); font-family: var(--font-text); font-size: var(--fs-ui); line-height: var(--lh-ui); font-weight: var(--fw-strong); }
.oda-links { margin: 0; padding: 0; list-style: none; }
.oda-links li { border-top: 1px solid var(--line); }
.oda-links a { display: flex; align-items: center; min-height: 44px; font-size: var(--fs-ui); line-height: 1.4; }
.oda-notice { margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-control); background: var(--oda-tint); font-size: var(--fs-meta); line-height: var(--lh-meta); color: var(--ink); }
@media (min-width: 1024px) {
  .oda-main__grid:has(> :nth-child(2)) { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-8); }
  .oda-brief { position: sticky; top: calc(var(--header-h) + var(--sp-4)); }
}

/* owner 2026-10-27 justifies running text site-wide; short UI lines stay ragged (a justified two-word line gapes) */
.oda-crumbs li, .oda-facts dt, .oda-facts dd, .oda-links a, .oda-notice { text-align: start; -webkit-hyphens: manual; hyphens: manual; }

/* ---- Questions -------------------------------------------------------------------------------------------------- */
.oda-qa { margin: 0; border-top: 1px solid var(--ink); }
.oda-qa__item { display: grid; gap: var(--sp-2); padding-block: var(--sp-5); border-bottom: 1px solid var(--line); }
.oda-qa__item dt { font-family: var(--font-display); font-size: var(--fs-card); line-height: var(--lh-card); font-weight: var(--fw-title); }
.oda-qa__item dd { margin: 0; max-width: var(--text-measure); font-size: var(--fs-body); line-height: var(--lh-body); text-wrap: pretty; }
@media (min-width: 900px) {
  .oda-qa__item { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--col-gap); align-items: baseline; }
}