/* =========================================================
   HER STORY PAGE ONLY
   File: herstory-page.css
   Page: herstory.html
========================================================= */

.herstory-body .herstory-main,
.herstory-body .herstory-main * { box-sizing: border-box; }

.herstory-main { color: #ffffff; }

.herstory-banner-shell { padding: 1rem 0 0.7rem; }

.herstory-foundation-banner {
  width: 100%;
  height: auto;
  display: block;
}

.herstory-hero { padding: 0.5rem 0 1.5rem; }

.herstory-hero-card {
  display: grid;
  grid-template-columns: 0.86fr 1.14fr;
  gap: 28px;
  align-items: stretch;
  background:
    radial-gradient(circle at top right, rgba(255, 204, 0, 0.18), transparent 35%),
    linear-gradient(135deg, #2b0c36 0%, #540070 55%, #9900ce 100%);
  border-radius: 24px;
  padding: 34px;
  overflow: hidden;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.28);
}

.herstory-hero-image {
  background: rgba(255,255,255,0.10);
  border: 8px solid #ffcc00;
  border-radius: 20px;
  overflow: hidden;
  min-height: 520px;
}

.herstory-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

.herstory-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 22px;
}

.herstory-kicker {
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 900;
  color: #ffcc00;
  margin-bottom: 10px;
}

.herstory-hero-copy h1,
.herstory-story-card h2,
.herstory-gallery-header h2 {
  font-family: Byington, Georgia, 'Times New Roman', serif;
  font-weight: 400;
}

.herstory-hero-copy h1 {
  font-size: clamp(3rem, 7vw, 6.4rem);
  line-height: 0.9;
  margin-bottom: 18px;
}

.herstory-lead {
  font-size: clamp(1.15rem, 1.7vw, 1.45rem);
  line-height: 1.55;
  max-width: 720px;
}

.herstory-message-section { padding: 0 0 1.5rem; }

.herstory-story-card {
  background: #ffffff;
  color: #1d1d1d;
  border-radius: 22px;
  padding: 44px;
  border: 8px solid #ffcc00;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.24);
}

.herstory-story-card h2 {
  color: #540070;
  font-size: clamp(2.3rem, 4.6vw, 4rem);
  line-height: 0.98;
  margin-bottom: 20px;
  text-align: center;
}

.herstory-story-card p {
  font-size: 1.08rem;
  line-height: 1.75;
  margin-bottom: 18px;
}

.herstory-values-section { padding: 0 0 1.5rem; }

