/* =========================================================
   GITA MAYEE — MAIN STYLESHEET
   ========================================================= */


/* =========================================================
   1. DESIGN TOKENS
   ========================================================= */

:root{
  --ink:#18342d;
  --green:#1d4d40;
  --green2:#2f6f5f;
  --cream:#f7f3ea;
  --sand:#eadfca;
  --orange:#d97b32;
  --white:#fff;
  --muted:#66756f;
  --line:#dfe6e2;

  --shadow:
    0 22px 60px rgba(24,52,45,.12);

  --shadow-soft:
    0 8px 24px rgba(24,52,45,.05);

  --shadow-card:
    0 12px 34px rgba(24,52,45,.07);
}


/* =========================================================
   2. RESET / BASE
   ========================================================= */

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  color:#20332e;
  background:#fbfaf6;
  line-height:1.6;
}

a{
  color:inherit;
  text-decoration:none;
}

img{
  display:block;
  max-width:100%;
}

.container{
  width:min(
    1180px,
    calc(100% - 40px)
  );

  margin-inline:auto;
}


/* =========================================================
   3. TOP BAR
   ========================================================= */

.topbar{
  background:var(--ink);
  color:#fff;
  font-size:.88rem;
}

.topbar .container{
  display:flex;
  justify-content:space-between;
  gap:20px;
  padding:8px 0;
}


/* =========================================================
   4. NAVIGATION
   ========================================================= */

.nav{
  position:sticky;
  top:0;
  z-index:40;

  background:
    rgba(251,250,246,.95);

  backdrop-filter:
    blur(16px);

  border-bottom:
    1px solid rgba(29,77,64,.08);
}

.nav-row{
  height:82px;

  display:flex;
  align-items:center;
  justify-content:space-between;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;

  font-weight:800;
  color:var(--ink);
}

.brand small{
  display:block;

  font-size:.72rem;
  font-weight:600;
  color:var(--muted);
}

.mark{
  width:46px;
  height:46px;

  display:grid;
  place-items:center;

  border-radius:15px;

  background:
    linear-gradient(
      145deg,
      var(--green),
      var(--green2)
    );

  color:#fff;
  font-size:21px;
}

.logo-wrap{
  width:54px;
  height:54px;

  flex:0 0 auto;

  display:grid;
  place-items:center;

  overflow:hidden;

  border:
    1px solid rgba(29,77,64,.13);

  border-radius:16px;

  background:#f3f1e7;
}

.logo-wrap img{
  width:100%;
  height:100%;

  object-fit:cover;

  transform:
    scale(1.06);
}

.footer-logo{
  background:#f6f2e7;

  border-color:
    rgba(255,255,255,.18);
}

.nav-links{
  display:flex;
  align-items:center;
  gap:26px;

  font-size:.94rem;
  font-weight:650;
}

.mobile-toggle{
  display:none;
}


/* =========================================================
   5. BUTTONS
   ========================================================= */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;

  padding:
    13px 22px;

  border:
    1px solid transparent;

  border-radius:999px;

  font-weight:750;

  transition:.25s;
}

.btn-primary{
  color:#fff;
  background:var(--orange);

  box-shadow:
    0 10px 24px rgba(217,123,50,.26);
}

.btn-secondary{
  color:var(--green);
  background:#fff;

  border-color:
    rgba(29,77,64,.24);
}


/* =========================================================
   6. TYPOGRAPHY / COMMON
   ========================================================= */

.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;

  color:var(--green2);

  font-size:.78rem;
  font-weight:800;

  text-transform:uppercase;
  letter-spacing:.16em;
}

section{
  padding:
    86px 0;
}


/* =========================================================
   7. HERO
   ========================================================= */

.hero{
  padding:
    72px 0 54px;
}

.hero-grid{
  display:grid;

  grid-template-columns:
    1.05fr .95fr;

  align-items:center;

  gap:48px;
}

.hero h1,
.page-hero h1{
  margin:
    18px 0 22px;

  color:var(--ink);

  font-family:
    Georgia,
    serif;

  font-size:
    clamp(
      3rem,
      6vw,
      5.7rem
    );

  line-height:.96;
  letter-spacing:-.045em;
}

