/* Farewell Fund — Page-specific layout */

/* ---- Page header (non-home hero-lite banner) ---- */
.page-header {
  background: linear-gradient(155deg, var(--navy-900) 0%, #123a68 100%);
  color: var(--color-text-on-dark);
  padding-block: var(--space-10) var(--space-8);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-header::after {
  content: '';
  position: absolute;
  right: -60px; top: -60px;
  width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(214,191,137,0.25), transparent 70%);
}
.page-header h1 { color: var(--white); margin-bottom: var(--space-2); line-height: var(--lh-snug); }
.page-header p { color: var(--color-text-on-dark-muted); font-size: var(--fs-400); max-width: 60ch; margin-inline: auto; }

/* ---- How It Works: intro (family + fundraiser photo) ---- */
.how-intro { padding-block: var(--space-32); min-height: 56vh; display: flex; align-items: center; }
@media (max-width: 768px) { .how-intro { padding-block: var(--space-20); min-height: 0; } }

/* ---- How It Works: dual audience toggle ---- */
.audience-toggle { display: inline-flex; padding: 4px; background: var(--slate-100); border-radius: var(--radius-full); margin-bottom: var(--space-4); }
.audience-toggle button {
  border: none; background: transparent; padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-full); font-family: var(--font-heading); font-weight: 600;
  font-size: var(--fs-300); cursor: pointer; color: var(--color-text-muted); min-height: 44px;
  transition: all var(--duration-base) var(--ease-standard);
}
.audience-toggle button.is-active { background: var(--navy-900); color: var(--white); box-shadow: var(--shadow-sm); }
.audience-panel { display: none; }
.audience-panel.is-active { display: block; }

/* ---- Start a Fundraiser: two column layout ---- */
.fundraiser-layout { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--space-12); align-items: start; }
@media (max-width: 960px) { .fundraiser-layout { grid-template-columns: 1fr; } }
.fundraiser-sidebar { position: sticky; top: calc(var(--header-height) + var(--space-6)); display: flex; flex-direction: column; gap: var(--space-6); }
@media (max-width: 960px) { .fundraiser-sidebar { position: static; } }

/* ---- Donate / Browse ---- */
.browse-toolbar {
  display: flex; gap: var(--space-4); align-items: center; flex-wrap: wrap;
  background: var(--white); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6); margin-bottom: var(--space-10);
  box-shadow: var(--shadow-sm);
}
.search-field { position: relative; flex: 1; min-width: 220px; }
.search-field svg { position: absolute; left: var(--space-4); top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--slate-400); }
.search-field input { padding-left: calc(var(--space-4) * 2 + 20px); }
.filter-pills { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.browse-results-count { font-size: var(--fs-200); color: var(--color-text-muted); margin-bottom: var(--space-6); }
.campaign-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
@media (max-width: 960px) { .campaign-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .campaign-grid { grid-template-columns: 1fr; } }
.empty-state { text-align: center; padding: var(--space-16) var(--space-6); display: none; }
.empty-state.is-visible { display: block; }
.empty-state svg { width: 56px; height: 56px; color: var(--slate-400); margin: 0 auto var(--space-4); }

.browse-loading, .browse-error { text-align: center; padding: var(--space-16) var(--space-6); color: var(--color-text-muted); }
.browse-error { color: var(--color-danger); }

.campaign-media-btn { all: unset; box-sizing: border-box; display: block; width: 100%; cursor: pointer; }
.campaign-media-btn img { width: 100%; height: 100%; object-fit: cover; display: block; }
.campaign-media-btn:focus-visible { outline: 3px solid var(--color-secondary); outline-offset: -3px; }

.campaign-title-btn { all: unset; box-sizing: border-box; display: block; cursor: pointer; font: inherit; color: inherit; }
.campaign-title-btn:hover, .campaign-title-btn:focus-visible { color: var(--color-secondary); }

.campaign-footer--end { justify-content: flex-end; }

/* ---- Fundraiser detail modal ---- */
.modal-detail { max-width: 640px; text-align: left; padding: var(--space-8); }
.modal-detail .detail-photo-wrap { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16/9; margin-bottom: var(--space-5); background: var(--slate-100); }
.modal-detail .detail-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.modal-detail h2 { font-size: var(--fs-600); margin: var(--space-2) 0 var(--space-4); }
.modal-detail .detail-story { white-space: pre-line; color: var(--color-text); margin-bottom: var(--space-6); }
.modal-detail .detail-goal { font-size: var(--fs-300); margin-bottom: var(--space-6); }
.modal-detail .detail-goal strong { font-family: var(--font-heading); color: var(--navy-900); font-size: var(--fs-500); }
.modal-detail .detail-share { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.modal-detail .detail-share-hint { font-size: var(--fs-100); text-align: center; margin-top: var(--space-2); }

/* ---- About: values + timeline ---- */
.values-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-8); }
@media (max-width: 900px) { .values-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .values-grid { grid-template-columns: 1fr; } }

/* ---- Blog ---- */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-10); }
@media (max-width: 900px) { .blog-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .blog-grid { grid-template-columns: 1fr; } }
.blog-featured { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-10); align-items: center; background: var(--white); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; margin-bottom: var(--space-16); text-decoration: none; transition: box-shadow var(--duration-base) var(--ease-standard), transform var(--duration-base) var(--ease-standard); }
.blog-featured:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.blog-featured * { text-decoration: none; }
.blog-featured h2 { color: var(--navy-900); }
.blog-featured:hover h2 { color: var(--color-secondary); }
@media (max-width: 800px) { .blog-featured { grid-template-columns: 1fr; } }
.blog-featured-media { aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; color: var(--white); }
.blog-featured-media svg { width: 56px; height: 56px; opacity: 0.9; }
.blog-featured-body { padding: var(--space-10); }
@media (max-width: 800px) { .blog-featured-body { padding: var(--space-8); } }
.category-tags { display: flex; gap: var(--space-2); margin-bottom: var(--space-8); flex-wrap: wrap; }

