/*
Theme Name: EDItheme
Theme URI: https://ensambledeideas.com.ar
Author: Ensamble de Ideas Educación
Author URI: https://ensambledeideas.com.ar
Description: Tema para Ensamble de Ideas (EDI 2.0) — plataforma educativa que reemplaza la experiencia de blog tradicional por una navegación de conocimiento conectado, con modo Día/Noche global y buscador con autocompletado.
Version: 3.5.3
Requires at least: 6.0
Requires PHP: 7.4
Tested up to: 6.6
Text Domain: editheme
*/

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Source+Serif+4:opsz,wght@8..60,400;8..60,600&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ============ TOKENS ============ */
:root, [data-theme="dark"]{
  /* EDI Design Tokens (Commit 7.1): mismo criterio que --primary — si el
     plugin está activo, la tipografía de títulos viene de --edi-font-display;
     si no, el tema sigue usando la misma tipografía de siempre como respaldo. */
  --font-display: var(--edi-font-display, 'Space Grotesk');
  --ink:#0D0F14; --surface:#171A23; --surface-raised:#1E2230;
  --line:#2E3444; --graph-line:#3E4557; --graph-line-active:#E9A23B;
  /* EDI Design Tokens (Commit 4): si el plugin EDI 2.0 está activo, este
     color viene de --edi-primary configurado ahí. Si el plugin está
     desactivado, tuvo un error, o no está instalado, el tema sigue
     viéndose exactamente igual con #E9A23B. Nunca depende del plugin
     para funcionar. */
  --primary: var(--edi-primary, #E9A23B); --primary-ink:#0D0F14;
  --text:#EDEEF2; --text-muted:#8892A3;
  --shadow: 0 0 0 rgba(0,0,0,0); --node-glow: 0 12px 28px rgba(0,0,0,.4);
  --glow: rgba(233,162,59,.20); --glow-soft: rgba(233,162,59,.08);
  --c-1:#4FBE86; --c-2:#4C93E0; --c-3:#A574E0; --c-4:#D69A45;
  --c-5:#E2793A; --c-6:#3ECFC6; --c-7:#E9A23B;
}
[data-theme="light"]{
  --ink:#FFFFFF; --surface:#FFFFFF; --surface-raised:#FFFFFF;
  --line:#E7E1F2; --graph-line:#D3C6ED; --graph-line-active:#45056E;
  /* EDI Design Tokens: el modo Día NO se conecta todavía a --edi-primary.
     Los Design Tokens del plugin son un único valor global (sin variante
     día/noche) — conectar ambos modos al mismo token los volvería iguales,
     rompiendo la identidad propia de cada modo que se armó a propósito.
     Se resuelve si el sistema de tokens crece a pares día/noche más
     adelante; por ahora, este valor sigue fijo en #45056E. */
  --primary:#45056E; --primary-ink:#FFFFFF;
  --text:#21094E; --text-muted:#6E6489;
  --shadow: 0 6px 20px rgba(33,9,78,.07); --node-glow: 0 14px 30px rgba(33,9,78,.14);
  --glow: rgba(69,5,110,.14); --glow-soft: rgba(69,5,110,.06);
  --c-1:#2E9E63; --c-2:#2F6FC2; --c-3:#7C4CC4; --c-4:#B9792A;
  --c-5:#C85F22; --c-6:#1FA79D; --c-7:#45056E;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
html, body{overflow-x:hidden !important; max-width:100vw !important; width:100%;}
body{margin:0; background:var(--ink); color:var(--text); font-family:'Source Serif 4', serif; -webkit-font-smoothing:antialiased; transition:background .3s ease, color .3s ease;}
a{color:inherit;}
img{max-width:100%; height:auto; display:block;}
.display{font-family:var(--font-display), sans-serif;}
.mono{font-family:'IBM Plex Mono', monospace; letter-spacing:.02em;}
:focus-visible{outline:2px solid var(--primary); outline-offset:2px;}

/* ============ NAV ============ */
.edi-nav{display:flex; align-items:center; justify-content:space-between; gap:16px; padding:20px 48px; position:relative; z-index:30; flex-wrap:wrap;}
.edi-logo{font-family:var(--font-display); font-weight:700; font-size:19px; letter-spacing:-.02em; text-decoration:none; order:1;}
.edi-logo span{color:var(--primary);}
.edi-logo-image img{height:32px; width:auto; display:block;}
.edi-nav-links{display:flex; gap:26px; font-family:var(--font-display); font-size:13.5px; color:var(--text-muted); order:2; margin-right:auto; margin-left:32px;}
.edi-nav-links a{text-decoration:none;}
.edi-nav-links a:hover{color:var(--primary);}
.edi-nav-right{display:flex; align-items:center; gap:10px; order:3;}

/* buscador: siempre visible, en primer plano (no requiere click para aparecer) */
.edi-search{position:relative; order:4; flex:1 1 260px; max-width:320px;}
.edi-search-form{display:flex; align-items:center; gap:8px; background:var(--surface); border:1.5px solid var(--line); border-radius:100px; padding:9px 16px; box-shadow:var(--shadow); transition:border-color .2s ease;}
.edi-search-form:focus-within{border-color:var(--primary);}
.edi-search-form .icon{font-size:16px; color:var(--text-muted); flex-shrink:0;}
.edi-search-form input{flex:1; border:none; background:transparent; outline:none; color:var(--text); font-family:var(--font-display); font-size:13.5px; min-width:0;}
.edi-search-form input::placeholder{color:var(--text-muted);}
.edi-search-results{position:absolute; top:calc(100% + 8px); left:0; right:0; background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:var(--node-glow); overflow:hidden; z-index:40; display:none; max-height:340px; overflow-y:auto;}
.edi-search-results.open{display:block;}
.edi-search-results .result{display:flex; align-items:center; gap:10px; padding:11px 14px; cursor:pointer; text-decoration:none; color:var(--text); border-bottom:1px solid var(--line);}
.edi-search-results .result:last-child{border-bottom:none;}
.edi-search-results .result:hover{background:var(--surface-raised);}
.edi-search-results .rdot{width:7px; height:7px; border-radius:50%; border:2px solid var(--primary); background:transparent; flex-shrink:0;}
.edi-search-results .rtitle{font-family:var(--font-display); font-size:12.5px; flex:1;}
.edi-search-results .rspace{font-family:'IBM Plex Mono'; font-size:9px; color:var(--text-muted); text-transform:uppercase;}
.edi-search-empty{font-family:'IBM Plex Mono'; font-size:11px; color:var(--text-muted); padding:12px 14px;}

.edi-theme-toggle{display:flex; align-items:center; gap:6px; background:var(--surface); border:1px solid var(--line); padding:9px 14px; border-radius:100px; cursor:pointer; font-family:'IBM Plex Mono'; font-size:12px; color:var(--text-muted); box-shadow:var(--shadow); order:5;}
.edi-theme-toggle:hover{color:var(--primary); border-color:var(--primary);}

/* ============ HERO ============ */
.edi-hero{padding:64px 48px 32px; max-width:760px;}
.edi-eyebrow{font-family:'IBM Plex Mono'; font-size:11.5px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.14em; margin-bottom:16px;}
.edi-hero h1{font-family:var(--font-display); font-size:42px; font-weight:600; line-height:1.16; margin:0 0 16px; letter-spacing:-.01em;}
.edi-hero p{color:var(--text-muted); font-size:15.5px; line-height:1.6; margin:0;}

/* ============ GRILLA DE ESPACIOS (tarjetas educativas) ============
   Reemplaza a la constelación: sin posiciones fijas, sin SVG, sin JS —
   una grilla responsiva de verdad, la misma en escritorio y en mobile. */
.edi-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
  gap:18px; padding:8px 48px 64px; grid-auto-flow:dense;
}
.edi-card{
  position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--edi-radius, 16px);
  padding:22px; text-decoration:none; color:var(--text); overflow:hidden; display:block;
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.edi-card:hover{transform:translateY(-3px); border-color:var(--accent); box-shadow:var(--node-glow);}
.edi-card::before{content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--accent);}
.edi-card.big{grid-column:span 2;}
@media (max-width:640px){ .edi-card.big{grid-column:span 1;} }

