/* ==========================================================================
   Modules · photo hero + key points, video, info strip, faith explanation
   ========================================================================== */

/* ---------- Photo hero ---------- */

/*
  A photo header with the title on it and the key points directly underneath.
  The page switcher sits just above the title, so the top of the photo (faces) stays clear.
  Mobile: switcher and title sit at the bottom of the photo.
  Desktop: the photo runs full width and the copy sits on a navy shade on the left.
  Pick the crop per photo with --focus (mobile) and --focus-lg (desktop) on .Hero__media.
*/
.Hero { position: relative; background: rgb(var(--navy)); }

.Hero__top {
  position: relative;
  display: grid;
  min-block-size: clamp(290px, 78vw, 440px);
  color: #fff;
  isolation: isolate;
}

.Hero__media { position: absolute; inset: 0; z-index: -1; margin: 0; overflow: hidden; }

.Hero__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: var(--focus, 50% 35%);
}

/* Shade so the switcher and title stay legible on any photo */
.Hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgb(6 32 56 / 0.88), rgb(6 32 56 / 0.4) 40%, transparent 62%);
}

.Hero__inner {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-block: 20px 18px;
}

.Hero__copy .Switcher { margin-block-end: 12px; }

.Hero__title {
  color: #fff;
  font-size: clamp(2.15rem, 1.4rem + 3.3vw, 4.1rem);
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 2px 24px rgb(0 0 0 / 0.25);
}

.Hero__lede,
.Hero__actions { display: none; }

@media (min-width: 900px) {
  .Hero__top { min-block-size: clamp(440px, 58vh, 560px); }
  .Hero__media img { object-position: var(--focus-lg, var(--focus, 50% 35%)); }
  .Hero__media::after {
    background:
      linear-gradient(to right, rgb(6 32 56 / 0.88), rgb(6 32 56 / 0.62) 36%, rgb(6 32 56 / 0.08) 62%, transparent 72%);
  }
  .Hero__inner { justify-content: center; padding-block: 40px; }
  .Hero__copy { max-inline-size: 34rem; }
  .Hero__copy .Switcher { margin-block-end: 22px; }
  .Hero__lede {
    display: block;
    max-inline-size: 32ch;
    margin-block-start: 18px;
    color: rgb(255 255 255 / 0.9);
    font-size: clamp(1.125rem, 0.95rem + 0.4vw, 1.3rem);
    line-height: 1.45;
  }
  .Hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 28px; }
}

/* Key points under the photo: the header blue, static so they can be scanned */
.Points { background: rgb(var(--header)); color: rgb(var(--ink)); }

.Points__list {
  display: grid;
  margin-block: 0;
  padding: 4px 0;
  list-style: none;
}

.Points__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-block: 7px;
  font-size: 0.875rem;
  line-height: 1.3;
}

.Points__item + .Points__item { border-block-start: 1px solid rgb(var(--ink) / 0.12); }
.Points__item svg { inline-size: 28px; block-size: 28px; flex: none; }
.Points__item b { display: block; font-size: 0.9375rem; font-weight: 700; }

@media (min-width: 640px) and (max-width: 1099px) {
  .Points__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
  .Points__item + .Points__item { border-block-start: 0; }
  .Points__item:nth-child(n+3) { border-block-start: 1px solid rgb(var(--ink) / 0.12); }
}

@media (min-width: 1100px) {
  .Points__list { grid-template-columns: repeat(5, minmax(0, 1fr)); padding-block: 18px; }
  .Points__item { align-items: flex-start; gap: 12px; padding: 2px 18px; }
  .Points__item:first-child { padding-inline-start: 0; }
  .Points__item:last-child { padding-inline-end: 0; }
  .Points__item + .Points__item { border-block-start: 0; border-inline-start: 1px solid rgb(var(--ink) / 0.16); }
  .Points__item svg { inline-size: 32px; block-size: 32px; margin-block-start: 2px; }
}

/* ---------- Video ---------- */

.Video {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--ratio, 16 / 9);
  border-radius: var(--radius-media);
  background: rgb(var(--ink));
  box-shadow: var(--shadow-md);
  isolation: isolate;
}

.Video__poster {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform 1200ms var(--ease), filter 600ms;
}

.Video:hover .Video__poster { transform: scale(1.035); }

/*
  The whole poster is the button, but the visible control sits in the bottom-left corner
  so it never covers faces. A soft bottom gradient keeps it legible on any photo.
*/
.Video__play {
  position: absolute;
  inset: 0;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-end;
  align-items: center;
  justify-content: flex-start;
  padding: clamp(12px, 2.6vw, 20px);
  background: linear-gradient(to top, rgb(0 0 0 / 0.5), rgb(0 0 0 / 0.12) 34%, transparent 55%);
  color: #fff;
}

