/* SITE-IMAGES — the photographs on the public pages. Markup and texts: /assets/site-images.js.
   Brand colours only: navy #0D2340, gold #EDAC3A, light gold #F5C86B, cream #FDF4E0. */
.fa-ph-hero,.fa-ph,.fa-ph-pair{display:block;margin:0;}
.fa-ph-hero img,.fa-ph img,.fa-ph-pair img{display:block;width:100%;height:auto;border-radius:14px;background:#FDF4E0;}

/* Landing hero: below the two doors, inside the centred composition (owner 2026-07-21). */
.fa-ph-hero{max-width:640px;margin:2.25rem auto 0;}
.fa-ph-hero img{border:1px solid rgba(237,172,58,.45);box-shadow:0 10px 36px rgba(0,0,0,.35);}

/* One picture beside an area's guides (case-types) or inside a text column. */
.fa-ph{position:relative;margin:0 0 1rem;}
.fa-ph img{aspect-ratio:4/3;object-fit:cover;}
.fa-ph-head{position:absolute;inset-inline-start:0;top:0;bottom:0;width:62%;margin:0;padding:1rem 1.1rem;
  display:flex;align-items:flex-start;border-start-start-radius:14px;border-end-start-radius:14px;
  background:linear-gradient(90deg,rgba(13,35,64,.82),rgba(13,35,64,0));
  color:#fff;font-family:'Playfair Display',serif;font-size:clamp(19px,2.4vw,24px);font-weight:700;line-height:1.15;}
[dir="rtl"] .fa-ph-head{background:linear-gradient(270deg,rgba(13,35,64,.82),rgba(13,35,64,0));font-family:inherit;}

/* Before → after: side by side, the "before" first in reading order; stacked on a phone. */
.fa-ph-pair{max-width:820px;margin:1.5rem auto 0;}
.fa-ph-row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;}
.fa-ph-pair img{aspect-ratio:4/3;object-fit:cover;}
.fa-ph-pair figcaption{margin-top:.6rem;text-align:center;font-size:14px;line-height:1.5;color:#0D2340;}
.fa-ph-pair figcaption::before{content:'';display:block;width:36px;height:2px;margin:0 auto .5rem;background:#EDAC3A;}
@media(max-width:699px){.fa-ph-row{grid-template-columns:1fr;}}

/* case-types: the picture stands beside the area's guides on a wide screen, above them on a phone. */
@media(min-width:900px){
  .cat-section.has-ph{display:grid;grid-template-columns:minmax(0,1fr) 380px;column-gap:1.75rem;align-items:start;}
  .cat-section.has-ph>.cat-header{grid-column:1/-1;}
  .cat-section.has-ph>.fa-ph{grid-column:2;grid-row:2;margin:0;}
  .cat-section.has-ph>.case-chips{grid-column:1;grid-row:2;}
}
.cat-section>.fa-ph-pair{margin:0 auto 1rem;}

/* pricing.html: one picture between the plans and the closing call to action. */
.fa-ph-solo{padding-top:0;}
.fa-ph-solo .fa-ph{max-width:480px;margin:0 auto;}
.fa-ph-solo .fa-ph img,.org-sec .fa-ph img{aspect-ratio:auto;}
.org-sec .fa-ph{margin-top:1.25rem;}

/* landing.html #how, slides 2–4: the picture fills one half of the navy slide and the text the
   other — text left, picture right; Arabic and Persian mirror it. On a phone the picture stands
   above the text. The slides stack in one box of one height, so a picture never sets the height. */
#lpVpWrap .fa-ph-slide{margin:0 0 .8rem;width:100%;flex:none;}
#lpVpWrap .fa-ph-slide img{height:clamp(112px,30vw,150px);aspect-ratio:auto;border-radius:10px;background:#0D2340;}
#lpVpWrap [data-fa-slot="slide-two"] img{object-position:50% 28%;}
#lpVpWrap [data-fa-slot="slide-three"] img{object-position:50% 30%;}
#lpVpWrap [data-fa-slot="slide-four"] img{object-position:50% 38%;}
@media(min-width:700px){
  #lpVpWrap .vp-slide.has-pic{align-items:flex-start;text-align:left;padding-right:calc(50% + 2rem);}
  #lpVpWrap .has-pic .vp-title,#lpVpWrap .has-pic .vp-desc{margin-left:0;margin-right:0;}
  #lpVpWrap .fa-ph-slide{position:absolute;top:0;bottom:0;right:0;width:50%;margin:0;}
  #lpVpWrap .fa-ph-slide img{height:100%;border-radius:0;}
  /* Mirrored by the page language, not by the carousel's direction (its slides are transform-positioned). */
  body.lang-ar #lpVpWrap .vp-slide.has-pic,body.lang-fa #lpVpWrap .vp-slide.has-pic{direction:rtl;text-align:right;padding-right:2.5rem;padding-left:calc(50% + 2rem);}
  body.lang-ar #lpVpWrap .fa-ph-slide,body.lang-fa #lpVpWrap .fa-ph-slide{right:auto;left:0;}
}
/* Half the width: the wide-screen 28/19 px type (landing.html) would overrun the box in Somali. */
@media(min-width:1024px){#lpVpWrap .has-pic .vp-title{font-size:25px;}#lpVpWrap .has-pic .vp-desc{font-size:17px;}}

.fa-ph-note{margin:.5rem 0 0;font-size:12px;line-height:1.5;opacity:.75;}

@media print{.fa-ph-hero,.fa-ph,.fa-ph-pair{display:none !important;}}