/* ==========================================================================
   news.css - Blog Meu Vinho (artigo + listagem)
   Carregado somente por news/default.asp, DEPOIS de meuvinho.css.
   ASCII puro - nao usar acentos neste arquivo.
   ========================================================================== */

/* ---- Neutralizacoes de regras legadas do meuvinho.css ---- */

/* meuvinho.css: .news-bg table br { display: none } esconderia os br do corpo
   (o conteudo mora dentro da table.tb-news de default.asp).
   Especificidade (0,2,1) vence (0,1,2) sem !important. */
.news-bg .news-article-body br { display: inline; }

/* td central de default.asp tem align="center" */
.news-article, .news-list { text-align: left; }

/* ---- Artigo ---- */

.news-article { max-width: 720px; margin: 0 auto; padding: 40px 0 30px 0; }

.news-article-date { font-family: 'Lato', sans-serif; font-size: 13px; font-weight: 400; letter-spacing: 1.5px; text-transform: uppercase; color: #888; margin: 0 0 10px 0; }
.news-article-title { font-family: 'Lato', sans-serif; font-size: 38px; font-weight: 900; line-height: 1.2; color: #222; margin: 0 0 18px 0; }
.news-article-lede { font-family: 'Lato', sans-serif; font-size: 20px; font-weight: 400; line-height: 1.5; color: #666; margin: 0 0 26px 0; }

.news-article-figure { margin: 0 0 28px 0; }
.news-article-figure img { display: block; width: 100%; height: auto; border-radius: 6px; }

.news-article-body { font-family: 'Lato', sans-serif; font-size: 18px; line-height: 1.7; color: #333; }
.news-article-body p { margin: 0 0 1.25em 0; }
.news-article-body img { max-width: 100%; height: auto; border-radius: 4px; }
.news-article-body a { color: #990826; text-decoration: underline; }
.news-article-body a:hover { color: #DF4442; }

.news-article-source { font-family: 'Lato', sans-serif; font-size: 15px; color: #777; font-style: italic; margin: 30px 0 0 0; }

.news-article-related { margin-top: 40px; padding-top: 24px; border-top: 1px solid #ddd; }
.news-article-related a { display: block; font-family: 'Lato', sans-serif; font-size: 16px; font-weight: 700; color: #990826; text-decoration: none; padding: 4px 0; }
.news-article-related a:hover { color: #DF4442; text-decoration: underline; }

/* ---- Listagem ---- */

.news-list { max-width: 760px; margin: 0 auto; padding: 14px 0 20px 0; }
.news-list-item { padding: 26px 0; border-bottom: 1px solid #e2e2e2; }
.news-list-date { font-family: 'Lato', sans-serif; font-size: 13px; font-weight: 400; letter-spacing: 1.5px; text-transform: uppercase; color: #888; margin: 0 0 6px 0; }
.news-list-title { display: block; font-family: 'Lato', sans-serif; font-size: 22px; font-weight: 900; line-height: 1.3; color: #333; text-decoration: none; }
.news-list-title:hover { color: #990826; text-decoration: none; }
.news-list-preview { font-family: 'Lato', sans-serif; font-size: 16px; line-height: 1.6; color: #555; margin: 10px 0 0 0; }
.news-list-preview a { color: #990826; font-weight: 700; text-decoration: none; }
.news-list-preview a:hover { color: #DF4442; text-decoration: underline; }

/* ---- Titulos "Blog Meu Vinho" ---- */

/* capa/selecoes: base era 18px (e 20px so em telas grandes); padroniza 20px */
.news .titulo_box.produto-titulo .maintitle { font-size: 20px !important; }
/* pagina de news: .titulo_carrinho global e 26px; aqui reduz para 20px */
.news-bg .bg-news-image .titulo_carrinho { font-size: 20px; }

/* ---- Cards do blog na capa e na pagina de selecoes (mr_noticia.asp) ---- */

.news-item .title { padding-top: 12px; }
.news-item .news-card-date { font-family: 'Lato', sans-serif; font-size: 12px; font-weight: 400; letter-spacing: 1.5px; text-transform: uppercase; color: #888; margin: 0 0 6px 0; }
.news-item .news-card-title { display: block; font-family: 'Lato', sans-serif; font-size: 19px; font-weight: 900; line-height: 1.3; color: #333; text-decoration: none; }
.news-item .news-card-title:hover { color: #990826; text-decoration: none; }

/* ---- Paginacao ---- */

.news-pagination { max-width: 760px; margin: 25px auto 40px auto; text-align: center; font-family: 'Lato', sans-serif; font-size: 15px; color: #555; }
.news-pagination .news-page-btn { display: inline-block; background: #fff; border: 1px solid #ccc; border-radius: 4px; padding: 4px 14px; font-family: 'Lato', sans-serif; font-size: 18px; line-height: 1.2; cursor: pointer; color: #333; vertical-align: middle; text-decoration: none; }
.news-pagination .news-page-btn:hover { border-color: #990826; color: #990826; text-decoration: none; }
.news-pagination input.news-page-input { width: 44px; text-align: center; padding: 5px 2px; border: 1px solid #ccc; border-radius: 4px; font-family: 'Lato', sans-serif; font-size: 15px; vertical-align: middle; }

/* ---- Tablet/mobile ---- */

/* meuvinho.css (max-width:1024px) poe .news-bg table com width 93%, deixando
   faixas brancas nas laterais. Fundo cinza vai de ponta a ponta, como em
   siteseguro.asp. border-spacing 0 remove os fios brancos do cellspacing=2. */
@media (max-width: 1024px) {
	.news-container .news-bg { width: 100%; max-width: inherit; }
	.news-bg table.tb-news { width: 100%; border-spacing: 0; }
}

@media (max-width: 767px) {
	.news-article, .news-list, .news-pagination { padding-left: 16px; padding-right: 16px; }
	.news-article-title { font-size: 26px; line-height: 1.25; }
	.news-article-lede { font-size: 18px; }
	.news-article-body { font-size: 17px; line-height: 1.65; }
	.news-list-title { font-size: 21px; }
	.news-list-preview { font-size: 17px; }
}