/* ============================================================
   About the Fund — section styles (values from post-23.css)
   ============================================================ */

/* ------------------------------
   HERO
   ------------------------------ */
.about-hero {
  padding-top: 170px;
  /* Live: hero photo sits at y=558 (real), 20px higher than the original
     100px padding produced. */
  padding-bottom: 80px;
}
.about-hero .about-hero-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 20px;
}
.about-hero .about-hero-title {
  grid-column: 1 / 2;
}
.about-hero .about-hero-side {
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  display: flex;
  align-items: flex-end;
}
.about-hero .about-hero-side p {
  max-width: 485px;
  font-family: var(--font-source-serif);
  font-weight: 400;
  color: var(--text);
}
.about-hero .about-hero-anchors {
  grid-column: 1 / 2;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 16px;
}
.about-hero .anchor-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 15px;
  font-family: var(--font-inter);
  font-size: 16px;
  font-weight: 600;
  line-height: 26.5px;
  letter-spacing: -0.03em;
  color: var(--text);
  background-color: transparent;
  border: 1px solid var(--text);
  border-radius: var(--radius-pill);
  transition: 0.6s;
}
.about-hero .anchor-pill:hover,
.about-hero .anchor-pill:focus {
  background-color: var(--text);
  color: #fbf6ed;
}

@media (max-width: 1200px) {
  .about-hero { padding-top: 130px; padding-bottom: 50px; }
}
@media (max-width: 992px) {
  .about-hero { padding-top: 120px; }
  .about-hero .about-hero-grid { gap: 16px; }
}
@media (max-width: 768px) {
  .about-hero .about-hero-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    gap: 24px;
  }
  .about-hero .about-hero-title { grid-column: auto; }
  .about-hero .about-hero-side { grid-column: auto; grid-row: auto; }
  .about-hero .about-hero-side p { max-width: 100%; }
  .about-hero .about-hero-anchors { grid-column: auto; }
}
@media (max-width: 576px) {
  .about-hero .about-hero-grid { gap: 16px; }
  .about-hero .about-hero-anchors {
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
    flex-wrap: wrap;
  }
}

/* ------------------------------
   PHOTO BAND (green, M shape at the bottom)
   ------------------------------ */
.about-photo {
  margin-top: 70px;
  padding-bottom: 137px;
  background-color: var(--secondary);
  background-image: url("/assets/img/shape-about-m-band.svg");
  background-position: 642px calc(100% + 1px);
  background-repeat: no-repeat;
  background-size: 1438px auto;
}
.about-photo .about-photo-img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-card);
  margin-top: -70px;
  position: relative;
  z-index: 2;
}

@media (max-width: 992px) {
  .about-photo {
    background-position: bottom center;
    background-size: 100% auto;
  }
}
@media (max-width: 768px) {
  .about-photo { margin-top: 50px; padding-bottom: 50px; }
  .about-photo .about-photo-img { margin-top: -50px; }
}
@media (max-width: 576px) {
  .about-photo { margin-top: 32px; padding-bottom: 24px; }
  .about-photo .about-photo-img { margin-top: -32px; }
}

/* ------------------------------
   INFO ROWS (Who can apply? / Project Eligibility / What isn't covered?)
   ------------------------------ */
.about-info {
  padding-top: 75px;
}
.about-info .info-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 32px;
  border-bottom: 1px solid #cdcdcd;
  margin-bottom: 100px;
  padding-bottom: 100px;
}
.about-info .info-row h2 {
  max-width: fit-content;
}
.about-info .info-col {
  display: flex;
  flex-direction: column;
  gap: 36px;
  width: 685px;
  max-width: 100%;
  flex-shrink: 0;
}
.about-info .info-col-narrow-gap { gap: 10px; }
.about-info .info-lead {
  font-family: var(--font-inter);
  font-weight: 500;
  color: var(--accent);
}
.about-info .info-lead a {
  color: inherit;
  text-decoration: underline;
}
.about-info .info-group {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.about-info .tag-pill {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  padding: 8px 12px;
  font-family: var(--font-inter);
  font-size: 14px;
  font-weight: 600;
  line-height: 26.5px;
  letter-spacing: -0.03em;
  color: var(--text);
  background-color: var(--secondary);
  border-radius: var(--radius-pill);
}
.about-info .icon-list li {
  display: flex;
  align-items: flex-start;
}
.about-info .icon-list li:not(:last-child) { padding-bottom: 6px; }
.about-info .icon-list li:not(:first-child) { margin-top: 6px; }
.about-info .icon-list .icon-list-icon {
  flex-shrink: 0;
  display: inline-flex;
  padding-right: 4px;
  margin-top: 2px;
}
.about-info .icon-list .icon-list-icon svg {
  width: 20px;
  height: 20px;
  display: block;
}
.about-info .icon-list .icon-list-text {
  font-family: var(--font-inter);
  font-size: 16px;
  font-weight: 500;
  line-height: 25.9px;
  letter-spacing: -0.74px;
  color: var(--accent);
}

@media (max-width: 992px) {
  .about-info { padding-top: 80px; padding-bottom: 100px; }
  .about-info .info-row { margin-bottom: 50px; padding-bottom: 50px; }
  .about-info .info-col { width: 60%; gap: 22px; }
  .about-info .info-col-narrow-gap { gap: 22px; }
  .about-info .info-group { gap: 16px; }
}
@media (max-width: 768px) {
  .about-info { padding-top: 50px; }
  .about-info .info-row { flex-direction: column; gap: 24px; }
  .about-info .info-row h2 { max-width: 100%; }
  .about-info .info-col { width: 100%; }
}
@media (max-width: 576px) {
  .about-info { padding-top: 76px; }
}

/* ------------------------------
   GOAL — big statement + two cards
   ------------------------------ */
.goal {
  padding-bottom: 125px;
}
.goal .goal-title {
  margin-bottom: 140px;
}
.goal .goal-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 136px;
}
.goal .goal-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.goal .goal-icon svg {
  height: 50px;
  width: auto;
  display: block;
}
.goal .goal-card p {
  font-family: var(--font-source-serif);
  color: var(--text);
}

