/*
Theme Name: Softfocus
Theme URI:	https://softfocus.com.br/
Author: Rafael Forcadell
Version: 1.0
*/


/* 
Blog
--------------------------------------------
*/


@media screen and (min-width: 1024px) and (max-width: 1280px) {

	.blog:not(body) {

		--limite: calc(100vw - (var(--espaco) * 5));

	}

}


.blog main { width: auto; margin-top: calc(var(--altura-corte) + var(--offset-corte)); }

.blog main > header { width: var(--limite); margin: 0 auto; margin-bottom: calc(var(--espaco) * 2); }
.blog main > header h1 { width: 50%; margin: 0; }
.blog main > header form { position: absolute; bottom: 0; right: 0; display: flex; align-items: center; max-width: 50%; }
.blog main > header form input { padding: 0; background-color: var(--cor-transparente); }
.blog main > header form div[contenteditable] { padding: 0 10px; font-weight: var(--fw-medium); cursor: text; }
.blog main > header form button { flex: 0 0 auto; --tamanho: 36px; width: var(--tamanho); height: var(--tamanho); padding: 0; background-color: transparent; background-image: url(../imagens/formularios/buscar.svg); background-position: center; background-repeat: no-repeat; border: 0; border-radius: 0; opacity: .5; transition: opacity 100ms ease-in-out; }
.blog main > header form button:hover,
.blog main > header form button:focus { background-color: transparent; background-size: auto; opacity: 1; }


/**/

.blog article {}

.blog article a.imagem-destacada:before,
.blog article .chamada:before { position: absolute; z-index: 2; top: 0; left: calc(var(--espaco) * .5); width: 1px; height: 100%; background-color: var(--cor-borda-translucida); content: ""; pointer-events: none; }

.blog article a.imagem-destacada { display: block; padding-bottom: calc(var(--espaco) * .6); }
.blog article a.imagem-destacada:hover,
.blog article a.imagem-destacada:focus { background-size: 0; }
.blog article a.imagem-destacada:before { top: auto; bottom: 0; height: calc(var(--espaco) * 1.5); }
.blog article a.imagem-destacada:after { position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 0; background-color: var(--cor-primaria); content: ""; opacity: .2; transition: height 300ms ease-in-out; }
.blog article.hover a.imagem-destacada:after { top: auto; bottom: 0; height: 100%; }
.blog article a.imagem-destacada div.lazy-carregando { width: 100%; background-color: var(--cor-100); }

.blog article .chamada { padding: 0 calc(var(--espaco) * .6) 0 calc(var(--espaco) * 1.2); }
.blog article .chamada:after { position: absolute; z-index: 3; bottom: 0; left: calc(var(--espaco) * .5); width: 7px; height: 0%; margin-left: -3px; background-color: var(--cor-primaria); content: ""; transition-property: height; transition-duration: 200ms; transition-timing-function: ease-in-out; transition-delay: 100ms; pointer-events: none; }
.blog article .chamada > a { display: block; }
.blog article .chamada > a:hover,
.blog article .chamada > a:focus { background-size: 0; }

.blog article.hover .chamada:after { top: 0; bottom: auto; height: 100%; }
.blog article h1 { font-size: var(--fs-700); line-height: 1.1333em; margin-bottom: calc(var(--espaco) * .3); color: var(--cor-900); transition: color 200ms ease-in-out; }
.blog article.hover h1 { color: var(--cor-800); }
.blog article h3.tag { margin-bottom: .5em; }
.blog article p { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; font-size: var(--fs-300); color: var(--cor-900); }
.blog article .chamada a *:last-child { margin-bottom: 0; }

@media screen and (max-width: 767px){

	.blog article a.imagem-destacada:before,
	.blog article .chamada:before,
	.blog article .chamada:after { left: calc(var(--espaco) * .75); }
	.blog article .chamada { padding: 0 var(--espaco) var(--espaco) calc(var(--espaco) * 1.5); }

}


/*
1x1
--------------------------------------------
*/