.edi-card-dot{width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center; background:var(--accent); opacity:.16; margin-bottom:16px;}
.edi-card-dot::after{content:''; display:block; width:10px; height:10px; border-radius:50%; background:var(--accent); opacity:1;}
.edi-card h3{font-family:var(--font-display); font-size:19px; font-weight:600; margin:0 0 6px; color:var(--text);}
.edi-card-meta{font-family:'IBM Plex Mono'; font-size:11.5px; color:var(--text-muted); display:flex; align-items:center; justify-content:space-between; gap:8px;}
.edi-card-arrow{color:var(--accent); font-size:16px; transition:transform .2s ease;}
.edi-card:hover .edi-card-arrow{transform:translateX(4px);}

/* Tarjetas con subcategorías: <details>/<summary> nativo, sin JS */
.edi-card-expandable{padding:0; cursor:default;}
.edi-card-expandable summary{padding:22px; cursor:pointer; list-style:none;}
.edi-card-expandable summary::-webkit-details-marker{display:none;}
.edi-card-expandable[open] summary{border-bottom:1px solid var(--line);}
.edi-card-chevron{color:var(--text-muted); transition:transform .2s ease; display:inline-block;}
.edi-card-expandable[open] .edi-card-chevron{transform:rotate(180deg);}
.edi-subcards{display:flex; flex-direction:column; padding:10px 14px 14px;}
.edi-subcard{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:10px 12px; border-radius:10px; text-decoration:none; color:var(--text); font-size:14px;}
.edi-subcard:hover{background:var(--surface-raised);}
.edi-subcard em{font-style:normal; color:var(--text-muted); font-size:11px;}
.edi-subcard-todas{color:var(--accent); font-family:var(--font-display); font-weight:600; font-size:13px; border-bottom:1px solid var(--line); margin-bottom:4px; padding-bottom:14px; border-radius:0;}