/* ---- Blog accordion (articles expand in place) ---- */
.article-accordion { display: grid; gap: var(--space-5); max-width: var(--container-narrow); margin-inline: auto; }
.article-block { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--white); overflow: hidden; transition: box-shadow var(--duration-base) var(--ease-standard); }
.article-block:hover { box-shadow: var(--shadow-md); }
.article-block summary {
  cursor: pointer; list-style: none; display: flex; align-items: center; gap: var(--space-5);
  padding: var(--space-6); min-height: 44px;
}
.article-block summary::-webkit-details-marker { display: none; }
.article-block[open] summary { border-bottom: 1px solid var(--color-border); }
.article-block-icon {
  flex-shrink: 0; width: 56px; height: 56px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center; color: var(--white);
}
.article-block-icon svg { width: 28px; height: 28px; }
.article-block-heading { flex: 1; min-width: 0; }
.article-block-heading h3 { font-size: var(--fs-500); color: var(--navy-900); margin: var(--space-1) 0; }
.article-block:hover .article-block-heading h3,
.article-block[open] .article-block-heading h3 { color: var(--color-secondary); }
.article-block-heading p { margin: 0; }
.article-block summary .chev { width: 24px; height: 24px; color: var(--color-secondary); transition: transform var(--duration-base) var(--ease-standard); flex-shrink: 0; }
.article-block[open] summary .chev { transform: rotate(180deg); }
.article-block-body { padding: var(--space-2) var(--space-8) var(--space-10); }
@media (max-width: 640px) {
  .article-block summary { padding: var(--space-5); gap: var(--space-4); }
  .article-block-icon { width: 44px; height: 44px; }
  .article-block-icon svg { width: 22px; height: 22px; }
  .article-block-body { padding: 0 var(--space-5) var(--space-8); }
}

/* ---- Article page ---- */
.article-hero { padding-block: var(--space-16) var(--space-10); text-align: center; }
.article-hero .category-tags { justify-content: center; }
.article-body { max-width: var(--container-narrow); margin-inline: auto; font-size: var(--fs-400); line-height: var(--lh-normal); }
.article-body h2 { margin-top: var(--space-10); font-size: var(--fs-600); }
.article-body h4 { margin-top: var(--space-8); font-size: var(--fs-500); color: var(--navy-900); font-family: var(--font-heading); font-weight: 700; }
.article-body h5 { margin-top: var(--space-6); font-size: var(--fs-400); color: var(--navy-900); font-family: var(--font-heading); font-weight: 700; }
.article-body p { color: var(--ink-700); margin-bottom: var(--space-5); }
.article-body ul { color: var(--ink-700); margin-bottom: var(--space-5); }
.article-body blockquote {
  margin: var(--space-8) 0; padding: var(--space-6) var(--space-8);
  border-left: 4px solid var(--color-accent); background: var(--cream-050);
  font-style: italic; color: var(--ink-700); border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-size: var(--fs-500);
}
.article-meta-row { display: flex; align-items: center; justify-content: center; gap: var(--space-4); margin-bottom: var(--space-6); color: var(--color-text-muted); font-size: var(--fs-200); }

/* ---- Contact ---- */
.contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-16); align-items: start; }
@media (max-width: 900px) { .contact-layout { grid-template-columns: 1fr; } }
.contact-info-list { display: grid; gap: var(--space-6); margin-top: var(--space-8); }
.contact-info-item { display: flex; gap: var(--space-4); align-items: flex-start; }
.contact-info-item h3 { font-size: var(--fs-400); margin-bottom: var(--space-1); }
.contact-info-item p { font-size: var(--fs-300); margin: 0; }

/* ---- Auth stub pages ---- */
.auth-shell { min-height: calc(100dvh - var(--header-height)); display: flex; align-items: center; justify-content: center; padding: var(--space-12) var(--space-4); background: var(--cream-100); }
.auth-card { max-width: 440px; width: 100%; background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-10); text-align: center; }
.auth-card .brand-mark { width: 52px; height: 52px; margin: 0 auto var(--space-5); }
.auth-card h1 { font-size: var(--fs-600); }
.auth-form { text-align: left; margin-top: var(--space-8); display: grid; gap: var(--space-5); }
.auth-form[hidden] { display: none; }
.auth-switch { margin-top: var(--space-8); font-size: var(--fs-200); color: var(--color-text-muted); }

/* ---- FAQ / details ---- */
.faq-item {
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: var(--space-5) var(--space-6); background: var(--white);
}
.faq-item + .faq-item { margin-top: var(--space-4); }
.faq-item summary {
  font-family: var(--font-heading); font-weight: 600; color: var(--navy-900);
  cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center;
  gap: var(--space-4); min-height: 44px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .chev { width: 22px; height: 22px; color: var(--color-secondary); transition: transform var(--duration-base) var(--ease-standard); flex-shrink: 0; }
.faq-item[open] summary .chev { transform: rotate(180deg); }
.faq-item p { margin-top: var(--space-4); }

/* ---- 404 ---- */
.error-shell { text-align: center; padding-block: var(--space-32) var(--space-24); }
.error-shell .error-code { font-family: var(--font-heading); font-weight: 800; font-size: 6rem; color: var(--gold-400); line-height: 1; }