/* =========================================================
   PLATFORM CAPABILITIES
========================================================= */

.platform-capabilities {
  position: relative;

  width: 100%;

  overflow: hidden;

  padding:
    68px
    40px
    92px;

  background: #ffffff;

  box-sizing: border-box;

  isolation: isolate;
    background-image:
    url("/wp-content/themes/semarchy2024/assets/images/capabilities_background.png");

  background-repeat: no-repeat;

  background-position: center center;

  background-size: cover;
}


/* =========================================================
   DECORATIVE BOTTOM ARCS
========================================================= */

.platform-capabilities__decor {
  position: absolute;

  z-index: 0;

  left: 50%;
  bottom: -545px;

  width: 1450px;
  height: 720px;

  transform:
    translateX(-50%);

  border:
    3px solid
    rgba(
      62,
      164,
      224,
      0.10
    );

  border-radius: 50%;

  pointer-events: none;
}


.platform-capabilities__decor::before,
.platform-capabilities__decor::after {
  content: "";

  position: absolute;

  border-radius: 50%;

  pointer-events: none;
}


.platform-capabilities__decor::before {
  inset: 42px;

  border:
    6px solid
    rgba(
      62,
      164,
      224,
      0.08
    );
}


.platform-capabilities__decor::after {
  inset: 94px;

  border:
    4px solid
    rgba(
      62,
      164,
      224,
      0.06
    );
}


/* =========================================================
   INNER
========================================================= */

.platform-capabilities__inner {
  position: relative;

  z-index: 2;

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

  margin:
    0
    auto;

  box-sizing: border-box;
}


/* =========================================================
   HEADER
========================================================= */

.platform-capabilities__header {
  width: 100%;
  max-width: 760px;

  margin:
    0
    auto
    48px;

  text-align: center;
}


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

.platform-capabilities__heading {
  width: 100%;
  max-width: 880px;

  margin:
    0
    auto
    16px;

  text-align: center;

  text-wrap: balance;
}


/* =========================================================
   INTRO
========================================================= */

.platform-capabilities__intro {
  width: 100%;
  max-width: 880px;

  margin:
    0
    auto;

  text-align: center;
}


.platform-capabilities__intro p {
  margin: 0;
}


/* =========================================================
   GRID
========================================================= */

.platform-capabilities__grid {
  display: grid;

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

  gap:
    24px
    64px;

  width: 100%;
}


/* =========================================================
   CARD WRAPPER
========================================================= */

.platform-capabilities__card-wrapper {
  width: 100%;
  height: 100%;

  min-width: 0;

  margin: 0;
}


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

.platform-capabilities__card {
  position: relative;

  width: 100%;
  height: 100%;

  min-width: 0;

  min-height: 258px;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  padding:
    24px
    20px
    18px;

  overflow: hidden;

  color: inherit;

  text-decoration: none;

  /*
   * Background color stays separate from the image
   * so hover / active states do not remove the artwork.
   */
  background-color:
    rgba(
      255,
      255,
      255,
      0.96
    );


  border:
    1px solid
    #ADB5BD;

  border-radius: 8px;

  box-sizing: border-box;

  cursor: pointer;

  transition:
    border-color 0.28s ease,
    box-shadow 0.28s ease,
    transform 0.28s ease,
    background-color 0.28s ease;
}


.platform-capabilities__card:visited {
  color: inherit;
}


/* =========================================================
   DESKTOP CSS HOVER FALLBACK
========================================================= */

@media (
  hover: hover
) and (
  pointer: fine
) {

  .platform-capabilities__card:hover {
    border-color: #97D744;

    border-width: 2px;

    /*
     * Only change background COLOR.
     * Do not use "background:" here because that would
     * remove capabilities_background.png.
     */
    background-color:
      rgba(
        248,
        249,
        250,
        0.96
      );

    transform:
      translateY(-2px);

    box-shadow:
      0
      12px
      26px
      rgba(
        1,
        57,
        99,
        0.10
      );
  }

}


/* =========================================================
   JS HOVER STATE
========================================================= */

