/* =============================================================================
   clm-muro.css — Sección "Muro de Noticias" del inicio (publicaciones de Facebook)
   -----------------------------------------------------------------------------
   Colegio Liceo Moderno · 2026-10-19
   La sección vive en index.html (#muro-noticias), después de "Cinco razones…".
   js/clm-muro.js pide las publicaciones a facebook/feed.php y llena la
   cuadrícula. Si no hay token configurado, muestra el recuadro oficial de
   Facebook (.clm-muro__plugin) como respaldo.

   Distribución:
     - Escritorio (≥ 992 px): publicación destacada grande a la izquierda (ocupa
       2 filas) + 4 tarjetas en 2 columnas a la derecha.
     - Tableta (576–991 px): destacada a lo ancho + tarjetas en 2 columnas.
     - Celular (< 576 px): carrusel horizontal con deslizamiento (scroll-snap).
   Colores institucionales: azul #133853, azul noche #091e3e, verde #a8cf45.
   ============================================================================= */

.clm-muro {
  --muro-navy: #133853;
  --muro-night: #091e3e;
  --muro-green: #a8cf45;
  padding: 56px 0 64px;
  background: linear-gradient(180deg, #fff 0%, #f6f9fc 100%);
  font-family: Nunito, Arial, sans-serif;
}
.clm-muro__intro { max-width: 640px; color: #3c5364; text-align: center !important; }

/* ---------- Franja azul con la identidad de la página de Facebook ---------- */
.clm-muro__head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--muro-navy); border-radius: 18px; padding: 18px 22px; margin-bottom: 28px; color: #fff;
  box-shadow: 0 10px 30px rgba(9, 30, 62, .18); position: relative; overflow: hidden;
}
/* círculo verde decorativo de la esquina */
.clm-muro__head::after {
  content: ""; position: absolute; right: -60px; top: -60px; width: 200px; height: 200px;
  border-radius: 50%; background: var(--muro-green); opacity: .18; pointer-events: none;
}
.clm-muro__page { display: flex; align-items: center; gap: 14px; position: relative; z-index: 1; }
.clm-muro__page img {
  width: 58px; height: 58px; border-radius: 50% !important; background: #fff; padding: 6px;
  object-fit: contain; border: 3px solid var(--muro-green);
}
.clm-muro__page strong { display: block; font-size: 19px; line-height: 1.2; color: #fff; }
.clm-muro__page span { font-size: 14px; color: #cfe3a0 !important; font-weight: 600; }
.clm-muro__actions { display: flex; gap: 10px; position: relative; z-index: 1; flex-wrap: wrap; }
.clm-muro__btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px;
  font-weight: 800; font-size: 15px; text-decoration: none !important; transition: transform .2s;
}
.clm-muro__btn:hover { transform: translateY(-2px); }
.clm-muro__btn--fb { background: var(--muro-green); color: var(--muro-night) !important; }
.clm-muro__btn--ghost { border: 2px solid rgba(255, 255, 255, .6); color: #fff !important; background: transparent; cursor: pointer; }
.clm-muro__btn:focus-visible { outline: 3px solid #fff !important; outline-offset: 3px; }

/* ---------- Cuadrícula de publicaciones ---------- */
.clm-muro__grid { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 22px; }
.clm-post {
  background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 6px 22px rgba(9, 30, 62, .10);
  display: flex; flex-direction: column; transition: transform .25s, box-shadow .25s; border: 1px solid #e7eef5;
  margin: 0;
}
.clm-post:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(9, 30, 62, .16); }
.clm-post--featured { grid-row: span 2; }
.clm-post__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #dfe7ef; display: block; }
.clm-post--featured .clm-post__media { aspect-ratio: auto; flex: 1; min-height: 300px; }
.clm-post__media img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0 !important; }
/* publicación sin foto: fondo institucional con el escudo */
.clm-post__media--empty { background: linear-gradient(135deg, var(--muro-navy), #1d5a85); display: flex; align-items: center; justify-content: center; }
.clm-post__media--empty img { width: 90px; height: auto; object-fit: contain; opacity: .9; }
.clm-post__date {
  position: absolute; left: 14px; top: 14px; background: #fff; color: var(--muro-navy); border-radius: 10px;
  padding: 6px 10px; text-align: center; line-height: 1; box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
}
.clm-post__date b { display: block; font-size: 20px; }
.clm-post__date small { font-size: 11px; font-weight: 800; text-transform: uppercase; color: #5b7a2a; }
.clm-post__tag {
  position: absolute; right: 14px; top: 14px; background: var(--muro-green); color: var(--muro-night);
  font-size: 12px; font-weight: 800; padding: 5px 10px; border-radius: 999px;
}
/* botón de reproducir dibujado con CSS (sin imágenes) */
.clm-post__play {
  position: absolute; inset: 0; margin: auto; width: 64px; height: 64px; border-radius: 50%;
  background: rgba(9, 30, 62, .75); display: flex; align-items: center; justify-content: center; border: 3px solid #fff;
}
.clm-post__play::before {
  content: ""; border-left: 20px solid #fff; border-top: 12px solid transparent;
  border-bottom: 12px solid transparent; margin-left: 6px;
}
.clm-post__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 10px; }
/* texto recortado a 3 líneas (4 en la destacada); el texto completo está en Facebook */
.clm-post__body p {
  margin: 0; color: #2b3f52; font-size: 15px; line-height: 1.5; text-align: left !important;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.clm-post--featured .clm-post__body p { font-size: 17px; -webkit-line-clamp: 4; }
.clm-post__meta {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  border-top: 1px solid #edf1f5; padding-top: 10px; margin-top: auto;
}
.clm-post__stats { display: flex; gap: 12px; font-size: 13px; color: #5f7183 !important; font-weight: 700; }
.clm-post__stats span { color: #5f7183 !important; font-weight: 700; }
.clm-post__stats i { color: var(--muro-navy); margin-right: 3px; }
.clm-post__link { font-size: 14px; font-weight: 800; color: var(--muro-navy) !important; text-decoration: none !important; white-space: nowrap; }
.clm-post__link:hover { color: #5b7a2a !important; }

/* ---------- Tarjetas "esqueleto" mientras cargan las publicaciones ---------- */
.clm-post--skeleton .clm-post__media,
.clm-post--skeleton .clm-sk {
  background: linear-gradient(90deg, #e8eef4 25%, #f4f7fa 50%, #e8eef4 75%);
  background-size: 200% 100%; animation: clm-sk 1.3s infinite linear;
}
.clm-post--skeleton .clm-sk { height: 12px; border-radius: 6px; }
.clm-post--skeleton .clm-sk + .clm-sk { width: 70%; }
@keyframes clm-sk { to { background-position: -200% 0; } }

/* ---------- Respaldo: recuadro oficial de Facebook (sin token configurado) ---------- */
.clm-muro__plugin {
  max-width: 540px; margin: 0 auto; background: #fff; border-radius: 16px; padding: 12px;
  box-shadow: 0 6px 22px rgba(9, 30, 62, .10); border: 1px solid #e7eef5;
}
.clm-muro__plugin iframe { display: block; width: 100%; max-width: 500px; height: 640px; border: 0; margin: 0 auto; }

.clm-muro__more { text-align: center; margin-top: 30px; }
.clm-muro__more a {
  display: inline-flex; gap: 10px; align-items: center; background: var(--muro-navy); color: #fff !important;
  padding: 13px 28px; border-radius: 999px; font-weight: 800; text-decoration: none !important;
  box-shadow: 0 8px 20px rgba(9, 30, 62, .2);
}
.clm-muro__more a:hover { background: var(--muro-night); }

/* ---------- Tableta ---------- */
@media (max-width: 991.98px) {
  .clm-muro__grid { grid-template-columns: 1fr 1fr; }
  .clm-post--featured { grid-column: span 2; grid-row: auto; }
  .clm-post--featured .clm-post__media { aspect-ratio: 16 / 9; min-height: 0; }
}
/* ---------- Celular: carrusel deslizable ---------- */
@media (max-width: 575.98px) {
  .clm-muro__grid {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 14px;
    padding: 4px 16px 14px; margin: 0 -12px; -webkit-overflow-scrolling: touch;
  }
  .clm-post { flex: 0 0 84%; scroll-snap-align: center; }
  .clm-post--featured .clm-post__media { aspect-ratio: 4 / 3; }
  .clm-muro__head { padding: 16px; }
  .clm-muro__actions { width: 100%; }
  .clm-muro__btn { flex: 1; justify-content: center; white-space: nowrap; font-size: 14px; padding: 10px 12px; }
  .clm-muro__plugin iframe { height: 560px; }
}
/* Sin animaciones si el visitante lo pide (sistema o panel de accesibilidad) */
@media (prefers-reduced-motion: reduce) {
  .clm-post, .clm-muro__btn { transition: none; }
  .clm-post--skeleton .clm-post__media, .clm-post--skeleton .clm-sk { animation: none; }
}
html.clm-noanim .clm-post--skeleton .clm-post__media, html.clm-noanim .clm-post--skeleton .clm-sk { animation: none; }