/* Styles for the main page only */
.home { padding: 4px; }
.home-row { display: grid; gap: 8px; margin-bottom: 8px; }
.split { grid-template-columns: 1fr 1fr; }   /* two columns, stacks on phones */
.pair  { grid-template-columns: 1fr 1fr; }   /* two columns, always */
.stack { display: grid; gap: 8px; align-content: start; }

.jornada img { width: 100%; height: auto; }

/* Two-layer banners: the text image (.txt) sets the size and stays still;
   the background (.bg) sits behind it and moves only on hover. */
.banner { position: relative; display: block; overflow: hidden; background: linear-gradient(135deg, var(--navy), #1b3a8f); }
.banner .txt { position: relative; z-index: 1; width: 100%; height: auto; }
.banner .bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s ease; }
.banner:hover .bg, .banner:focus-within .bg { transform: scale(1.1); }
/* Banners that keep a still background (only their buttons react) */
.banner.no-zoom:hover .bg, .banner.no-zoom:focus-within .bg { transform: none; }

/* Shown only when an image is missing, so the layout keeps its shape */
.banner:not(:has(.txt)) { aspect-ratio: 2.9 / 1; }
.pair .banner:not(:has(.txt)) { aspect-ratio: 1.45 / 1; }
.banner.wide:not(:has(.txt)) { aspect-ratio: 4.8 / 1; }
.banner .fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; color: #fff; font-weight: 700; font-size: clamp(16px, 2.4vw, 34px); line-height: 1.1; }
.banner:has(.txt) .fallback { display: none; }

/* TV and Radio buttons over the Sintonízate banner */
.tune { position: absolute; z-index: 2; top: 75%; left: 41.6%; width: 50%; transform: translateY(-50%); display: flex; }
.tune a { flex: 1; padding: 0 3%; }
.tune img { width: 100%; height: auto; transition: transform .3s; }
.tune a:hover img { transform: scale(1.08); }

/* Prayers row */
.devocionales { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 8px; }
.devocionales a { display: block; overflow: hidden; background: #3085a3; }
.devocionales img { width: 100%; height: auto; transition: transform .35s; }
.devocionales a:hover img { transform: scale(1.12); }

/* Carousel */
.carousel { position: relative; overflow: hidden; background: var(--navy); }
.slides { display: flex; transition: transform .8s ease; }
.slide { flex: 0 0 100%; }
.slide img { width: 100%; height: auto; }
.car-btn { position: absolute; top: 50%; transform: translateY(-50%); background: none; border: 0; color: #fff; font-size: 26px; cursor: pointer; padding: 10px 18px; z-index: 2; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.car-btn.prev { left: 4px; }
.car-btn.next { right: 4px; }
.dots { position: absolute; bottom: 15px; left: 0; right: 0; display: flex; justify-content: center; gap: 10px; z-index: 2; }
.dots button { width: 10px; height: 10px; border-radius: 50%; border: 0; padding: 0; background: rgba(255,255,255,.5); cursor: pointer; }
.dots button.on { background: #fff; }

/* Phones: one column, in this order:
   TV y Radio, 73, Eventos, Noel Díaz, Tu ayuda, Vaticano | Evangelio,
   prayers in 2 columns, Quiénes somos, slider */
@media (max-width: 767px) {
  .split { grid-template-columns: 1fr; }
  .split > .stack { display: contents; }
  .m-order-1 { order: 1; }
  .m-order-2 { order: 2; }
  .m-order-3 { order: 3; }
  .m-order-4 { order: 4; }
  .devocionales { grid-template-columns: 1fr 1fr; }
}