/* ============================================================
   YPDMI — Components CSS
   Buttons, Cards, Badges, Forms, Progress Bars, Modals
   ============================================================ */

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.75rem;
  border-radius: var(--radius-full);
  font-family: var(--font-heading);
  font-size: 0.925rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: var(--transition);
  white-space: nowrap;
  cursor: pointer;
  border: 2px solid transparent;
  line-height: 1;
}

.btn--primary {
  background: var(--c-primary);
  color: #fff;
  box-shadow: var(--shadow-primary);
}
.btn--primary:hover {
  background: var(--c-primary-600);
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(26,107,138,0.35);
}

.btn--accent {
  background: var(--c-accent);
  color: #fff;
  box-shadow: var(--shadow-accent);
}
.btn--accent:hover {
  background: var(--c-accent-dark);
  transform: translateY(-2px);
  box-shadow: 0 12px 36px rgba(224,123,57,0.40);
}

.btn--outline {
  background: transparent;
  border-color: var(--c-primary);
  color: var(--c-primary);
}
.btn--outline:hover {
  background: var(--c-primary);
  color: #fff;
  transform: translateY(-2px);
}

.btn--outline-white {
  background: transparent;
  border-color: rgba(255,255,255,0.6);
  color: #fff;
}
.btn--outline-white:hover {
  background: rgba(255,255,255,0.15);
  border-color: #fff;
}

.btn--ghost {
  background: transparent;
  color: var(--c-primary);
  padding-left: 0;
  padding-right: 0;
}
.btn--ghost:hover { color: var(--c-primary-600); gap: 0.75rem; }

.btn--sm { padding: 0.5rem 1.25rem; font-size: 0.8rem; }
.btn--lg { padding: 1rem 2.25rem; font-size: 1rem; }
.btn--block { width: 100%; }

.btn i, .btn svg { font-size: 1.1em; }

