/* ==========================================================================
   EduPay — photography layer

   Additive only. Loaded AFTER home.css + seo.css on the resources, article,
   case-study and niche pages. It defines new classes and overrides nothing,
   so the shared stylesheets stay byte-for-byte as they are.

   Tokens (--border, --radius-lg, --shadow-md) come from home.css :root,
   which every one of these pages already loads.
   ========================================================================== */

/* Article hero image. Matches .article__wrap exactly: 760px, 28px padding. */
.article__hero-img{
  max-width:760px;
  margin:0 auto 38px;
  padding:0 28px;
}
.article__hero-img img{
  display:block;width:100%;height:auto;
  aspect-ratio:16 / 9;
  object-fit:cover;
  border-radius:16px;
  border:1px solid var(--border);
  box-shadow:0 14px 34px -12px rgba(15,23,42,.18);
}

/* Full-width band used under the hero of the niche and case-study pages. */
.page-photo{
  max-width:1240px;
  margin:0 auto;
  padding:0 28px 6px;
}
.page-photo img{
  display:block;width:100%;height:auto;
  aspect-ratio:24 / 9;
  object-fit:cover;
  border-radius:20px;
  border:1px solid var(--border);
  box-shadow:0 18px 44px -16px rgba(15,23,42,.20);
}

@media (max-width:640px){
  .article__hero-img{padding:0 22px;margin-bottom:26px}
  .article__hero-img img{aspect-ratio:4 / 3;border-radius:14px}
  .page-photo{padding:0 22px 4px}
  .page-photo img{aspect-ratio:16 / 9;border-radius:14px}
}