@media (max-width: 992px) {
  .goal { padding-bottom: 100px; }
  .goal .goal-title { margin-bottom: 50px; }
  .goal .goal-grid { gap: 64px; }
}
@media (max-width: 768px) {
  .goal .goal-title { margin-bottom: 32px; }
  .goal .goal-card { gap: 16px; }
}
@media (max-width: 576px) {
  .goal .goal-grid { grid-template-columns: 1fr; gap: 32px; }
  .goal .goal-card { gap: 10px; }
}

/* ------------------------------
   SUBMISSION PERIOD — orange card (with "Learn more" button on this page)
   ------------------------------ */
.period .period-card {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 32px;
  overflow: hidden;
  border-radius: var(--radius-card);
  background-color: var(--primary);
  padding: 100px 100px 95px 60px;
}
.period .period-content {
  width: 411px;
  max-width: 100%;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}
.period .period-logo {
  width: 117px;
  margin-bottom: 36px;
}
.period .period-date {
  font-weight: 300;
  margin-bottom: 24px;
}
.period .period-status {
  font-family: var(--font-inter);
  font-weight: 500;
  color: var(--accent);
  margin-bottom: 8px;
}
.period .period-note {
  font-family: var(--font-inter);
  font-weight: 400;
  color: var(--accent);
  margin-bottom: 59px;
}
/* On hover the arrow circle turns white (source custom.css .btn-white rule) */
.period .period-btn > a:hover::before { background-color: var(--white); }
.period .period-art img {
  width: 100%;
  max-width: 452px;
}
.period .period-art-abs {
  display: none;
}

@media (max-width: 1200px) {
  .period .period-art { max-width: 55%; }
}
@media (max-width: 992px) {
  .period .period-card { padding: 48px; }
  .period .period-content { width: 100%; }
  .period .period-logo { margin-bottom: 0; }
  .period .period-date { margin-bottom: 16px; }
  .period .period-note { margin-bottom: 32px; }
  .period .period-art { display: none; }
  .period .period-art-abs {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    text-align: center;
    z-index: 1;
  }
  .period .period-art-abs img {
    display: inline-block;
    width: 60%;
    max-width: 100%;
  }
}
@media (max-width: 768px) {
  .period .period-card { padding: 32px; }
  .period .period-art-abs img { width: 80%; }
}
@media (max-width: 576px) {
  .period .period-card { padding: 24px; }
  .period .period-btn { align-self: flex-end; margin-left: auto; }
  .period .period-art-abs img { width: 100%; }
}

/* ------------------------------
   QUESTIONS — green card with M shape
   ------------------------------ */
.questions {
  padding-top: 75px;
}
.questions .questions-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-radius: var(--radius-card);
  padding: 80px;
  background-color: var(--secondary);
  background-image: url("/assets/img/shape-questions-m.svg");
  background-position: calc(100% - 80px) center;
  background-repeat: no-repeat;
  overflow: hidden;
}
/* Green overlay dims the shape on small screens (source --overlay-opacity) */
.questions .questions-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--secondary);
  opacity: 0;
}
.questions .questions-content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 489px;
  max-width: 100%;
}
.questions .questions-title {
  margin-bottom: 8px;
}
.questions .questions-sub {
  margin-bottom: 51px;
  font-family: var(--font-source-serif);
  color: var(--text);
}

@media (max-width: 1200px) {
  .questions .questions-card {
    padding: 64px;
    background-size: 43% auto;
  }
  .questions .questions-sub { margin-bottom: 32px; }
}
@media (max-width: 992px) {
  .questions .questions-card {
    background-position: center center;
    background-size: cover;
  }
}
@media (max-width: 768px) {
  .questions .questions-card { padding: 32px; }
  .questions .questions-card::before { opacity: 0.3; }
  .questions .questions-content { width: 100%; }
  .questions .questions-sub { margin-bottom: 24px; }
}
@media (max-width: 576px) {
  .questions .questions-card { padding: 16px; }
  .questions .questions-content .btn { align-self: flex-end; }
}