@charset "UTF-8";
/**
 * Estilos para página de Notícias (Newsroom)
 * Baseado em /ac/globalothers/books/2/pt_BR/styles/build.books.css
 * Adaptado: book → news, sem hover/shadow
 */

/* 1. Declarações de variáveis */
.main-news-list {
  all: unset;
}

.main-news-list {
  --r-globalfont-family: "SF Pro Text", "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "San Francisco",
    "Open Sans", "Noto Sans", "Arial", sans-serif;
  margin: 0;
  font-family: var(--r-globalfont-family);
  font-size: var(--bs-body-font-size, 1rem);
  font-weight: var(--bs-body-font-weight, 400);
  line-height: var(--bs-body-line-height, 1.5);
  color: var(--bs-body-color, #343a40);
  text-align: var(--bs-body-text-align, left);
  background-color: var(--bs-body-bg, #ffffff);
}

/* Reset de elementos */
.main-news-list ul,
.main-news-list ol,
.main-news-list li,
.main-news-list dl,
.main-news-list dt,
.main-news-list dd,
.main-news-list h1,
.main-news-list h2,
.main-news-list h3,
.main-news-list h4,
.main-news-list h5,
.main-news-list h6,
.main-news-list p,
.main-news-list div,
.main-news-list picture,
.main-news-list time {
  margin: 0;
  padding: 0;
}

.main-news-list h1,
.main-news-list h2,
.main-news-list h3,
.main-news-list h4,
.main-news-list h5,
.main-news-list h6,
.main-news-list span {
  display: block;
  margin: 0;
  padding: 0;
  font-size: 16px;
  font-family: var(--r-globalfont-family);
  --sk-headline-text-color: rgb(29, 29, 31);
  color: var(--sk-headline-text-color, rgb(29, 29, 31));
}

.main-news-list {
  display: flex;
  gap: 1rem;
  margin: 0 auto;
  max-width: 2560px;
  width: 100%;
}

/* 2. Estrutura da lista de notícias */
.main-news-list .archive {
  width: 100%;
  height: max-content;
  margin: 0 auto;
}

.main-news-list .archive .news {
  width: max-content;
  margin: 0 auto;
}

.main-news-list .archive .news .news-content {
  margin-inline-start: auto;
  margin-inline-end: auto;
  width: 980px;
}

@media only screen and (max-width: 1068px) {
  .main-news-list .archive .news .news-content {
    width: 692px;
  }
}

@media only screen and (max-width: 734px) {
  .main-news-list .archive .news .news-content {
    width: 87.5%;
  }
}

/* 3. Título do mês */
.main-news-list .archive .news .news-content h2[class="news-title"] {
  margin-bottom: 16px;
  font-size: 28px;
  line-height: 1.1428571429;
  font-weight: 700;
  letter-spacing: 0.007em;
  font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  margin-top: 52px;
}

@media only screen and (max-width: 1068px) {
  .main-news-list .archive .news .news-content h2[class="news-title"] {
    font-size: 24px;
    line-height: 1.1666666667;
    margin-top: 48px;
  }
}

@media only screen and (max-width: 734px) {
  .main-news-list .archive .news .news-content h2[class="news-title"] {
    margin-top: 44px;
  }
}

/* 4. Item de notícia (link) - SEM hover/shadow */
.main-news-list .archive .news .news-content a[class*="news-item"] {
  display: flex;
  justify-content: flex-start;
  margin: 0;
  border-top: 1px solid #d2d2d7;
  text-decoration: none;
  align-items: center;
  padding: 40px 0;
}

@media only screen and (max-width: 1068px) {
  .main-news-list .archive .news .news-content a[class*="news-item"] {
    padding: 32px 0;
  }
}

@media only screen and (max-width: 734px) {
  .main-news-list .archive .news .news-content a[class*="news-item"] {
    align-items: flex-start;
    padding: 28px 0;
  }
}

/* 5. Picture container */
.main-news-list .archive .news .news-content a[class*="news-item"] picture[class="viewport-picture"] {
  align-self: flex-start;
  flex-shrink: 0;
  font-size: 0;
  width: 295px;
  display: flex;
  justify-content: center;
}

@media only screen and (max-width: 1068px) {
  .main-news-list .archive .news .news-content a[class*="news-item"] picture[class="viewport-picture"] {
    width: 264px;
  }
}

@media only screen and (max-width: 734px) {
  .main-news-list .archive .news .news-content a[class*="news-item"] picture[class="viewport-picture"] {
    width: 105px;
    height: max-content;
  }
}

/* 6. Imagem */
.main-news-list .archive .news .news-content a[class*="news-item"] picture[class="viewport-picture"] img[class="viewport-image"] {
  border-radius: 20px;
  width: max-content;
  height: 165px;
}

@media only screen and (max-width: 1068px) {
  .main-news-list .archive .news .news-content a[class*="news-item"] picture[class="viewport-picture"] img[class="viewport-image"] {
    width: 105px;
    height: 105px;
  }
}

/* 7. Conteúdo do item */
.main-news-list .archive .news .news-content a[class*="news-item"] div[class="item-content"] {
  margin-inline-start: 32px;
}

@media only screen and (max-width: 1068px) {
  .main-news-list .archive .news .news-content a[class*="news-item"] div[class="item-content"] {
    margin-inline-start: 24px;
  }
}

@media only screen and (max-width: 734px) {
  .main-news-list .archive .news .news-content a[class*="news-item"] div[class="item-content"] {
    margin-inline-start: 16px;
  }
}

/* 8. Categoria */
.main-news-list a[class*="news-item"] div[class="item-content"] p[class*="item-category"] {
  color: #6e6e73;
  font-size: 14px;
  line-height: 1.2857742857;
  font-weight: 700;
  letter-spacing: -0.016em;
  font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  text-transform: uppercase;
}

@media only screen and (max-width: 1068px) {
  .main-news-list a[class*="news-item"] div[class="item-content"] p[class*="item-category"] {
    font-size: 12px;
    line-height: 1.3333733333;
  }
}

/* 9. Título da notícia */
.main-news-list a[class*="news-item"] div[class="item-content"] h3[class="item-headline"] {
  font-size: 24px;
  line-height: 1.1666666667;
  font-weight: 700;
  letter-spacing: 0.009em;
  font-family: "SF Pro Display", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  margin-top: 8px;
}

@media only screen and (max-width: 1068px) {
  .main-news-list a[class*="news-item"] div[class="item-content"] h3[class="item-headline"] {
    font-size: 21px;
    line-height: 1.1904761905;
  }
}

@media only screen and (max-width: 734px) {
  .main-news-list a[class*="news-item"] div[class="item-content"] h3[class="item-headline"] {
    font-size: 17px;
    line-height: 1.2353641176;
    letter-spacing: -0.022em;
    font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  }
}

/* 10. Data */
.main-news-list a[class*="news-item"] div[class="item-content"] p[class="item-date last-update"] {
  color: #6e6e73;
  font-size: 14px;
  line-height: 1.4285914286;
  font-weight: 600;
  letter-spacing: -0.016em;
  font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  margin-top: 12px;
}

@media only screen and (max-width: 734px) {
  .main-news-list a[class*="news-item"] div[class="item-content"] p[class="item-date last-update"] {
    line-height: 1.2857742857;
  }
}

/* ========================================
   11. Paginação (Apple Newsroom Style)
   ======================================== */

/* Container principal da paginação */
.pagination-ctrl {
  margin-top: 60px;
  margin-bottom: 60px;
}

.pagination-ctrl__content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  /* max-width: 330px; */
  margin: 0 auto;
}

/* Botões de navegação (setas) */
.pagination-ctrl__btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background-color: #f5f5f7;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease;
  text-decoration: none;
  color: #6e6e73;
  font-size: 20px;
}

