/* ==========================================================================
   THE UNITY CHURCH — RESOURCES (SERMONS) PAGE
   Page-specific section styles only. Loads after foundation.css.
   ========================================================================== */

.resources-section { padding: var(--sp-section) clamp(1.25rem, 4vw, 3rem); max-width: 1300px; margin: 0 auto; }
.resources-head { text-align: center; max-width: 56ch; margin: 0 auto var(--sp-12); }
.resources-head h2 { font-size: var(--text-2xl); font-weight: 600; letter-spacing: -0.015em; margin-bottom: var(--sp-3); }
.resources-head h2 i { font-size: 0.55em; color: var(--wine); margin-right: 0.25em; vertical-align: middle; }
.resources-head p { color: var(--ink-soft); }

/* Sermons */
.sermon-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--sp-6); }
.video-card { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); background: #fff; }
.video-card iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; display: block; }
.video-card .video-info { padding: var(--sp-4) var(--sp-5); }
.video-card h3 { font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.01em; }

/* Devotionals */
.devotionals { background: var(--cream-deep); }
.devotional-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--sp-6); max-width: 1000px; margin: 0 auto; }
.devotional-card { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: var(--sp-8); text-align: center; }
.devotional-card i { font-size: 1.75rem; color: var(--wine); margin-bottom: var(--sp-4); }
.devotional-card h4 { font-size: var(--text-lg); font-weight: 600; margin-bottom: var(--sp-2); }
.devotional-card p { color: var(--ink-soft); font-size: var(--text-sm); margin-bottom: var(--sp-6); }

/* Music */
.music-section { background: var(--ink); color: var(--cream); text-align: center; }
.music-section .resources-head h2 { color: var(--cream); }
.music-section .resources-head p { color: rgba(250, 246, 238, 0.75); }
.music-grid { display: flex; justify-content: center; align-items: center; gap: var(--sp-8); flex-wrap: wrap; max-width: 800px; margin: 0 auto; }
.music-card {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background-size: cover;
  background-position: center;
  border-radius: var(--r-lg);
  width: 220px;
  height: 220px;
  text-decoration: none;
  transition: transform 0.4s var(--ease-out-quint);
  position: relative;
  overflow: hidden;
}
.music-card::after {
  content: attr(data-title);
  position: absolute;
  inset: auto 0 0 0;
  text-align: center;
  color: var(--cream);
  font-weight: 700;
  font-size: var(--text-sm);
  background: linear-gradient(0deg, rgba(11, 10, 9, 0.85), transparent);
  padding: var(--sp-6) 0 var(--sp-3);
}
@media (hover: hover) and (pointer: fine) {
  .music-card:hover { transform: translateY(-6px); }
}