/* Shared photographic caption system. Feathered light protection follows only
   the copy; the original image, focal crop and camera movement remain intact. */
.cinematic-city {
  --cinema-left: max(var(--pad), env(safe-area-inset-left));
  --cinema-bottom: max(122px, 14svh);
  --cinema-width: min(40vw, 560px);
  --shade-feather-x: 80px;
  --shade-feather-y: 64px;
}
#madinah { --cinema-width: min(31vw,450px); }
:is(#madinah,#first-sight) .cinematic-caption {
  position: absolute;
  isolation: isolate;
  z-index: 2;
  inset: auto auto var(--cinema-bottom) var(--cinema-left);
  width: var(--cinema-width);
  max-width: none;
  margin: 0;
  color: var(--hdf-white);
  text-align: left;
  text-shadow: 0 1px 2px rgba(23,23,23,.2);
}
:is(#madinah,#first-sight) .cinematic-caption::before,
#first-sight .cinematic-lead::before {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: -1;
  inset: calc(-1 * var(--shade-feather-y)) calc(-1 * var(--shade-feather-x)) calc(-1 * var(--shade-feather-y)) calc(-1 * var(--cinema-left));
  background: linear-gradient(90deg,rgba(23,23,23,.88),rgba(23,23,23,.81) calc(100% - 130px),rgba(23,23,23,.71) calc(100% - var(--shade-feather-x)),transparent);
  -webkit-mask-image: linear-gradient(180deg,transparent,#000 var(--shade-feather-y),#000 calc(100% - var(--shade-feather-y)),transparent);
  mask-image: linear-gradient(180deg,transparent,#000 var(--shade-feather-y),#000 calc(100% - var(--shade-feather-y)),transparent);
}
/* A shallow bottom falloff supports the discreet credits, not the whole image. */
:is(#madinah,#first-sight) .cinematic-shade {
  position: absolute;
  inset: auto 0 0;
  height: 100px;
  pointer-events: none;
  background: linear-gradient(0deg,rgba(23,23,23,.82),rgba(23,23,23,.72) 62%,transparent);
}
#madinah .arrival-heading-line { display: block; }
#madinah .arrival-heading-line > p { margin-top: 12px; }
#madinah .arrival-description { max-width: none; margin-top: 20px; }
#madinah .arrival-description > span { display: block; }
#first-sight .cinematic-lead::before { display: none; }
#first-sight .sight-second em { margin-top: 10px; }
#first-sight .makkah-jumuah { display: block; max-width: none; margin-top: 18px; }
#first-sight .photo-location {
  position: static;
  display: block;
  max-width: none;
  margin-top: 14px;
  opacity: 1;
  transform: none;
}
:is(#madinah,#first-sight) .cinematic-credit {
  position: absolute;
  z-index: 3;
  display: block;
  inset: auto auto max(13px,env(safe-area-inset-bottom)) var(--cinema-left);
  max-width: calc(100% - 170px);
  margin: 0;
  color: var(--hdf-white);
}
:is(#madinah,#first-sight) .cinematic-credit a { display: flex; align-items: center; width: fit-content; min-height: 44px; padding: 0; }
#first-sight .cinematic-credit { opacity: var(--makkah-credit-opacity,0); }
@media (orientation:portrait) {
  .cinematic-city,#madinah {
    --cinema-width: calc(100% - 2 * var(--cinema-left));
    --cinema-bottom: calc(74px + env(safe-area-inset-bottom));
    --shade-feather-x: 32px;
    --shade-feather-y: 26px;
  }
  #madinah .arrival-heading-line > p { margin-top: 10px; }
  #madinah .arrival-description { margin-top: 14px; }
  #first-sight .sight-second em { margin-top: 8px; }
  #first-sight .makkah-jumuah { margin-top: 12px; }
  #first-sight .photo-location { margin-top: 12px; }
}
@media (max-height:670px) and (orientation:portrait) {
  .cinematic-city,#madinah { --cinema-bottom: calc(68px + env(safe-area-inset-bottom)); --shade-feather-y: 18px; }
  #madinah .arrival-heading-line > p { margin-top: 5px; }
  #madinah .arrival-description { margin-top: 7px; }
  /* The small lead sits beside the Kaaba; the display statement sits below it. */
  #first-sight .cinematic-lead { position: relative; isolation: isolate; max-width: 100px; }
  #first-sight .sight-second em { margin-top: 5px; }
  #first-sight .makkah-jumuah { margin-top: 5px; }
  #first-sight .photo-location { margin-top: 7px; }
  #first-sight .cinematic-itinerary::before { top: 31px; }
  #first-sight .cinematic-lead::before { display: block; --shade-feather-x: 12px; --shade-feather-y: 12px; }
}
@media (max-height:600px) and (orientation:portrait) { .cinematic-city,#madinah { --cinema-bottom: calc(64px + env(safe-area-inset-bottom)); } }
@media (max-height:560px) and (orientation:landscape) {
  .cinematic-city,#madinah { --cinema-bottom: 70px; --cinema-width: min(40vw,380px); --shade-feather-y: 26px; }
  #madinah .arrival-heading-line > p { margin-top: 6px; }
  #madinah .arrival-description { margin-top: 9px; }
  #first-sight .sight-second em { margin-top: 6px; }
  #first-sight .makkah-jumuah,#first-sight .photo-location { margin-top: 7px; }
}
/* Same content, automatically calmer. No alternate viewing control. */
html:not(.js) :is(#madinah,#first-sight) .cinematic-caption,
html:not(.js) :is(#madinah,#first-sight) .cinematic-credit {
  position: relative; inset: auto; width: auto; max-width: 620px; margin: 30px var(--pad) 0; opacity: 1; transform: none;
}
html:not(.js) :is(#madinah,#first-sight) .cinematic-caption::before,
html:not(.js) #first-sight .cinematic-lead::before,
html:not(.js) :is(#madinah,#first-sight) .cinematic-shade { display: none; }
@media (prefers-reduced-motion:reduce),print {
  :is(#madinah,#first-sight) .cinematic-caption,
  :is(#madinah,#first-sight) .cinematic-credit { position: relative; inset: auto; width: auto; max-width: 620px; margin: 30px var(--pad) 0; opacity: 1!important; transform: none!important; }
  :is(#madinah,#first-sight) .cinematic-caption::before,
  #first-sight .cinematic-lead::before,
  :is(#madinah,#first-sight) .cinematic-shade { display: none; }
  #first-sight .cinematic-lead { max-width: none; }
}