/* =========================================================
   MODULE
========================================================= */

.psc {
  --psc-background: #001d39;
  --psc-title-color: #003b72;
  --psc-text-color: #001d39;
  --psc-accent: #fea92f;

  --psc-sticky-top: 104px;
  --psc-admin-offset: 0px;

  --psc-gap: clamp(240px, 45vh, 520px);
  --psc-radius: 24px;
  --psc-stack-tail: clamp(120px, 25vh, 280px);

  position: relative;
  isolation: isolate;

  width: 100%;
  min-width: 0;

  padding-block: clamp(56px, 7vw, 112px);

  overflow: visible;

  background: var(--psc-background);
  color: #fff;
}

.psc,
.psc *,
.psc *::before,
.psc *::after {
  box-sizing: border-box;
}

body.admin-bar .psc {
  --psc-admin-offset: 32px;
}


/* =========================================================
   CONTAINER
========================================================= */

.psc__container {
  width: 100%;
  max-width: 1400px;

  margin-inline: auto;
  padding-inline: 24px;

  overflow: visible;
}


/* =========================================================
   MAIN HEADING
========================================================= */

.psc__header {
  position: relative;
  z-index: 1;

  max-width: 990px;

  margin-inline: auto;
  padding-bottom: clamp(72px, 10vh, 120px);

  text-align: center;
}

.psc__header::after {
  content: "";

  position: absolute;
  bottom: 0;
  left: 50%;

  width: 2px;
  height: clamp(44px, 6vh, 80px);

  transform: translateX(-50%);

}

.psc__heading {
  margin: 0;

  color: #fff;

  font-family: "Source Serif 4", serif;

  font-size: clamp(28px, 3vw, 44px);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;

  overflow-wrap: anywhere;
}

.psc__intro {
  max-width: 700px;

  margin: 24px auto 0;

  color: #edf4f8;

  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.6;
}

.psc__intro p,
.psc__description p {
  margin: 0;
}

.psc__intro p + p,
.psc__description p + p {
  margin-top: 1em;
}


/* =========================================================
   EQUAL HEIGHT CARD TRACK
========================================================= */

.psc__list {
  position: relative;
  isolation: isolate;

  display: grid;

  grid-template-columns: minmax(0, 1fr);
  grid-auto-rows: 1fr;

  row-gap: var(--psc-gap);

  align-items: start;

  width: 100%;
  max-width: 1200px;

  margin: 0 auto;
  padding: 0;

  overflow: visible;

  list-style: none;
}

.psc__list::before {
  content: "";

  position: absolute;
  z-index: 0;

  top: 0;
  bottom: 0;
  left: 50%;

  width: 2px;

  transform: translateX(-50%);

  background: none;
}

.psc__card {
  position: relative;

  z-index:
    var(
      --psc-card-order,
      1
    );

  display: block;

  width: 100%;
  height: 100%;

  min-width: 0;
  min-height: 0;

  margin: 0;
  padding: 0;

  list-style: none;
}

.psc__card + .psc__card {
  margin-top: 0;
}


/* =========================================================
   STICKY STACKING
========================================================= */

.psc.is-stack-enabled .psc__list {
  padding-bottom:
    var(
      --psc-stack-tail
    );
}

.psc.is-stack-enabled .psc__list::before {
  bottom:
    var(
      --psc-stack-tail
    );
}

.psc.is-stack-enabled .psc__card {
  position: sticky;

  top:
    calc(
      var(--psc-sticky-top) +
      var(--psc-admin-offset) +
      var(--psc-card-offset, 0px)
    );
}


/* =========================================================
   CARD SURFACE
========================================================= */