.pagination-ctrl__btn:hover,
.pagination-ctrl__btn:focus {
  background-color: #e8e8ed;
  color: #1d1d1f;
  text-decoration: none;
}

.pagination-ctrl__btn--disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* Ícones de seta usando pseudo-elementos */
.icon-paginationleft::before {
  content: "‹";
  font-size: 28px;
  font-weight: 300;
}

.icon-paginationright::after {
  content: "›";
  font-size: 28px;
  font-weight: 300;
}

/* Container de informação (input + "of X") */
.pagination-ctrl__info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
  font-weight: 700;
  font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}

/* Input de número da página */
.pagination-ctrl__info .input {
  width: 40px;
  height: 40px;
  text-align: center;
  border: 1px solid #d2d2d7;
  border-radius: 8px;
  font-size: 17px;
  font-weight: 700;
  font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  background: transparent;
  color: #1d1d1f;
}

.pagination-ctrl__info .input:focus {
  outline: 2px solid #0071e3;
  outline-offset: 2px;
  border-color: #0071e3;
}

/* Texto "of X" */
.pagination-text {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  color: #1d1d1f;
}

.pagination-total {
  font-weight: 700;
}

/* Classe para ocultar visualmente (acessibilidade) */
.visuallyhidden {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px);
  clip: rect(1px, 1px, 1px, 1px);
  padding: 0 !important;
  border: 0 !important;
  height: 1px !important;
  width: 1px !important;
  overflow: hidden;
}

/* Responsividade Mobile */
@media only screen and (max-width: 734px) {
  .pagination-ctrl {
    margin-top: 40px;
    margin-bottom: 40px;
  }
  
  .pagination-ctrl__content {
    gap: 12px;
  }
  
  .pagination-ctrl__btn {
    width: 40px;
    height: 40px;
  }
  
  .pagination-ctrl__info {
    font-size: 15px;
  }
  
  .pagination-ctrl__info .input {
    width: 36px;
    height: 36px;
    font-size: 15px;
  }
}

/* Estados de Loading e Erro */
.loading-state,
.error-state,
.no-news {
  text-align: center;
  padding: 4rem 2rem;
  color: #6e6e73;
  font-size: 16px;
  font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}

.error-state button {
  margin-top: 1rem;
  padding: 0.75rem 1.5rem;
  background: #0071e3;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  font-family: "SF Pro Text", "SF Pro Icons", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
  transition: background 0.2s ease;
}

.error-state button:hover {
  background: #0077ed;
}

.error-state button:active {
  background: #006edb;
}