/* Project pages: /sustain-ability/ and /fashion-transparency-lab/.
   Sits on top of the Unify theme like the home page; only what the theme's
   utility classes do not cover. Prefix: sap- (the Sustain_Ability page came
   first; the blocks are shared). */

/* ---- Hero --------------------------------------------------------------- */

.sap-eyebrow {
  margin: 0 0 1rem;
  color: rgba(255, 255, 255, .8);
  font-size: .85rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
}
.sap-title {
  margin: 0 0 1rem;
  color: #fff;
  font-size: 3rem; font-weight: 700; line-height: 1.05;
}
.sap-title span { color: #ebc71d; }
.sap-lede {
  max-width: 44ch; margin: 0 0 2rem;
  color: #fff;
  font-family: "Roboto Slab", Helvetica, Arial, sans-serif;
  font-size: 1.25rem; line-height: 1.5;
}
@media (min-width: 768px) {
  .sap-title { font-size: 4.5rem; }
  .sap-lede { font-size: 1.45rem; }
}

/* Link to the event page. */
.sap-event {
  display: block; max-width: 34rem;
  padding: 1.3rem 1.5rem;
  border-left: 5px solid #ebc71d; border-radius: 4px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
  color: #2c2f37;
  transition: transform .2s, box-shadow .2s;
}
.sap-event:hover, .sap-event:focus {
  color: #2c2f37; text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(0, 0, 0, .3);
}
.sap-event > span { display: block; }
.sap-event__kicker {
  margin-bottom: .3rem;
  color: #a10f2b;
  font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.sap-event__title {
  font-family: "Roboto Slab", Helvetica, Arial, sans-serif;
  font-size: 1.5rem; font-weight: 700; line-height: 1.25;
}
.sap-event__text { margin: .25rem 0 .7rem; color: #555a66; }
.sap-event__cta { color: #6281c8; font-weight: 700; }
.sap-event:hover .sap-event__cta { text-decoration: underline; }

.sap-event-alt { margin: .8rem 0 0; font-size: .9rem; }
.sap-event-alt a { color: rgba(255, 255, 255, .85); text-decoration: underline; }
.sap-event-alt a:hover { color: #fff; }

.sap-mark {
  display: inline-block;
  padding: 1.2rem;
  border-radius: 4px;
  background: #fff;
  line-height: 0;
}
.sap-mark img { width: 140px; height: auto; }
.sap-mark--eu img { width: 220px; }
@media (min-width: 992px) {
  .sap-mark { display: block; width: max-content; margin-left: auto; padding: 1.6rem; }
  .sap-mark img { width: 200px; }
  .sap-mark--eu img { width: 260px; }
}

/* ---- Facts strip -------------------------------------------------------- */

.sap-facts { margin: 0 -15px; }
.sap-fact { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.sap-fact dt {
  margin-bottom: .35rem;
  color: #858993;
  font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}
.sap-fact dd { margin: 0; color: #111; font-size: 1.1rem; font-weight: 700; line-height: 1.35; }
@media (min-width: 992px) {
  .sap-fact + .sap-fact { border-left: 1px solid #e0e4ea; }
}

/* ---- Fact box (full project details) --------------------------------- */

.sap-factbox { margin: 0; padding: .4rem 1.5rem; background: #f2f4f8; }
.sap-factbox > div { padding: .7rem 0; }
.sap-factbox > div + div { border-top: 1px solid #e0e4ea; }
.sap-factbox dt {
  color: #6b6f7a;
  font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
.sap-factbox dd { margin: .15rem 0 0; color: #111; font-size: .95rem; }
@media (min-width: 576px) {
  .sap-factbox > div { display: flex; gap: 1rem; }
  .sap-factbox dt { flex: 0 0 9.5rem; padding-top: .2rem; }
  .sap-factbox dd { flex: 1 1 0; margin: 0; }
}

/* ---- Numbered items (objectives) ---------------------------------------- */

.sap-num {
  display: block; margin-bottom: .4rem;
  color: #a10f2b;
  font-family: "Roboto Slab", Helvetica, Arial, sans-serif;
  font-size: 2rem; font-weight: 700; line-height: 1;
}

/* ---- Timeline ----------------------------------------------------------- */
/* One <li> per step. Mark finished steps with class "is-done" (and the
   "Done" label), the next one with "is-next". */

.sap-timeline { margin: 0; padding: 0; list-style: none; }
.sap-timeline li {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .2rem 1.5rem;
  padding: 1rem 0;
  border-top: 1px solid #eee;
}
.sap-timeline li:last-child { border-bottom: 1px solid #eee; }
.sap-timeline__when {
  flex: 0 0 100%;
  color: #6b6f7a;
  font-size: .9rem; font-weight: 700; letter-spacing: .08em;
}
.sap-timeline__what { flex: 1 1 0; }
.sap-timeline .is-done .sap-timeline__what { color: #6b6f7a; }
.sap-timeline .is-next { background: linear-gradient(90deg, rgba(161, 15, 43, .07), rgba(161, 15, 43, 0)); }
.sap-timeline .is-next .sap-timeline__when { color: #a10f2b; }
.sap-done {
  display: inline-block; margin-left: .6rem;
  padding: .05rem .6rem;
  border-radius: 50px;
  background: #e3efe6; color: #1d6b34;
  font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
@media (min-width: 768px) {
  .sap-timeline__when { flex-basis: 17rem; padding-left: 1rem; }
}

/* ---- Work packages ------------------------------------------------------ */

.sap-wp {
  margin: 0;
  padding: 1.2rem 0 .4rem;
  border-top: 1px solid #eee;
}
.sap-wp:last-child { border-bottom: 1px solid #eee; }
.sap-wp > [class*="col-"] { padding-left: 0; }
.sap-wp h3 { margin-bottom: .35rem; }
.sap-wp__key {
  margin-bottom: .3rem;
  color: #858993;
  font-size: .9rem; font-weight: 700; letter-spacing: .08em;
  white-space: nowrap;
}
.sap-wp--ours { background: linear-gradient(90deg, rgba(161, 15, 43, .07), rgba(161, 15, 43, 0)); }
.sap-wp--ours .sap-wp__key { color: #a10f2b; }
@media (min-width: 768px) {
  .sap-wp > .sap-wp__key { padding-left: 1rem; }
}

.sap-tag {
  display: inline-block;
  margin: 0 0 1rem;
  padding: .2rem .8rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}

/* ---- Our role ----------------------------------------------------------- */

.sap-role {
  padding: 1.8rem 2rem .8rem;
  border-left: 4px solid #6281c8;
  background: #f2f4f8;
}

/* ---- Results list ------------------------------------------------------ */

.sap-list { margin: 0 0 1.5rem; padding: 0; list-style: none; }
.sap-list li { position: relative; padding: .45rem 0 .45rem 1.6rem; }
.sap-list li::before {
  content: ""; position: absolute; left: 0; top: 1rem;
  width: .7rem; height: .7rem; border-radius: 50%;
  background: #ebc71d;
}
.sap-note { color: #555a66; font-size: .95rem; }

/* ---- Call to action ----------------------------------------------------- */

.sap-involve {
  padding: 2rem 2rem 2.2rem;
  border-left: 4px solid #a10f2b;
  background: #f2f4f8;
}
.sap-involve h3 { margin-bottom: .8rem; font-weight: 700; }
.sap-involve p { max-width: 60ch; }
.sap-button {
  display: inline-block;
  padding: .75rem 1.6rem;
  border-radius: 50px;
  background: #a10f2b; color: #fff;
  font-weight: 700;
}
.sap-button:hover, .sap-button:focus { background: #7f0b21; color: #fff; text-decoration: none; }

/* ---- Partners ----------------------------------------------------------- */

.sap-partner { height: 100%; padding-top: 1rem; border-top: 3px solid #2c2f37; }
.sap-partner--us { border-top-color: #a10f2b; }
.sap-partner__country {
  display: block; margin-bottom: .3rem;
  color: #858993;
  font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}
.sap-partner__name { margin-bottom: .5rem; font-weight: 700; }
.sap-partner p { margin-bottom: .5rem; }

/* ---- Consortium and funding --------------------------------------------- */

.sap-logos {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 2rem 3rem;
  margin-bottom: 3rem;
}
.sap-logos img { width: auto; height: 34px; }
.sap-logos img.sap-logos__tall { height: 48px; }
@media (min-width: 768px) {
  .sap-logos img { height: 44px; }
  .sap-logos img.sap-logos__tall { height: 58px; }
}

.sap-funding {
  display: flex; flex-wrap: wrap; align-items: flex-start;
  gap: 1.5rem 2.2rem;
  padding: 2rem;
  background: #f2f4f8;
}
.sap-funding img { flex: none; width: 250px; height: auto; }
.sap-funding > div { flex: 1 1 22rem; }
.sap-funding p { font-size: .9rem; }
.sap-funding p:last-child { margin-bottom: 0; }
.sap-funding__ref b { color: #2c2f37; }