.psc__surface {
  position: relative;
  isolation: isolate;

  width: 100%;
  height: 100%;

  margin: 0;

  overflow: hidden;

  border: 1px solid rgb(0 29 53 / 6%);

  border-radius:
    var(
      --psc-radius
    );

  background-color: #fff;

  background-image:
    url("/wp-content/themes/semarchy2024/assets/images/50_card_background.png");

  background-repeat: no-repeat;

  background-position: center center;

  background-size: cover;

  color:
    var(
      --psc-text-color
    );

  box-shadow:
    0 16px 40px
    rgb(0 0 0 / 10%);

  transform:
    scale(
      var(
        --psc-scale,
        1
      )
    );

  transform-origin: center top;

  transition: none;
}


/* =========================================================
   OLD DECORATIVE SHAPES
========================================================= */

.psc__surface::before,
.psc__surface::after {
  display: none;
}


/* =========================================================
   CARD CONTENT
========================================================= */

.psc__card-grid {
  position: relative;
  z-index: 1;

  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr);

  /*
   * Center media and copy against each other.
   */
  align-items: center;

  /*
   * Center the full row vertically
   * inside the card.
   */
  align-content: center;

  width: 100%;
  height: 100%;
  min-height: 100%;

  gap: 56px;

  padding: 24px 40px;
}

.psc__media,
.psc__copy {
  min-width: 0;
}


/* =========================================================
   MEDIA WRAPPER
========================================================= */

.psc__media {
  position: relative;

  width: 100%;

  /*
   * Images remain square on desktop.
   */
  aspect-ratio: 1 / 1;

  align-self: center;
  justify-self: center;

  overflow: hidden;

  border-radius: 18px;

  background: #e7e9e6;
}


/* =========================================================
   VIDEO WRAPPER
========================================================= */

.psc__media:has(.psc__video) {
  /*
   * Video gets its native widescreen shape.
   */
  aspect-ratio: 16 / 9;

  align-self: center;
  justify-self: center;

  overflow: hidden;

  border-radius: 18px;

  background: transparent;
}


/* =========================================================
   IMAGE
========================================================= */

.psc__image {
  display: block;

  width: 100%;
  height: 100%;

  max-width: none;

  margin: 0;

  object-fit: cover;
  object-position: center;
}


/* =========================================================
   VIDEO
========================================================= */

.psc__video {
  position: absolute;

  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  max-width: none;

  margin: 0;
  padding: 0;

  border: 0;

  border-radius: inherit;

  background: transparent;
}


/*
 * Ensure any iframe inside the media wrapper
 * fills the rounded 16:9 area completely.
 */
.psc__media iframe {
  display: block;

  width: 100%;
  height: 100%;

  margin: 0;
  padding: 0;

  border: 0;

  border-radius: inherit;
}


/* =========================================================
   PLACEHOLDER
========================================================= */

.psc__placeholder {
  display: grid;

  place-items: center;

  width: 100%;
  height: 100%;

  background: #dcdcdc;

  color: #a9a9a9;
}


/* =========================================================
   COPY
========================================================= */

.psc__copy {
  align-self: center;
}


/* =========================================================
   TITLE
========================================================= */

.psc__title {
  margin: 0;

  color:
    var(
      --psc-title-color
    );

  font-family: "Source Serif 4", serif;

  font-size: 40px;

  font-weight: 700;

  line-height: 1.2;

  letter-spacing: -0.02em;

  overflow-wrap: anywhere;
}


/* =========================================================
   DESCRIPTION
========================================================= */

.psc__description {
  margin-top: 24px;

  color:
    var(
      --psc-text-color
    );

  font-family: Inter, sans-serif;

  font-size:
    clamp(
      15px,
      1.15vw,
      17px
    );

  line-height: 1.6;

  overflow-wrap: anywhere;
}


/* =========================================================
   TABLET
========================================================= */

@media (min-width: 768px) {

  .psc__container {
    padding-inline: 40px;
  }

}


/* =========================================================
   DESKTOP
========================================================= */

