/* =====================================================================
   ttlm — "Donors / Goal / Donations received" panel
   (campaigns/matching/template-0/partials/contribute-section.html,
   overridden by custom-contribute-section.html)

   Modelled on the previous campaign's panel (reference screenshot):
     - layout, from lg (992px): one row, Donors on the left | Goal + progress
       bar in the middle | Donations received on the right;
     - colors: blue panel (--ttlm-blue #0068A8, sampled from the reference,
       see theme-colors.css), "Donors" and "Donations received" (label +
       amount) in the theme green, "Goal" and the percentage in white,
       white progress bar track with a theme-green fill and dot;
     - 1000px wide, same as the Campaign Pillars banner right below it
       (both sit in .container, so they also shrink together on narrower
       screens);
     - a gap between the topbar and the panel;
     - below lg (the template's stacked layout): Donors top left, Donations
       received top right, goal line + bar underneath, same colors.
   The three labels share one size and one line, and the amounts take that
   same size as the goal amount.
   ===================================================================== */

/* Breathing room under the topbar (sticky at >= 1200px, fixed below —
   either way the panel used to touch it). */
.contribute__area {
  margin-top: 13px;
}

.contribute__area.mb {
  overflow: visible !important;
  margin-bottom: 13px;
}

.company__area.mb,
.matcher__area.mb,
.sponsor__child__area.mb,
.summary-donation__area.mb,
.about-campaign__area.mb,
.mind__area.mb {
  margin-bottom: 13px;
}

.contribute__wrap,
.contribute__wrap--no-countdown {
  max-width: 1000px;
  background: var(--ttlm-blue);
}

/* ---------- colors ---------- */

.contribute__wrap .donate__received,
.contribute__wrap .donor-5,
.contribute__wrap .donate__received h2,
.contribute__wrap .donor-5 h2 {
  color: var(--theme_color);
}

.contribute__wrap .section2__progressBarContainer h4,
.contribute__wrap .goal__original span,
.contribute__wrap .new__bonus__flag h5 {
  color: var(--white);
}

.contribute__wrap .section2__progressBarContainer h4 svg path,
.contribute__wrap .new__bonus__flag svg path {
  fill: var(--white); /* bonus-round flag icon, if ever active */
}

/* Countdown ("Campaign ends in", days circle, hours/minutes/seconds and
   the ":" separators): white text on the blue panel. style.css paints
   .value2 black with !important, hence the !important here. */
.contribute__wrap .days__counts .countdown-label,
.contribute__wrap .days__counts .circle-big .text h2,
.contribute__wrap .days__counts .circle-big .text span,
.contribute__wrap .days__counts .time-unit small,
.contribute__wrap .days__counts .timer2 .time-unit::before,
.contribute__wrap .days__counts .timer2 .time-unit::after {
  color: var(--white);
}

.contribute__wrap .days__counts .value2 {
  color: var(--white) !important;
}

/* White track, theme-green fill and dot (the dot was --secondaryColor). */
.contribute__wrap .section2__progressBar {
  background-color: var(--white);
}

.contribute__wrap .section2__progressBarRect3,
.contribute__wrap .section2__progressBarCircle {
  background-color: var(--theme_color);
}

/* ---------- below lg: stacked layout, stats at the two top corners ---------- */
@media (max-width: 991.98px) {
  .contribute__wrap--no-countdown .contribute__load {
    max-width: none;
    margin: 0;
    padding-left: 0;
  }

  /* DOM order is donations, donors — the reference puts Donors first */
  .contribute__wrap--no-countdown .donate__received__title {
    flex-direction: row-reverse;
    justify-content: space-between;
    gap: 20px;
  }

  .donor-5 {
    text-align: left;
  }

  .donate__received {
    text-align: right;
  }
}

/* ---------- lg and up: one row, three columns ---------- */
@media (min-width: 992px) {
  .contribute__wrap {
    padding: 28px 40px;
  }

  /* Was: max-width 700px, centered, stacked. Side columns take their
     content's width, the middle one (goal + bar) gets the rest. Items
     align to the top so the three labels share the same line. */
  .contribute__wrap--no-countdown .contribute__load {
    max-width: none;
    margin: 0;
    padding-left: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: start;
    column-gap: 40px;
  }

  /* The wrapper around the two stats only existed for the old flex row;
     dissolve it so both stats become direct grid items, then place them
     explicitly (the DOM order is donations, donors, goal). */
  .contribute__wrap--no-countdown .donate__received__title {
    display: contents;
  }

  /* grid-row: 1 on all three — with explicit columns only, auto-placement
     moved Donors (col 1) and the goal (col 2) to a second row because they
     come after the donations block (col 3) in the DOM. */
  .donor-5 {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    text-align: left;
  }

  .contribute__load > .section2__progressBarContainer {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    margin: 0;
    width: 100%;
    max-width: 420px;
  }

  .donate__received {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    text-align: right;
  }

  /* One size for the three labels AND the amounts: that of the goal line
     ("Goal: $1,500,000.00", var(--f25)). Same line-height everywhere so the
     labels sit on one line; the amounts keep their bold weight. The
     selectors are one level more specific than the template's
     (style.css / responsive.css set f20/f46, then f15/f30/f20 <= 1094px). */
  .contribute__wrap .donate__received span,
  .contribute__wrap .donor-5 span {
    display: block;
    font-size: var(--f25);
    line-height: 136.935%;
  }

  .contribute__wrap .donate__received h2,
  .contribute__wrap .donor-5 h2 {
    font-size: var(--f25);
    line-height: 136.935%;
    /* Long numbers: never wrap mid-number. The side columns are
       content-sized, so a wide number takes room from the bar column
       instead of overlapping a neighbour. */
    white-space: nowrap;
  }

  .contribute__wrap .section2__progressBarContainer h4 {
    font-size: var(--f25);
    line-height: 136.935%;
  }
}