/* Orações (/pt/oracoes · /en/prayers) — redesenho de 29/10/2026, no vocabulário
   das Ladainhas e das Novenas: as quatro portas ganham a mesma sombra quente e
   o mesmo "flutuar"; o Tempo litúrgico e o "Mais para rezar", que eram caixas só
   de texto, viram cartões com a pintura de cada um. No celular, carris. */

/* as portas */
.pr-doors .pr-door{border:1px solid rgba(184,134,11,.16);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 22px 44px -26px rgba(61,44,23,.55),0 4px 12px -8px rgba(61,44,23,.25);
  transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s,border-color .3s}
.pr-doors .pr-door:hover,.pr-doors .pr-door:focus-visible{transform:translateY(-8px);border-color:rgba(184,134,11,.45);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 36px 60px -30px rgba(61,44,23,.65),0 8px 18px -10px rgba(110,84,16,.35)}
.pr-doors .pr-door:focus-visible{outline:2px solid #b8860b;outline-offset:3px}
.pr-doors .pr-door:active{transform:translateY(-3px) scale(.995)}

/* o tempo litúrgico e o "mais para rezar": largura dos cartões */
#tempo-liturgico .pr-wrap,.pr-sec:has(.pr-tiles) .pr-wrap{max-width:1180px}
.pr-tiles-h{display:flex;align-items:center;gap:1rem;margin:2rem 0 1.1rem;font-family:var(--ff-heading);font-size:.74rem;font-weight:400;
  letter-spacing:.2em;text-transform:uppercase;color:#6e5410}
.pr-tiles-h::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(184,134,11,.45),transparent)}
.pr-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,2vw,1.5rem)}

.pr-tile{--sh:0 1px 0 rgba(255,255,255,.9) inset,0 18px 36px -24px rgba(61,44,23,.55),0 3px 10px -7px rgba(61,44,23,.25);
  display:grid;grid-template-columns:38% minmax(0,1fr);min-height:150px;border-radius:18px;overflow:hidden;background:#fffdf8;color:inherit;
  text-decoration:none;border:1px solid rgba(184,134,11,.16);box-shadow:var(--sh);
  transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s,border-color .3s}
.pr-tile[hidden]{display:none}
.pr-tile:hover,.pr-tile:focus-visible{transform:translateY(-6px);border-color:rgba(184,134,11,.45);
  box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 30px 50px -28px rgba(61,44,23,.65),0 8px 16px -10px rgba(110,84,16,.35)}
.pr-tile:focus-visible{outline:2px solid #b8860b;outline-offset:3px}
.pr-tile:active{transform:translateY(-2px) scale(.99)}
.pr-tile-img{position:relative;display:block;overflow:hidden;background:#2a1f15}
.pr-tile-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.92);
  transition:transform 1.1s cubic-bezier(.2,.7,.2,1),filter .6s}
.pr-tile:hover .pr-tile-img img{transform:scale(1.07);filter:saturate(1.05)}
.pr-tile-img::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(21,16,12,0) 70%,rgba(21,16,12,.18));pointer-events:none}
.pr-tile-b{position:relative;display:flex;flex-direction:column;padding:1rem 1.1rem .9rem}
.pr-tile b{display:block;font-family:var(--ff-heading);font-size:1.02rem;line-height:1.25;color:#2a1f15;text-wrap:balance}
.pr-tile-s{display:block;margin-top:.35rem;font-size:.9rem;line-height:1.45;color:#5a4e44;text-wrap:pretty}
.pr-tile-go{display:grid;place-items:center;align-self:flex-end;margin-top:auto;width:28px;height:28px;border-radius:50%;
  border:1px solid rgba(184,134,11,.4);font-size:.95rem;color:#6e5410;transition:background .3s,color .3s,transform .3s}
.pr-tile:hover .pr-tile-go{background:#b8860b;color:#fffdf8;transform:translateX(3px)}

@media (max-width:1000px){.pr-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* celular: cartões verticais num carril que se desliza */
@media (max-width:700px){
  .pr-tiles{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:66%;overflow-x:auto;scroll-snap-type:x mandatory;
    margin:0 calc(-1 * var(--sp-md,1rem));padding:.3rem var(--sp-md,1rem) 1.4rem;scroll-padding:0 var(--sp-md,1rem);scrollbar-width:none;gap:.85rem}
  .pr-tiles::-webkit-scrollbar{display:none}
  .pr-tile{grid-template-columns:none;grid-template-rows:auto 1fr;scroll-snap-align:start;min-height:0}
  .pr-tile-img{aspect-ratio:4/3}
  .pr-tile:hover,.pr-tile:focus-visible{transform:none}
  .pr-doors .pr-door:hover{transform:none}
}
@media (prefers-reduced-motion:reduce){
  .pr-tile,.pr-tile-img img,.pr-doors .pr-door{transition:none}
  .pr-tile:hover,.pr-doors .pr-door:hover{transform:none}
}