@media (min-width: 1024px) {

  .psc__container {
    padding-inline: 72px;
  }


  .psc__card-grid {
    /*
     * Keep the content vertically centered.
     */
    align-items: center;
    align-content: center;

    height: 100%;
    min-height: 100%;

    padding: 64px 72px;
  }


  .psc__media {
    align-self: center;
  }


  .psc__copy {
    align-self: center;
  }

}


/* =========================================================
   SHORT DESKTOP / LANDSCAPE SCREENS
========================================================= */

@media (min-width: 768px) and (max-height: 800px) {

  .psc__title {
    font-size: 40px;
    font-weight: 600;
  }

}


/* =========================================================
   WORDPRESS ADMIN BAR
========================================================= */

@media (max-width: 782px) {

  body.admin-bar .psc {
    --psc-admin-offset: 46px;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

  .psc {
    --psc-radius: 20px;

    --psc-gap:
      clamp(
        180px,
        35vh,
        340px
      );

    --psc-gap:
      clamp(
        180px,
        35svh,
        340px
      );

    --psc-stack-tail:
      clamp(
        100px,
        20vh,
        180px
      );

    --psc-stack-tail:
      clamp(
        100px,
        20svh,
        180px
      );
  }


  .psc__header {
    padding-bottom: 72px;
  }


  .psc__header::after {
    height: 44px;
  }


  .psc__card-grid {
    grid-template-columns:
      minmax(0, 1fr);

    /*
     * Mobile doesn't need the large
     * vertically centered desktop area.
     */
    align-items: start;
    align-content: start;

    height: auto;
    min-height: 0;

    gap: 20px;

    padding: 24px 40px;
  }


  .psc__media {
    width: 100%;

    aspect-ratio: 16 / 9;

    align-self: auto;
    justify-self: stretch;

    border-radius: 14px;
  }


  .psc__media:has(.psc__video) {
    width: 100%;

    aspect-ratio: 16 / 9;

    align-self: auto;
    justify-self: stretch;

    border-radius: 14px;
  }


  .psc__copy {
    align-self: auto;
  }


  .psc__title {
    font-size:
      clamp(
        23px,
        5.5vw,
        28px
      );
  }


  .psc__description {
    margin-top: 12px;

    font-size: 15px;

    line-height: 1.5;
  }


  /*
   * Keep background image visible on mobile.
   */
  .psc__surface {
    background-image:
      url("/wp-content/themes/semarchy2024/assets/images/50_card_background.png");

    background-repeat: no-repeat;

    background-position: center center;

    background-size: cover;
  }

}


/* =========================================================
   SMALL MOBILE SCREENS
========================================================= */

@media (max-width: 767px) and (max-height: 700px) {

  .psc__title {
    font-size: 23px;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .psc {
    --psc-gap: 40px;
  }


  .psc.is-stack-enabled
  .psc__card {
    position: relative;

    top: auto;
  }


  .psc.is-stack-enabled
  .psc__list {
    padding-bottom: 0;
  }


  .psc.is-stack-enabled
  .psc__list::before {
    bottom: 0;
  }


  .psc__surface {
    transform: none;
  }

}


/* =========================================================
   PRINT
========================================================= */

@media print {

  .psc {
    --psc-gap: 24px;

    padding-block: 24px;

    background: #fff;

    color: #000;
  }


  .psc__heading,
  .psc__intro {
    color: #000;
  }


  .psc__list {
    display: block;
  }


  .psc__card,
  .psc__surface {
    height: auto;
  }


  .psc__card + .psc__card {
    margin-top:
      var(
        --psc-gap
      );
  }


  .psc.is-stack-enabled
  .psc__card {
    position: relative;

    top: auto;
  }


  .psc.is-stack-enabled
  .psc__list {
    padding-bottom: 0;
  }


  .psc__surface {
    background-image: none;

    transform: none;

    box-shadow: none;

    break-inside: avoid;
  }


  .psc__list::before,
  .psc__header::after {
    display: none;
  }

}