/* =========================================================
   Aamr Vaatika — About & Contact page
   ========================================================= */

/* =============== Story =============== */
.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.story-grid .lead{margin-bottom:18px;}
.story-stats{display:flex;gap:34px;margin-top:30px;flex-wrap:wrap;}
@media (max-width:900px){.story-grid{grid-template-columns:1fr;gap:36px;}}

.story-art{position:relative;}
.story-photo-frame{border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg);border:1px solid rgba(58,42,17,0.08);}
.story-photo-frame img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;}

/* =============== Values =============== */
.value-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;}
.value{
  background:var(--white);border-radius:var(--r-lg);padding:30px 24px;box-shadow:var(--shadow-sm);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.value:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);}
.value .icon-circle{margin-bottom:16px;}
.value h4{margin-bottom:8px;}
.value p{font-size:.88rem;color:var(--text-soft);}
@media (max-width:980px){.value-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.value-grid{grid-template-columns:1fr;}}

/* =============== Location =============== */
.loc-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:0;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-md);}
.loc-map{min-height:380px;position:relative;background:var(--olive-100);}
.loc-map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;filter:saturate(0.9);}
.loc-info{background:var(--white);padding:40px;display:flex;flex-direction:column;}
.loc-info h3{margin-bottom:16px;}
.loc-row{display:flex;gap:14px;margin-bottom:18px;}
.loc-row svg{color:var(--mango-700);flex-shrink:0;margin-top:2px;}
.loc-row strong{display:block;font-size:.92rem;}
.loc-row span{font-size:.85rem;color:var(--text-soft);}
.loc-row a{color:var(--brand-dark);font-weight:600;text-decoration:underline;text-underline-offset:2px;}
.loc-info .btn{margin-top:auto;}
@media (max-width:860px){
  .loc-grid{grid-template-columns:1fr;}
  .loc-map{min-height:300px;}
  .loc-info{padding:30px 24px;}
}

/* =============== Contact =============== */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:start;}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr;}}
.contact-panel{background:var(--white);border-radius:var(--r-lg);box-shadow:var(--shadow-sm);padding:40px;}
@media (max-width:560px){.contact-panel{padding:28px 22px;}}
.contact-info-card{background:var(--olive-900);color:var(--white);border-radius:var(--r-lg);padding:40px;}
.contact-info-card h3{color:var(--white);margin-bottom:18px;}
.cinfo-row{display:flex;gap:14px;margin-bottom:20px;}
.cinfo-row svg{color:var(--mango-400);flex-shrink:0;margin-top:2px;}
.cinfo-row strong{display:block;font-size:.92rem;}
.cinfo-row span{font-size:.85rem;color:rgba(255,255,255,.65);}
.contact-info-card hr{border:none;border-top:1px solid rgba(255,255,255,.12);margin:26px 0;}
.contact-info-card .note{font-size:.85rem;color:rgba(255,255,255,.6);}

/* =============== Long-form story essay ===============
   A single readable column rather than the two-up story grid: prose this
   length needs a measure of roughly 68 characters, not half a page. */
.story-essay{max-width:62ch;margin:0 auto;}
.story-essay .eyebrow{margin-bottom:16px;}
.story-essay h2{margin-bottom:28px;}

.story-essay p{
  font-size:1.06rem;line-height:1.78;color:var(--ink-700);margin-bottom:26px;
}
/* Transliterated words are italicised the way any editor would set them. */
.story-essay em{font-style:italic;color:var(--olive-800);}

/* The opening paragraph carries a little more weight to pull the reader in. */
.story-essay .essay-open{font-size:1.14rem;color:var(--ink-900);}

/* The one purely sensory passage, set apart so it reads as a held breath
   rather than another block of narrative. */
.story-essay .essay-moment{
  font-family:var(--font-display);font-size:1.2rem;line-height:1.7;
  color:var(--olive-900);background:var(--cream-100);
  border-left:4px solid var(--mango-500);
  padding:24px 28px;border-radius:0 var(--r-md) var(--r-md) 0;
  margin:34px 0;
}
.story-essay .essay-moment em{color:var(--mango-800);}

/* The closing line is the turn towards the reader. */
.story-essay .essay-close{
  font-family:var(--font-display);font-size:1.32rem;line-height:1.5;
  color:var(--olive-900);margin-top:34px;
  padding-top:26px;border-top:1px solid var(--hairline);
}

.story-essay .essay-figure{margin:38px 0;}
.story-essay .story-stats{margin-top:38px;}

@media (max-width:600px){
  .story-essay p{font-size:1rem;line-height:1.72;}
  .story-essay .essay-open{font-size:1.06rem;}
  .story-essay .essay-moment{font-size:1.08rem;padding:20px 22px;}
  .story-essay .essay-close{font-size:1.16rem;}
}