/* Prayer Scene */
.prayer-scene__pin { position: sticky; top: var(--header-height, 0px); z-index: 1; }
.prayer-scene__pin > .container { padding-bottom: 0; }

/* Prayer */
.prayer { position: relative; isolation: isolate; padding-block: 140px; background-color: #000; }
.prayer::before { position: absolute; inset: 0; background: url("../../../images/02_jeoldusan/martyr-bg.webp") center / cover no-repeat; opacity: 0.5; content: ""; }
.prayer__content { position: relative; z-index: 1; margin-inline: auto; max-width: 660px; color: var(--color-text-inverse); word-break: break-word; }
.prayer__title { font-size: var(--font-size-title-page); font-weight: 700; line-height: var(--line-height-title-page); }
.prayer__body { height: 572px; overflow: hidden; font-size: var(--font-size-h2); font-weight: 500; line-height: var(--line-height-h2); }
.prayer__track { will-change: transform; }
.prayer__paragraph + .prayer__paragraph { margin-top: var(--space-60); }
.prayer-scene.is-ready .prayer__paragraph { opacity: 0; transform: translateY(24px); }

/* Martyr */
.martyr { padding-top: var(--space-60); }
.martyr__intro { margin-bottom: var(--space-100); color: var(--color-text-muted); text-align: center; }
.martyr__intro p { display: flex; flex-direction: column; align-items: center; font-size: var(--font-size-h1); font-weight: 700; line-height: var(--line-height-h1); }
.martyr__intro p:nth-child(2) { margin-top: var(--space-50); }
.martyr__intro p > span { display: flex; flex-wrap: wrap; justify-content: center; }

/* Martyr List */
.martyr__list { --martyr-card-width: clamp(280px, calc(280px + (100vw - 1024px) * 60 / 496), 340px); display: grid; grid-template-columns: repeat(4, var(--martyr-card-width)); justify-content: center; gap: var(--space-50) clamp(20px, calc(20px + (100vw - 1024px) * 12 / 496), 32px); }
.martyr__link { display: flex; flex-direction: column; }
.martyr__thumb { aspect-ratio: 340 / 437; overflow: hidden; }
.martyr__thumb img { width: 100%; height: 100%; object-fit: cover; transition: all 0.5s ease-in-out; -webkit-user-drag: none; user-select: none; }
.martyr__link:hover .martyr__thumb img { transform: scale(1.1); }
.martyr__name { padding-top: var(--space-16); color: var(--color-text-muted); font-size: var(--font-size-h2); font-weight: 700; line-height: var(--line-height-h2); text-align: center; }
.martyr__link:hover .martyr__name { color: var(--color-tab-active); }

@media (max-width: 1519px) {
  .martyr__list { grid-template-columns: repeat(3, var(--martyr-card-width)); }
}

@media (max-width: 943px) {
  .martyr__list { grid-template-columns: repeat(2, var(--martyr-card-width)); }
}

@media (max-width: 768px) {
  /* Prayer */
  .prayer { padding-block: var(--space-60); }
  .prayer__content { max-width: 300px; }
  .prayer__body { height: 400px; }
  .prayer__paragraph + .prayer__paragraph { margin-top: var(--space-40); }

  /* Martyr */
  .martyr { padding-top: var(--space-80); }
  .martyr__container { padding-top: 0; }
  .martyr__intro { margin-bottom: var(--space-50); }
  .martyr__intro p:nth-child(2) { margin-top: var(--space-40); }
}

@media (max-width: 611px) {
  .martyr__list { --martyr-card-width: 340px; grid-template-columns: repeat(1, var(--martyr-card-width)); gap: var(--space-30); }
}


@media (max-width: 390px) {
  .martyr__list { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .prayer-scene { height: auto !important; }
  .prayer-scene__pin { position: static; }
  .prayer__body { height: auto; overflow: visible; }
  .prayer-scene.is-ready .prayer__paragraph { opacity: 1; transform: none; }
}