/* Portals row — large routing cards. Ported from the design mockups; the
   legacy --fel/--lib accent slots are mapped to the clean --accent system so a
   single component re-skins per section (.section--worship|library|audio|…). */

.portals-sec { padding: 64px 0 80px; }
.portals-grid {
  display: grid;
  grid-template-columns: repeat(var(--portal-cols, 2), 1fr);
  gap: 36px;
}

.portal-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: 24px;
  background: #fff; overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  cursor: pointer; text-decoration: none;
}
.portal-card:hover {
  transform: translateY(-6px);
  border-color: var(--accent);
  box-shadow: 0 32px 60px rgba(165, 60, 126, 0.20);
}

.portal-art {
  height: 360px; position: relative; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  padding: 36px;
}
.portal-art--songs { background: linear-gradient(135deg, #4A1738 0%, #A862C9 50%, #A53C7E 100%); }
.portal-art--learn { background: linear-gradient(135deg, #2A1A4A 0%, #6B3A8E 60%, #A53C7E 100%); align-items: flex-end; }
.portal-art--generic { background: linear-gradient(135deg, var(--accent-deep) 0%, var(--accent) 100%); }
.portal-art--custom { background: linear-gradient(135deg, var(--accent-deep) 0%, var(--accent) 100%); padding: 0; }
.portal-custom-art { width: 100%; height: 100%; }
.portal-custom-art img { width: 100%; height: 100%; object-fit: cover; display: block; }

.portal-body { padding: 44px 48px 48px; }
.portal-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 13px; font-weight: 700; color: var(--accent);
  letter-spacing: 0.4px; margin-bottom: 20px;
}
.portal-ico { display: inline-flex; }
.portal-count {
  font-size: 11.5px; font-weight: 700;
  padding: 3px 10px; border-radius: 999px;
  background: var(--accent-tint); color: var(--accent);
  /* The mockup keeps the count in the markup but hides it across all
     breakpoints/languages; the value stays editable in the data model. */
  display: none;
}
.portal-ttl {
  font-family: var(--serif); font-weight: 500;
  font-size: 30px; line-height: 1.25; letter-spacing: -0.6px;
  color: var(--ink); margin: 0 0 14px;
}
.portal-desc { font-size: 16px; line-height: 1.7; color: var(--ink-2); margin: 0 0 28px; }
.portal-cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 600; color: var(--accent);
}
.portal-card:hover .portal-cta { gap: 10px; }

/* Decorative art — song stack (songs variant). */
.wt-song-stack { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; position: relative; }
.wt-song-card { width: 200px; height: 280px; background: #fff; border-radius: 12px; box-shadow: 0 24px 48px rgba(74,23,56,0.32), 0 8px 16px rgba(74,23,56,0.18); padding: 18px 16px; transform: rotate(var(--rot, 0deg)) translateY(var(--y, 0)); position: relative; z-index: 1; flex-shrink: 0; margin: 0 -22px; }
.wt-song-card.front { z-index: 3; box-shadow: 0 32px 56px rgba(74,23,56,0.40), 0 12px 24px rgba(74,23,56,0.22); width: 220px; height: 300px; }
.wt-song-key { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; padding: 4px 10px; border-radius: 8px; background: var(--accent-deep); color: #fff; font-family: var(--serif); font-size: 18px; font-weight: 500; margin-bottom: 14px; }
.wt-song-key.alt { background: var(--accent); }
.wt-song-lines { display: flex; flex-direction: column; gap: 14px; }
.wt-song-lines > span { position: relative; height: 18px; background: linear-gradient(90deg, rgba(186,56,133,0.10) 0%, rgba(186,56,133,0.04) 100%); border-radius: 4px; display: block; }
.wt-song-lines > span > i { position: absolute; top: -16px; color: var(--accent-deep); font-style: normal; font-size: 10px; font-weight: 700; font-family: var(--sans); }

/* Decorative art — piano keys (learn variant). */
.wt-learn-keys { display: flex; align-items: flex-end; gap: 2px; height: 140px; width: 100%; justify-content: center; }
.wt-learn-keys .wt-key-w { background: #fff; width: 26px; border-radius: 0 0 4px 4px; box-shadow: 0 6px 12px rgba(0,0,0,0.20); }
.wt-learn-keys .wt-key-b { background: #1a1a1a; width: 16px; height: 64%; border-radius: 0 0 3px 3px; margin: 0 -8px; position: relative; z-index: 1; }
.wt-learn-keys .wt-key-w:nth-child(1) { height: 100%; }
.wt-learn-keys .wt-key-w:nth-child(3) { height: 96%; }
.wt-learn-keys .wt-key-w:nth-child(5) { height: 102%; }
.wt-learn-keys .wt-key-w:nth-child(7) { height: 98%; }
.wt-learn-keys .wt-key-w:nth-child(9) { height: 100%; }
.wt-learn-keys .wt-key-w:nth-child(11) { height: 94%; }
.wt-learn-keys .wt-key-w:nth-child(13) { height: 100%; }

/* Decorative art — book cover stack (books variant) + quote (articles). */
.portal-art--books { background: linear-gradient(135deg, #5D3A14 0%, #E89A3C 100%); padding: 0; }
.portal-art--articles { background: linear-gradient(135deg, #B0701F 0%, #6B5CC9 100%); padding: 36px; }

/* Decorative art — square cover stacks (Audio: albums + podcasts variants).
   Gradients are taken verbatim from the mockup (literal, not the section
   accent); the covers are square album/show art instead of 5/8 book spines. */
.portal-art--albums { background: #B5A48A url('/themes/custom/kalameh_webapp/kalameh/assets/beige.jpg') center/cover no-repeat; }
.portal-art--podcasts { background: #B5A48A url('/themes/custom/kalameh_webapp/kalameh/assets/beige.jpg') center/cover no-repeat; padding: 36px; }
.portal-art--albums .ps-book { aspect-ratio: 1 / 1; border-radius: 8px; }
.portal-art--podcasts .ps-book { aspect-ratio: 1 / 1; border-radius: 10px; }
.portal-stack { display: flex; gap: 12px; align-items: flex-end; padding: 32px; }
.ps-book { width: 112px; aspect-ratio: 5/8; border-radius: 3px; background-size: cover; background-position: center; background-color: rgba(255,255,255,0.12); box-shadow: 0 16px 32px rgba(0,0,0,0.32), 0 6px 12px rgba(0,0,0,0.22); transform: rotate(var(--rot, 0deg)); }
.ps-book:nth-child(1) { transform: rotate(-6deg) translateY(8px); }
.ps-book:nth-child(2) { transform: rotate(-2deg) translateY(-4px); }
.ps-book:nth-child(3) { transform: rotate(2deg) translateY(-8px); }
.ps-book:nth-child(4) { transform: rotate(5deg) translateY(-2px); }
.ps-book:nth-child(5) { transform: rotate(8deg) translateY(6px); }
.portal-quote { background: rgba(255,255,255,0.08); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.15); border-radius: 16px; padding: 32px 34px; color: #fff; max-width: 440px; }
.pq-mark { font-family: var(--serif); font-size: 72px; line-height: 1; color: rgba(255,255,255,0.40); display: block; }
.pq-body { font-family: var(--serif); font-size: 19px; line-height: 1.55; margin: 4px 0 14px; font-weight: 500; }
.pq-src { font-size: 12.5px; color: rgba(255,255,255,0.65); margin: 0; }
[dir="rtl"] .pq-body { font-family: var(--farsi); }

/* RTL: Farsi headings + flipped chevron. */
[dir="rtl"] .portal-ttl { font-family: var(--farsi); font-weight: 700; letter-spacing: 0; }
[dir="rtl"] .portal-cta svg { transform: scaleX(-1); }

@media (max-width: 980px) {
  .portals-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .portals-sec { padding: 40px 0 48px; }
  .portal-card .portal-art { height: 200px; padding: 20px; }
  .portal-body { padding: 24px 24px 28px; }
  .portal-ttl { font-size: 22px; line-height: 1.2; margin-bottom: 8px; }
  .portal-desc { font-size: 14px; line-height: 1.55; margin-bottom: 14px; }
}