/* ============================================================================
 * Services for Our Veterans — video-led list of services the foundation offers
 * or funds. Printed by services.php; see Zendesk ticket 13113.
 *
 * Deliberately thin: the section reuses the theme's .videos and .youtube-player
 * rules from main.css, so only the per-service card needs styling here. Kept
 * out of main.css because that file is a Prepros build of main.scss.
 * ==========================================================================*/

/* The section above this one is white and the one below is a dark flag photo,
   so the two upper sections ran together. A light band separates them without
   putting two dark sections back to back. #eaeff8 is the theme's own
   $blue-light from css/global/_variables.scss. */
.videos.services {
  background: #eaeff8;
  border-top: 1px solid rgba(0, 51, 102, .07);
  border-bottom: 1px solid rgba(0, 51, 102, .07);
}

.services__intro {
  max-width: 46rem;
  margin: 1rem auto 0;
  text-align: center;
  font-size: 1.125rem;
  line-height: 1.5;
  color: #5a6672;
}

/* One service reads as a single wide card; several wrap into a row. The grid
   keeps a lone entry from stretching to the full container width. */
.services__items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.5rem;
}

.service {
  display: flex;
  flex-direction: column;
  flex: 1 1 20rem;
  max-width: 26rem;
  background: #fff;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 0.75rem 2.25rem rgba(0, 33, 66, .14);
}

.service .youtube-player { border-radius: 0; }

.service__body {
  padding: 1.75rem 1.875rem 2rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.service__label {
  margin: 0 0 .35rem;
  font-family: industry-inc-base, sans-serif;
  text-transform: uppercase;
  letter-spacing: .125rem;
  font-size: .8125rem;
  line-height: 1.2;
  color: #ce2532;
}

.service__name {
  margin: 0 0 .75rem;
  font-family: industry-inc-base, sans-serif;
  text-transform: uppercase;
  font-size: 1.5rem;
  line-height: 1.1;
  color: #003366;
}

.service__blurb {
  margin: 0 0 1.5rem;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: #282828;
}

/* .cta carries the red button styling from main.css; only the rhythm below it
   is ours. */
.service__cta { margin-bottom: 1rem; }

/* Sits directly beneath the thumbnail so it reads as a caption on the video it
   belongs to, rather than trailing after the main call to action. The link is
   left to the theme: .sw a:not(.cta) in main.css already gives in-content
   links the site's red-and-underlined treatment. */
.service__full {
  margin: 0;
  padding: .875rem 1.875rem;
  font-size: .9375rem;
  line-height: 1.2;
  border-bottom: 1px solid #e6ebf2;
}

/* The glyph lives on the paragraph, not the link. On the <a> it sat inside
   the link box and inherited its underline, which drew a stray rule under the
   triangle and left a gap before the text. */
.service__full::before {
  content: "\25B6";
  font-size: .7em;
  margin-right: .5rem;
  vertical-align: .08em;
  color: #ce2532;
}

@media (max-width: 63.99875em) {
  .services__items { gap: 2rem; }
  .service { flex-basis: 100%; }
  .service__body { padding: 1.5rem 1.5rem 1.75rem; }
  .service__full { padding: .75rem 1.5rem; }
  .services__intro { font-size: 1.0625rem; }
}

@media (max-width: 39.99875em) {
  .service__name { font-size: 1.3125rem; }
  .service__blurb { font-size: 1rem; }
}

/* ---- Coming soon ----------------------------------------------------------
   Deliberately quieter than a real card: no shadow, a dashed edge and muted
   type, so the row reads as "one service, more on the way" rather than three
   equal offers. */
.service--soon {
  background: transparent;
  border: 2px dashed rgba(0, 51, 102, .18);
  box-shadow: none;
  justify-content: center;
}

.service__soon-body {
  padding: 2.5rem 1.875rem;
  text-align: center;
}

.service__label--soon { color: #6b7a8c; }

.service--soon .service__name { color: #44617f; }

.service--soon .service__blurb {
  margin: 0;
  color: #5a6672;
}

/* ---- Provider invitation --------------------------------------------------
   Aimed at providers rather than veterans, so it is set apart from the grid
   and pitched quieter than the cards' calls to action. */
/* The link sits on its own line beneath the question. */
.services__provider a {
  display: inline-block;
  margin-top: .5rem;
}

.services__provider {
  max-width: 44rem;
  margin: 3rem auto 0;
  padding-top: 2rem;
  border-top: 1px solid rgba(0, 51, 102, .12);
  text-align: center;
  font-size: 1rem;
  line-height: 1.6;
  color: #5a6672;
}

@media (max-width: 63.99875em) {
  .service__soon-body { padding: 2rem 1.5rem; }
  .services__provider { margin-top: 2.25rem; padding-top: 1.5rem; }
}

/* Shown to administrators in place of the request button while the contact
   address is unconfirmed. See RUSK_SERVICES_CONTACT_VERIFIED. */
.service__pending {
  margin: 0;
  padding: .875rem 1rem;
  background: #fdf3f3;
  border: 1px solid #f0cfd1;
  border-radius: .375rem;
  font-size: .875rem;
  line-height: 1.5;
  color: #7a3b3f;
}

.service__pending code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .8125rem;
  background: rgba(0, 0, 0, .06);
  padding: .0625rem .25rem;
  border-radius: .1875rem;
}