.Video__label {
  display: inline-flex;
  align-items: center;
  block-size: 38px;
  margin-inline-start: -20px;
  padding: 0 16px 0 30px;
  border-radius: 0 99px 99px 0;
  background: rgb(20 20 26 / 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: background-color 300ms;
}

.Video:hover .Video__label,
.Video__play:focus-visible .Video__label { background: rgb(20 20 26 / 0.75); }

.Video iframe {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  border: 0;
  z-index: 2;
}

.Video.is-playing .Video__play,
.Video.is-playing .Video__poster { visibility: hidden; }

/* Round play button with a soft pulse, anchored bottom-left on posters */
.PlayBtn {
  position: relative;
  z-index: 1;
  flex: none;
  display: grid;
  place-items: center;
  inline-size: var(--size, 52px);
  block-size: var(--size, 52px);
  border-radius: 50%;
  background: #fff;
  color: rgb(var(--ink));
  box-shadow: 0 6px 18px -4px rgb(0 0 0 / 0.55);
  transition: transform 400ms var(--ease), background-color 200ms, color 200ms;
}

/* The play glyph is already optically offset inside its 24px box, so no extra nudge */
.PlayBtn svg { inline-size: 42%; block-size: 42%; fill: currentColor; }

.PlayBtn::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: inherit;
  border: 2px solid rgb(255 255 255 / 0.85);
  animation: ring 2.4s var(--ease) infinite;
}

@keyframes ring {
  0% { opacity: 0.9; transform: scale(0.9); }
  70%, 100% { opacity: 0; transform: scale(1.45); }
}

:is(.Video, .Spot__media):hover .PlayBtn { transform: scale(1.08); background: rgb(var(--red)); color: #fff; }

.PlayBtn--sm { --size: 40px; }
.PlayBtn--sm::after { inset: -4px; }

/* ---------- Info strip ---------- */

/* Same blue as the header (main theme blue) */
.Strip {
  position: relative;
  z-index: 2;
  background: rgb(var(--header));
  color: rgb(var(--ink));
  overflow-x: clip;
}

.Strip__track {
  display: flex;
  inline-size: max-content;
  animation: marquee var(--marquee-time, 38s) linear infinite;
}

.Strip:hover .Strip__track,
.Strip:focus-within .Strip__track { animation-play-state: paused; }

.Strip__list {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0 0 0 clamp(18px, 3vw, 36px);
  list-style: none;
}

.Strip__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-inline-end: clamp(26px, 4vw, 48px);
  block-size: 56px;
  font-family: var(--font-h);
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.2rem);
  font-weight: 600;
  white-space: nowrap;
}

.Strip__item svg { inline-size: 32px; block-size: 32px; flex: none; }

.Strip__item--seal { block-size: 56px; }
.Strip__item--seal svg { inline-size: 74px; block-size: 74px; margin-block: -12px; filter: drop-shadow(0 4px 8px rgb(0 0 0 / 0.18)); animation: sway 6s var(--ease-in-out) infinite; }

@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes sway { 0%, 100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg); } }

@media (min-width: 900px) {
  .Strip__item { block-size: 64px; }
  .Strip__item--seal svg { inline-size: 84px; block-size: 84px; }
}

@media (prefers-reduced-motion: reduce) {
  .Strip { overflow-x: auto; }
  .Strip__track { animation: none; }
}

/* ---------- Faith explanation ---------- */

.Faith__grid { display: grid; gap: clamp(26px, 5vw, 64px); }

.Faith__title { margin-block-end: 14px; }

.Faith__aside { position: relative; display: grid; gap: 16px; align-content: start; }

@media (min-width: 900px) {
  .Faith__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: center; }
}

.Hadith {
  position: relative;
  margin: 0;
  padding: 26px 24px 22px;
  border-radius: var(--radius-media);
  background: rgb(var(--navy));
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}

.Hadith::before {
  content: '';
  position: absolute;
  inset: auto -40px -60px auto;
  inline-size: 200px;
  block-size: 200px;
  border-radius: 50%;
  background: rgb(var(--blue) / 0.35);
  z-index: -1;
}

.Hadith__mark {
  inline-size: 38px;
  block-size: 38px;
  fill: rgb(var(--yellow));
  margin-block-end: 10px;
}

.Hadith blockquote {
  margin: 0;
  font-family: var(--font-h);
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem);
  font-weight: 600;
  line-height: 1.32;
}

.Hadith figcaption {
  margin-block-start: 12px;
  color: rgb(255 255 255 / 0.72);
  font-size: 0.875rem;
}

.Faith__photo {
  position: relative;
  margin: 0;
  border-radius: var(--radius-media);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  aspect-ratio: 16 / 10;
}

.Faith__photo img { inline-size: 100%; block-size: 100%; object-fit: cover; }

@media (max-width: 899px) { .Faith__photo { display: none; } }

.Verse {
  margin: 18px 0;
  padding: 0;
  text-align: center;
  color: rgb(var(--blue));
  font-size: clamp(1.4rem, 1.1rem + 1.3vw, 2rem);
  font-weight: 700;
  font-style: italic;
  line-height: 1.2;
}

.Verse cite { display: block; margin-block-start: 6px; font-size: 1rem; font-weight: 500; font-style: italic; }