/*
Module Latest articles by Ioannis Sannos
https://www.isopensource.com
2021-08-17 19:06:00

Modernized UI (DestinoBenguela style) + gap reduzido
*/

/* Tokens (ajusta se quiseres) */
:root{
  --la-text: #272727;
  --la-muted: #6b6b6b;
  --la-border: rgba(0,0,0,.10);
  --la-hover: rgba(0,0,0,.035);
  --la-radius: 12px;
  --la-brand: #cc3300; /* rosa escuro (opcional para categoria) */
}

/* Lista */
.latestarts_wrap{
  margin: 0 0 20px 0;
  padding: 0;
  text-indent: 0;
  list-style: none;
}

/* Item */
.latestarts_wrap li{
  display: flex;
  align-items: flex-start;
  gap: 6px;                    /* ✅ ~25% do espaço anterior */
  margin: 8px 0 !important;
  padding: 10px 6px !important;
  text-indent: 0;
  list-style: none;
  border-bottom: 1px solid var(--la-border) !important;
  transition: background .15s ease;
}

.latestarts_wrap li:hover{
  background: var(--la-hover);
  border-radius: 10px;
}

/* Thumb */
.latestarts_ibox{
  width: 58px;
  flex: 0 0 58px;
  margin: 0;
  padding: 0;
  float: none;                 /* remove float antigo */
  text-align: left;
}

.latestarts_ibox img{
  display: block;
  width: 58px;
  height: 58px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--la-border);
  border-radius: 10px;
  object-fit: cover;
  background: transparent;
}

/* Caixa de texto */
.latestarts_tbox{
  margin: 0 !important;         /* ✅ remove o margin-left antigo (60px) */
  padding: 0;
  min-width: 0;
  flex: 1 1 auto;
}

.latestarts_nobox{ margin:0; padding:0; }

/* Título */
.latestarts_title{
  margin: 0;
  padding: 0;
  font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 15px;
  line-height: 20px;
  font-weight: 600;
  letter-spacing: -0.1px;
}

/* Link do título */
.latestarts_title a,
.latestarts_title a:visited,
.latestarts_title a:link,
.latestarts_title a:active{
  font-weight: 600;
  text-decoration: none;
  color: var(--la-text);
}

.latestarts_title a:hover{
  text-decoration: underline;
  text-underline-offset: 2px;
  color: #111;
}

/* Categoria */
.latestarts_cat{
  margin: 2px 0 0 0;
  padding: 0;
  font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 12.5px;
  line-height: 16px;
  font-weight: 500;
  color: var(--la-muted);
}

.latestarts_cat a,
.latestarts_cat a:visited,
.latestarts_cat a:link,
.latestarts_cat a:active{
  font-weight: 500;
  text-decoration: none;
  color: var(--la-brand);
}

.latestarts_cat a:hover{
  text-decoration: underline;
  text-underline-offset: 2px;
  color: #111;
}

/* Excerto */
.latestarts_sub{
  margin: 6px 0 0 0;
  padding: 0;
  font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 13.5px;
  line-height: 20px;
  font-weight: 400;
  color: var(--la-muted);

  /* mantém tudo alinhado (remove se não quiseres) */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Data */
.latestarts_date{
  margin: 6px 0 0 0;
  padding: 0;
  font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 12px;
  line-height: 16px;
  color: #7a7a7a;
}

/* Imagem grande (flex) */
.latestarts_flex{
  margin: 0 0 8px 0;
  padding: 0;
  text-align: center;
}

.latestarts_flex img{
  margin: 0 auto;
  padding: 0;
  width: 100% !important;
  height: auto;
  max-width: 700px;
  border: none;
  border-radius: 14px;
  display: block;
}

.latestarts_flex a{
  margin: 0;
  padding: 0;
  text-decoration: none;
  border: none;
}

/* Responsivo */
@media (max-width: 420px){
  .latestarts_wrap li{
    gap: 6px;                 /* mantém compacto no mobile */
    padding: 10px 4px !important;
  }

  .latestarts_ibox{
    width: 52px;
    flex-basis: 52px;
  }

  .latestarts_ibox img{
    width: 52px;
    height: 52px;
  }

  .latestarts_title{
    font-size: 14.5px;
    line-height: 20px;
  }
}