.platform-capabilities__card.is-hovered {
  border-color: #97D744;

  background-color:
    rgba(
      248,
      249,
      250,
      0.96
    );

  transform:
    translateY(-2px);

  box-shadow:
    0
    12px
    26px
    rgba(
      1,
      57,
      99,
      0.10
    );
}


/* =========================================================
   MOBILE ACTIVE STATE
========================================================= */

.platform-capabilities__card.is-active {
  border-color: #97D744;

  background-color:
    rgba(
      248,
      249,
      250,
      0.96
    );

  transform:
    translateY(-2px);

  box-shadow:
    0
    12px
    26px
    rgba(
      1,
      57,
      99,
      0.10
    );
}


/* =========================================================
   COPY TRANSITION AREA
========================================================= */

.platform-capabilities__card-copy {
  position: relative;

  display: grid;

  width: 100%;

  min-height: 138px;
}


.platform-capabilities__card-front,
.platform-capabilities__card-description {
  grid-area:
    1
    /
    1;

  width: 100%;
font-family:Inter,sans-serif;
  transition:
    opacity 0.25s ease,
    transform 0.3s ease;
}


/* =========================================================
   DEFAULT CONTENT
========================================================= */

.platform-capabilities__card-front {
  opacity: 1;

  visibility: visible;

  transform:
    translateY(0);

  pointer-events: auto;
}


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

.platform-capabilities__card-description {
  opacity: 0;

  visibility: hidden;

  transform:
    translateY(10px);

  pointer-events: none;

  transition:
    opacity 0.25s ease,
    transform 0.3s ease,
    visibility 0s linear 0.3s;
}


.platform-capabilities__card-description p {
  margin: 0;
}


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

.platform-capabilities__card-title {
  margin:
    0
    0
    10px;
}


/* =========================================================
   SUBHEADING
========================================================= */

.platform-capabilities__card-subheading p {
  margin: 0;
}


/* =========================================================
   CSS HOVER CONTENT SWAP
========================================================= */

@media (
  hover: hover
) and (
  pointer: fine
) {

  .platform-capabilities__card:hover
  .platform-capabilities__card-front {
    opacity: 0;

    visibility: hidden;

    transform:
      translateY(-8px);

    pointer-events: none;
  }


  .platform-capabilities__card:hover
  .platform-capabilities__card-description {
    opacity: 1;

    visibility: visible;

    transform:
      translateY(0);

    pointer-events: auto;

    transition-delay:
      0s;
  }

}


/* =========================================================
   JS HOVER CONTENT SWAP
========================================================= */

.platform-capabilities__card.is-hovered
.platform-capabilities__card-front {
  opacity: 0;

  visibility: hidden;

  transform:
    translateY(-8px);

  pointer-events: none;
}


.platform-capabilities__card.is-hovered
.platform-capabilities__card-description {
  opacity: 1;

  visibility: visible;

  transform:
    translateY(0);

  pointer-events: auto;

  transition-delay:
    0s;
}


/* =========================================================
   TOUCH ACTIVE CONTENT SWAP
========================================================= */

.platform-capabilities__card.is-active
.platform-capabilities__card-front {
  opacity: 0;

  visibility: hidden;

  transform:
    translateY(-8px);

  pointer-events: none;
}


.platform-capabilities__card.is-active
.platform-capabilities__card-description {
  opacity: 1;

  visibility: visible;

  transform:
    translateY(0);

  pointer-events: auto;

  transition-delay:
    0s;
}


/* =========================================================
   FOOTER
========================================================= */

.platform-capabilities__card-footer {
  display: flex;

  align-items: flex-end;
  justify-content: flex-end;

  width: 100%;

  margin-top: 22px;
}


/* =========================================================
   ICON
========================================================= */

.platform-capabilities__icon {
  width: 48px;
  height: 48px;
  margin-bottom: 8px;
  display: flex;

  align-items: center;
  justify-content: flex-start;

  flex:
    0
    0
    auto;
}


.platform-capabilities__icon-image {
  display: block;

  width: 38px;
  height: 38px;

  object-fit: contain;

  object-position:
    left
    center;
}


/* =========================================================
   ARROW WRAPPER

   Circle and arrow are contained inside the SVG itself.
========================================================= */

