/* Tema "Pedra e brasa" para o devocional "De volta a Ai": areia de pedra clara, carvão,
   cinza-ardósia e brasa, com uma cor de destaque para cada dia. Toda regra começa em .tema.
   Fontes: Zilla Slab (títulos) e Alegreya (texto). */

.tema {
  --carvao: #1d1a24;
  --ardosia: #3b3650;
  --brasa: #ff8a3d;
  --brasal: #ffd08a;
  --areia: #f3ede1;
  --tinta: #26222d;
  --ac: #a8481c;
  --fd: #fbf1e4;
  --f-titulo: "Zilla Slab", Georgia, serif;
  --f-texto: "Alegreya", Georgia, serif;
  background: var(--areia);
  color: var(--tinta);
}
.tema .tema-hero, .tema .tema-semana, .tema .leitura-tematica { font-family: var(--f-texto); }

.tema [data-dia="1"] { --ac: #2f5a8f; --fd: #eaf0f8; }
.tema [data-dia="2"] { --ac: #8a3d6a; --fd: #f8ecf3; }
.tema [data-dia="3"] { --ac: #5d6b24; --fd: #f2f4e2; }
.tema [data-dia="4"] { --ac: #1d6670; --fd: #e6f4f4; }
.tema [data-dia="5"] { --ac: #a8381f; --fd: #fbece6; }
.tema [data-dia="6"] { --ac: #495a72; --fd: #ecf0f5; }
.tema [data-dia="7"] { --ac: #4a3f8f; --fd: #eeecf9; }

/* Cabeçalho: noite de cumes e brasa no horizonte */
.tema .tema-hero { background: linear-gradient(180deg, #14122a 0%, #3a2a4c 60%, #a8553f 100%); color: #f7ecdc; border-bottom: .3rem solid var(--brasa); }
.tema .tema-hero-in { max-width: 64rem; margin: 0 auto; padding: 2rem 1.25rem 2.75rem; display: grid; gap: 2rem; align-items: center; }
@media (min-width: 768px) { .tema .tema-hero-in { grid-template-columns: 1fr 15.5rem; padding: 3.5rem 1.5rem 4rem; gap: 3rem; } }
.tema .tema-trilha { display: flex; flex-wrap: wrap; gap: .5rem; font-size: .9rem; color: #e6d9e8; margin-bottom: 1.75rem; }
.tema .tema-trilha a { color: #e6d9e8; text-decoration: none; }
.tema .tema-trilha a:hover { color: var(--brasal); text-decoration: underline; }
.tema .tema-sup { font-family: var(--f-titulo); font-size: .78rem; font-weight: 700; letter-spacing: .32em; text-transform: uppercase; color: var(--brasal); margin: 0 0 1rem; }
.tema .tema-hero h1 { font-family: var(--f-titulo); font-weight: 700; font-size: clamp(2.4rem, 8vw, 4rem); line-height: 1.04; color: #fff6e6; margin: 0; text-shadow: 0 2px 14px rgba(0, 0, 0, .5); }
.tema .tema-sub { font-style: italic; color: var(--brasal); font-size: 1.3rem; line-height: 1.35; max-width: 32rem; margin: 1.1rem 0 0; }
.tema .tema-meta { display: flex; flex-wrap: wrap; gap: .25rem .75rem; font-size: 1rem; color: #e6d9e8; margin: 1.5rem 0 0; }
.tema .tema-progresso { margin-top: 1.5rem; max-width: 22rem; font-size: 1rem; color: #f7ecdc; }
.tema .tema-progresso p { margin: 0 0 .5rem; }
.tema .tema-barra { height: .5rem; border-radius: 0; background: rgba(255, 255, 255, .2); overflow: hidden; }
.tema .tema-barra > div { height: 100%; background: linear-gradient(90deg, #d9531e, var(--brasal)); transition: width .3s; }
.tema .tema-baixar { display: inline-block; margin-top: 1.4rem; padding: .6rem 1.2rem; border: 1.5px solid var(--brasal); border-radius: 0; color: var(--brasal); font-weight: 700; text-decoration: none; transition: background .15s, color .15s; }
.tema .tema-baixar:hover { background: var(--brasal); color: var(--carvao); }
.tema .tema-capa { justify-self: center; width: min(15.5rem, 70%); overflow: hidden; box-shadow: 0 0 0 .25rem var(--brasa), 0 1.5rem 3rem -1rem rgba(0, 0, 0, .8); }
.tema .tema-capa img { display: block; width: 100%; height: auto; }
@media (max-width: 767px) { .tema .tema-capa { width: 11.5rem; } }

/* Corpo */
.tema .tema-corpo { max-width: 44rem; margin: 0 auto; padding: 2.5rem 1.1rem 4rem; }
@media (min-width: 640px) { .tema .tema-corpo { padding: 3.5rem 1.5rem 5rem; } }

/* A semana: lajes de ardósia numeradas */
.tema .tema-semana { margin: 0 0 3rem; padding: 1.6rem 1.2rem .8rem; background: var(--carvao); color: #f7ecdc; border-top: .3rem solid var(--brasa); }
.tema .tema-semana h2 { font-family: var(--f-titulo); font-weight: 700; font-size: 1.5rem; text-align: center; color: var(--brasal); margin: 0 0 1rem; }
.tema .tema-semana ol { list-style: none; margin: 0; padding: 0; }
.tema .tema-semana li { border-bottom: 1px dashed rgba(255, 208, 138, .3); }
.tema .tema-semana li:last-child { border-bottom: 0; }
.tema .tema-semana a { display: grid; grid-template-columns: 2.6rem 1fr; column-gap: .9rem; align-items: center; padding: .8rem .1rem; text-decoration: none; color: inherit; }
.tema .tema-semana a:not([href]) { cursor: default; }
.tema .tema-semana b { grid-row: span 2; width: 2.6rem; height: 2.6rem; background: var(--ac); color: #fff; font: 700 1.2rem/2.6rem "Zilla Slab", serif; text-align: center; clip-path: polygon(8% 0, 100% 6%, 94% 100%, 0 92%); }
.tema .tema-semana .nome { font-family: var(--f-titulo); font-weight: 600; font-size: 1.1rem; line-height: 1.25; color: #fff4dc; }
.tema .tema-semana em { font-size: .95rem; color: var(--brasal); }
.tema .tema-semana a[href]:hover .nome { text-decoration: underline; }

/* Texto de leitura */
.tema .leitura-tematica { font-size: 1.2rem; line-height: 1.65; }
.tema .leitura-tematica.reading-sm { font-size: 1.08rem; }
.tema .leitura-tematica.reading-lg { font-size: 1.38rem; }
.tema .leitura-tematica p { margin: 0 0 1em; overflow-wrap: break-word; }
.tema .leitura-tematica a { color: var(--ac); text-decoration: underline; text-underline-offset: 3px; word-break: break-word; }

/* Introdução */
.tema .intro .ilus { margin: 0 0 1.6rem; overflow: hidden; border-bottom: .3rem solid var(--brasa); }
.tema .intro .ilus img, .tema .dia .ilus img { display: block; width: 100%; height: auto; }
.tema .intro .rotulo { font-family: var(--f-titulo); font-size: .78rem; font-weight: 700; letter-spacing: .32em; text-transform: uppercase; color: #a8481c; margin: 0 0 .8rem; }
.tema .intro-texto > p:first-child::first-letter { float: left; font-family: var(--f-titulo); font-weight: 700; font-size: 3.6em; line-height: .84; color: #a8481c; padding: .06em .1em 0 0; }

/* Um cartão por dia: laje com o número em pedra facetada */
.tema .dia { margin-top: 3rem; background: var(--fd); border: 1px solid rgba(38, 34, 45, .15); border-top: .35rem solid var(--ac); box-shadow: .35rem .35rem 0 rgba(38, 34, 45, .12); scroll-margin-top: 5rem; overflow: hidden; }
.tema .dia .arte { position: relative; margin-bottom: 0; }
.tema .dia .ilus { margin: 0; }
.tema .dia .num { position: absolute; left: 1.1rem; bottom: -2.3rem; z-index: 2; width: 4.7rem; height: 4.7rem; background: var(--ac); color: #fff; text-align: center; clip-path: polygon(6% 0, 100% 5%, 95% 100%, 0 94%); }
.tema .dia .num small { display: block; font-size: .6rem; font-weight: 700; letter-spacing: .3em; padding-left: .3em; margin-top: .65rem; opacity: .95; }
.tema .dia .num b { display: block; font-family: var(--f-titulo); font-weight: 700; font-size: 2rem; line-height: 1; margin-top: .05rem; }
.tema .dia-txt { padding: 0 1.2rem 1.5rem; }
@media (min-width: 640px) { .tema .dia-txt { padding: 0 2rem 2rem; } .tema .dia .num { left: 1.6rem; } }
.tema .dia h2 { margin: .9rem 0 1rem; padding-left: 5.6rem; min-height: 2.4rem; display: flex; align-items: center; font-family: var(--f-titulo); font-weight: 700; font-size: clamp(1.35rem, 4.6vw, 1.7rem); line-height: 1.12; color: var(--tinta); }
@media (min-width: 640px) { .tema .dia h2 { padding-left: 6rem; } }
.tema .dia .leitura { display: inline-block; margin: 1.1rem 0 1rem; padding: .2rem .9rem; border-left: .3rem solid var(--ac); background: rgba(255, 255, 255, .6); color: var(--ac); font-style: italic; font-size: 1.05rem; font-weight: 600; }
.tema .dia .leitura span, .tema .dia .refletir span { margin-right: .6rem; font-family: var(--f-titulo); font-style: normal; font-weight: 700; font-size: .7rem; letter-spacing: .24em; text-transform: uppercase; }
.tema .dia .corpo > p:first-child::first-letter { float: left; font-family: var(--f-titulo); font-weight: 700; font-size: 3.2em; line-height: .84; color: var(--ac); padding: .06em .1em 0 0; }
@media (min-width: 640px) { .tema .dia .corpo p { text-align: justify; hyphens: auto; } }
.tema .dia .refletir { margin-top: 1.4rem; padding: .9rem 1.1rem 1rem; border: 1.5px dashed var(--ac); background: rgba(255, 255, 255, .7); font-style: italic; color: #2f2a38; }
.tema .dia .refletir span { display: block; color: var(--ac); margin: 0 0 .3rem; }
.tema .dia .refletir p { margin: 0; }
.tema .dia .concluir { margin-top: 1.6rem; }
.tema .dia .concluir button { cursor: pointer; padding: .6rem 1.2rem; border: 1.5px solid var(--ac); border-radius: 0; background: transparent; color: var(--ac); font: 700 1rem var(--f-texto); transition: background .15s, color .15s; }
.tema .dia .concluir button:hover, .tema .dia .concluir button.feito { background: var(--ac); color: #fff; }

/* Nota de fontes */
.tema .nota { margin-top: 3rem; padding: 1.2rem 1.3rem; background: var(--carvao); color: #e6dcea; font-size: .95rem; line-height: 1.5; border-top: .25rem solid var(--brasa); }
.tema .nota p { margin: 0 0 .6rem; }
.tema .nota a { color: var(--brasal); word-break: break-all; }

.tema .tema-corpo > :not(.tema-semana):not(.leitura-tematica) { margin-top: 2.5rem; }
@media (prefers-reduced-motion: reduce) { .tema .tema-baixar, .tema .tema-barra > div, .tema .dia .concluir button { transition: none; } }