/* =====================================================
   Dhrub Foundation — Supplemental Stylesheet
   Core layout/component CSS lives in header.php
   This file handles page-specific & component styles
   ===================================================== */

/* =====================================================
   SECTION SPACING
   ===================================================== */
.section-padding { padding: clamp(3rem,8vw,5rem) 0; }
.container {
  width:100%;max-width:1400px;
  margin:0 auto;padding:0 clamp(1.25rem,4vw,2.5rem);
}

/* Full-width override — prevents any inherited display:flex from shrinking body */
html,body{
  width:100%;max-width:100%;overflow-x:hidden;
}
body{display:block!important}
.page-body,.site-main{
  width:100%;max-width:100%;
}

/* =====================================================
   SECTION TITLES
   ===================================================== */
.section-title {
  font-size:clamp(1.5rem,4vw,2.25rem);font-weight:800;
  color:var(--foreground);line-height:1.2;
  letter-spacing:-0.025em;margin-bottom:0.875rem;
}
.section-title span { color:var(--primary); }
.section-subtitle {
  font-size:clamp(0.95rem,2.5vw,1.075rem);
  color:var(--n-600,#4b5563);line-height:1.75;
  max-width:620px;margin:0 auto;
}

/* =====================================================
   HERO STYLES (index.php specific)
   ===================================================== */
.hero {
  min-height:calc(100vh - 68px);
  display:flex;align-items:center;
  padding:clamp(3rem,8vw,5rem) 0;
  position:relative;overflow:hidden;
}
.hero-content {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(2rem,5vw,4rem);
  align-items:center;
}
.hero-title {
  font-size:clamp(2rem,5vw,3.5rem);font-weight:800;
  line-height:1.1;letter-spacing:-0.03em;
  margin-bottom:1.25rem;
}
.hero-stats {
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(0.75rem,2vw,1.25rem);
  padding:clamp(1rem,3vw,1.5rem);
  background:rgba(255,255,255,0.15);
  border-radius:var(--radius-lg,.75rem);
  backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.25);
}
@media(max-width:900px) {
  .hero-content { grid-template-columns:1fr; text-align:center; }
  .hero-content>div:last-child { display:none; }
  .hero-stats { grid-template-columns:repeat(3,1fr); }
}
@media(max-width:480px) {
  .hero-stats { grid-template-columns:1fr; }
}

/* =====================================================
   PROGRAM CARDS
   ===================================================== */