.hero p{
  max-width:640px;

  color:var(--muted);

  font-size:1.14rem;
}

.hero-actions{
  display:flex;
  flex-wrap:wrap;

  gap:12px;

  margin-top:30px;
}

.hero-visual{
  position:relative;

  min-height:540px;
}

.photo-card{
  position:absolute;

  overflow:hidden;

  border-radius:34px;

  background:var(--sand);

  box-shadow:var(--shadow);
}

.photo-card.main{
  inset:
    0 40px 40px 0;
}

.photo-card.main img{
  width:100%;
  height:100%;

  object-fit:cover;
  object-position:center;

  filter:
    saturate(.92)
    contrast(1.03);
}

.photo-card.badge{
  right:0;
  bottom:0;

  width:210px;

  padding:24px;

  color:#fff;
  background:var(--green);
}

.photo-card.badge strong{
  display:block;

  font-size:2rem;
}


/* =========================================================
   8. ABSTRACT PLACEHOLDER
   ========================================================= */

.abstract{
  width:100%;
  height:100%;

  display:grid;
  place-items:center;

  padding:30px;

  color:var(--green);

  font-size:1.15rem;
  font-weight:800;
  text-align:center;

  background:
    radial-gradient(
      circle at 30% 30%,
      #f2be83,
      transparent 28%
    ),
    linear-gradient(
      135deg,
      #d8eadf,
      #f3ddc3 60%,
      #b6d0c5
    );
}


/* =========================================================
   9. TRUST STRIP
   ========================================================= */

.trust-strip{
  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  margin-top:36px;

  overflow:hidden;

  border:
    1px solid var(--line);

  border-radius:24px;

  background:#fff;
}

.trust-strip div{
  padding:20px;

  border-right:
    1px solid var(--line);
}

.trust-strip div:last-child{
  border-right:0;
}

.trust-strip strong{
  display:block;

  color:var(--ink);
}


/* =========================================================
   10. SECTION HEADERS
   ========================================================= */

.section-head{
  display:flex;
  align-items:end;
  justify-content:space-between;

  gap:30px;

  margin-bottom:34px;
}

.section-head h2{
  margin:0;

  color:var(--ink);

  font-family:
    Georgia,
    serif;

  font-size:
    clamp(
      2.2rem,
      4vw,
      4rem
    );

  line-height:1.05;
}

.section-head p{
  max-width:560px;

  color:var(--muted);
}


/* =========================================================
   11. GENERIC CARDS
   ========================================================= */

.cards{
  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:20px;
}

.card{
  padding:28px;

  border:
    1px solid var(--line);

  border-radius:26px;

  background:#fff;

  box-shadow:
    var(--shadow-soft);
}

.card h3{
  margin:
    14px 0 8px;

  color:var(--ink);
}

.icon{
  width:48px;
  height:48px;

  display:grid;
  place-items:center;

  border-radius:15px;

  background:#edf4f0;

  font-size:22px;
}


/* =========================================================
   12. IMPACT BAND
   ========================================================= */

.band{
  color:#fff;
  background:var(--green);
}

.band h2,
.band h3{
  color:#fff;
}

.band p{
  color:#dbe9e4;
}

.impact-grid{
  display:grid;

  grid-template-columns:
    repeat(4,1fr);

  gap:18px;
}

.impact{
  padding:28px;

  border:
    1px solid rgba(255,255,255,.14);

  border-radius:24px;

  background:
    rgba(255,255,255,.09);
}

.impact strong{
  display:block;

  font-size:2.4rem;
}


/* =========================================================
   13. GENERIC PLACEHOLDER
   ========================================================= */

.placeholder{
  padding:30px;

  border:
    1px dashed #9eb4ab;

  border-radius:22px;

  color:#5f746c;
  background:#f3f7f5;

  text-align:center;
}


/* =========================================================
   14. HOMEPAGE / EDITORIAL GALLERY
   ========================================================= */

