/* Dynamic front page (front-page.php). Leans on theme.css for hero,
   section, eyebrow, and btn; only the new card grids live here. */

.hero--home .hero__content { padding-top: 4.5rem; padding-bottom: 4.5rem; }

/* Row layout must be EXPLICIT: the theme's base .section-heading is a flex
   COLUMN, so without it align-items:flex-end shoves title and link to the
   right edge, stacked (the founder's "khấp khểnh" screenshot). */
.section-heading.section-heading--split { display: flex; flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; max-width: none; text-align: left; }
.section-heading--split h2 { margin-bottom: 0; }

/* Upcoming events */
.home-events__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.25rem; }
.home-event-card { display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; background: #fff; border: 1px solid rgba(27, 42, 74, 0.12); text-decoration: none; color: inherit; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.home-event-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(27, 42, 74, 0.14); }
.home-event-card__media { position: relative; display: block; aspect-ratio: 16 / 9; background: linear-gradient(135deg, var(--navy-500, #27407a), var(--navy-900, #131f3a)); }
.home-event-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.home-event-card__date { position: absolute; left: 0.75rem; bottom: -0.9rem; display: flex; flex-direction: column; align-items: center; min-width: 3.2rem; padding: 0.35rem 0.5rem; border-radius: 8px; background: var(--brand-highlight, #c9a227); color: var(--navy-900, #131f3a); box-shadow: 0 4px 10px rgba(27, 42, 74, 0.25); }
.home-event-card__date .d { font-size: 1.25rem; font-weight: 700; line-height: 1; }
.home-event-card__date .m { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; }
.home-event-card__body { display: block; padding: 1.4rem 1rem 1rem; }
.home-event-card__title { display: block; font-weight: 700; line-height: 1.35; color: var(--navy-900, #131f3a); }
.home-event-card__meta { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.4rem; font-size: 0.85rem; color: #4a5568; font-variant-numeric: tabular-nums; }
.home-event-card__mode { padding: 0.1rem 0.55rem; border-radius: 999px; background: #e8edf6; color: var(--navy-900, #1b2a4a); font-size: 0.78rem; }
.home-events__empty { color: #4a5568; }

/* Cơ hội: jobs + scholarships, four equal-height cards. Explicit column
   counts (not auto-fill like the events/news grids) because the spec calls
   for a fixed 1/2/4 layout at phone/tablet/desktop, mirroring the theme's
   own .archive-grid breakpoints (theme.css: 900px, 640px). */
.home-jobs__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; align-items: stretch; }
@media (max-width: 900px) { .home-jobs__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .home-jobs__grid { grid-template-columns: 1fr; } }
.home-job-card { display: flex; flex-direction: column; height: 100%; gap: 0.4rem; padding: 1.1rem 1.15rem; border-radius: 12px; background: #fff; border: 1px solid rgba(27, 42, 74, 0.12); text-decoration: none; color: inherit; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.home-job-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(27, 42, 74, 0.14); }
.home-job-card__employer { font: var(--weight-semibold, 600) var(--text-sm, 14px)/1.4 var(--font-sans); color: var(--text-brand, #A52610); }
.home-job-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-weight: 700;
  line-height: 1.35;
  color: var(--navy-900, #131f3a);
}
.home-job-card__chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.1rem; }
.home-job-card__deadline { margin-top: auto; padding-top: 0.5rem; font-size: 0.85rem; font-weight: 600; color: #4a5568; }
.home-job-card__deadline--warning { color: var(--amber-600, #B4740E); }

/* Hero: a quiet third link under the button row, small and understated so it
   never competes with the primary CTAs. */
.hero__quiet-link-row { margin: 0.6rem 0 0; }
.hero__quiet-link { display: inline-flex; align-items: center; gap: 0.35rem; color: rgba(255, 255, 255, 0.82); font-size: 0.9rem; font-weight: 600; text-decoration: none; }
.hero__quiet-link:hover { color: #fff; text-decoration: underline; }
.hero__quiet-link svg { width: 16px; height: 16px; }

/* News and stories */
.home-news__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.25rem; }
.home-news-card { display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; background: #fff; border: 1px solid rgba(27, 42, 74, 0.12); text-decoration: none; color: inherit; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.home-news-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(27, 42, 74, 0.14); }
.home-news-card__media { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.home-news-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.home-news-card__body { display: block; padding: 1rem; }
.home-news-card__date { display: block; font-size: 0.8rem; color: #6b7280; margin-bottom: 0.25rem; font-variant-numeric: tabular-nums; }
.home-news-card__title { display: block; font-weight: 700; line-height: 1.35; color: var(--navy-900, #131f3a); }
.home-news-card__excerpt { display: block; margin-top: 0.4rem; font-size: 0.9rem; line-height: 1.5; color: #4a5568; }

/* Open volunteer roles */
.home-openings__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 1rem; }
/* Breathing room before the footer: sections pad top-only by design, so the
   last block on the page needs its own bottom padding. */
.section.home-openings { padding-bottom: clamp(40px, 5vw, 72px); }
.home-opening-card { display: flex; flex-direction: column; gap: 0.4rem; padding: 1rem 1.1rem; border-radius: 10px; background: #fff; border: 1px solid rgba(27, 42, 74, 0.12); border-left: 4px solid var(--brand-highlight, #c9a227); text-decoration: none; color: inherit; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.home-opening-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(27, 42, 74, 0.14); }
.home-opening-card__title { font-weight: 700; color: var(--navy-900, #131f3a); line-height: 1.35; }
.home-opening-card__unit { font-size: 0.85rem; color: #4a5568; }
.home-opening-card__count { margin-top: auto; align-self: flex-start; padding: 0.1rem 0.6rem; border-radius: 999px; background: #e8edf6; color: var(--navy-900, #1b2a4a); font-size: 0.85rem; }

/* Membership band */
.home-band__row { display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; }
.home-band__actions { display: flex; gap: 0.75rem; flex-wrap: wrap; }

/* Hero donate CTA: gold outline so support stands apart from navigation. */
.home-hero-donate { border-color: var(--brand-highlight, #c9a227) !important; color: var(--brand-highlight, #c9a227) !important; }
.home-hero-donate:hover { background: var(--brand-highlight, #c9a227) !important; color: #131f3a !important; }

@media (max-width: 640px) {
  .section-heading.section-heading--split { align-items: flex-start; flex-direction: column; }
}