/* 
  Creado para el proyecto "web ESPOL 2025". 
  Uso:
  Noticias front: Este archivo define los estilos visuales y de interacción para la sección de noticias del index de la web de le ESPOL
  ODS en Movimiento: Este archivo es complemento de los estilos visuales y de interacción para el widget "ODS en Movimiento" de la ESPOL
  Autor: Amhed Flores
  Actualización: 13-octubre-2025
*/
:root {
  --es-noticia-gradient: linear-gradient(180deg, transparent 0%, var(--espol) 100%);
  --es-noticias-icon: 30px;
  --es-btn-ntc: calc(var(--es-noticias-icon)* 1);
  --es-neumorphism-card-bg: hsl(0, 0%, 99%);
  --es-neumorphism-shadow: 4px 4px 8px hsl(0, 0%, 90%),
                          -3px -3px 4px hsl(0, 0%, 100%);
  --es-theme-noticias: var(--bs-c-5);
  --margin-nav: calc(var(--navicons) + (var(--navmargin) * 3) +  var(--es-menu-logo) + var(--menu-margin));
}
.dark {
  --es-noticia-gradient: linear-gradient(180deg, transparent 0%, var(--bs-c-8) 100%);
  --es-neumorphism-card-bg: var(--bs-c-8);
  --es-neumorphism-shadow: 4px 4px 8px hsl(0, 0%, 11%),
                          -3px -3px 4px hsl(0, 0%, 13%);
  --es-theme-noticias: var(--bs-c-10);
}
/*Modificacion de plantilla vieja ESPOL para noticias 2025*/
.container .row:has(.espol-noticias),
.espol-noticias {
  margin: 0 !important;
  --bs-gutter-x: 0;
}
/*FIN Modificacion de plantilla vieja ESPOL para noticias 2025*/
/* Vista individual de noticias por ODS */
html[data-theme="dark"] body.page-vocabulary-ods {
  background-color: var(--espol) !important;
}
.page-vocabulary-ods #page-wrapper:has(div[class^="ods-"]) {
  position: relative;
  top: var(--margin-nav);
}
.page-vocabulary-ods #page-wrapper :has(h1) {
  background-size: 3.8em auto;
  background-repeat: no-repeat;
  background-position: left 20px center;
}
.page-vocabulary-ods h1 {
  margin: 0 !important;
  padding: var(--padding) var(--padding) var(--padding) 100px;
  font-family: 'RobotoCOndensed-Bold' !important;
  font-size: clamp(1rem, 0.3943rem + 3.4783vw, calc(14px + 1.5vh + 0.2vw)) !important;
  color: var(--theme-bg) !important;
}
.page-vocabulary-ods #main {
  top: 0;
  padding-bottom: var(--padding);
}
.page-vocabulary-ods article.node--type-noticias {
  background: var(--es-neumorphism-card-bg);
  border: none;
  border-radius: var(--radiusbg);
  padding: calc(var(--padding) * 2);
  box-shadow: var(--es-neumorphism-shadow);
}
.page-vocabulary-ods #logo svg *{
  fill: var(--es-logo-fill) !important;
}
.page-vocabulary-ods .ODS {
    width: auto;
    min-width: unset;
}
.page-vocabulary-ods h2.node__title *:hover {
  color: var(--bs-espol-1);
}
/* Fin Vista individual de noticias por ODS */
.espol-noticias {
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--gap) / 2);
  padding: 0 !important;
}
.espol-noticias li {
  position: relative;
  display: flex;
  border-radius: var(--radiussm);
  overflow: hidden;
}
.espol-noticias > li:nth-child(-n+2) {
  flex: 1 0 calc(50% - var(--padding));
  height: min(400px, 28vw);
  aspect-ratio: 8 / 5;
}
.espol-noticias > li:nth-child(n+3) {
  flex: 1 1 30.3%;
  height: min(250px, 28vw);
  aspect-ratio: 4 / 3;
}
.espol-noticias > li:is(:hover, :focus, .auto-hover) {
  box-shadow: var(--es-neumorphism-shadow);
}
.espol-noticias > li:focus {
  outline: 1px solid var(--espol-2);
  outline-offset: 5px;
}
.espol-noticias img,
.ods-ul img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  object-position: center;
}
.noticias-back,
.noticias-contenido {
  position: absolute;
  top: 0;
  height: 100%;
}
.noticias-back {
  width: 100%;
  background: var(--espol);
  background: var(--es-noticia-gradient);
  opacity: 0.8;
}
.noticias-contenido {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-content: space-between;
  width: 100%;
}
.noticias-contenido time {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center !important;
  padding: calc(var(--padding)/ 2) var(--padding);
  color: var(--bs-c-4);
  filter: drop-shadow(0px 1px 1px var(--bs-espol));
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
.noticia-dia {
  font-family: 'RobotoCondensed-Bold', sans-serif;
  font-size: clamp(0.8em, 5vw, 4rem);
}
.noticia-mes {
  position: relative;
  top: -1em;
  font-family:'Roboto', sans-serif;
  font-size: clamp(0.5em, 2vw, 1.7rem);
  text-transform: uppercase;
}
.espol-noticias .hast {
  position: relative;
  top: calc(var(--padding)/ 2);
  z-index: 3;
  display: flex;
  gap: 5px;
  padding-inline: var(--padding);
}
.espol-noticias .hast a {
  margin: 0;
  padding: 4px 8px !important;
  border-radius: var(--radiusxs);
  font-size: clamp(0.5em,1vw,0.7rem);
  line-height: normal;
  color: var(--espol-2);
  background: var(--bs-c-4) !important;
  text-decoration: none;
}
.espol-noticias .hast a:hover {
  color: var(--bs-c-4);
  background: var(--espol-2) !important;
}
.noticias-contenido h3 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: var(--padding);
  font-size: clamp(0.8em, 3vw, 1.1rem) !important;
  line-height: normal;
  color: var(--bs-c-4);
  line-clamp: 2;
  -webkit-line-clamp: 2;
}
.noticias-contenido h3:hover {
  text-decoration: underline;
}
.noticias-contenido .noticia-enlace {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  text-decoration: none;
}
.espol-noticias > li:is(:hover, .auto-hover) .noticias-back {
  opacity: 0;
}
.espol-noticias > li:is(:hover, .auto-hover) > img {
  transform: scale(1.2);
}
.espol-noticias > li:is(:hover, .auto-hover) time {
  transform: translateY(-100%);
}
.espol-noticias > li.auto-hover .hast {
  transform: translateY(120px);
}
.espol-noticias > li:hover .hast {
  opacity: 1 !important;
  transform: translateY(0) !important;
}
.espol-noticias li.auto-hover .noticia-enlace,
.espol-noticias li:hover .noticia-enlace {
  background: var(--es-noticia-gradient);
  mask-image: linear-gradient(0deg, white 80%, transparent 100%);
  -webkit-mask-image: linear-gradient(0deg, white 80%, transparent 100%);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.espol-noticias .noticias-contenido .noticia-enlace:hover {
  background: var(--espol);
  mask-image: none;
  -webkit-mask-image: none;
}
.espol-noticias .noticias-contenido .noticia-enlace:hover h3 {
  -webkit-line-clamp: none;
  line-clamp: none;
}
.espol-noticias > li.auto-hover .ODS {
  transform: translateY(-80px);
}
.espol-noticias > li:hover .ODS {
  transform: translateY(0);
}
.espol-noticias li:hover .ODS li:hover {
  opacity: 1;
}
.ODS:hover > :not(:hover) {
  filter: blur(1px);
  -webkit-filter: blur(1px);
}
.espol-noticias li:hover .ODS li,
.ODS:hover > :not(:hover),
.espol-noticias :has(.ODS li:hover > :not(li:hover)) .noticias-back { 
  opacity: 0.5;
}
.espol-noticias :has(.ODS li:hover > :not(li:hover)) > img {
  filter: blur(3px);
  -webkit-filter: blur(3px);
}
.ODS {
  width: fit-content;
  min-width: max-content;
}
.espol-noticias .ODS {
  position: absolute;
  width: auto;
  top: var(--padding);
  left: var(--padding);
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  height: fit-content;
  align-content: flex-start;
  padding: 0;
}
.espol-noticias .ODS li {
  aspect-ratio: 1 / 1 !important;
  flex: 0 0 var(--es-noticias-icon) !important;
  width: var(--es-noticias-icon);
  border-radius: 0;
}
.espol-noticias .ODS li:hover {
  z-index: 1;
  transform: scale(1.2);
}
.espol-noticias .ODS li a {
  width: 100%;
}
.ODS.todos-ods li,
.ods-ul img {
  display: none;
}
.ODS.todos-ods li.todos {
  display: block;
}
/* Complemento del widget "ODS en Movimiento" */
.ods-1, .ods-1 span:nth-child(2)::before { color: var(--ods-color-1) !important; --rotation: calc(var(--ods-angulo) * 0); --ods-time: calc(250ms * 0); }
.ods-2, .ods-2 span:nth-child(2)::before { color: var(--ods-color-2) !important; --rotation: calc(var(--ods-angulo) * 1); --ods-time: calc(250ms * 1); }
.ods-3, .ods-3 span:nth-child(2)::before { color: var(--ods-color-3) !important; --rotation: calc(var(--ods-angulo) * 2); --ods-time: calc(250ms * 2); }
.ods-4, .ods-4 span:nth-child(2)::before { color: var(--ods-color-4) !important; --rotation: calc(var(--ods-angulo) * 3); --ods-time: calc(250ms * 3); }
.ods-5, .ods-5 span:nth-child(2)::before { color: var(--ods-color-5) !important; --rotation: calc(var(--ods-angulo) * 4); --ods-time: calc(250ms * 4); }
.ods-6, .ods-6 span:nth-child(2)::before { color: var(--ods-color-6) !important; --rotation: calc(var(--ods-angulo) * 5); --ods-time: calc(250ms * 5); }
.ods-7, .ods-7 span:nth-child(2)::before { color: var(--ods-color-7) !important; --rotation: calc(var(--ods-angulo) * 6); --ods-time: calc(250ms * 6); }
.ods-8, .ods-8 span:nth-child(2)::before { color: var(--ods-color-8) !important; --rotation: calc(var(--ods-angulo) * 7); --ods-time: calc(250ms * 7); }
.ods-9, .ods-9 span:nth-child(2)::before { color: var(--ods-color-9) !important; --rotation: calc(var(--ods-angulo) * 8); --ods-time: calc(250ms * 8); }
.ods-10, .ods-10 span:nth-child(2)::before { color: var(--ods-color-10) !important; --rotation: calc(var(--ods-angulo) * 9); --ods-time: calc(250ms * 9); }
.ods-11, .ods-11 span:nth-child(2)::before { color: var(--ods-color-11) !important; --rotation: calc(var(--ods-angulo) * 10); --ods-time: calc(250ms * 10); }
.ods-12, .ods-12 span:nth-child(2)::before { color: var(--ods-color-12) !important; --rotation: calc(var(--ods-angulo) * 11); --ods-time: calc(250ms * 11); }
.ods-13, .ods-13 span:nth-child(2)::before { color: var(--ods-color-13) !important; --rotation: calc(var(--ods-angulo) * 12); --ods-time: calc(250ms * 12); }
.ods-14, .ods-14 span:nth-child(2)::before { color: var(--ods-color-14) !important; --rotation: calc(var(--ods-angulo) * 13); --ods-time: calc(250ms * 13); }
.ods-15, .ods-15 span:nth-child(2)::before { color: var(--ods-color-15) !important; --rotation: calc(var(--ods-angulo) * 14); --ods-time: calc(250ms * 14); }
.ods-16, .ods-16 span:nth-child(2)::before { color: var(--ods-color-16) !important; --rotation: calc(var(--ods-angulo) * 15); --ods-time: calc(250ms * 15); }
.ods-17, .ods-17 span:nth-child(2)::before { color: var(--ods-color-17) !important; --rotation: calc(var(--ods-angulo) * 16); --ods-time: calc(250ms * 16); }
.ods-line,
[class^="ods-"].icon {
  background-size: 70% auto;
  background-origin: padding-box;
  background-clip: border-box;
}
.icon {
  background-color: currentColor;
  outline-color: currentColor;
}
.ods-1.icon { background-image: url('/sites/default/files/ods_svg/ODS_BN/ODS-BN_ODS-vector-BN-1.webp'); }
.ods-2.icon { background-image: url('/sites/default/files/ods_svg/ODS_BN/ODS-BN_ODS-vector-BN-2.webp'); }
.ods-3.icon { background-image: url('/sites/default/files/ods_svg/ODS_BN/ODS-BN_ODS-vector-BN-3.webp'); }
.ods-4.icon { background-image: url('/sites/default/files/ods_svg/ODS_BN/ODS-BN_ODS-vector-BN-4.webp'); }
.ods-5.icon { background-image: url('/sites/default/files/ods_svg/ODS_BN/ODS-BN_ODS-vector-BN-5.webp'); }
.ods-6.icon { background-image: url('/sites/default/files/ods_svg/ODS_BN/ODS-BN_ODS-vector-BN-6.webp'); }
.ods-7.icon { background-image: url('/sites/default/files/ods_svg/ODS_BN/ODS-BN_ODS-vector-BN-7.webp'); }
.ods-8.icon { background-image: url('/sites/default/files/ods_svg/ODS_BN/ODS-BN_ODS-vector-BN-8.webp'); }
.ods-9.icon { background-image: url('/sites/default/files/ods_svg/ODS_BN/ODS-BN_ODS-vector-BN-9.webp'); }
.ods-10.icon { background-image: url('/sites/default/files/ods_svg/ODS_BN/ODS-BN_ODS-vector-BN-10.webp'); }
.ods-11.icon { background-image: url('/sites/default/files/ods_svg/ODS_BN/ODS-BN_ODS-vector-BN-11.webp'); }
.ods-12.icon { background-image: url('/sites/default/files/ods_svg/ODS_BN/ODS-BN_ODS-vector-BN-12.webp'); }
.ods-13.icon { background-image: url('/sites/default/files/ods_svg/ODS_BN/ODS-BN_ODS-vector-BN-13.webp'); }
.ods-14.icon { background-image: url('/sites/default/files/ods_svg/ODS_BN/ODS-BN_ODS-vector-BN-14.webp'); }
.ods-15.icon { background-image: url('/sites/default/files/ods_svg/ODS_BN/ODS-BN_ODS-vector-BN-15.webp'); }
.ods-16.icon { background-image: url('/sites/default/files/ods_svg/ODS_BN/ODS-BN_ODS-vector-BN-16.webp'); }
.ods-17.icon { background-image: url('/sites/default/files/ods_svg/ODS_BN/ODS-BN_ODS-vector-BN-17.webp'); }
/* Fin Complemento del widget "ODS en Movimiento" */
@media (max-width: 968px) {
  .espol-noticias > li:nth-child(1) {
    height: 50vw;
    flex: 1 0 calc(100% - var(--padding));
  }
  .espol-noticias > li:nth-child(n+2) {
    height: 28vw;
    flex: 1 0 calc(50% - var(--padding));
  }
  .page-vocabulary-ods #page-wrapper:has(div[class^="ods-"]) {
    position: relative;
    top: calc(var(--menu-mobile) * 2);
  }
}
@media (max-width: 768px) {
  .espol-noticias > li {
    height: 60vw !important;
    aspect-ratio: 4 / 3 !important;
    flex: 1 0 100% !important;
  }
  .page-vocabulary-ods #main-wrapper:has(div[class^="ods-"]) {
    top: 70px;
  }
  .page-vocabulary-ods article.node--type-noticias {
    padding: var(--padding);
  }
}
@media (prefers-reduced-motion: no-preference) {
  .espol-noticias img,
  .ods-ul img {
    transition: all 150ms ease-out;
  }
  .espol-noticias li {
    transition: all 300ms ease-out;
  }
  .espol-noticias > li:is(:hover, :focus, .auto-hover) {
    transform: translateY(-5px);
    transition: transform 1.5s cubic-bezier(.4,2,.6,1);
  }
  .espol-noticias .hast a,
  .espol-noticias li:hover .ODS li,
  .ODS:hover > :not(:hover),
  .espol-noticias :has(.ODS li:hover > :not(li:hover)) .noticias-back,
  .espol-noticias .ODS li {
    transition: all 425ms ease-out;
  }
  .espol-noticias > li:is(:hover, .auto-hover) > img {
   transition: all 2.5s cubic-bezier(0, 0, 0, 1);
  }
  .noticias-back, .noticias-contenido :is(time, h3),
  .espol-noticias :is(.noticia-enlace, .ODS, li:hover .ODS, .hast){
    transition: transform 1.3s cubic-bezier(0, 1.1, 0.94, 0.9);
  }
}