.platform-capabilities__arrow {
  width: 40px;
  height: 40px;

  flex:
    0
    0
    40px;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  padding: 0;

  margin: 0;

  border: 0;

  background: transparent;

  line-height: 0;

  pointer-events: none;
}


/* =========================================================
   ARROW SVG
========================================================= */

.platform-capabilities__arrow-icon {
  display: block;

  width: 40px;
  height: 40px;

  flex:
    0
    0
    40px;

  transform:
    rotate(0deg);

  transform-origin:
    50%
    50%;

  transform-box:
    fill-box;

  transition:
    transform
    0.32s
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    );

  will-change:
    transform;
}


/* =========================================================
   CSS HOVER ARROW FALLBACK
========================================================= */

@media (
  hover: hover
) and (
  pointer: fine
) {

  .platform-capabilities__card:hover
  .platform-capabilities__arrow-icon {
    transform:
      rotate(-45deg);
  }

}


/* =========================================================
   JS HOVER ARROW
========================================================= */

.platform-capabilities__card.is-hovered
.platform-capabilities__arrow-icon {
  transform:
    rotate(-45deg);
}


/* =========================================================
   MOBILE ACTIVE ARROW
========================================================= */

.platform-capabilities__card.is-active
.platform-capabilities__arrow-icon {
  transform:
    rotate(-45deg);
}


/* =========================================================
   KEYBOARD FOCUS
========================================================= */

.platform-capabilities__card:focus-visible {
  outline:
    3px solid
    rgba(
      151,
      215,
      68,
      0.50
    );

  outline-offset:
    4px;

  border-color:
    #97D744;

  /*
   * Background image remains.
   */
  background-color:
    rgba(
      248,
      249,
      250,
      0.96
    );
}


/* =========================================================
   KEYBOARD FOCUS CONTENT
========================================================= */

.platform-capabilities__card:focus-visible
.platform-capabilities__card-front {
  opacity: 0;

  visibility: hidden;

  transform:
    translateY(-8px);

  pointer-events: none;
}


.platform-capabilities__card:focus-visible
.platform-capabilities__card-description {
  opacity: 1;

  visibility: visible;

  transform:
    translateY(0);

  pointer-events: auto;

  transition-delay:
    0s;
}


.platform-capabilities__card:focus-visible
.platform-capabilities__arrow-icon {
  transform:
    rotate(-45deg);
}


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

@media screen and (max-width: 1023px) {

  .platform-capabilities {
    padding:
      60px
      32px
      80px;
  }


  .platform-capabilities__inner {
    max-width: 760px;
  }


  .platform-capabilities__header {
    margin-bottom:
      40px;
  }


  .platform-capabilities__grid {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    gap:
      20px;
  }


  .platform-capabilities__card {
    min-height:
      250px;

    /*
     * Keep capabilities background on tablet.
     */
  }


  .platform-capabilities__decor {
    bottom:
      -570px;

    width:
      1150px;
  }

}


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

@media screen and (max-width: 640px) {

  .platform-capabilities {
    padding:
      48px
      20px
      64px;
  }


  .platform-capabilities__header {
    margin-bottom:
      32px;
  }


  .platform-capabilities__heading {
    margin-bottom:
      14px;
  }


  .platform-capabilities__grid {
    grid-template-columns:
      1fr;

    gap:
      16px;
  }


  .platform-capabilities__card {
    min-height:
      225px;

    padding:
      22px
      18px
      18px;

    /*
     * Keep capabilities background on mobile.
     */
  }


  .platform-capabilities__card-copy {
    min-height:
      120px;
  }


  .platform-capabilities__card-footer {
    margin-top:
      18px;
  }


  .platform-capabilities__arrow,
  .platform-capabilities__arrow-icon {
    width:
      40px;

    height:
      40px;

    flex-basis:
      40px;
  }


  .platform-capabilities__decor {
    bottom:
      -595px;

    width:
      900px;

    height:
      700px;
  }

}


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

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

  .platform-capabilities__card,
  .platform-capabilities__card-front,
  .platform-capabilities__card-description,
  .platform-capabilities__arrow-icon {
    transition:
      none;
  }

}