.program-card-img {
  width:100%;height:220px;object-fit:cover;
  transition:transform 0.5s ease;
  background:var(--n-100,#f3f4f6);
}
.program-card-img:hover { transform:scale(1.04); }

/* =====================================================
   COUNTER ANIMATION
   ===================================================== */
.counter {
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum";
}

/* =====================================================
   DONATION AMOUNT GRID
   ===================================================== */
.amount-grid {
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:0.75rem;margin-bottom:1rem;
}
@media(max-width:480px) { .amount-grid { grid-template-columns:repeat(2,1fr); } }
.amount-btn {
  padding:0.75rem 0.5rem;border:2px solid var(--border);
  border-radius:var(--radius-md,.5rem);background:white;
  font-weight:600;font-size:1rem;cursor:pointer;
  transition:all 0.2s ease;color:var(--foreground);
  font-family:inherit;
}
.amount-btn:hover,
.amount-btn.active {
  border-color:var(--primary);background:var(--sg-50,#e6f9f0);
  color:var(--primary);
}

/* =====================================================
   GALLERY GRID
   ===================================================== */
.gallery-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));
  gap:clamp(0.5rem,2vw,1rem);
}
.gallery-item {
  aspect-ratio:1;overflow:hidden;border-radius:var(--radius-lg,.75rem);
  cursor:pointer;position:relative;background:var(--n-100,#f3f4f6);
}
.gallery-item img {
  width:100%;height:100%;object-fit:cover;
  transition:transform 0.5s ease;
}
.gallery-item:hover img { transform:scale(1.08); }
.gallery-overlay {
  position:absolute;inset:0;
  background:rgba(0,0,0,0);
  display:flex;align-items:center;justify-content:center;
  transition:background 0.3s ease;
}
.gallery-overlay i {
  color:white;font-size:1.5rem;
  transform:scale(0);transition:transform 0.3s ease;
}
.gallery-item:hover .gallery-overlay { background:rgba(0,0,0,0.45); }
.gallery-item:hover .gallery-overlay i { transform:scale(1); }

/* =====================================================
   LIGHTBOX
   ===================================================== */
.lightbox {
  position:fixed;inset:0;background:rgba(0,0,0,0.92);
  z-index:9999;display:none;align-items:center;
  justify-content:center;padding:1rem;
}
.lightbox.active { display:flex; }
.lightbox-img {
  max-height:85vh;max-width:90vw;
  border-radius:var(--radius-lg,.75rem);
  object-fit:contain;box-shadow:0 20px 60px rgba(0,0,0,0.6);
}
.lightbox-close {
  position:absolute;top:1rem;right:1rem;
  width:44px;height:44px;background:rgba(255,255,255,0.15);
  border:none;border-radius:50%;cursor:pointer;
  color:white;font-size:1.25rem;
  display:flex;align-items:center;justify-content:center;
  transition:background 0.2s ease;
}
.lightbox-close:hover { background:rgba(255,255,255,0.3); }
.lightbox-nav {
  position:absolute;top:50%;transform:translateY(-50%);
  width:44px;height:44px;background:rgba(255,255,255,0.15);
  border:none;border-radius:50%;cursor:pointer;
  color:white;font-size:1.2rem;
  display:flex;align-items:center;justify-content:center;
  transition:background 0.2s ease;
}
.lightbox-nav:hover { background:rgba(255,255,255,0.3); }
.lightbox-prev { left:1rem; }
.lightbox-next { right:1rem; }

/* =====================================================
   BLOG CARD
   ===================================================== */
.blog-card-img {
  width:100%;height:200px;object-fit:cover;
  background:var(--n-100,#f3f4f6);
}
.blog-card-body { padding:1.25rem;flex:1;display:flex;flex-direction:column; }
.blog-card-footer { padding:0 1.25rem 1.25rem;margin-top:auto; }

/* =====================================================
   STORY CARD
   ===================================================== */
.story-card-img {
  width:100%;height:240px;object-fit:cover;
  background:var(--n-100,#f3f4f6);
}

/* =====================================================
   TEAM MEMBER CARD
   ===================================================== */
.team-avatar {
  width:100px;height:100px;border-radius:50%;
  object-fit:cover;border:4px solid var(--sg-100,#c0efe0);
  margin:0 auto 0.875rem;
  background:var(--n-100,#f3f4f6);
}
.team-card { text-align:center;padding:1.5rem 1.25rem; }

/* =====================================================
   VOLUNTEER / JOIN FORM STEPS
   ===================================================== */
.step-indicator {
  display:flex;align-items:center;gap:0.5rem;
  margin-bottom:1.5rem;flex-wrap:wrap;justify-content:center;
}
.step-dot {
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:0.875rem;
  border:2px solid var(--border);
  background:white;color:var(--n-400,#9ca3af);
  flex-shrink:0;transition:all 0.25s ease;
}
.step-dot.active {
  background:var(--primary);border-color:var(--primary);color:white;
}
.step-dot.done {
  background:var(--sg-100,#c0efe0);border-color:var(--primary);color:var(--primary);
}
.step-line {
  flex:1;min-width:20px;height:2px;
  background:var(--border);border-radius:2px;
  max-width:60px;
}

/* =====================================================
   DONOR PORTAL (ensure it doesn't inherit new layout)
   ===================================================== */

/* =====================================================
   TABLE RESPONSIVE
   ===================================================== */
.table-wrapper { width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch; }
table { width:100%;border-collapse:collapse;min-width:480px; }
th,td { padding:0.75rem 1rem;text-align:left;border-bottom:1px solid var(--border); }
th { background:var(--n-50,#f9fafb);font-weight:600;font-size:0.875rem;color:var(--n-700,#374151); }
tr:last-child td { border-bottom:none; }
tr:hover td { background:var(--sg-50,#e6f9f0); }

/* =====================================================
   CONTACT MAP EMBED
   ===================================================== */
.map-embed {
  width:100%;height:350px;border:none;
  border-radius:var(--radius-lg,.75rem);
  display:block;
}
@media(max-width:640px) { .map-embed { height:250px; } }

/* =====================================================
   NEWSLETTER SECTION
   ===================================================== */
.newsletter-form {
  display:flex;gap:0.625rem;flex-wrap:wrap;
  max-width:480px;
}
.newsletter-form input {
  flex:1;min-width:200px;
  padding:0.625rem 0.875rem;
  border:1.5px solid var(--n-300,#d1d5db);
  border-radius:var(--radius-md,.5rem);
  font-size:0.9375rem;font-family:inherit;
  background:white;min-height:44px;
}
.newsletter-form input:focus {
  outline:none;border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(46,179,139,.15);
}

/* =====================================================
   FLOATING DECORATIVE ELEMENTS
   ===================================================== */
.floating-element { pointer-events:none;user-select:none; }
@media(max-width:768px) { .hide-mobile { display:none!important; } }

/* =====================================================
   MISC UTILITY
   ===================================================== */
.flex { display:flex; }
.flex-wrap { flex-wrap:wrap; }
.items-center { align-items:center; }
.justify-center { justify-content:center; }
.justify-between { justify-content:space-between; }
.gap-1 { gap:0.375rem; }
.gap-2 { gap:0.75rem; }
.gap-3 { gap:1.25rem; }
.gap-4 { gap:1.5rem; }
.mb-1 { margin-bottom:0.5rem; }
.mb-2 { margin-bottom:1rem; }
.mb-3 { margin-bottom:1.5rem; }
.mb-4 { margin-bottom:2rem; }
.mt-1 { margin-top:0.5rem; }
.mt-2 { margin-top:1rem; }
.mt-3 { margin-top:1.5rem; }
.mt-4 { margin-top:2rem; }
.p-1 { padding:0.5rem; }
.p-2 { padding:1rem; }
.p-3 { padding:1.5rem; }
.text-sm { font-size:0.875rem; }
.text-xs { font-size:0.75rem; }
.rounded { border-radius:var(--radius-lg,.75rem); }
.rounded-full { border-radius:9999px; }
.shadow { box-shadow:var(--shadow-md); }
.overflow-hidden { overflow:hidden; }
.relative { position:relative; }
.absolute { position:absolute; }
.inset-0 { inset:0; }
.z-10 { z-index:10; }
.opacity-0 { opacity:0; }
.opacity-100 { opacity:1; }
.pointer-none { pointer-events:none; }

/* =====================================================
   PRINT
   ===================================================== */
@media print {
  .section-padding { padding:1rem 0; }
  .hero { min-height:auto;padding:2rem 0; }
}