/* ============ BUSCADOR INTERNO DEL LISTADO DE ARTÍCULOS ============ */
.edi-post-search{display:flex; align-items:center; gap:10px; background:var(--surface); border:1px solid var(--line); border-radius:100px; padding:10px 16px; margin-bottom:16px; max-width:420px;}
.edi-post-search .icon{color:var(--text-muted);}
.edi-post-search input{flex:1; border:none; background:transparent; outline:none; color:var(--text); font-family:var(--font-display); font-size:14px;}
.edi-post-search input::placeholder{color:var(--text-muted);}

/* ============ ARTÍCULO ============ */
.edi-article-wrap{margin:0 48px 80px; padding-top:56px; border-top:1px solid var(--line); display:grid; grid-template-columns:1fr 280px; gap:56px; min-width:0 !important; max-width:100% !important;}
.edi-article-wrap > *{min-width:0 !important; max-width:100% !important;}
.edi-breadcrumb{font-family:'IBM Plex Mono'; font-size:12px; color:var(--text-muted); margin-bottom:18px;}
.edi-breadcrumb a{text-decoration:none;}
.edi-breadcrumb .accent{color:var(--primary);}
.edi-article-wrap h1{font-family:var(--font-display); font-size:31px; font-weight:600; line-height:1.2; margin:0 0 20px; max-width:560px;}
.edi-summary-box{border-left:3px solid var(--primary); background:var(--surface); padding:18px 22px; border-radius:0 12px 12px 0; margin-bottom:28px; box-shadow:var(--shadow);}
.edi-summary-box .label{font-family:'IBM Plex Mono'; font-size:11px; color:var(--primary); text-transform:uppercase; letter-spacing:.1em; margin-bottom:8px; display:block;}
.edi-summary-box p{margin:0; font-size:15px; color:var(--text); line-height:1.6;}
.edi-article-body{font-size:17px; line-height:1.85; color:var(--text); overflow-wrap:break-word !important; word-break:break-word !important; white-space:normal !important;}
.edi-article-body *{overflow-wrap:break-word !important; word-break:break-word !important; white-space:normal !important; max-width:100% !important;}
.edi-article-body pre, .edi-article-body code{white-space:pre-wrap !important; overflow-x:auto;}
.edi-article-body table{display:block; overflow-x:auto; max-width:100%; border-collapse:collapse; width:100%; margin:1.6em 0; font-size:15px;}

