/* ============================================================
   YGARÁ NEWS — CORREÇÃO MOBILE
   Versão 1.0.0

   Tudo aqui está preso à classe .ygara-mf, que o plugin coloca
   no <body> do site. Assim nada afeta o painel administrativo.

   Os seletores :not([class*="slid"]) etc. servem para PROTEGER
   o carrossel da home. Sem eles, o slider seria colapsado junto
   com as grades e pararia de funcionar.
   ============================================================ */


/* ------------------------------------------------------------
   1. BASE — vale em qualquer tamanho de tela
   ------------------------------------------------------------ */

.ygara-mf,
.ygara-mf * {
	box-sizing: border-box;
}

/* Impede a rolagem lateral, o sintoma clássico de layout travado. */
.ygara-mf {
	max-width: 100%;
	overflow-x: hidden;
}

/* Nenhuma imagem ou vídeo pode ser mais largo que a tela. */
.ygara-mf img,
.ygara-mf video,
.ygara-mf iframe,
.ygara-mf embed,
.ygara-mf object {
	max-width: 100%;
	height: auto;
}

/* Palavras muito longas (links colados, nomes técnicos) quebram
   em vez de esticar a página. */
.ygara-mf p,
.ygara-mf h1,
.ygara-mf h2,
.ygara-mf h3,
.ygara-mf li,
.ygara-mf a {
	overflow-wrap: break-word;
	word-wrap: break-word;
}


/* ------------------------------------------------------------
   2. CELULAR — até 780px de largura
   ------------------------------------------------------------ */

@media (max-width: 780px) {

	/* --- 2.1 Grades de notícias viram coluna única --- */

	.ygara-mf [class*="grid"]:not([class*="slid"]):not([class*="swip"]):not([class*="carous"]):not([class*="slick"]):not([class*="glide"]),
	.ygara-mf [class*="cols"]:not([class*="slid"]):not([class*="swip"]):not([class*="carous"]),
	.ygara-mf [class*="col-"]:not([class*="slid"]):not([class*="swip"]):not([class*="carous"]),
	.ygara-mf [class*="cards"]:not([class*="slid"]):not([class*="swip"]):not([class*="carous"]),
	.ygara-mf [class*="related"],
	.ygara-mf [class*="leia"],
	.ygara-mf [class*="block-"]:not([class*="slid"]):not([class*="carous"]) {
		display: block !important;
		width: 100% !important;
		max-width: 100% !important;
		float: none !important;
		grid-template-columns: 1fr !important;
	}

	/* Os itens de dentro ocupam a largura toda e ganham respiro. */
	.ygara-mf [class*="grid"]:not([class*="slid"]):not([class*="swip"]):not([class*="carous"]) > *,
	.ygara-mf [class*="cols"]:not([class*="slid"]):not([class*="carous"]) > *,
	.ygara-mf [class*="cards"]:not([class*="slid"]):not([class*="carous"]) > *,
	.ygara-mf [class*="related"] > *,
	.ygara-mf [class*="leia"] > * {
		width: 100% !important;
		max-width: 100% !important;
		flex: 1 1 100% !important;
		float: none !important;
		margin-bottom: 18px;
	}

	/* --- 2.2 Estruturas gerais do tema --- */

	.ygara-mf .container,
	.ygara-mf .wrapper,
	.ygara-mf .site-content,
	.ygara-mf .content-area,
	.ygara-mf .site-main,
	.ygara-mf .sidebar,
	.ygara-mf .widget-area,
	.ygara-mf .site-header,
	.ygara-mf .site-footer,
	.ygara-mf main,
	.ygara-mf article,
	.ygara-mf aside {
		width: 100% !important;
		max-width: 100% !important;
		float: none !important;
	}

	/* Respiro nas laterais, para o texto não colar na borda. */
	.ygara-mf .container,
	.ygara-mf .wrapper,
	.ygara-mf .site-content,
	.ygara-mf .content-area {
		padding-left: 16px;
		padding-right: 16px;
	}

	/* A sidebar desce para baixo do conteúdo, nunca ao lado. */
	.ygara-mf .sidebar,
	.ygara-mf .widget-area {
		margin-top: 32px;
	}

	/* --- 2.3 Tipografia legível no celular --- */

	.ygara-mf body,
	.ygara-mf p,
	.ygara-mf .entry-content p {
		font-size: 17px !important;
		line-height: 1.65 !important;
	}

	.ygara-mf h1,
	.ygara-mf .entry-title {
		font-size: 27px !important;
		line-height: 1.22 !important;
	}

	.ygara-mf h2 {
		font-size: 22px !important;
		line-height: 1.3 !important;
	}

	.ygara-mf h3 {
		font-size: 19px !important;
		line-height: 1.35 !important;
	}

	/* Títulos das notícias dentro dos blocos: nunca menores que isso. */
	.ygara-mf [class*="card"] h2,
	.ygara-mf [class*="card"] h3,
	.ygara-mf [class*="post"] h2,
	.ygara-mf [class*="post"] h3,
	.ygara-mf [class*="related"] h3,
	.ygara-mf [class*="leia"] h3 {
		font-size: 17px !important;
		line-height: 1.35 !important;
	}

	/* --- 2.4 Tabelas não estouram a tela --- */

	.ygara-mf table {
		display: block;
		width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* --- 2.5 Área de toque mínima nos links do menu --- */

	.ygara-mf nav a,
	.ygara-mf .menu a {
		display: inline-block;
		padding-top: 8px;
		padding-bottom: 8px;
	}

	/* --- 2.6 O carrossel continua funcionando normalmente --- */

	.ygara-mf [class*="slid"],
	.ygara-mf [class*="swip"],
	.ygara-mf [class*="carous"],
	.ygara-mf [class*="slick"],
	.ygara-mf [class*="glide"] {
		max-width: 100% !important;
		overflow: hidden;
	}
}


/* ------------------------------------------------------------
   3. CELULAR PEQUENO — até 420px
   ------------------------------------------------------------ */

@media (max-width: 420px) {

	.ygara-mf h1,
	.ygara-mf .entry-title {
		font-size: 24px !important;
	}

	.ygara-mf .container,
	.ygara-mf .wrapper,
	.ygara-mf .site-content,
	.ygara-mf .content-area {
		padding-left: 12px;
		padding-right: 12px;
	}
}