/* ==========================================================================
   Photography layer (Home, About, Blog)
   Self-contained: remove this file + its <link> in includes/layout-top.php
   and the <img> blocks marked "ph-" in the pages to go back to the old look.
   ========================================================================== */

/* ---------- Full-bleed background photos (hero / CTA) ---------- */
.ph-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.ph-bg img{display:block;width:100%;height:100%;object-fit:cover}
.ph-bg::after{content:"";position:absolute;inset:0}

/* Home hero: Hyderabad skyline at night */
.ph-bg--hero img{object-position:50% 50%;opacity:.62}
.ph-bg--hero::after{
  background:
    radial-gradient(ellipse 62% 55% at 50% 44%,rgba(10,10,15,.78) 0%,rgba(10,10,15,.5) 55%,rgba(10,10,15,0) 100%),
    linear-gradient(180deg,rgba(10,10,15,.7) 0%,rgba(13,16,64,.2) 40%,rgba(10,10,15,.82) 100%);
}

/* About hero: lit office floors */
.ph-bg--about img{object-position:50% 40%;opacity:.68}
.ph-bg--about::after{
  background:radial-gradient(ellipse 60% 70% at 50% 50%,rgba(10,10,15,.88) 0%,rgba(10,10,15,.55) 60%,rgba(10,10,15,.1) 100%),
             linear-gradient(180deg,rgba(10,10,15,.3),rgba(13,16,64,.35));
}

/* Home closing CTA band */
.ph-bg--cta img{object-position:50% 50%;opacity:.4}
.ph-bg--cta::after{
  background:linear-gradient(180deg,rgba(10,10,15,.8) 0%,rgba(13,16,64,.55) 50%,rgba(10,10,15,.85) 100%);
}

/* ---------- Home: photo at the top of the "About Intment" card ---------- */
.ph-card-media{
  position:relative;overflow:hidden;
  margin:-2rem -2rem 1.75rem;
  border-radius:calc(1.5rem - 4px) calc(1.5rem - 4px) 0 0;
  aspect-ratio:2/1;background:#12121a;
}
@media (min-width:1024px){.ph-card-media{margin:-2.5rem -2.5rem 2rem}}
.ph-card-media img{display:block;width:100%;height:100%;object-fit:cover}
.ph-card-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(18,18,26,0) 45%,rgba(18,18,26,.96) 100%);
}

/* ---------- Generic framed figure + caption chip ---------- */
.ph-figure{position:relative;margin:0;overflow:hidden;border-radius:1.25rem;background:#e5e7eb;
  box-shadow:0 20px 40px -20px rgba(59,71,238,.35),0 2px 6px rgba(15,23,42,.06)}
.ph-figure img{display:block;width:100%;height:100%;object-fit:cover}
.ph-chip{
  position:absolute;left:.9rem;bottom:.9rem;z-index:2;
  display:inline-flex;align-items:center;gap:.4rem;
  padding:.35rem .75rem;border-radius:999px;
  font-size:.72rem;font-weight:600;letter-spacing:.01em;color:#fff;
  background:rgba(10,10,15,.62);border:1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.ph-chip::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--color-secondary,#03b2d7)}

/* About: story photo above the stat tiles */
.ph-figure--story{aspect-ratio:16/10;margin-bottom:1rem}

/* ---------- About: timeline + sticky photo ---------- */
.ph-split{display:grid;gap:3rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:1024px){
  .ph-split{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:4rem;align-items:start}
  .ph-split__side{position:sticky;top:7rem}
}
.ph-figure--tall{aspect-ratio:4/5;max-width:26rem;margin-inline:auto;width:100%}

/* ---------- About: culture gallery (dark band) ---------- */
.ph-gallery{position:relative;overflow:hidden;padding:6rem 0}
.ph-gallery__grid{display:grid;gap:1.25rem;grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.ph-gallery__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem}}
.ph-gallery__item{position:relative;margin:0;overflow:hidden;border-radius:1.25rem;aspect-ratio:16/10;
  border:1px solid rgba(255,255,255,.08);background:#12121a}
@media (min-width:640px){
  .ph-gallery__item{aspect-ratio:4/5}
  .ph-gallery__item:nth-child(2){margin-top:2.5rem;margin-bottom:-2.5rem}
}
.ph-gallery__item img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.21,.47,.32,.98)}
.ph-gallery__item:hover img{transform:scale(1.05)}
.ph-gallery__item::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,10,15,0) 55%,rgba(10,10,15,.85) 100%)}
.ph-gallery__item figcaption{position:absolute;left:1.1rem;right:1.1rem;bottom:1rem;z-index:2;color:#fff}
.ph-gallery__item figcaption strong{display:block;font-family:var(--font-heading,inherit);font-size:1rem;font-weight:600}
.ph-gallery__item figcaption span{display:block;margin-top:.15rem;font-size:.78rem;color:rgba(229,231,235,.78)}
@media (min-width:640px){.ph-gallery{padding-bottom:7.5rem}}

/* ---------- Blog: card thumbnails ---------- */
.ph-thumb{position:relative;overflow:hidden;aspect-ratio:16/9;background:#e5e7eb}
.dark .ph-thumb{background:#1e1e2e}
.ph-thumb img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.21,.47,.32,.98)}
.group:hover .ph-thumb img{transform:scale(1.05)}

/* Blog: featured article image (inside the gradient frame) */
.ph-feature{position:relative;overflow:hidden;border-radius:calc(1rem - 4px);aspect-ratio:4/3;background:#12121a}
.ph-feature img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.21,.47,.32,.98)}
.group:hover .ph-feature img{transform:scale(1.04)}
.ph-feature::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,10,15,0) 55%,rgba(10,10,15,.78) 100%)}
.ph-feature .ph-chip{z-index:2}

/* Blog: article cover, overlaps the dark hero slightly */
.ph-cover{position:relative;z-index:3;margin:-5.5rem 0 2.75rem;overflow:hidden;border-radius:1.25rem;
  aspect-ratio:2/1;background:#12121a;box-shadow:0 30px 60px -25px rgba(10,10,30,.55),0 0 0 1px rgba(255,255,255,.06)}
.ph-cover img{display:block;width:100%;height:100%;object-fit:cover}
@media (max-width:639px){.ph-cover{margin-bottom:2rem;aspect-ratio:16/10;border-radius:1rem}}

/* Reduce motion */
@media (prefers-reduced-motion:reduce){
  .ph-gallery__item img,.ph-thumb img,.ph-feature img{transition:none}
}