/* DiDe Rwanda - homepage override stylesheet.
   Loaded AFTER the theme CSS (see sommaire.html), so it only refines the parts
   of the page that are filled from the SPIP database: slides, approach items,
   activity cards, news cards, partner logos and article text. */

.page_sommaire {
  --dide-accent: #e3660d;
  --dide-accent-dark: #b9500a;
  --dide-ink: #1f2933;
  --dide-muted: #5f6b76;
  --dide-line: #e4e7ea;
  --dide-radius: 4px;
}

/* ---------- Focus and motion ---------- */
.page_sommaire a:focus-visible,
.page_sommaire .primary-button:focus-visible {
  outline: 3px solid var(--dide-accent);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .page_sommaire * { transition: none !important; animation: none !important; }
}

/* ---------- Hero slides (articles of rubrique 15) ---------- */
.page_sommaire .home-item { position: relative; min-height: 70vh; }
.page_sommaire .home-item .section-bg {
  background-repeat: no-repeat;
  background-color: var(--dide-ink);   /* shown when an article has no logo */
}
/* keep the title readable on any photo uploaded as a logo */
.page_sommaire .home-item::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.65), rgba(0,0,0,.15) 70%);
  pointer-events: none;
}
.page_sommaire .home-item .home { position: relative; z-index: 2; }
.page_sommaire .home-content .lead {
  max-width: 34em;
  overflow-wrap: anywhere;             /* very long article titles */
}

/* ---------- Buttons ---------- */
.page_sommaire .primary-button {
  background: var(--dide-accent);
  border-color: var(--dide-accent);
  border-radius: var(--dide-radius);
  transition: background-color .2s ease;
}
.page_sommaire .primary-button:hover { background: var(--dide-accent-dark); border-color: var(--dide-accent-dark); }

/* ---------- Article text written in the back-office (#TEXTE) ---------- */
.page_sommaire .about-content { max-width: 70ch; margin-inline: auto; }
.page_sommaire .about-content p { line-height: 1.7; margin: 0 0 1em; }
.page_sommaire .about-content h3.spip,
.page_sommaire .about-content h2.spip { margin: 1.5em 0 .5em; }
.page_sommaire .about-content img { max-width: 100%; height: auto; }
.page_sommaire .about-content a.spip_out,
.page_sommaire .about-content a.spip_url { overflow-wrap: anywhere; }
.page_sommaire .about-content table.spip { width: 100%; display: block; overflow-x: auto; }

/* ---------- Approach items (rubrique 16): icon class comes from #SOUSTITRE ---------- */
.page_sommaire #numbers .col-md-4 { margin-bottom: 30px; }
.page_sommaire #numbers .number {
  height: 100%;
  padding: 28px 24px;
  border: 1px solid var(--dide-line);
  border-radius: var(--dide-radius);
  background: #fff;
  color: var(--dide-ink);
}
.page_sommaire #numbers .number i { color: var(--dide-accent); font-size: 36px; }
.page_sommaire #numbers .number h3 { margin: 14px 0 8px; }
.page_sommaire #numbers .number span { color: var(--dide-muted); line-height: 1.6; }
.page_sommaire #numbers .col-md-4 > a { display: block; height: 100%; text-decoration: none; }
.page_sommaire #numbers .col-md-4 > a:hover .number { border-color: var(--dide-accent); }

/* ---------- Activity and news cards: uploaded logos have unknown proportions ---------- */
.page_sommaire .causes-img,
.page_sommaire .article-img { aspect-ratio: 16 / 10; overflow: hidden; background: var(--dide-line); }
.page_sommaire .causes-img img,
.page_sommaire .article-img img {
  width: 100%; height: 100%;
  object-fit: cover;                   /* crops instead of stretching */
  display: block;
}
/* equal-height rows even when titles or excerpts differ in length */
.page_sommaire #activities .row,
.page_sommaire #blog .row { display: flex; flex-wrap: wrap; }
.page_sommaire #activities .row::before, .page_sommaire #activities .row::after,
.page_sommaire #blog .row::before,       .page_sommaire #blog .row::after { display: none; }
.page_sommaire #activities .col-md-4,
.page_sommaire #blog .col-md-3 { display: flex; margin-bottom: 30px; }
.page_sommaire .causes,
.page_sommaire .article { display: flex; flex-direction: column; width: 100%; }
.page_sommaire .causes-content,
.page_sommaire .article-content { display: flex; flex-direction: column; flex: 1; }
.page_sommaire .causes-content .primary-button,
.page_sommaire .article-content .primary-button { margin-top: auto; align-self: flex-start; }
/* long titles: three lines at most */
.page_sommaire .causes-content h3,
.page_sommaire .article-title {
  display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.page_sommaire .article-meta { list-style: none; padding: 0; color: var(--dide-muted); font-size: 13px; }
@media (max-width: 991px) {
  .page_sommaire #activities .col-md-4 { width: 50%; }
  .page_sommaire #blog .col-md-3 { width: 50%; }
}
@media (max-width: 575px) {
  .page_sommaire #activities .col-md-4,
  .page_sommaire #blog .col-md-3 { width: 100%; }
}

/* ---------- Partner logos (rubrique 5) ---------- */
.page_sommaire #partners .row { display: flex; flex-wrap: wrap; align-items: center; }
.page_sommaire #partners .row::before, .page_sommaire #partners .row::after { display: none; }
.page_sommaire #partners figure { margin: 0; text-align: center; }
.page_sommaire #partners img {
  max-width: 100%; max-height: 80px; width: auto; height: auto;
  object-fit: contain;
  filter: grayscale(1); opacity: .75;
  transition: filter .2s ease, opacity .2s ease;
}
.page_sommaire #partners a:hover img,
.page_sommaire #partners a:focus-visible img { filter: none; opacity: 1; }