/* =========================================================================
   GSEC · components.css
   Componentes do Design System portados fielmente do tema original.
   Valores preservados (cores/raios/medidas) — agora apoiados em tokens.
   ========================================================================= */

/* ---- Etiquetas / badges (editoria, data) ---- */
.tag {
  display: inline-block;
  padding: 0 7px;
  font-size: var(--fs-caption);
  line-height: 24px;
  text-align: center;
  border-radius: var(--radius-xs);
  background: var(--c-surface-2);
  color: var(--c-tag-text);
  white-space: nowrap;
}
a.tag:hover { opacity: .8; color: var(--c-tag-text); }
.tag--white    { background: #ffffff; }
.tag--red      { background: var(--c-accent); color: #fff; }
.tag--red2     { background: #ff0000; color: #fff; }
.tag--green    { background: #006f00; color: #fff; }
.tag--blue     { background: var(--c-blue); color: #fff; }
.tag--darkdark { background: #062D568f; color: #fff; }

/* ---- Data / meta ---- */
.date-style { color: var(--c-ink-2); font-weight: 500; line-height: 1.36; font-size: var(--fs-caption); }

/* ---- Botão primário ---- */
.btn {
  display: inline-block;
  font-family: var(--font);
  font-size: var(--fs-card);
  line-height: 35px;
  text-align: center;
  color: #fff;
  background: var(--c-accent);
  border: none;
  border-radius: var(--radius-xs);
  padding: 0 16px;
  transition: .2s;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  position: relative;
  overflow: hidden;
}
.btn:hover { opacity: .8; color: #fff; }
.btn--center { display: block; margin: 0 auto; }
.btn[disabled], .btn.is-disabled { opacity: .5; pointer-events: none; }

/* ---- Botões 3D de navegação (.mainmbtn.btn-8x) ---- */
.perspective { perspective: 800px; display: inline-block; }
.mainmbtn {
  border: none; font-family: inherit; font-size: inherit; background: none;
  cursor: pointer; padding: 9px; display: inline-block; margin: 0;
  text-transform: uppercase; letter-spacing: 1px; font-weight: 700;
  outline: none; position: relative; transition: all .3s; color: #fff;
}
.mainmbtn:after { content: ''; position: absolute; z-index: -1; transition: all .3s; }
.btn-8 { display: block; background: var(--c-dark); transform-style: preserve-3d; }
.btn-8:active { background: var(--c-blue-active); }
.btn-8a:after { width: 100%; height: 40%; left: 0; top: -40%; background: var(--c-dark-face); transform-origin: 0% 100%; transform: rotateX(90deg); }
.btn-8a:hover { transform: rotateX(-15deg); }
.btn-8b:after { width: 100%; height: 40%; left: 0; top: 100%; background: var(--c-dark-face); transform-origin: 0% 0%; transform: rotateX(-90deg); }
.btn-8b:hover { transform: rotateX(15deg); }
.btn-8d:after { width: 20%; height: 100%; left: 100%; top: 0; background: var(--c-dark-face); transform-origin: 0% 0%; transform: rotateY(90deg); }
.btn-8d:hover { transform: rotateY(-15deg); }

/* ---- Link com seta animada ---- */
.arrow-circle {
  color: var(--c-ink); cursor: pointer; text-decoration: none;
  font-size: 17px; line-height: 18px; display: inline-flex; align-items: center; gap: 8px;
}
.arrow-circle .arrow-circle-icon { position: relative; transition: transform .3s ease; vertical-align: middle; }
.arrow-circle .arrow-circle-iconcircle { transition: stroke-dashoffset .3s ease; stroke-dasharray: 95; stroke-dashoffset: 95; }
.arrow-circle:hover .arrow-circle-icon { transform: translate3d(5px,0,0); }
.arrow-circle:hover .arrow-circle-iconcircle { stroke-dashoffset: 0; }

/* ---- Cabeçalho de seção (.main-head) — barra vermelha à esquerda ---- */
.main-head {
  min-height: 44px; display: flex; align-items: center; position: relative;
  padding: 0 17px; background: var(--c-surface-2);
  font-size: var(--fs-h2); line-height: 1.3; letter-spacing: var(--ls-head); font-weight: 700;
}
.main-head:before { content: ""; position: absolute; top: 0; left: 0; height: 100%; border-left: 3px solid var(--c-accent); }
.main-head a:hover { color: var(--c-accent); }
.main-head__icon { margin-right: 15px; flex: none; }
.main-head .main-head__link { margin-left: auto; font-size: var(--fs-card); font-weight: 500; letter-spacing: normal; }

/* ---- Split de destaque (.top-news): esquerda flexível + direita 361px ---- */
.top-news { display: flex; gap: 30px; }
.top-news a:hover { color: var(--c-accent); }
.top-news__left { flex: 1; min-width: 0; }
.top-news__right { flex: 0 0 380px; max-width: 380px; display: flex; flex-direction: column; gap: 20px; }
.top-news__main { position: relative; margin-bottom: 15px; width: 100%; }
.top-news__main .ratio { aspect-ratio: 16 / 9; }

/* cartões compactos (coluna direita do topo): miniatura + título */
.post-compact { display: flex; gap: 14px; align-items: flex-start; }
.post-compact + .post-compact { border-top: 1px solid var(--c-line-2); padding-top: 20px; }
.post-compact__img { flex: none; width: 118px; }
.post-compact__img .ratio { aspect-ratio: 4 / 3; border-radius: 8px; }
.post-compact__body { min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.post-compact__body .tag { align-self: flex-start; }
.post-compact__title { font-weight: 600; font-size: 15px; line-height: 1.3; color: var(--c-ink); }
.post-compact__title:hover { color: var(--c-accent); }
/* ordem do card de destaque: cartola → título → data+hora → texto */
.top-news__main-cat { margin-top: 18px; margin-bottom: 12px; }
.top-news__main-title { display: block; font-size: var(--fs-feature); font-weight: 500; margin: 0 0 8px; line-height: 1.25; }
.top-news__main .date-style { display: block; }

/* ---- Grade de cartões (.articles-list / .article-link) ---- */
.articles-list { display: flex; justify-content: flex-start; flex-wrap: wrap; gap: var(--gutter); }
.article-link { width: 100%; line-height: 1.36; border-bottom: 1px solid var(--c-line); margin-bottom: 18px; padding-bottom: 12px; }
.article-link__img { width: 100%; display: block; position: relative; margin-bottom: 15px; }
.article-link__img .ratio { aspect-ratio: 16 / 10; }
.article-link__img .tag { position: absolute; left: 6px; top: 6px; z-index: 1; }
.article-link__title { display: block; margin-top: 14px; margin-bottom: 10px; font-weight: 500; font-size: var(--fs-card); }
.article-link .date-style { font-size: var(--fs-caption); }
.article-link a:hover, .article-link:hover .article-link__title { color: var(--c-accent); }

/* colunas: o gap real é 20px; calc replica o tema (4 e 2 colunas) */
.articles-list--column-4 .article-link { flex: 0 0 calc(100% / 4 - 60px / 4); }
.articles-list--column-3 .article-link { flex: 0 0 calc(100% / 3 - 40px / 3); }
.articles-list--column-2 .article-link { flex: 0 0 calc(100% / 2 - 20px / 2); }

/* ---- Bloco de lista lateral (.sidebar-news-block / .sidebar-news) ---- */
.sidebar-news-block { width: 100%; border: 1px solid var(--c-line); }
.sidebar-news-block .main-head { background: none; }
.sidebar-news-block .main-head:before { left: -1px; top: -1px; }
.sidebar-news-block__inner { padding: 20px 24px 15px; }
.sidebar-news { line-height: 1.36; }
.sidebar-news + .sidebar-news { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--c-divider); }
.sidebar-news__inner { display: block; hyphens: auto; }
.sidebar-news__inner .date-style { margin-right: 6px; }
.sidebar-news a:hover { color: var(--c-accent); }

/* ---- Busca do cabeçalho (só a lupa; campo expande ao clicar) ---- */
.header-search { display: flex; align-items: center; position: relative; }
.header-search__form { display: flex; align-items: center; }
.header-search__input {
  height: 38px; width: 100%; max-width: 0; padding: 0; border: 1px solid transparent;
  background: #fff; border-radius: 8px 0 0 8px; transition: max-width .4s, padding .4s; font-size: 14px;
}
.header-search.active .header-search__input { max-width: 240px; padding: 0 14px; border-color: var(--c-line); }
.header-search__btn {
  width: 38px; height: 38px; flex: none; border: none; cursor: pointer;
  background: var(--c-accent) url("../images/icon-search.svg") center / 16px no-repeat;
  border-radius: 8px;
}
.header-search.active .header-search__btn { border-radius: 0 8px 8px 0; }
.header-search__btn .icon-mask { display: none; }

/* =========================================================================
   Responsivo dos componentes (faixas tablet/mobile)
   ========================================================================= */
@media (max-width: 1023px) {
  .articles-list--column-4 .article-link { flex: 0 0 calc(100% / 3 - 40px / 3); }
}
@media (max-width: 719px) {
  .top-news { flex-wrap: wrap; }
  .top-news__left, .top-news__right { flex: none; width: 100%; max-width: 100%; margin: 0; }
  .articles-list--column-4 .article-link,
  .articles-list--column-3 .article-link,
  .articles-list--column-2 .article-link { flex: 0 0 calc(50% - 10px); }
  .top-news__main-title { font-size: 18px; }
}
@media (max-width: 480px) {
  .articles-list--column-4 .article-link,
  .articles-list--column-3 .article-link,
  .articles-list--column-2 .article-link { flex: 0 0 100%; }
  .article-link { margin-bottom: 5px; }
}