/* Cualquier tabla (de un plugin, un bloque, o pegada desde Word/Sheets)
   suele traer su propio color de fondo por fila ("cebra") en una hoja de
   estilos externa — no en un estilo en línea, así que la limpieza de
   colores general (JS) no lo puede tocar. Acá se le gana con !important
   directo sobre la tabla, y se le pone la propia rayada del tema encima. */
.edi-article-body table, .edi-article-body table *{
	background-color:transparent !important; background-image:none !important;
	color:var(--text) !important; border-color:var(--line) !important;
}
.edi-article-body th, .edi-article-body td{padding:10px 14px; border:none; border-bottom:1px solid var(--line); text-align:left; vertical-align:top;}
.edi-article-body thead th{font-family:var(--font-display); font-weight:600; background:var(--surface-raised) !important;}
.edi-article-body tbody tr:nth-child(even){background:var(--surface) !important;}
.edi-article-body p{margin:0 0 1.4em;}
.edi-article-body h1, .edi-article-body h2, .edi-article-body h3,
.edi-article-body h4, .edi-article-body h5, .edi-article-body h6,
.edi-article-body h1 *, .edi-article-body h2 *, .edi-article-body h3 *,
.edi-article-body h4 *, .edi-article-body h5 *, .edi-article-body h6 *{
	font-family:var(--font-display), sans-serif !important; font-weight:600 !important; color:var(--text) !important;
	line-height:1.28 !important; margin:1.6em 0 .6em; background:none !important;
}
.edi-article-body h1{font-size:28px !important;}
.edi-article-body h2{font-size:24px !important;}
.edi-article-body h3{font-size:20px !important;}
.edi-article-body h4{font-size:17px !important;}
.edi-article-body h5, .edi-article-body h6{font-size:15px !important; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted) !important;}
.edi-article-body a{color:var(--primary);}
.edi-article-body ul, .edi-article-body ol{padding-left:1.3em; margin:0 0 1.4em;}
.edi-article-body img{border-radius:12px;}
/* Cualquier VIDEO incrustado (oEmbed de WordPress, YouTube, Powtoon, o
   el que sea) suele traer ancho/alto fijos en píxeles que no se adaptan
   a pantallas angostas — esto lo fuerza a ocupar el ancho disponible
   manteniendo la proporción 16:9. Se excluye explícitamente el iframe
   de "entrada incrustada" de WordPress (que trae su propia clase
   wp-embedded-content en el propio <iframe>, no solo en el contenedor):
   ese NO es un video 16:9, es una tarjeta de texto con su propia altura
   real — forzarle 16:9 es justo lo que generaba el cuadro vacío de más. */
.edi-article-body iframe:not(.wp-embedded-content){
	max-width:100% !important; width:100% !important; height:auto !important;
	aspect-ratio:16/9; border:none; border-radius:var(--edi-radius, 12px); display:block; margin:1.4em 0;
}
/* Esta regla la agrega WordPress solo (vía add_theme_support('responsive-embeds'))
   alrededor de CUALQUIER oEmbed que declare tener una proporción fija —
   incluida, sin que lo pidamos, la "entrada incrustada" (que NO es un
   video 16:9, es una tarjeta de texto). Sin esta exclusión, quedaba
   forzada a una caja con forma de video, con un montón de espacio vacío
   abajo — la misma familia de bug que ya habíamos resuelto arriba, pero
   colándose por este otro selector que a esa regla no le habíamos puesto
   la misma excepción. */
.edi-article-body .wp-embed-responsive .wp-has-aspect-ratio iframe:not(.wp-embedded-content){aspect-ratio:16/9;}
.edi-article-body blockquote{border-left:3px solid var(--primary); margin:1.6em 0; padding:.2em 0 .2em 1.2em; color:var(--text-muted); font-style:italic;}

/* Notas al pie ([note]...[/note], plugin EDI 2.0 Commit 5.1) — el plugin
   solo devuelve este marcado semántico, el estilo es responsabilidad del
   tema, igual que con cualquier otro contenido de the_content(). */
