/* ============================================================
   pages/aliados.css — Fundación 20 de Enero · Corazón Sabanero
   Estilos exclusivos de la página aliados.
   Solo aquí van reglas que NO se repiten en ninguna otra página.
   .accordion-card, .callout y .process-steps se movieron a
   components.css cuando festival.html empezó a necesitarlos también.
   Requiere: tokens.css, layout.css, components.css, animations.css
   ============================================================ */

/* ════════════════════════════════════════
   03 · TARJETAS DE PÚBLICOS
   Extiende .card (componente base) — mismo peso visual en las 4,
   diferenciadas solo por el tinte del icono, igual que .discover-card
   en la home. Los mecanismos de aporte van como .check-list (mismo
   componente que usan proyectos.html e index.html dentro de tarjetas):
   se probaron como chips (.tag-pill) primero, pero con textos tan
   dispares en longitud ("Patrocinio" vs "Responsabilidad social
   empresarial") en una columna de ~196px de ancho útil, el chip más
   largo no cabe en una sola línea de ningún modo y queda como una
   píldora inflada de dos líneas junto a píldoras de una palabra. Una
   lista con checks no tiene ese problema: cada ítem es su propia
   línea y el texto largo simplemente envuelve, sin distorsión.
════════════════════════════════════════ */
/* .publico-card es un <details> — en desktop siempre viene abierto en
   el HTML y así se queda (nunca lo toca JS), por eso se ve y se
   comporta exactamente como una tarjeta plana. En móvil, bundle.js lo
   cierra al cargar; el <summary> es el resumen que queda visible
   colapsado, y su toggle es 100% nativo del navegador — no depende
   de JS para funcionar. */
.publico-card {
  display:        flex;
  flex-direction: column;
  height:         100%;
}

.publico-card > summary {
  display:     flex;
  align-items: center;
  gap:         var(--space-4);
  list-style:  none;
}
.publico-card > summary::-webkit-details-marker { display: none; }
.publico-card > summary .card__icon { margin-bottom: 0; }

.publico-card__summary-text {
  display:        flex;
  flex-direction: column;
  gap:            4px;
  flex:           1;
}
.publico-card__title { margin: 0; }

/* Frase de una línea visible con la tarjeta colapsada: el nombre del
   público ("Empresas") no basta para saber qué hay adentro sin tocar —
   esta línea adelanta los mecanismos concretos. Solo aparece en móvil;
   en desktop el checklist completo ya está justo debajo, repetirla
   sería redundante. */
.publico-card__teaser {
  display: none;
}

.publico-card__chevron {
  display:     none;
  flex-shrink: 0;
  color:       var(--c-text-secondary);
  transition:  transform var(--transition-fast);
}
.publico-card[open] .publico-card__chevron { transform: rotate(180deg); }

.publico-card__body { margin-top: var(--space-4); }

.publico-card__intro {
  color:      var(--c-text-secondary);
  font-size:  0.95rem;
  margin:     0 0 var(--space-4);
}

.publico-card__tags {
  flex:   1;
  margin-bottom: var(--space-6);
}
.publico-card__tags li { font-size: 0.92rem; }

.publico-card--empresas    .card__icon { background: rgba(122,20,36,0.10);  color: var(--c-brand-primary); }
.publico-card--publicas    .card__icon { background: rgba(31,77,44,0.12);   color: var(--c-brand-secondary); }
.publico-card--cooperacion .card__icon { background: rgba(200,148,31,0.14); color: var(--color-dorado); }
.publico-card--personas    .card__icon { background: rgba(42,24,16,0.10);   color: var(--c-text-primary); }

/* ════════════════════════════════════════
   "VER TODO" — listas largas de chips (bloques 02 y 07)
   Los 6 ítems .tag-pill-list__extra están siempre en el DOM; en
   desktop se ven igual que cualquier otro chip (no hay regla que los
   afecte fuera del media query de abajo). Solo en móvil se ocultan
   hasta que se pulsa el botón.
════════════════════════════════════════ */
.tag-pill-list__toggle {
  display:        none;
  margin:         0 auto;
  background:     none;
  border:         none;
  padding:        8px 4px;
  min-height:     44px;
  color:          var(--c-brand-primary);
  font-family:    var(--font-body);
  font-weight:    700;
  font-size:      0.88rem;
  cursor:         pointer;
  text-decoration: underline;
}

/* ════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════ */
@media (max-width: 680px) {
  /* ── Tarjetas de público: colapsadas por defecto (bundle.js las
     cierra al cargar). El resumen queda visible con su propio
     padding reducido — nunca el de .card, que usan todas las
     páginas — y solo mientras está colapsada. Al abrirse recupera el
     padding completo, porque ahí sí hace falta el aire. ── */
  .publico-card:not([open]) { padding: var(--space-5); }
  .publico-card__teaser {
    display:    block;
    font-size:  0.85rem;
    font-weight: 400;
    color:      var(--c-text-secondary);
  }
  .publico-card__chevron { display: block; }
  .publico-card > summary { cursor: pointer; }

  /* ── "Ver todo" ── */
  .tag-pill-list--collapsible .tag-pill-list__extra { display: none; }
  .tag-pill-list--collapsible.is-expanded .tag-pill-list__extra { display: inline-block; }
  .tag-pill-list__toggle { display: inline-flex; }
}

/* En desktop el <summary> de .publico-card nunca colapsa nada (JS no
   lo toca fuera de móvil), pero igual se le quita la pinta de control
   interactivo: sin flecha, cursor normal. */
@media (min-width: 681px) {
  .publico-card > summary {
    cursor: default;
  }
}