/* =============================================
   SECTIONS — tiles, disability cards, how-we-help,
   success stories, active projects, news & events
   Reused across all 67 pages via card templates
   ============================================= */

/* ── QUICK TILES ── */
#tiles { padding: 28px 0; }
#tiles .sh { margin-bottom: 16px; }
.tiles-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 12px; }
.tile-card {
  background: #FDF6EC;
  border-radius: 10px;
  padding: 14px 10px 12px; text-align: center;
  text-decoration: none;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  box-shadow: 0 2px 10px rgba(15,61,46,0.06);
}
.tile-ico {
  width: 52px; height: 52px; border-radius: 10px;
  background: #E3F2EB;
  display: flex; align-items: center; justify-content: center;
  border: 3px solid transparent;
  transition: border-color 0.22s, box-shadow 0.22s, transform 0.18s;
}
/* Each tile gets its own icon-box colour */
.tiles-grid .tile-card:nth-child(1) .tile-ico { background: #C8E0D2; } /* Hub        — deep green  */
.tiles-grid .tile-card:nth-child(2) .tile-ico { background: #F5E4B8; } /* Schemes    — gold tint   */
.tiles-grid .tile-card:nth-child(3) .tile-ico { background: #BDD9CA; } /* Scholarships— forest grn */
.tiles-grid .tile-card:nth-child(4) .tile-ico { background: #F5D4A0; } /* Donate     — warm gold   */
.tiles-grid .tile-card:nth-child(5) .tile-ico { background: #BDD9EA; } /* Volunteer  — teal/blue   */
.tile-ico svg, .tile-ico img { display: block; width: 30px; height: 30px; }
.tile-card:hover .tile-ico {
  border-color: #C8963A;
  box-shadow: 0 0 0 4px rgba(200,150,58,0.15);
  transform: scale(1.08);
}
.tile-card:hover .tile-name { color: #C8963A; }
.tile-name    { font-size: 13px; font-weight: bold; color: #0F3D2E; line-height: 1.3; transition: color 0.2s; }
.tile-name-ta { font-size: 10.5px; color: #2A6E5A; font-family: 'Latha','Nirmala UI',Arial,sans-serif; white-space: nowrap; }

/* ── DIFFERENTLY ABLED CARDS (Card Template 1) ── */
#disabilities { padding-bottom: 16px; }
#disabilities .view-all { margin-top: 18px; }
.dis-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.dis-card {
  background: #fff; border-radius: 10px; overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: 0 2px 10px rgba(15,61,46,0.06);
}
.dis-head {
  padding: 24px 24px 20px;
  background: linear-gradient(135deg, #E3F2EB 0%, #cce8d8 100%);
  display: flex; align-items: center; gap: 16px;
}
/* Card 2 — gold tint; Card 3 — teal/blue tint */
.dis-grid .dis-card:nth-child(2) .dis-head { background: linear-gradient(135deg, #FDF3E0 0%, #F0DCA0 100%); }
.dis-grid .dis-card:nth-child(3) .dis-head { background: linear-gradient(135deg, #E0EEF8 0%, #BDD9EE 100%); }
.dis-ico {
  width: 54px; height: 54px; background: #E3F2EB;
  border-radius: 10px; display: flex; align-items: center;
  justify-content: center; flex-shrink: 0;
  border: 2px solid transparent; transition: border-color 0.2s;
}
.dis-ico svg { display: block; }
.dis-card:hover .dis-ico { border-color: #C8963A; }
.dis-title    { font-size: 18px; font-weight: bold; color: #0F3D2E; line-height: 1.2; }
.dis-title-ta { font-size: 13px; color: #2A6E5A; font-family: 'Latha','Nirmala UI',Arial,sans-serif; margin-top: 3px; }
.dis-body  { padding: 20px 24px 24px; flex: 1; display: flex; flex-direction: column; gap: 14px; }
.dis-brief { font-size: 14px; color: #555; line-height: 1.65; flex: 1; }
.dis-more {
  align-self: flex-start; font-size: 13px; font-weight: bold;
  color: #2A6E5A; text-decoration: none;
  display: inline-flex; align-items: center; gap: 5px;
  padding-bottom: 2px; border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.dis-more:hover { color: #C8963A; border-bottom-color: #C8963A; }

/* ── HOW WE HELP ── */
#how { padding: 20px 0; }
#how .sh { margin-bottom: 18px; }
#how .how-cta { text-align: center; margin-top: 28px; }
.how-flow {
  display: grid;
  grid-template-columns: 1fr 48px 1fr 48px 1fr;
  align-items: center; gap: 0;
}
.how-card {
  background: #fff; border-radius: 10px;
  padding: 18px 20px; text-align: center;
  box-shadow: 0 2px 10px rgba(15,61,46,0.07);
}
.how-num {
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: bold; color: #fff; margin: 0 auto 8px;
}
.how-num-1 { background: #0F3D2E; }
.how-num-2 { background: #C8963A; }
.how-num-3 { background: #2A6E5A; }
.how-emoji { font-size: 26px; display: block; margin-bottom: 6px; }
.how-title { font-size: 20px; font-weight: bold; color: #0F3D2E; margin-bottom: 4px; }
.how-desc  { font-size: 14px; color: #555; line-height: 1.65; }
.how-arrow {
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: #C8963A; font-weight: bold;
}

/* ── SUCCESS STORIES ── */
#stories { padding: 20px 0 16px; }
#stories .view-all { margin-top: 18px; }
.story-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.story-card {
  background: #fff; border-radius: 10px; overflow: hidden;
  box-shadow: 0 2px 10px rgba(15,61,46,0.06);
  display: flex; flex-direction: column;
}
.story-img {
  height: 180px; position: relative;
  display: flex; align-items: center; justify-content: center;
}
.si-circle {
  display: flex; align-items: center; justify-content: center;
  font-size: 64px; line-height: 1;
  filter: drop-shadow(0 2px 6px rgba(15,61,46,0.15));
}
.si-1 { background: linear-gradient(135deg, #C5E3D4 0%, #E8F2EC 100%); } /* green  */
.si-2 { background: linear-gradient(135deg, #FDF3E0 0%, #F0DCA0 100%); } /* gold   */
.si-3 { background: linear-gradient(135deg, #E0EEF8 0%, #BDD9EE 100%); } /* teal   */
.story-badge {
  position: absolute; bottom: 14px; left: 16px;
  background: #C8963A; color: #fff;
  font-size: 10px; font-weight: bold; letter-spacing: 0.8px;
  text-transform: uppercase; padding: 4px 10px; border-radius: 4px;
}
.story-body { padding: 20px 22px 24px; flex: 1; display: flex; flex-direction: column; }
.story-name { font-size: 16px; font-weight: bold; color: #0F3D2E; margin-bottom: 8px; }
.story-txt  { font-size: 14px; color: #555; line-height: 1.6; margin-bottom: 12px; }
.story-loc  { font-size: 12px; color: #4A8068; display: flex; align-items: center; gap: 4px; }

/* ── ACTIVE PROJECTS (Card Template 5) ── */
#projects { padding: 14px 0; }
#projects .sh { margin-bottom: 16px; }
#projects .view-all { margin-top: 18px; }
.proj-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 14px; }
.proj-card {
  background: #fff; border-radius: 10px; padding: 14px 16px;
  box-shadow: 0 2px 10px rgba(15,61,46,0.07);
}
.proj-top  { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.proj-ico  {
  width: 38px; height: 38px; background: #E3F2EB;
  border-radius: 8px; display: flex; align-items: center;
  justify-content: center; font-size: 20px; flex-shrink: 0;
}
.proj-name { font-size: 13px; font-weight: bold; color: #0F3D2E; line-height: 1.3; }
.proj-num  { font-size: 26px; font-weight: bold; color: #2A6E5A; line-height: 1; }
.proj-sub  { font-size: 12px; color: #777; margin: 2px 0 8px; }
.pbar      { background: #E3F2EB; border-radius: 4px; height: 6px; overflow: hidden; margin-bottom: 4px; }
.pbar-fill { background: linear-gradient(90deg, #2A6E5A, #C8963A); height: 100%; border-radius: 4px; }
.pbar-meta { display: flex; justify-content: space-between; font-size: 11px; color: #888; margin-bottom: 8px; }
.proj-btn  {
  display: block; text-align: center;
  background: #F2F8F5; color: #0F3D2E;
  text-decoration: none; padding: 7px;
  border-radius: 5px; font-size: 13px; font-weight: bold;
  border: 2px solid transparent; transition: background 0.15s, color 0.15s;
}
.proj-btn:hover { background: #C8963A; color: #fff; }

/* ── NEWS & EVENTS ── */
#news { padding-top: 14px; }
#news .sh { margin-bottom: 16px; }
#news .view-all { margin-top: 18px; }
.news-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 22px; }
.news-card {
  border-radius: 10px; overflow: hidden;
  border: 1px solid #edf4f0; text-decoration: none; color: #212121;
  display: flex; flex-direction: column;
  box-shadow: 0 2px 8px rgba(15,61,46,0.05);
}
.news-img {
  height: 130px; flex-shrink: 0; position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
}
.ni-ico { font-size: 52px; line-height: 1; filter: drop-shadow(0 2px 6px rgba(15,61,46,0.15)); position: relative; }
.ni-tag {
  font-size: 10px; font-weight: bold; color: #0F3D2E;
  text-transform: uppercase; letter-spacing: 1.2px;
  background: rgba(15,61,46,0.1); padding: 2px 9px; border-radius: 10px; position: relative;
}
.ni1 { background: linear-gradient(135deg, #C5E3D4 0%, #E8F2EC 100%); } /* green  */
.ni2 { background: linear-gradient(135deg, #FDF3E0 0%, #F5DFA8 100%); } /* gold   */
.ni3 { background: linear-gradient(135deg, #E0EEF8 0%, #BDD9EE 100%); } /* blue   */
.ni4 { background: linear-gradient(135deg, #F0E8F8 0%, #DDD0F0 100%); } /* purple */
.news-body  { padding: 16px 18px 20px; flex: 1; display: flex; flex-direction: column; }
.news-type  { font-size: 10px; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; color: #C8963A; margin-bottom: 7px; }
.news-title { font-size: 14px; font-weight: bold; color: #0F3D2E; line-height: 1.45; flex: 1; margin-bottom: 10px; }
.news-date  { font-size: 12px; color: #888; }

/* RESPONSIVE SECTIONS */
@media (max-width: 1024px) {
  .proj-grid { grid-template-columns: repeat(2,1fr); }
  .news-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 768px) {
  .tiles-grid { grid-template-columns: repeat(2,1fr); }
  .tiles-grid .tile-card:last-child { grid-column: span 2; max-width: 200px; margin: 0 auto; width: 100%; }
  .dis-grid, .story-grid { grid-template-columns: 1fr; }
  .how-flow  { grid-template-columns: 1fr; gap: 16px; }
  .how-arrow { display: none; }
  .proj-grid, .news-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 480px) {
  .proj-grid, .news-grid { grid-template-columns: 1fr; }
  .tiles-grid { grid-template-columns: 1fr; }
  .tiles-grid .tile-card:last-child { grid-column: span 1; max-width: none; }
}