.edi-note-marker a{ color:var(--primary); text-decoration:none; font-weight:600; }
.edi-footnotes{ margin-top:2.4em; padding-top:1.2em; border-top:1px solid var(--line); font-size:14px; color:var(--text-muted); }
.edi-footnotes-title{ font-family:var(--font-display), sans-serif; font-weight:600; color:var(--text); margin-bottom:.6em; font-size:13px; text-transform:uppercase; letter-spacing:.04em; }
.edi-footnotes ol{ padding-left:1.4em; margin:0; }
.edi-footnotes li{ margin-bottom:.5em; }
.edi-footnote-back{ color:var(--primary); text-decoration:none; }

/* El recuadro blanco de "artículo relacionado" no es el iframe que ya
   estilizamos (ese vive en embed_head, en functions.php) — es el
   <blockquote class="wp-embedded-content"> que WordPress pone ALREDEDOR
   del iframe, en esta misma página. Se le da la identidad visual de
   "nodo" (borde, sombra, hover) en vez de dejarlo con el blanco por
   defecto de WordPress. */
.edi-article-body blockquote.wp-embedded-content,
.edi-article-body .wp-embedded-content{
	border-left:none !important; font-style:normal !important;
	background:var(--surface) !important; border:1px solid var(--line) !important;
	border-radius:14px !important; overflow:hidden; box-shadow:var(--shadow);
	transition:border-color .2s ease, box-shadow .2s ease; margin:1.6em 0 !important;
}
.edi-article-body .wp-embedded-content:hover{ border-color:var(--primary) !important; box-shadow:var(--node-glow); }
.edi-article-body .wp-embedded-content iframe,
.edi-article-body iframe.wp-embedded-content{
	display:block; width:100%; border:none;
	aspect-ratio:unset !important; height:220px; min-height:0 !important; max-height:none !important;
}

/* Cualquier bloque/segmento inyectado por el editor o un plugin (colores
   de Gutenberg guardados en el HTML, widgets de "relacionados", cajas de
   otros plugins) debe respetar los colores del tema, no los suyos propios.
   El TOC ya tiene su propio tratamiento más abajo y gana por ir después. */
.edi-article-body p, .edi-article-body span, .edi-article-body div,
.edi-article-body li, .edi-article-body strong, .edi-article-body em,
.edi-article-body b, .edi-article-body i, .edi-article-body small,
.edi-article-body mark, .edi-article-body figcaption, .edi-article-body dt,
.edi-article-body dd{
	color:var(--text) !important; background-color:transparent !important; background-image:none !important;
}
.edi-article-body a, .edi-article-body a *{ color:var(--primary) !important; }
.edi-article-body mark{ background-color:var(--surface-raised) !important; }

/* Tablas de contenido de plugins: en vez de adivinar el nombre exacto del
   plugin (falló la primera vez), el JS del tema detecta en tiempo real
   cualquier elemento con "toc" en su id o clase dentro del artículo y le
   agrega .edi-toc-generic — acá solo hace falta estilizar esa clase. */
/* Índice/Tabla de contenidos: se oculta por completo, sin importar el
   plugin que lo genere (busca "toc" en id o clase). CSS puro, no espera
   a que el JS lo detecte — así no hay ni un instante donde se vea. */
.edi-article-body [id*="toc" i],
.edi-article-body [class*="toc" i]{
	display:none !important;
}