@media screen and (min-width: 768px){

	.blog-1x1 { display: flex; width: calc(var(--limite) + (var(--espaco) * 2)); margin: 0 auto; margin-bottom: calc(var(--espaco) * 2); }
	.blog-1x1:before { position: absolute; z-index: -1; top: var(--espaco); left: 50%; width: 100vw; height: calc(100% - (var(--espaco) * 2)); margin-left: -50vw; background-color: var(--cor-fundo); content: ""; }

	.blog-1x1 article { display: flex; align-items: flex-start; width: 100%; }
	.blog-1x1 article a.imagem-destacada { width: calc(66.6666% + var(--espaco)); flex-grow: 1; flex-shrink: 0; padding-bottom: 0; box-sizing: content-box; }
	.blog-1x1 article a.imagem-destacada:before { left: auto; right: calc(var(--espaco) - 1px); height: 100%; }
	.blog-1x1 article a.imagem-destacada:after { width: calc(100% - (var(--espaco) * 2.1)); }
	.blog-1x1 article a.imagem-destacada figure { padding-right: calc(var(--espaco) * 2.1); }
	.blog-1x1 article a.imagem-destacada img { width: 100%; }
	.blog-1x1 article .chamada { padding: 0 var(--espaco) 0 0; margin-top: calc(var(--espaco) * 2.5); }
	.blog-1x1 article .chamada:before { display: none; }
	.blog-1x1 article .chamada:after { left: calc(var(--espaco) * -1); }
	.blog-1x1 article .chamada h1 { margin-bottom: 0; }
	.blog-1x1 article .chamada h1 + p { padding-top: calc(var(--espaco) * .3); }
	.blog-1x1 article .chamada p { position: absolute;  }

}

/*
3x1
--------------------------------------------
*/

@media screen and (min-width: 768px){
	
	.blog-3x1 { display: flex; width: calc(var(--limite) + (var(--espaco) * 2)); margin: 0 auto; margin-bottom: calc(var(--espaco) * 2); }
	.blog-3x1:before { position: absolute; z-index: -1; top: var(--espaco); left: 50%; width: 100vw; height: calc(100% - (var(--espaco) * 2)); margin-left: -50vw; background-color: var(--cor-fundo); content: ""; }

	.blog-3x1 > article { display: flex; align-items: flex-start; width: 66.6666%; }
	.blog-3x1 > article a.imagem-destacada { width: 360px; flex-grow: 1; flex-shrink: 0; padding-right: var(--espaco); padding-bottom: 0; box-sizing: content-box; min-height: 100%; display: flex; }
	.blog-3x1 > article a.imagem-destacada:before { display: none; }
	.blog-3x1 > article a.imagem-destacada:after { width: calc(100% - var(--espaco)); }
	.blog-3x1 > article a.imagem-destacada figure { display: flex; justify-content: center; width: 100%; min-height: 100%; overflow: hidden; }
	.blog-3x1 > article a.imagem-destacada img { max-width: none; height: 100%; flex-shrink: 0; }
	.blog-3x1 > article .chamada { padding: 0; padding-right: var(--espaco); margin-top: calc(var(--espaco) * 2.5); }
	.blog-3x1 > article .chamada:before { display: none; }
	.blog-3x1 > article .chamada:after { left: calc(var(--espaco) * -1); }
	.blog-3x1 > article .chamada h1 { margin-bottom: 0; }
	.blog-3x1 > article .chamada h1 + p { padding-top: calc(var(--espaco) * .3); }
	.blog-3x1 > article .chamada p { position: absolute; width: 70%; }

	.blog-3x1 > div { width: 33.3333%; padding: calc(var(--espaco) * 2.5) 0; }
	.blog-3x1 > div:before { position: absolute; z-index: -1; top: 0; left: 0; width: 1px; height: 100%; background-color: var(--cor-borda); content: ""; }
	.blog-3x1 > div article { margin-bottom: var(--espaco); }
	.blog-3x1 > div article:last-child { margin-bottom: 0; }
	.blog-3x1 > div article .chamada { padding: 0 calc(var(--espaco) * .6) 0 var(--espaco); }
	.blog-3x1 > div article .chamada:before { display: none; }
	.blog-3x1 > div article .chamada:after { left: 0; }
	.blog-3x1 > div article.line-clamp h1 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
	.blog-3x1 > div article.line-clamp + article.line-clamp h1 { -webkit-line-clamp: 2; }

	.blog a.visite { position: absolute; bottom: calc(var(--espaco) * -1); right: var(--espaco); }

	.blog-3x3 + .blog-3x1 { margin-top: calc(var(--espaco) * 3); }
	.blog-3x3.sem-imagens + .blog-3x1 { margin-top: 0; }

}

@media screen and (min-width: 1280px) and (max-width: 1600px) {

	.blog.blog-3x1 { margin-bottom: calc(var(--espaco) * 2.5); }

}

