/* =========================================================
   dd-theme — Static editorial pages (Quiénes somos, Modelo social)
   Reproduced 1:1 from the approved Claude Design mockups
   (about.jsx / modelo-social.jsx). The section layouts keep the
   mockup's fixed multi-column grids inline for pixel fidelity;
   the rules here only add the responsive collapse (mobile) and
   the ONG collaborator logo wall. Enqueued on the two slugs
   (quienes-somos, modelo-social) — see inc/enqueue.php.
   ========================================================= */

/* ---------- ONG collaborator logo wall (About · SocialImpactBand) ----------
   Ported from homepage.css so these pages don't depend on dd-homepage being
   enqueued. Uniform light tint over the dark --ink-3 band. */
.dd-ong-wall-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 24px 30px;
  align-items: center;
  justify-items: center;
}

.dd-ong-logo {
  max-width: 100%;
  max-height: 40px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: 0.6;
  transition: opacity 0.2s ease;
}

.dd-ong-logo:hover {
  opacity: 1;
}

/* ---------- Responsive collapse ----------
   The mockup grids are declared inline (style="grid-template-columns:…") for
   fidelity, so the mobile overrides need !important to win over the inline
   declaration. Classes are attached to the corresponding containers in
   page-quienes-somos.php / page-modelo-social.php. */

@media (max-width: 1000px) {
  .dd-ong-wall-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 22px 26px;
  }
}

@media (max-width: 900px) {
  /* Two-column editorial bands → single column, stacked. */
  .dd-2col,
  .dd-hero-grid,
  .dd-flow {
    grid-template-columns: 1fr !important;
  }

  /* flex header rows (title + intro side by side) → stack. */
  .dd-flex-stack {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  /* Card rows. */
  .dd-cards-3,
  .dd-cards-2 {
    grid-template-columns: 1fr !important;
  }

  .dd-cards-5,
  .dd-cards-4,
  .dd-stats-4 {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* The "tú → alguien más" flow: stack and point the arrow down. */
  .dd-flow-arrow {
    transform: rotate(90deg);
    justify-content: center !important;
    padding: 4px 0;
  }
}

@media (max-width: 640px) {
  .dd-ong-wall-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px 18px;
  }
  .dd-ong-logo {
    max-height: 34px;
  }

  .dd-cards-5,
  .dd-cards-4,
  .dd-stats-4 {
    grid-template-columns: 1fr !important;
  }

  /* Trim the generous mockup section padding on small screens. */
  .dd-static-page .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}