.gallery{
  display:grid;

  grid-template-columns:
    repeat(12,1fr);

  gap:16px;
}

.gallery article{
  position:relative;

  min-height:260px;

  overflow:hidden;

  border-radius:24px;

  background:#dfe8e3;
}

.gallery article:nth-child(1){
  grid-column:
    span 7;
}

.gallery article:nth-child(2){
  grid-column:
    span 5;
}

.gallery article:nth-child(n+3){
  grid-column:
    span 4;
}

.gallery img{
  width:100%;
  height:100%;

  object-fit:cover;
}

.overlay{
  position:absolute;

  inset:
    auto 0 0;

  padding:
    40px 20px 18px;

  color:#fff;

  background:
    linear-gradient(
      transparent,
      rgba(0,0,0,.72)
    );
}


/* =========================================================
   15. DEDICATED GALLERY PAGE
   ========================================================= */

.gallery.gallery-page-grid{
  display:grid;

  grid-template-columns:
    repeat(
      3,
      minmax(0,1fr)
    );

  gap:20px;

  align-items:start;
}

.gallery.gallery-page-grid article,
.gallery.gallery-page-grid article:nth-child(1),
.gallery.gallery-page-grid article:nth-child(2),
.gallery.gallery-page-grid article:nth-child(n+3){
  grid-column:
    span 1;

  min-height:0;

  position:relative;

  overflow:hidden;

  border-radius:22px;

  background:#f1eee7;
}

.gallery.gallery-page-grid article img,
.gallery.gallery-page-grid img{
  display:block;

  width:100%;
  height:auto;

  object-fit:contain;
}

.gallery.gallery-page-grid .overlay{
  top:auto;
  right:0;
  bottom:0;
  left:0;

  padding:
    42px 18px 16px;

  color:#fff;

  background:
    linear-gradient(
      transparent,
      rgba(0,0,0,.72)
    );
}


/* =========================================================
   16. PAGE HERO
   ========================================================= */

.page-hero{
  padding:
    70px 0 40px;
}

.page-hero h1{
  font-size:
    clamp(
      3.2rem,
      6vw,
      5.3rem
    );
}


/* =========================================================
   17. ACTIVITIES — CMS
   ========================================================= */

.activities-live-section{
  padding-top:10px;
  padding-bottom:36px;
}

.activities-cms-grid{
  display:grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0,1fr)
    );

  gap:22px;
}

.activities-cms-grid:empty{
  display:none;
}

.activity-cms-card{
  display:flex;
  flex-direction:column;

  overflow:hidden;

  border:
    1px solid var(--line);

  border-radius:26px;

  background:#fff;

  box-shadow:
    var(--shadow-card);
}

.activity-cms-image{
  width:100%;

  overflow:hidden;

  background:#f1eee7;
}

.activity-cms-image img{
  display:block;

  width:100%;
  height:auto;

  max-height:480px;

  object-fit:contain;

  background:#f7f5ef;
}

.activity-cms-content{
  padding:
    26px 28px 30px;
}

.activity-cms-content h2{
  margin:
    10px 0;

  color:var(--ink);

  font-family:
    Georgia,
    serif;

  font-size:
    clamp(
      1.7rem,
      2.5vw,
      2.35rem
    );

  line-height:1.08;
}

.activity-cms-content p{
  margin:0;

  color:var(--muted);

  font-size:1rem;
}

.activity-cms-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;

  gap:10px;
}

.activity-category{
  display:inline-flex;
  align-items:center;

  padding:
    7px 11px;

  border-radius:999px;

  color:var(--green);
  background:#edf4f0;

  font-size:.72rem;
  font-weight:800;

  letter-spacing:.11em;
  text-transform:uppercase;
}

.activity-cms-meta time{
  color:var(--muted);

  font-size:.84rem;
  font-weight:650;
}


/* Existing Activity Archive */

.activities-archive-section{
  padding-top:26px;
}

.activity-archive-grid{
  margin-top:0;
}


/* =========================================================
   18. CTA
   ========================================================= */