@media screen and (min-width: 1024px) and (max-width: 1279px) {

	.blog-3x1 { flex-direction: column; }
	.blog-3x1:before { display: none; }

	.blog-3x1 > article { align-items: unset; width: 100%; margin-bottom: var(--espaco); }
	.blog-3x1 > article:before { position: absolute; z-index: -1; top: var(--espaco); left: 50%; width: 100vw; height: calc(100% - (var(--espaco) * 2)); margin-left: -50vw; background-color: var(--cor-fundo); content: ""; }
	.blog-3x1 > article a.imagem-destacada { width: calc(60% + var(--espaco)); padding-right: 0; }
	.blog-3x1 > article a.imagem-destacada:before { display: inherit; left: auto; right: calc(var(--espaco) - 1px); height: 100%; }
	.blog-3x1 > article a.imagem-destacada:after { width: calc(100% - (var(--espaco) * 2.1)); }
	.blog-3x1 > article a.imagem-destacada figure { padding-right: calc(var(--espaco) * 2.1); }
	.blog-3x1 > article a.imagem-destacada img { width: 100%; object-fit: cover; }
	.blog-3x1 > article .chamada { padding: 0; margin-top: calc(var(--espaco) * 2); margin-bottom: calc(var(--espaco) * 2.3); }
	.blog-3x1 > article .chamada:before { display: none; }
	.blog-3x1 > article .chamada:after { left: calc(var(--espaco) * -1); }
	.blog-3x1 > article .chamada h1 { margin-bottom: 0; }
	.blog-3x1 > article .chamada h1 + p { padding-top: calc(var(--espaco) * .3); }
	.blog-3x1 > article .chamada p { display: none; }

	.blog.blog-3x1 { margin-bottom: 0; }
	.blog.blog-3x1 > div,
	.blog.blog-3x1 a.visite { display: none; }

}

@media screen and (max-width: 767px){

	.blog-3x1 { margin-top: var(--espaco); margin-bottom: calc(var(--espaco) * 1.5); }

	.blog.blog-3x1 > div { margin-bottom: calc(var(--espaco) * 1.5); }

	.blog.blog-3x1 > div article:last-child .chamada { padding-bottom: 0; }
	.blog.blog-3x1 a.imagem-destacada { display: none; }

	.blog.blog-3x1 a.visite { display: table; margin: 0 auto; }

}


/*
3x3
--------------------------------------------
*/

@media screen and (min-width: 768px){

	.blog-3x3 { display: flex; width: calc(var(--limite) + (var(--espaco) * 3)); margin: 0 auto; margin-bottom: calc(var(--espaco) * 2.5); }
	.blog-3x3:before { position: absolute; z-index: -1; top: var(--espaco); left: 50%; width: 100vw; height: 100%; margin-left: -50vw; background-color: var(--cor-fundo); content: ""; }

	.blog-3x3 article { width: 33.3333%; padding: 0 calc(var(--espaco) * .5); }
	/*.blog-3x3 article a.imagem-destacada { display: inline-block; vertical-align: top; }*/
	.blog-3x3 article.hover a.imagem-destacada:after { bottom: calc(var(--espaco) * .6); height: calc(100% - var(--espaco) * .6); }

	.blog-3x3.sem-imagens { margin-bottom: calc(var(--espaco) * 2); }
	.blog-3x3.sem-imagens:before,
	.blog-3x3.sem-imagens article a.imagem-destacada { display: none; }

}


/**/

.blog main > div:last-child:not(.paginacao) { margin-bottom: calc(var(--espaco) * 3); }


/*
Paginação
--------------------------------------------
*/

.paginacao { --un: 30px; top: calc(var(--espaco) * -1); display: flex; align-items: flex-start; justify-content: flex-end; max-width: var(--limite); margin: 0 auto; font-size: var(--fs-100); font-weight: var(--fw-semibold); line-height: var(--un); text-align: center; }

.paginacao div,
.paginacao span,
.paginacao a { padding-top: calc(var(--un) * 1.1666); color: var(--cor-400); }

.paginacao div { margin-right: 10px; padding-top: 0; font-weight: var(--fw-light); }

.paginacao span,
.paginacao a { display: inline-block; vertical-align: bottom; width: var(--un); margin: 0 calc(var(--un) * .3333); }

.paginacao a:hover, .paginacao a:focus { background-size: 0; }
.paginacao a:active { color: var(--cor-400); }

.paginacao span { cursor: default; }

.paginacao span:before,
.paginacao a:before { position: absolute; top: 0; left: 0; width: var(--un); height: var(--un); border-radius: calc(var(--un) * .5); background-color: var(--cor-borda); content: ""; transition: background 100ms ease-in-out; }

.paginacao .page-numbers.current + a.page-numbers:before { background-color: var(--cor-softfocus-clara); }

.paginacao a:hover:before, .paginacao a:focus:before { background-color: var(--cor-primaria) !important; }

.paginacao span.current:before { background-color: transparent; border: 1px solid var(--cor-borda); }
.paginacao span.dots:before { top: calc(var(--un) * -.25); font-size: var(--fs-700); background-color: transparent; content: "..."; }

.paginacao .page-numbers.current + a.page-numbers,
.paginacao .page-numbers.current + a.page-numbers:before { width: calc(var(--un) * 3); }