/* Additive styles for the discovery-flow pages (home/categories/projects).
   Ported from page-specific <style> blocks in static-web/public-pages/*.html
   that have no equivalent in the shared style.css. */

.header-section { position: relative; background-color: #03211B; }
.header-section.header-active { position: fixed; background-color: #03211B; }

.page-section.section { padding-top: 60px; padding-bottom: 60px; }
@media (max-width: 767px) {
  .page-section.section { padding-top: 40px; padding-bottom: 40px; }
}

/* Category grid card (categories.html) */
.category-card { display:block; background:#fff; border:1px solid #DFE0E4; border-radius:16px; padding:32px 24px; text-align:center; height:100%; transition:box-shadow .3s, transform .3s, border-color .3s; }
.category-card:hover { box-shadow:0 18px 40px rgba(7,76,62,.12); transform:translateY(-4px); border-color:#074C3E; }
.category-card__icon { width:80px; height:80px; border-radius:50%; background:#f3f7f5; color:#074C3E; font-size:34px; display:flex; align-items:center; justify-content:center; margin:0 auto 18px; transition:.3s; }
.category-card:hover .category-card__icon { background:#074C3E; color:#fff; }
.category-card h4 { color:#222E48; font-size:19px; margin-bottom:8px; }

/* Category detail header (category-projects.html) */
.cat-head { background:#03211B; border-radius:18px; padding:36px 40px; color:#fff; margin-bottom:40px; }
.cat-head__badge { display:inline-flex; align-items:center; gap:8px; background:rgba(252,182,80,.18); color:#FCB650; font-size:13px; font-weight:600; padding:6px 14px; border-radius:30px; margin-bottom:14px; }
.cat-head h2 { color:#fff; font-size:34px; font-weight:700; margin-bottom:8px; }
.cat-head p { color:#cfe0db; margin:0; max-width:640px; }

/* Projects list (projects.html) */
.projects-list { margin-bottom: 24px; }
@media (max-width: 1199px) {
  .projects-section.app-page.section { padding-top: 16px; padding-bottom: 24px; }
  .projects-list { display: flex; flex-direction: column; gap: 16px; }
  .projects-list .project-card-col { width: 100% !important; max-width: 100%; }
}

/* Net-new home sections with no static-design precedent */
.stats-bar { background: #03211B; border-radius: 18px; padding: 40px; }
.stats-bar__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; text-align: center; }
@media (max-width: 767px) {
  .stats-bar__grid { grid-template-columns: 1fr; }
}
.stats-bar__value { color: #fff; font-size: 34px; font-weight: 700; margin-bottom: 6px; }
.stats-bar__label { color: #cfe0db; font-size: 14px; margin: 0; }

.sponsor-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 40px; }
.sponsor-strip__logo { max-height: 48px; width: auto; opacity: .8; transition: opacity .2s; }
.sponsor-strip__logo:hover { opacity: 1; }

.social-links-strip { display: flex; gap: 16px; justify-content: center; }

.discovery-pagination { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 16px; }
.discovery-pagination__label { color: #6A7283; font-size: 14px; }

.empty-state { text-align: center; padding: 60px 20px; color: #6A7283; }
.empty-state i { font-size: 40px; color: #DFE0E4; margin-bottom: 16px; display: block; }

/* .app-gallery-item is an <a> in the static design; ProjectGallery uses a <button>
   (opens a lightbox instead of navigating) so it needs the same box reset. */
button.app-gallery-item { display: block; padding: 0; font: inherit; cursor: pointer; }

/* Hero banner slider (index.html) */
.hero-banner { padding: 30px 0 40px; }
.hero-banner-slider { border-radius: 12px; overflow: hidden; }
.hero-banner-slider .slide-banner img {
  width: 100%;
  height: clamp(200px, 30vw, 420px);
  object-fit: cover;
  object-position: center;
  display: block;
  border-radius: 12px;
}

/* Minimal embla-carousel viewport/container, replacing slick's runtime-injected
   .slick-track/.slick-slide DOM (embla ships no CSS of its own). */
.embla-viewport { overflow: hidden; }
.embla-container { display: flex; }
.embla-slide { flex: 0 0 100%; min-width: 0; }
.embla-slide--card { flex: 0 0 auto; width: min(320px, 85vw); margin-right: 24px; }