.edi-article-body .edi-toc-generic{
	background:var(--surface) !important; border:1px solid var(--line) !important;
	color:var(--text) !important; border-radius:12px !important; box-shadow:var(--shadow) !important;
	padding:18px 22px !important;
}
.edi-article-body .edi-toc-generic *{
	background-color:transparent !important; background-image:none !important; color:inherit !important;
	border-color:var(--line) !important; overflow-wrap:break-word !important; white-space:normal !important;
}
.edi-article-body .edi-toc-generic a{ color:var(--primary) !important; }
.edi-article-body .edi-toc-generic a:hover{ text-decoration:underline !important; }
.edi-rail{display:flex; flex-direction:column; gap:24px;}
.edi-rail-card{background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:18px 20px; box-shadow:var(--shadow);}
.edi-rail-card .label{font-family:var(--font-display); font-size:13px; font-weight:600; margin-bottom:12px; display:flex; align-items:center; gap:8px;}
.edi-rail-card .label::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--primary);}
.edi-rail-card ul{margin:0; padding-left:0; list-style:none; font-size:13px; color:var(--text-muted); line-height:1.9;}
.edi-rail-card ul li::before{content:'—'; margin-right:6px; color:var(--graph-line);}
.edi-rail-card ul li a{text-decoration:none; color:inherit;}
.edi-rail-card ul li a:hover{color:var(--primary);}
.edi-cta-row{display:flex; gap:12px; margin-top:32px; flex-wrap:wrap;}
.edi-byline{font-size:11.5px; color:var(--text-muted); margin:-6px 0 20px; letter-spacing:.02em;}
.edi-btn{font-family:var(--font-display); font-size:14px; font-weight:600; padding:12px 22px; border-radius:10px; cursor:pointer; border:1px solid var(--line); background:transparent; color:var(--text);}
.edi-btn.primary{background:var(--primary); color:var(--primary-ink); border:none;}

.edi-activities-panel{
	margin-top:20px; background:var(--surface); border:1px solid var(--line);
	border-radius:14px; padding:20px 22px; box-shadow:var(--shadow);
}
.edi-activities-panel .label{font-family:'IBM Plex Mono'; font-size:11px; color:var(--primary); text-transform:uppercase; letter-spacing:.1em; margin-bottom:12px;}
.edi-activities-panel ol{margin:0; padding-left:1.3em; color:var(--text); font-size:15px; line-height:1.8;}
.edi-activities-panel p{margin:0; color:var(--text-muted); font-size:14px;}
.edi-preguntas-lista li{margin-bottom:.6em;}
.edi-pregunta-opciones{list-style:none; padding-left:1em; margin:.3em 0 0; font-size:13.5px; color:var(--text-muted);}
.edi-pregunta-vf{display:inline-block; margin-top:.3em; font-size:11px; color:var(--edi-secondary, var(--text-muted)); text-transform:uppercase; letter-spacing:.04em;}

.edi-footer{padding:24px 48px; text-align:center; font-family:'IBM Plex Mono'; font-size:11px; color:var(--text-muted);}
.edi-footer a{text-decoration:none;}

/* ============ LISTA DE ARTÍCULOS (archivos, búsqueda) ============ */
/* Elementos de bloque puro: cada uno ocupa 100% del ancho disponible
   sin ningún flex-basis que dependa de especificidad para funcionar.
   Es, a propósito, a prueba de fallos en cualquier ancho de pantalla. */
.edi-post-list{display:block; margin:24px 0;}
.edi-post-list-item{
	display:block; background:var(--surface); border:1px solid var(--line);
	border-radius:14px; padding:16px 20px; margin-bottom:12px;
	text-decoration:none; color:var(--text); box-shadow:var(--shadow);
	transition:border-color .2s ease; overflow-wrap:break-word;
}
.edi-post-list-item:hover{border-color:var(--primary);}
.edi-post-list-item .title{font-family:var(--font-display); font-size:15.5px; font-weight:600; line-height:1.4; display:block;}
.edi-post-list-item .meta{font-family:'IBM Plex Mono'; font-size:11px; color:var(--text-muted); margin-top:6px; display:block;}

/* ============ RESPONSIVE ============ */
@media (max-width:820px){
  .edi-nav{padding:16px 20px; gap:12px;}
  .edi-nav-links{display:none;}
  .edi-search{order:6; flex:1 1 100%; max-width:100%;}
  .edi-theme-toggle{order:2;}

  .edi-hero{padding:28px 20px 8px; max-width:100%;}
  .edi-hero h1{font-size:clamp(28px,8vw,36px);}
  .edi-hero p{font-size:14.5px;}
  .edi-grid{padding:8px 20px 40px; grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));}
  .edi-card.big{grid-column:span 2;}

  .edi-article-wrap{grid-template-columns:1fr; margin:0 20px 60px; gap:32px; padding-top:32px;}
  .edi-footer{padding:20px;}
}