/* =========================
   Daily Devotion (AI)
   White-fade theme (light card)
   ========================= */

/* Typography accents */
.devotion-kicker {
  letter-spacing: 0.08em;
  opacity: 0.85;
  color: rgba(0, 0, 0, 0.65);
}

.devotion-divider {
  height: 1px;
  background: rgba(0, 0, 0, 0.1);
}

.devotion-verse {
  border-left: 4px solid rgba(0, 0, 0, 0.2);
  padding-left: 12px;
  opacity: 0.95;
}

.devotion-body {
  line-height: 1.65;
}

.devotion-practice {
  padding-left: 18px;
}

.devotion-link {
  text-decoration: none;
  opacity: 0.9;
  color: rgba(0, 0, 0, 0.7);
}

.devotion-link:hover {
  text-decoration: underline;
  opacity: 1;
  color: rgba(0, 0, 0, 0.9);
}

/* Your HTML uses btn-outline-light — override it to match light card */
.devotion-btn-outline {
  border-color: rgba(0, 0, 0, 0.3) !important;
  color: rgba(0, 0, 0, 0.82) !important;
  background: rgba(255, 255, 255, 0.4) !important;
}

.devotion-btn-outline:hover {
  background: rgba(0, 0, 0, 0.05) !important;
  border-color: rgba(0, 0, 0, 0.4) !important;
}

/* =========================
   Expandable reflection (collapsed + white fade)
   ========================= */

.devotion-reflection {
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  transition: max-height 0.75s ease;
  will-change: max-height;
}

/* Show roughly the first 25% */
.devotion-reflection.collapsed {
  max-height: 110px;
}

/* Expanded state */
.devotion-reflection.expanded {
  max-height: 2400px; /* enough for full devotion */
}

/* White fade that hides the cutoff clearly */
.devotion-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 90px;
  pointer-events: none;
  opacity: 1;
  transition: opacity 180ms ease;

  /* Fade to WHITE */
  background: linear-gradient(
    to bottom,
    rgba(245, 245, 247, 0),
    rgba(245, 245, 247, 0.98)
  );
}

.devo-btn {
  all:unset;
  background-color: rgb(230, 230, 235);
}

.devotion-reflection.expanded .devotion-fade {
  opacity: 0;
}

/* Light glass card */
.devotion-card {
  min-width: 100%;
  color: #111;
}

.gray-bg {
  background-color: rgb(245, 245, 247);
}

/* Large screens second */
@media (min-width: 800px) {

  .devotion-card {
    min-width: 600px;
    max-width: 800px;
  }

  .devotion-reflection.collapsed {
    max-height: 140px;
  }

}