body{opacity:0;transition:opacity .25s ease}
body.page-ready{opacity:1}
body.page-leave{opacity:0}

.page-hero{
  padding:44px 0 34px;
  position:relative;
}
.page-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,153,51,.20), rgba(0,0,0,0) 55%),
    linear-gradient(90deg, rgba(128,0,0,.10), rgba(255,255,255,0));
}
.page-hero .inner{position:relative}
.page-hero .meta{margin-top:10px}

.split{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:18px;
  align-items:stretch;
}
.split .media-card{
  height:100%;
  min-height:0;
  display:flex;
}
.split .media-card img{
  min-height:0;
  max-height:none;
  height:100%;
  width:100%;
  object-fit:cover;
  object-position:center;
  flex:1 1 0;
}

.about-pujari-intro{
  text-align:justify;
}
.about-pujari-intro__p{
  margin:0 0 1em;
  color:var(--ink);
  font-family:inherit;
  font-size:1rem;
  line-height:1.75;
  max-width:100%;
}
.about-pujari-intro__p:last-child{
  margin-bottom:0;
}
.about-pujari-intro__signature{
  margin-top:1.5em;
  padding-top:1.25em;
  border-top:1px solid rgba(128,0,0,.12);
  line-height:1.6;
  color:var(--maroon);
  font-size:0.98rem;
}
.about-pujari-intro__signature strong{
  font-weight:700;
}
.about-pujari-intro__meta{
  margin-top:1em;
  font-size:0.9rem;
  color:var(--muted);
  font-style:italic;
}

.media-card{
  border-radius:22px;
  overflow:hidden;
  border:1px solid rgba(128,0,0,.10);
  box-shadow:0 18px 40px rgba(0,0,0,.10);
  background:#fff;
}
.media-card img{width:100%;height:100%;object-fit:cover;min-height:320px}

.media-card.media-card-sm img{
  min-height:280px;
  max-height:380px;
}

@media (max-width: 960px){
  .split{grid-template-columns:1fr;align-items:start}
  .split .media-card{height:auto;min-height:0}
  .split .media-card img{min-height:240px;max-height:320px;height:auto}
  .media-card img{min-height:260px}
  .media-card.media-card-sm img{min-height:240px;max-height:320px}
}

/* ----- About page: Darshan / Puja / Trust cards ----- */
.about-cards-section .grid-3 {
  gap: 18px;
}
.about-card__title {
  margin: 0 0 0.5em;
}
.about-card__desc {
  margin: 0;
  line-height: 1.65;
  color: var(--ink);
}

/* 1. Card entrance on scroll: fade in + slide up, once, 500–700ms ease-out */
.about-cards-section .about-card.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.about-cards-section .about-card.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* 2. Hover (desktop/tablet only): slight lift + soft shadow, 300ms */
@media (min-width: 769px) {
  .about-cards-section .about-card.visible {
    transition: opacity 0.6s ease-out, transform 0.3s ease, box-shadow 0.3s ease;
  }
  .about-cards-section .about-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.12);
  }
}

/* 3. Icon: subtle pulse/glow, slow calm loop (3–5s) */
@keyframes about-icon-glow {
  0%, 100% { opacity: 1; filter: drop-shadow(0 0 0 rgba(255, 153, 51, 0)); }
  50% { opacity: 0.92; filter: drop-shadow(0 0 8px rgba(255, 153, 51, 0.25)); }
}
.about-card__icon {
  animation: about-icon-glow 4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .about-card__icon {
    animation: none;
  }
}


/* ABOUT SECTION LAYOUT */
.section .split{
  display: flex;
  gap: 28px;
  align-items: stretch; /* makes both columns same height */
}

.about-pujari-intro{
  flex: 1;
}

/* IMAGE CARD */
.media-card,
.media-card-sm{
  flex: 1;
  background: #fff;
  padding: 0;
  border-radius: 28px;
  overflow: hidden;      /* keeps rounded corners clean */
  height: 100%;          /* match text column height */
}

/* IMAGE MUST FILL THE CARD (no white space) */
.media-card img,
.media-card-sm img{
  width: 100%;
  height: 100%;
  display: block;        /* removes bottom inline gap */
  object-fit: cover;     /* fills card completely */
  object-position: center;
}

/* RESPONSIVE */
@media (max-width: 900px){
  .section .split{
    flex-direction: column;
  }
  .media-card,
  .media-card-sm{
    height: auto;        /* on mobile, let image decide height */
  }
  .media-card img,
  .media-card-sm img{
    height: auto;
  }
}



/* Make left + right columns equal height */
.split{
  display: flex;
  gap: 28px;
  align-items: stretch;   /* KEY: stretch both sides to same height */
}

/* Left text takes more space, right image slightly less (adjust if you want) */
.about-pujari-intro{
  flex: 1.2;              /* 55% approx */
}

.media-card.media-card-sm{
  flex: 0.8;              /* 45% approx */
  height: auto;
  align-self: stretch;    /* KEY */
  background: #fff;
  padding: 0;
  border-radius: 28px;
  overflow: hidden;
}

/* Image must fill the full height of the card */
.media-card.media-card-sm img{
  width: 100%;
  height: 100%;           /* KEY */
  display: block;
  object-fit: cover;      /* fills without distortion */
  object-position: center;
}

/* Responsive: stack on mobile */
@media (max-width: 900px){
  .split{
    flex-direction: column;
  }

  .about-pujari-intro,
  .media-card.media-card-sm{
    flex: 1;
  }

  .media-card.media-card-sm img{
    height: auto;
  }
}


/* Make both columns same height */
.split{
  display: flex;
  gap: 28px;
  align-items: stretch; /* KEY */
}

/* Left content */
.about-pujari-intro{
  flex: 1.2; /* adjust if needed */
}

/* Right image card fills the same height as left */
.media-card.media-card-sm{
  flex: 0.8;              /* adjust if needed */
  align-self: stretch;    /* KEY */
  padding: 0;
  background: #fff;
  border-radius: 28px;
  overflow: hidden;
}

/* Image fills full card height */
.media-card.media-card-sm img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

/* Mobile responsive */
@media (max-width: 900px){
  .split{ flex-direction: column; }
  .about-pujari-intro,
  .media-card.media-card-sm{ flex: 1; }

  .media-card.media-card-sm img{
    height: auto;
  }
}


/* 1) Make both columns equal height */
.container.split{
  display: flex;
  gap: 28px;
  align-items: stretch;   /* KEY */
}

/* 2) Left text width */
.about-pujari-intro{
  flex: 1.15;
}

/* 3) Right image card same height as left */
.media-card.media-card-sm{
  flex: 0.85;
  align-self: stretch;    /* KEY */
  padding: 0;
  margin: 0;
  background: #fff;
  border-radius: 28px;
  overflow: hidden;
  display: flex;          /* KEY (forces image to stretch) */
}

/* 4) Image must fill full card */
.media-card.media-card-sm img{
  flex: 1;                /* KEY */
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;      /* fills without distortion */
  object-position: center;
}

/* 5) Kill any old rules causing whitespace */
.media-card.media-card-sm{
  min-height: 0 !important;
  aspect-ratio: auto !important;
}
.media-card.media-card-sm img{
  max-height: none !important;
}

/* Mobile stack */
@media (max-width: 900px){
  .container.split{ flex-direction: column; }
  .media-card.media-card-sm{ display: block; }
  .media-card.media-card-sm img{ height: auto; }
}