/* CifraNET - ajustes de layout da pagina inicial (16/09/2026)
   Camada de correcao: o CSS geral do site (site-shell) usa regras genericas com
   !important (ex.: body.cifranet-shell h2/p) e vence o CSS desta pagina. Por isso
   as cores do cartao da proxima Missa usam o prefixo body.cifranet-shell.page-index,
   que tem especificidade maior. */

/* 1) Cartao da proxima Missa: texto legivel sobre o fundo azul */
body.cifranet-shell.page-index .home-missa-next{background:#f8fbff!important}
body.cifranet-shell.page-index .home-missa-next .home-missa-card{background:linear-gradient(135deg,#0a3a6b 0%,#0d5c9e 58%,#1273b5 100%)!important;border-color:#2b7bb9!important;box-shadow:0 16px 38px rgba(10,58,107,.2)!important}
body.cifranet-shell.page-index .home-missa-next .home-missa-card h2{color:#fff!important;font-size:clamp(24px,3vw,32px)!important;font-weight:900!important;line-height:1.08!important;letter-spacing:-.7px!important}
body.cifranet-shell.page-index .home-missa-next .home-missa-date{color:#d7ebff!important;font-weight:800!important}
body.cifranet-shell.page-index .home-missa-next .home-missa-eyebrow{color:#fff!important;background:rgba(255,255,255,.2)!important;border:1px solid rgba(255,255,255,.36)}
body.cifranet-shell.page-index .home-missa-next .home-missa-moments span{color:#fff!important;background:rgba(255,255,255,.16)!important;border-color:rgba(255,255,255,.3)!important;font-weight:600}
body.cifranet-shell.page-index .home-missa-next .home-missa-action a{color:#fff!important;min-height:52px;font-size:14px;border-radius:14px}
body.cifranet-shell.page-index .home-missa-next .home-missa-action{min-width:240px;max-width:300px}
body.cifranet-shell.page-index .home-missa-next .home-missa-action small{color:#e4f1ff!important;max-width:290px;margin:0 auto;line-height:1.4!important}

/* 2) Cabecalho de secao e botao "Ver todas" no mesmo padrao */
.home-section-head{gap:18px;margin-bottom:20px}
.home-section-head h2{margin:0 0 4px;font-size:24px}
.home-see-all{padding:9px 15px;border:1px solid #cfd8e3;border-radius:999px;background:#fff;font-size:12.5px;font-weight:800}
.home-video-card,.home-repertoire-card{border:1px solid #e6e9ef;border-radius:14px}

/* 3) Cifras em alta no computador: capa maior e cartao com contorno */
.trending-row{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.trending-item{grid-template-columns:20px 64px minmax(0,1fr);gap:8px;padding:7px 8px;border:1px solid #eef1f5;border-radius:12px;background:#fff;transition:border-color .15s ease,box-shadow .15s ease}
.trending-item:hover{border-color:#ffd0a8;box-shadow:0 10px 22px rgba(15,39,71,.07)}
.trending-item:before{font-size:22px}
.trending-item img{width:64px!important;height:64px!important;border-radius:10px}
.trending-copy strong{font-size:14px}
.trending-copy span{margin-top:5px;color:#475569;font-size:12.5px}

/* 4) Celular: atalhos 2x2, cifras em alta em grade com capa grande,
      artistas em 2 linhas de 5 e repertorios/videos em coluna unica */
@media(max-width:640px){
    .home-shortcuts .container{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
    .home-shortcuts a{min-height:56px;padding:10px 12px;border-bottom:1px solid #f0f0f0;font-size:13px}
    .home-shortcuts a:nth-child(2n){border-right:0}
    .home-shortcuts a:nth-child(n+3){border-bottom:0}
    .home-section{padding:22px 0}
    .home-section-head{align-items:flex-end;gap:10px;margin-bottom:16px}
    .home-section-head h2{font-size:20px}
    .home-section-head p{font-size:12.5px;line-height:1.4}
    .home-see-all{padding:8px 12px;font-size:11.5px}
    .trending-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;overflow:visible}
    .trending-item{display:block;position:relative;padding:0;border:1px solid #e6e9ef;border-radius:14px;overflow:hidden;background:#fff}
    .trending-item:before{position:absolute;left:9px;top:9px;z-index:1;display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--home-orange);color:#fff;font-size:12.5px;line-height:1;box-shadow:0 4px 10px rgba(0,0,0,.22)}
    .trending-item img{width:100%!important;height:auto!important;aspect-ratio:1/1;border-radius:0;display:block}
    .trending-copy{display:block;padding:10px 11px 12px}
    .trending-copy strong{font-size:14px;white-space:normal;line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
    .trending-copy span{margin-top:5px;font-size:12px;color:#475569}
    .artist-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;row-gap:14px;overflow:visible}
    .artist-card img{width:62px!important;height:62px!important;margin-bottom:7px}
    .artist-card span{font-size:12px}
    .home-video-grid{grid-template-columns:1fr;gap:14px}
    .home-repertoire-grid{display:grid;grid-template-columns:1fr;gap:14px;overflow:visible;padding:0;scroll-snap-type:none}
    .home-repertoire-card{flex:none}
    .home-repertoire-card h3,.home-video-card h3{font-size:15.5px}
}