/* WBPA homepage — page-specific styles only.
   Shared chrome (reset, topbar, header/nav, buttons, dividers, footer)
   lives in wbpa-base.css, loaded first by wbpa_head(). */

/* Hero */
.hero { background-size: cover; background-position: center; padding: 2.5rem 0; }
.hero__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; }
.hero__col { min-width: 0; }
.hero__banner-photo { background-size: cover; background-position: center; height: 160px; }
.hero__titlebox { background: rgba(62, 126, 175, 0.82); padding: 1rem 1.6rem 28px; }
.hero__titlebox h1, .hero__titlebox h3 { color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,0.5); }
.hero__titlebox h1 { font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 0.3em; }
.hero__titlebox h3 { font-size: 18.8px; font-weight: 400; margin: 0; }
.hero__ctas { margin-top: 0.75rem; display: flex; gap: 0.6rem; flex-wrap: wrap; }
.hero-btn { font-size: 18px; border: 2px solid #fff; }
.hero-btn:hover { border-color: #fff; }

.announcement-card { background: #fff; border-top: 3px solid var(--accent); box-shadow: 0 6px 18px rgba(0,0,0,0.25); }
.announcement-card h4 { background: var(--accent); color: #fff; margin: 0; padding: 0.7rem 1.1rem; font-size: 1.15rem; }
.announcement-card__body { padding: 25px 25px 28px 25px; color: var(--accent); position: relative; top: 1px; font-size: 0.875rem; }
.announcement-card__body p:first-child { margin-top: 0; }
.announcement-card__body strong { font-weight: 700; }
.announcement-card__body ul { margin: 0; padding-left: 1.2rem; }
.announcement-card__body a { color: #2EA3F2; text-decoration: none; }

@media (max-width: 860px) { .hero__inner { grid-template-columns: 1fr; } }

/* News & Articles — homepage preview. .news-grid/.news-card/.news-buttons
   now live in wbpa-base.css since the full listing pages reuse them. */
.dotgrid-section { background-repeat: repeat; background-size: 220px; border-top: 1px solid var(--accent); border-bottom: 1px solid var(--accent); }
.dotgrid-section h2 { color: var(--accent); font-size: 26px; }

/* Newest Members — homepage preview section. Card styling itself
   (.members-grid/.member-card) now lives in wbpa-base.css since the
   full Members index page reuses the same cards. */
.members-section { background-size: cover; background-position: center; background-repeat: no-repeat; border-top: 1px solid var(--accent); border-bottom: 1px solid var(--accent); }
.members-heading { color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,0.6); text-transform: uppercase; font-size: 26px; }
.members-section .btn { font-size: 18px; border: 2px solid #fff; }
.members-section .btn:hover { border-color: #fff; }