/* ============================================================
   BADGES
   ============================================================ */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.3rem 0.875rem;
  border-radius: var(--radius-full);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-family: var(--font-heading);
}
.badge--primary { background: var(--c-primary-100); color: var(--c-primary); }
.badge--accent  { background: var(--c-accent-100);  color: var(--c-accent-dark); }
.badge--hope    { background: var(--c-hope-100);    color: var(--c-hope); }
.badge--purple  { background: var(--c-purple-100);  color: var(--c-purple); }
.badge--white   { background: rgba(255,255,255,0.18); color: #fff; backdrop-filter: blur(8px); }
.badge--dark    { background: rgba(0,0,0,0.12); color: var(--c-text-100); }

/* ============================================================
   CARDS — BASE
   ============================================================ */
.card {
  background: var(--c-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
  transition: var(--transition-slow);
  border: 1px solid var(--c-border);
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
}
.card__body { padding: 1.5rem; }
.card__footer { padding: 1rem 1.5rem; border-top: 1px solid var(--c-border); }

/* ============================================================
   CARD — BERITA
   ============================================================ */
.news-card { display: flex; flex-direction: column; }
.news-card__img-wrap {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/10;
}
.news-card__img-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.news-card:hover .news-card__img-wrap img { transform: scale(1.06); }
.news-card__badge {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
}
.news-card__body { padding: 1.25rem 1.5rem; flex: 1; display: flex; flex-direction: column; }
.news-card__meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.78rem;
  color: var(--c-text-700);
  margin-bottom: 0.625rem;
}
.news-card__meta i { font-size: 0.85em; }
.news-card__title {
  font-size: 1.025rem;
  font-weight: 700;
  color: var(--c-text-100);
  line-height: 1.4;
  margin-bottom: 0.625rem;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-card__title:hover { color: var(--c-primary); }
.news-card__excerpt {
  font-size: 0.875rem;
  color: var(--c-text-500);
  line-height: 1.65;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 1rem;
}
.news-card--featured { grid-column: 1 / -1; flex-direction: row; }
.news-card--featured .news-card__img-wrap { width: 45%; flex-shrink: 0; aspect-ratio: auto; }
.news-card--featured .news-card__title { font-size: 1.375rem; -webkit-line-clamp: 4; }
.news-card--featured .news-card__excerpt { -webkit-line-clamp: 4; }

/* ============================================================
   CARD — DONASI / CAMPAIGN
   ============================================================ */
.donation-card { display: flex; flex-direction: column; }
.donation-card__img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.donation-card:hover .donation-card__img { transform: scale(1.04); }
.donation-card__img-wrap { overflow: hidden; }
.donation-card__body { padding: 1.375rem 1.5rem; flex: 1; display: flex; flex-direction: column; }
.donation-card__title { font-size: 1.075rem; font-weight: 700; margin-bottom: 0.5rem; line-height: 1.35; }
.donation-card__desc { font-size: 0.85rem; color: var(--c-text-500); line-height: 1.65; margin-bottom: 1.25rem; flex: 1; }

/* Progress Bar */
.progress-bar-wrap { margin-bottom: 1rem; }
.progress-bar-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  margin-bottom: 0.5rem;
  font-weight: 600;
}
.progress-bar-label .pct { color: var(--c-primary); font-size: 0.9rem; }
.progress-bar-track {
  height: 10px;
  background: var(--c-border);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.progress-bar-fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--c-primary-400), var(--c-primary));
  width: 0%;
  transition: width 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.progress-bar-fill--hot {
  background: linear-gradient(90deg, #F5A66A, var(--c-accent));
}
.progress-bar-fill--done {
  background: linear-gradient(90deg, #4CAF80, var(--c-hope));
}

.donation-stats {
  display: flex;
  gap: 1rem;
  font-size: 0.78rem;
  color: var(--c-text-500);
  margin-bottom: 1.25rem;
}
.donation-stat {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.donation-stat strong { color: var(--c-text-100); }
.donation-amount { font-size: 1.25rem; font-weight: 800; color: var(--c-primary); margin-bottom: 0.25rem; font-family: var(--font-heading); }
.donation-target { font-size: 0.78rem; color: var(--c-text-700); margin-bottom: 1rem; }

/* ============================================================
   CARD — PROGRAM
   ============================================================ */
.program-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 1.75rem;
  background: var(--c-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-slow);
  position: relative;
  overflow: hidden;
}
.program-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 4px; height: 100%;
  background: var(--c-primary);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 0.35s ease;
}
.program-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.program-card:hover::before { transform: scaleY(1); }
.program-card__icon {
  width: 56px; height: 56px;
  background: var(--c-primary-100);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
  margin-bottom: 1.25rem;
  transition: var(--transition);
}
.program-card:hover .program-card__icon {
  background: var(--c-primary);
  transform: scale(1.1);
}
.program-card__title { font-size: 1.05rem; font-weight: 700; margin-bottom: 0.5rem; }
.program-card__desc { font-size: 0.875rem; color: var(--c-text-500); line-height: 1.65; }

/* ============================================================
   CARD — TEAM / PENGURUS
   ============================================================ */
.team-card {
  text-align: center;
  padding: 2rem 1.5rem;
  background: var(--c-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--c-border);
  box-shadow: var(--shadow-sm);
  transition: var(--transition-slow);
}
.team-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.team-card__avatar {
  width: 88px; height: 88px;
  border-radius: var(--radius-full);
  object-fit: cover;
  margin: 0 auto 1rem;
  border: 3px solid var(--c-primary-100);
  background: var(--c-primary-100);
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem;
  color: var(--c-primary);
  overflow: hidden;
}
.team-card__name { font-size: 1rem; font-weight: 700; margin-bottom: 0.25rem; }
.team-card__role { font-size: 0.8rem; color: var(--c-primary); font-weight: 600; margin-bottom: 0.375rem; }
.team-card__location { font-size: 0.78rem; color: var(--c-text-700); display: flex; align-items: center; justify-content: center; gap: 0.3rem; }

/* ============================================================
   CARD — TESTIMONIAL
   ============================================================ */
.testimonial-card {
  background: var(--c-surface);
  border-radius: var(--radius-xl);
  padding: 2rem;
  box-shadow: var(--shadow-md);
  position: relative;
}
.testimonial-card::before {
  content: '"';
  font-family: Georgia, serif;
  font-size: 5rem;
  line-height: 1;
  color: var(--c-primary-100);
  position: absolute;
  top: 1rem;
  left: 1.5rem;
  z-index: 0;
}
.testimonial-card__text {
  position: relative;
  z-index: 1;
  font-size: 0.975rem;
  color: var(--c-text-300);
  line-height: 1.8;
  font-style: italic;
  margin-bottom: 1.25rem;
}
.testimonial-card__author { display: flex; align-items: center; gap: 0.875rem; }
.testimonial-card__avatar {
  width: 48px; height: 48px;
  border-radius: var(--radius-full);
  object-fit: cover;
  background: var(--c-primary-100);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  color: var(--c-primary);
  overflow: hidden;
  flex-shrink: 0;
}
.testimonial-card__name { font-weight: 700; font-size: 0.9rem; }
.testimonial-card__role { font-size: 0.78rem; color: var(--c-text-700); }

/* ============================================================
   FORMS
   ============================================================ */
.form-group { margin-bottom: 1.25rem; }
.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--c-text-300);
  margin-bottom: 0.5rem;
}
.form-control {
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--c-surface);
  border: 1.5px solid var(--c-border);
  border-radius: var(--radius-md);
  color: var(--c-text-100);
  font-size: 0.925rem;
  transition: var(--transition);
  outline: none;
}
.form-control:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px var(--c-primary-100);
}
.form-control::placeholder { color: var(--c-text-700); }
textarea.form-control { resize: vertical; min-height: 120px; }