.cta{
  display:grid;

  grid-template-columns:
    1.2fr .8fr;

  align-items:center;

  gap:30px;

  padding:46px;

  border-radius:36px;

  background:
    linear-gradient(
      135deg,
      var(--sand),
      #f8efe2
    );
}

.cta h2{
  margin:0;

  color:var(--ink);

  font-family:
    Georgia,
    serif;

  font-size:
    clamp(
      2.4rem,
      4vw,
      4.3rem
    );
}


/* =========================================================
   19. CONTENT LAYOUT
   ========================================================= */

.content-grid{
  display:grid;

  grid-template-columns:
    1fr 340px;

  gap:40px;
}

.sidebar{
  position:sticky;
  top:110px;

  align-self:start;
}


/* =========================================================
   20. FORMS
   ========================================================= */

.form{
  display:grid;

  gap:16px;
}

.form-row{
  display:grid;

  grid-template-columns:
    1fr 1fr;

  gap:16px;
}

label{
  color:var(--ink);

  font-size:.9rem;
  font-weight:700;
}

input,
textarea,
select{
  width:100%;

  padding:
    14px 15px;

  border:
    1px solid #cfdad5;

  border-radius:14px;

  background:#fff;

  font:inherit;
}

textarea{
  min-height:130px;
}


/* =========================================================
   21. DONATION
   ========================================================= */

.donation-grid{
  display:grid;

  grid-template-columns:
    1fr 1fr;

  gap:22px;
}

.qr{
  aspect-ratio:1;

  display:grid;
  place-items:center;

  padding:25px;

  border:
    1px dashed #8da49b;

  border-radius:24px;

  color:var(--muted);
  background:#fff;
}


/* =========================================================
   22. PRESS / MEDIA
   ========================================================= */

.press-grid{
  display:grid;

  grid-template-columns:
    repeat(3,1fr);

  gap:18px;
}

.press-grid img{
  width:100%;
  height:360px;

  object-fit:cover;

  border:
    1px solid var(--line);

  border-radius:20px;

  background:#fff;
}


/* CMS Media Cards */

.cms-press{
  margin:0;
}

.cms-press img{
  width:100%;
}

.cms-press figcaption{
  padding-top:7px;
}

.cms-press figcaption strong{
  color:var(--ink);
}

.cms-press figcaption span{
  display:block;

  color:var(--muted);

  font-size:.9rem;
}


/* =========================================================
   23. NOTICE
   ========================================================= */

.notice{
  padding:
    14px 16px;

  border:
    1px solid #f2d0ad;

  border-radius:14px;

  color:#7d4c1f;
  background:#fff4e9;
}


/* =========================================================
   24. FOOTER
   ========================================================= */

.footer{
  margin-top:70px;

  padding:
    66px 0 24px;

  color:#fff;
  background:#102b24;
}

.footer-grid{
  display:grid;

  grid-template-columns:
    1.4fr 1fr 1fr 1fr;

  gap:32px;
}

.footer h4{
  margin-top:0;
}

.footer a,
.footer p{
  color:#c5d4cf;
}

.copyright{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;

  gap:18px;

  margin-top:38px;

  padding-top:20px;

  border-top:
    1px solid rgba(255,255,255,.12);

  color:#9eb2ab;

  font-size:.9rem;
}

.digitalvimal-credit{
  color:#fff !important;

  font-weight:750;

  letter-spacing:.01em;

  transition:.2s;
}

.digitalvimal-credit:hover{
  color:#f0b275 !important;
}


/* =========================================================
   25. TABLET
   ========================================================= */

