/* ==========================================================
   SANCTUARY 2.0 — COLEÇÃO DE ORAÇÕES (GRID MOSAICO)
   1 card grande destaque + cards médios, pílulas, busca
   ========================================================== */

.collection {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--s-9) var(--s-5);
}

.collection .section-header { margin-bottom: var(--s-6); }

.continue-card {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-4) var(--s-5);
  background: var(--grad-amanhecer);
  border: 1px solid rgba(212, 175, 55, 0.3);
  border-radius: var(--r-lg);
  margin-bottom: var(--s-6);
  animation: fadeUp 0.6s ease;
}

.continue-card__icon {
  width: 50px; height: 50px;
  border-radius: 50%;
  background: var(--grad-dourado);
  color: white;
  display: grid;
  place-items: center;
  font-size: 1.2rem;
  flex-shrink: 0;
  box-shadow: 0 4px 14px var(--halo-gold);
}

.continue-card__text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.continue-card__text strong {
  font-family: var(--font-cinzel);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--gold-sacred);
}

.continue-card__text span {
  font-family: var(--font-title);
  font-size: 1.05rem;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ===== MOSAIC GRID ===== */
.mosaic-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
  margin-bottom: var(--s-7);
}

.mosaic-grid > * {
  animation: fadeUp 0.6s ease both;
}

/* Card 1: destaque (full width em mobile, 2x2 em desktop) */
.mosaic-grid > :nth-child(7n+1) {
  grid-column: span 1;
  grid-row: span 1;
}

.mosaic-grid > :nth-child(7n+1) .prayer-card {
  min-height: 100%;
  background: var(--grad-amanhecer);
  border: none;
  box-shadow: var(--shadow-island);
}

.mosaic-grid > :nth-child(7n+1) .prayer-card__text {
  -webkit-line-clamp: 6;
}

.load-more {
  text-align: center;
  margin-top: var(--s-5);
}

/* ===== TABLET ===== */
@media (min-width: 768px) and (max-width: 1199px) {
  .mosaic-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--s-5);
  }

  .mosaic-grid > :nth-child(7n+1) {
    grid-column: span 2;
    grid-row: span 1;
  }
}

/* ===== DESKTOP — GRID 3 COLUNAS UNIFORME ===== */
@media (min-width: 1200px) {
  .mosaic-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-5);
    align-items: stretch;
  }
}

/* ===== SCROLL HORIZONTAL TABLET (filtros) ===== */
@media (min-width: 768px) and (max-width: 1199px) {
  .filter-pills {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    padding: var(--s-2) 0;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .filter-pills::-webkit-scrollbar { display: none; }
  .pill { flex-shrink: 0; }
}

/* ===== PÍLULAS EM GRADE NO MOBILE (≤767px) ===== */
@media (max-width: 767px) {
  .filter-pills {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--s-2);
    padding: var(--s-2) 0;
    overflow: visible;
    flex-wrap: unset;
  }
  .pill {
    justify-content: center;
    font-size: 0.78rem;
    padding: var(--s-2) var(--s-2);
    text-align: center;
    white-space: nowrap;
  }
  .pill i {
    display: none; /* Esconde ícones para caber melhor */
  }
}