/* SISIGHT site add-on: story photos (see assets/photos.js). Kept outside the design's app.css so a design import never
   overwrites it. The look follows the marketing site: photos that fade in over their own colour and blurred preview,
   drift closer on hover, and carry glass panels with the story's framings. */
.ph.pv{background-repeat: no-repeat}
.ph.pv .pv-img{opacity: 0; color: transparent; transition: opacity 500ms var(--ease-out), transform 900ms var(--ease-out)}
.ph.pv .pv-img.in{opacity: 1}
/* a soft shade at the top (for the credit) and the foot (for the panel and the seal) */
.ph.pv::after{content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(6,10,20,.42) 0%, rgba(6,10,20,0) 26%, rgba(6,10,20,0) 56%, rgba(6,10,20,.38) 100%)}
.ph.pv.thumb::after{display: none}
@media (hover: hover) and (pointer: fine){
  .tcard:hover .pv-img, .ohead:hover .pv-img{transform: scale(1.04)}
  .hero-ph:hover .pv-img{transform: scale(1.025)}
}

/* credit and licence, on the photo */
.pv-credit{position: absolute; top: 11px; inset-inline: 14px; z-index: 3; margin: 0; pointer-events: none;
  font-size: .6875rem; line-height: 1.35; font-weight: 500; color: rgba(255,255,255,.88); text-shadow: 0 1px 2px rgba(0,0,0,.55);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden}
.pv-credit a{color: inherit; text-decoration: none; pointer-events: auto}
.pv-credit a:hover{text-decoration: underline; text-underline-offset: .2em}
.pv-credit a:focus-visible, .pv-cap a:focus-visible{outline: 2px solid #fff; outline-offset: 2px; border-radius: 3px}
.hero-media .pv-cap a{color: rgba(255,255,255,.78); text-decoration: underline; text-decoration-color: rgba(255,255,255,.3); text-underline-offset: .2em}
.hero-media .pv-cap a:hover{color: #fff; text-decoration-color: currentColor}
html[lang="ar"] .pv-credit, html[lang="ar"] .pv-cap{line-height: 1.6}

/* the glass panel: how three blocs framed the same story */
.pv-frames{position: absolute; bottom: 14px; inset-inline-start: 14px; z-index: 2; box-sizing: border-box; max-width: calc(100% - 28px);
  padding: 12px 14px 13px; border-radius: 14px; color: #fff; background: rgba(12,15,24,.46); border: 1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); pointer-events: none}
.pv-k{display: block; font-size: .6875rem; font-weight: 600; color: rgba(255,255,255,.74)}
.pv-frames ul{list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px}
.pv-frames li{display: grid; min-width: 0}
.pv-frames button{all: unset; display: grid; gap: 2px; min-width: 0; cursor: pointer; border-radius: 8px; padding: 4px 6px; margin: -4px -6px}
.pv-who{display: inline-flex; align-items: center; gap: 7px; font-size: .6875rem; font-weight: 700; color: rgba(255,255,255,.9)}
.pv-who i{width: 8px; height: 8px; border-radius: 50%; flex: none; box-shadow: 0 0 0 1.5px rgba(255,255,255,.7)}
.pv-frames q{font-size: .8125rem; font-weight: 500; line-height: 1.38; quotes: "\201C" "\201D";
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden}
html[lang="ar"] .pv-frames q{quotes: "\00AB" "\00BB"; line-height: 1.65}
.pv-frames q.own, html[lang] .pv-frames q.own{quotes: none}   /* the kicker already opens or closes with a quotation */
/* lead story and story page: always shown, beside the seal */
.pv-lead{inset-inline-end: 132px}
.pv-hero{inset-inline-end: 164px}
.pv-lead q, .pv-hero q{-webkit-line-clamp: 2; font-size: .875rem}
.pv-hero{pointer-events: auto}
.pv-hero button:hover{background: rgba(255,255,255,.1)}
.pv-hero button:focus-visible{outline: 2px solid #fff; outline-offset: 0}
/* other cards: the panel rises on hover (pointer devices), and the seal steps aside */
.pv-card{opacity: 0; transform: translateY(8px); transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out)}
.tcard .seal{transition: opacity 200ms var(--ease-out)}
@media (hover: hover) and (pointer: fine){
  .tcard:hover .pv-card, .tcard:focus-within .pv-card{opacity: 1; transform: none}
  .tcard:hover .pv-framed .seal, .tcard:focus-within .pv-framed .seal{opacity: 0}
}
@media (hover: none), (pointer: coarse){ .pv-card{display: none} }

@media (max-width: 899px){
  .pv-lead{display: none}
}
@media (max-width: 759px){
  .pv-hero{display: none}
  .pv-credit{top: 9px; inset-inline: 12px}
}
@media (prefers-reduced-motion: reduce){
  .ph.pv .pv-img{transition: none; opacity: 1}
  .tcard:hover .pv-img, .ohead:hover .pv-img, .hero-ph:hover .pv-img{transform: none}
  .pv-card, .tcard .seal{transition: none}
}
@media (prefers-reduced-transparency: reduce){
  .pv-frames{background: rgba(12,15,24,.88); -webkit-backdrop-filter: none; backdrop-filter: none}
}
@media print{
  .pv-frames{display: none}
  .pv-credit{color: #000; text-shadow: none; position: static; margin-top: 4px}
}