@media(max-width:900px){

  .nav-links{
    display:none;

    position:absolute;

    top:82px;
    right:20px;
    left:20px;

    flex-direction:column;
    align-items:flex-start;

    padding:20px;

    border-radius:20px;

    background:#fff;

    box-shadow:
      var(--shadow);
  }

  .nav-links.open{
    display:flex;
  }

  .mobile-toggle{
    display:block;

    border:0;

    background:transparent;

    font-size:25px;
  }


  /* Layout */

  .hero-grid,
  .cta,
  .content-grid,
  .donation-grid{
    grid-template-columns:1fr;
  }

  .hero-visual{
    min-height:420px;
  }


  /* Cards */

  .cards{
    grid-template-columns:
      1fr 1fr;
  }

  .impact-grid{
    grid-template-columns:
      1fr 1fr;
  }

  .footer-grid{
    grid-template-columns:
      1fr 1fr;
  }

  .press-grid{
    grid-template-columns:
      1fr 1fr;
  }


  /* Trust Strip */

  .trust-strip{
    grid-template-columns:
      1fr 1fr;
  }

  .trust-strip div:nth-child(2){
    border-right:0;
  }


  /* Homepage Gallery */

  .gallery article,
  .gallery article:nth-child(n){
    grid-column:
      span 6;
  }


  /* Dedicated Gallery */

  .gallery.gallery-page-grid{
    grid-template-columns:
      repeat(
        2,
        minmax(0,1fr)
      );
  }

  .gallery.gallery-page-grid article,
  .gallery.gallery-page-grid article:nth-child(1),
  .gallery.gallery-page-grid article:nth-child(2),
  .gallery.gallery-page-grid article:nth-child(n+3),
  .gallery.gallery-page-grid article:nth-child(n){
    grid-column:
      span 1;
  }


  /* Activities */

  .activities-cms-grid{
    grid-template-columns:1fr;
  }

}


/* =========================================================
   26. MOBILE
   ========================================================= */

@media(max-width:600px){

  .container{
    width:
      min(
        calc(100% - 24px),
        1180px
      );
  }


  /* Top Bar */

  .topbar .container{
    flex-direction:column;

    gap:2px;
  }


  /* Navigation */

  .nav-row{
    height:72px;
  }

  .nav-links{
    top:72px;
  }

  .logo-wrap{
    width:48px;
    height:48px;
  }


  /* Hero */

  .hero{
    padding-top:42px;
  }

  .hero h1{
    font-size:3.35rem;
  }

  .hero-visual{
    min-height:330px;
  }

  .photo-card.main{
    inset:
      0 24px 30px 0;
  }

  .photo-card.badge{
    width:170px;

    padding:18px;
  }


  /* Generic Grids */

  .cards,
  .impact-grid,
  .press-grid,
  .footer-grid,
  .form-row{
    grid-template-columns:1fr;
  }


  /* Homepage Gallery */

  .gallery article,
  .gallery article:nth-child(n){
    grid-column:
      span 12;
  }


  /* Dedicated Gallery */

  .gallery.gallery-page-grid{
    grid-template-columns:1fr;

    gap:16px;
  }

  .gallery.gallery-page-grid article,
  .gallery.gallery-page-grid article:nth-child(1),
  .gallery.gallery-page-grid article:nth-child(2),
  .gallery.gallery-page-grid article:nth-child(n+3),
  .gallery.gallery-page-grid article:nth-child(n){
    grid-column:
      span 1;
  }


  /* Activities */

  .activities-live-section{
    padding-top:0;
    padding-bottom:24px;
  }

  .activities-cms-grid{
    grid-template-columns:1fr;

    gap:16px;
  }

  .activity-cms-content{
    padding:
      22px 20px 24px;
  }

  .activity-cms-content h2{
    font-size:1.8rem;
  }


  /* Trust */

  .trust-strip{
    grid-template-columns:1fr;
  }

  .trust-strip div{
    border-right:0;

    border-bottom:
      1px solid var(--line);
  }


  /* Sections */

  section{
    padding:
      62px 0;
  }

  .section-head{
    display:block;
  }


  /* Footer */

  .copyright{
    flex-direction:column;
    align-items:flex-start;
  }

}

/* =========================================================
   DONATION PAGE
   ========================================================= */

.donation-section{
  padding-top:30px;
}

.donation-layout{
  display:grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(360px,.8fr);

  gap:24px;

  align-items:start;
}

.donation-payment-column{
  display:grid;
  gap:24px;
}