.herstory-values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.herstory-value-card {
  background: linear-gradient(180deg, #cb00ff 0%, #9900ce 100%);
  border-radius: 18px;
  padding: 30px;
  min-height: 220px;
  box-shadow: 0 12px 26px rgba(0, 0, 0, 0.22);
}

.herstory-value-card-gold {
  background: #ffcc00;
  color: #1c1028;
}

.herstory-value-card h3 {
  font-size: 2rem;
  font-weight: 900;
  margin-bottom: 12px;
  color: #ffcc00;
}

.herstory-value-card-gold h3 { color: #540070; }

.herstory-value-card p {
  font-size: 1.02rem;
  line-height: 1.55;
  margin: 0;
  font-weight: 700;
}

.herstory-gallery-section { padding: 0 0 1.5rem; }

.herstory-gallery-header {
  text-align: center;
  margin-bottom: 18px;
}

.herstory-gallery-header h2 {
  margin: 0 0 10px;
  font-size: clamp(2.2rem, 4vw, 3.5rem);
}

.herstory-gallery-header p {
  max-width: 780px;
  margin: 0 auto;
  line-height: 1.55;
}

.herstory-slider-wrap {
  position: relative;
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  gap: 12px;
  align-items: center;
}

.herstory-slider-window {
  overflow: hidden;
  border-radius: 22px;
  border: 8px solid #ffcc00;
  background: #111111;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.26);
}

.herstory-slider-track {
  display: flex;
  transition: transform 0.45s ease;
}

.herstory-slide { min-width: 33.333%; }

.herstory-slide img {
  width: 100%;
  height: 360px;
  object-fit: cover;
  display: block;
}

.herstory-slider-btn {
  width: 48px;
  height: 72px;
  border: none;
  border-radius: 12px;
  background: #ffcc00;
  color: #111111;
  font-size: 1.8rem;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(0,0,0,0.22);
}

.herstory-slider-btn:hover {
  background: #ffffff;
  color: #540070;
}

.herstory-cta-section { padding: 0 0 1.2rem; }

.herstory-cta-grid {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.herstory-cta {
  min-width: 280px;
  min-height: 92px;
  padding: 16px 22px;
  border-radius: 12px;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2);
}

.herstory-cta-contact {
  background: linear-gradient(180deg, #cb00ff 0%, #9100c2 100%);
  color: #ffffff;
  gap: 14px;
}

.herstory-cta-contact img {
  width: 72px;
  height: auto;
  display: block;
}

.herstory-cta-contact span {
  font-size: 1.35rem;
  line-height: 1.1;
}

.herstory-cta-donate {
  background: #ffcc00;
  color: #111111;
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  font-size: 2rem;
  letter-spacing: 1px;
}

@media (max-width: 991.98px) {
  .herstory-hero-card,
  .herstory-values-grid { grid-template-columns: 1fr; }

  .herstory-hero-image { min-height: 460px; }

  .herstory-slide { min-width: 50%; }
}

@media (max-width: 767.98px) {
  .herstory-hero-card,
  .herstory-story-card,
  .herstory-value-card { padding: 26px 22px; }

  .herstory-hero-image { min-height: 380px; }

  .herstory-slider-wrap { grid-template-columns: 1fr; }

  .herstory-slider-btn {
    width: 100%;
    height: 48px;
  }

  .herstory-slide { min-width: 100%; }

  .herstory-slide img { height: 340px; }

  .herstory-cta {
    width: 100%;
    max-width: 420px;
  }

  .herstory-cta-contact span { font-size: 1.15rem; }

  .herstory-cta-donate { font-size: 1.8rem; }
}


/* =========================================================
   HER STORY AUTO GALLERY ENHANCEMENTS
========================================================= */
.herstory-slide { position: relative; padding: 0; background: #111111; }
.herstory-slide button { display:block; width:100%; border:0; padding:0; background:transparent; cursor:pointer; }
.herstory-slide img { transition: transform 0.45s ease, filter 0.45s ease; }
.herstory-slide:hover img { transform: scale(1.035); filter: brightness(1.05); }
.herstory-gallery-message { width:100%; min-height:220px; display:flex; align-items:center; justify-content:center; text-align:center; padding:28px; color:#ffffff; font-weight:800; }
.herstory-slider-dots { display:flex; justify-content:center; gap:8px; margin-top:14px; }
.herstory-slider-dot { width:11px; height:11px; border-radius:50%; border:2px solid #ffcc00; background:transparent; padding:0; cursor:pointer; }
.herstory-slider-dot.is-active { background:#ffcc00; }
.herstory-lightbox { position:fixed; inset:0; z-index:9999; display:none; align-items:center; justify-content:center; padding:24px; background:rgba(0,0,0,0.88); }
.herstory-lightbox.is-open { display:flex; }
.herstory-lightbox img { max-width:min(1100px,94vw); max-height:88vh; object-fit:contain; border:6px solid #ffcc00; border-radius:18px; background:#111111; }
.herstory-lightbox-close { position:absolute; top:18px; right:22px; width:46px; height:46px; border:0; border-radius:50%; background:#ffcc00; color:#111111; font-size:2rem; line-height:1; font-weight:900; cursor:pointer; }
@media (prefers-reduced-motion: reduce) { .herstory-slider-track, .herstory-slide img { transition:none; } }

/* =========================================================
   SAFE OVERRIDE: HER STORY GALLERY ONLINE FIX
   Purpose: Keeps photo slider shaped correctly online.
========================================================= */

.herstory-slider-wrap {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  display: grid !important;
  grid-template-columns: 56px minmax(0, 1fr) 56px !important;
  gap: 18px !important;
  align-items: center !important;
}

.herstory-slider-window {
  width: 100%;
  min-height: 260px;
  overflow: hidden !important;
  border: 8px solid #ffcc00 !important;
  border-radius: 22px !important;
  background: #111111 !important;
}

.herstory-slider-track {
  width: 100%;
  display: flex !important;
  align-items: stretch;
  transition: transform 0.45s ease;
}

.herstory-slide {
  flex: 0 0 33.333% !important;
  min-width: 33.333% !important;
}

.herstory-slide img {
  width: 100% !important;
  height: 360px !important;
  object-fit: cover !important;
  display: block !important;
}

.herstory-gallery-message {
  width: 100% !important;
  min-height: 260px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center;
  color: #ffffff;
  font-weight: 800;
}

.herstory-slider-btn {
  width: 56px !important;
  height: 72px !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: #ffcc00 !important;
  color: #111111 !important;
}

/* Keep navbar Donate button yellow with black text */
.navbar .donate-btn,
.navbar .donate-btn:visited,
.navbar .donate-btn:hover,
.navbar .donate-btn:focus {
  background: #ffcc00 !important;
  color: #000000 !important;
}

@media (max-width: 991.98px) {
  .herstory-slide {
    flex-basis: 50% !important;
    min-width: 50% !important;
  }
}

@media (max-width: 767.98px) {
  .herstory-slider-wrap {
    grid-template-columns: 1fr !important;
  }

  .herstory-slide {
    flex-basis: 100% !important;
    min-width: 100% !important;
  }

  .herstory-slider-btn {
    width: 100% !important;
    height: 48px !important;
  }
}