.form-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
@media(max-width:640px) { .form-row { grid-template-columns: 1fr; } }

/* ============================================================
   DIVIDER
   ============================================================ */
.divider { height: 1px; background: var(--c-border); margin-block: 1.5rem; }
.divider--dashed { border: none; border-top: 1.5px dashed var(--c-border); }

/* ============================================================
   STAT ITEM
   ============================================================ */
.stat-item { text-align: center; }
.stat-number {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: #fff;
  line-height: 1;
  margin-bottom: 0.375rem;
}
.stat-number span { color: var(--c-primary-400); }
.stat-label {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.72);
  font-weight: 500;
  letter-spacing: 0.03em;
}

/* ============================================================
   INFO BOX / ALERT
   ============================================================ */
.info-box {
  padding: 1rem 1.25rem;
  border-radius: var(--radius-md);
  border-left: 4px solid var(--c-primary);
  background: var(--c-primary-100);
  font-size: 0.9rem;
  color: var(--c-text-300);
  line-height: 1.65;
}
.info-box--warning { border-color: var(--c-accent); background: var(--c-accent-100); }
.info-box--success { border-color: var(--c-hope); background: var(--c-hope-100); }

/* ============================================================
   ACCORDION (FAQ)
   ============================================================ */
.accordion-item {
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-bottom: 0.75rem;
  background: var(--c-surface);
}
.accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 1.125rem 1.375rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--c-text-100);
  text-align: left;
  transition: var(--transition);
  background: transparent;
}
.accordion-trigger:hover { color: var(--c-primary); }
.accordion-trigger i { flex-shrink: 0; transition: transform 0.3s ease; }
.accordion-item.open .accordion-trigger i { transform: rotate(180deg); }
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1);
}
.accordion-content p {
  padding: 0 1.375rem 1.125rem;
  font-size: 0.9rem;
  color: var(--c-text-500);
  line-height: 1.75;
}
.accordion-item.open .accordion-content { max-height: 500px; }

/* ============================================================
   BREADCRUMB
   ============================================================ */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--c-text-700);
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.breadcrumb a { color: var(--c-primary); }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb-sep { color: var(--c-text-700); }

/* ============================================================
   PAGINATION
   ============================================================ */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 2.5rem;
}
.page-btn {
  width: 40px; height: 40px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.875rem; font-weight: 600;
  border: 1.5px solid var(--c-border);
  background: var(--c-surface);
  color: var(--c-text-300);
  transition: var(--transition);
  cursor: pointer;
}
.page-btn:hover, .page-btn.active {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: #fff;
}