.donation-card,
.donation-confirmation-card{
  padding:32px;
}

.donation-card h2,
.donation-confirmation-card h2{
  margin:
    10px 0 8px;

  color:var(--ink);

  font-family:
    Georgia,
    serif;

  font-size:
    clamp(
      2rem,
      3vw,
      2.8rem
    );

  line-height:1.08;
}

.donation-intro{
  margin:
    0 0 26px;

  color:var(--muted);
}


/* =========================================================
   BANK DETAILS
   ========================================================= */

.bank-details{
  overflow:hidden;

  border:
    1px solid var(--line);

  border-radius:20px;

  background:#fbfcfa;
}

.bank-detail-row{
  display:grid;

  grid-template-columns:
    150px 1fr;

  gap:20px;

  padding:
    17px 20px;

  border-bottom:
    1px solid var(--line);
}

.bank-detail-row:last-child{
  border-bottom:0;
}

.bank-detail-row span{
  color:var(--muted);

  font-size:.88rem;
  font-weight:650;
}

.bank-detail-row strong{
  color:var(--ink);

  font-size:.98rem;
}

.bank-number{
  letter-spacing:.04em;
}

.bank-location{
  margin-top:22px;

  padding:
    18px 20px;

  border-radius:18px;

  background:#edf4f0;
}

.bank-location strong{
  display:block;

  margin-bottom:5px;

  color:var(--green);

  font-size:.82rem;

  text-transform:uppercase;
  letter-spacing:.1em;
}

.bank-location p{
  margin:0;

  color:var(--ink);
}


/* =========================================================
   PHONEPE / QR
   ========================================================= */

.phonepe-card{
  text-align:left;
}

.donation-qr-wrap{
  width:min(100%,440px);

  margin:
    10px auto 22px;

  padding:16px;

  border:
    1px solid var(--line);

  border-radius:24px;

  background:#fff;
}

.donation-qr-image{
  display:block;

  width:100%;
  height:auto;

  border-radius:14px;
}

.phonepe-number{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:16px;

  padding:
    18px 20px;

  border-radius:18px;

  background:var(--ink);

  color:#fff;
}

.phonepe-number span{
  color:#c9d8d3;

  font-size:.86rem;
  font-weight:650;
}

.phonepe-number strong{
  font-size:
    clamp(
      1.25rem,
      3vw,
      1.7rem
    );

  letter-spacing:.04em;
}


/* =========================================================
   DONATION CONFIRMATION
   ========================================================= */

.donation-confirmation-card{
  position:sticky;

  top:110px;
}


/* =========================================================
   DONATION — TABLET
   ========================================================= */

@media(max-width:900px){

  .donation-layout{
    grid-template-columns:1fr;
  }

  .donation-confirmation-card{
    position:static;
  }

}


/* =========================================================
   DONATION — MOBILE
   ========================================================= */

@media(max-width:600px){

  .donation-section{
    padding-top:10px;
  }

  .donation-card,
  .donation-confirmation-card{
    padding:22px 18px;
  }

  .bank-detail-row{
    grid-template-columns:1fr;

    gap:4px;

    padding:
      15px 16px;
  }

  .donation-qr-wrap{
    padding:10px;

    border-radius:18px;
  }

  .phonepe-number{
    flex-direction:column;

    align-items:flex-start;

    gap:4px;
  }

}
/* =========================================================
   PUBLIC FORM STATUS
   ========================================================= */

.form-status{
  display:none;
  padding:13px 15px;
  border-radius:14px;
  font-size:.9rem;
  font-weight:650;
}

.form-status:not(:empty){
  display:block;
}

.form-status.is-loading{
  color:#5f746c;
  border:1px solid #d9e4df;
  background:#f3f7f5;
}

.form-status.is-success{
  color:#1d5946;
  border:1px solid #badccd;
  background:#edf8f3;
}

.form-status.is-error{
  color:#8a352d;
  border:1px solid #efc8c3;
  background:#fff2f0;
}

.form button:disabled{
  cursor:not-allowed;
  opacity:.65;
}