/* ============================================================
   GALLERY GRID
   ============================================================ */
.gallery-grid {
  columns: 4;
  column-gap: 1rem;
}
.gallery-item {
  break-inside: avoid;
  margin-bottom: 1rem;
  border-radius: var(--radius-md);
  overflow: hidden;
  cursor: pointer;
  position: relative;
}
.gallery-item img { width: 100%; display: block; transition: transform 0.5s ease; }
.gallery-item:hover img { transform: scale(1.06); }
.gallery-item__overlay {
  position: absolute;
  inset: 0;
  background: rgba(13,34,51,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: var(--transition);
  color: #fff;
  font-size: 1.5rem;
}
.gallery-item:hover .gallery-item__overlay { opacity: 1; }

@media(max-width:1024px) { .gallery-grid { columns: 3; } }
@media(max-width:768px)  { .gallery-grid { columns: 2; } }
@media(max-width:480px)  { .gallery-grid { columns: 1; } }

/* ============================================================
   NEWSLETTER FORM — Simple Responsive Fix
   ============================================================ */
.nsl-fixed-form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 500px;
  margin: 0 auto;
  background: white;
  padding: 0.4rem 0.4rem 0.4rem 1.25rem;
  border-radius: var(--radius-full);
}
.nsl-fixed-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  color: var(--c-text-100);
  font-size: 0.95rem;
}
.nsl-fixed-btn {
  border-radius: var(--radius-full);
  padding: 0.75rem 1.75rem !important;
}

@media (max-width: 540px) {
  .nsl-fixed-form {
    flex-direction: column;
    background: transparent;
    padding: 0;
    gap: 1rem;
    border-radius: 0;
  }
  .nsl-fixed-input {
    background: white;
    padding: 1rem 1.5rem;
    border-radius: var(--radius-md);
    width: 100%;
  }
  .nsl-fixed-btn {
    width: 100%;
    border-radius: var(--radius-md);
    padding: 1rem !important;
    justify-content: center;
  }
}




/* ============================================================
   FLEX-BETWEEN — responsive wrap
   ============================================================ */
@media (max-width: 640px) {
  .flex-between {
    flex-wrap: wrap;
    gap: 1rem;
  }
  .flex-between > *:last-child { width: 100%; }
}

/* ============================================================
   NEWS CARD FEATURED — stack on mobile
   ============================================================ */
@media (max-width: 768px) {
  .news-card--featured {
    flex-direction: column;
  }
  .news-card--featured .news-card__img-wrap {
    width: 100%;
    aspect-ratio: 16/9;
  }
}

/* ============================================================
   DONATION CARDS — ensure img is constrained
   ============================================================ */
.donation-card__img-wrap img {
  width: 100%;
  display: block;
}

/* ============================================================
   SECTION PADDING — smaller on very small screens
   ============================================================ */
@media (max-width: 480px) {
  :root { --section-py: 2.5rem; }
  .section-title { font-size: 1.4rem; }
  .section-desc  { font-size: 0.95rem; }
  .stat-number   { font-size: 2rem; }
  .btn--lg       { padding: 0.875rem 1.75rem; font-size: 0.95rem; }
}

/* ============================================================
   DONATION STATS — wrap on mobile
   ============================================================ */
@media (max-width: 480px) {
  .donation-stats { flex-wrap: wrap; gap: 0.5rem; }
}

/* ============================================================
   PROGRAM CARD — full width on mobile
   ============================================================ */
@media (max-width: 480px) {
  .program-card { padding: 1.25rem; }
  .program-card__icon { width: 48px; height: 48px; font-size: 1.4rem; }
}

/* ============================================================
   BREADCRUMB — smaller on mobile
   ============================================================ */
@media (max-width: 480px) {
  .breadcrumb { font-size: 0.75rem; }
}

/* ============================================================
   HERO SECTION — text size on mobile
   ============================================================ */
@media (max-width: 480px) {
  .slide__title { font-size: clamp(1.4rem, 6vw, 2rem) !important; }
  .slide__desc  { font-size: 0.9rem !important; }
}