/**
 * Social Media / Instagram Feed Section
 *
 * @package Enaya
 * @since 1.0.0
 */

/* ==========================================================================
   Social Media Section
   ========================================================================== */
.social-media-section {
  padding: 0rem 0 3.75rem;
}

.social-media-wrapper {
  border-radius: 1.25rem; /* 20px */
  padding: 3.75rem 4.375rem 3.75rem; /* 60px 70px */
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.social-media-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 3.125rem; /* 50px */
}

.social-media-header-left {
  flex: 1;
}

/* Eyebrow */
.social-media-eyebrow {
  font-family: "Lexend", sans-serif;
  font-weight: 400;
  font-size: 1rem; /* 16px */
  line-height: 1rem; /* 16px */
  letter-spacing: 0.4375rem; /* 7px */
  text-transform: uppercase;
  color: #37818d;
  display: block;
  margin-bottom: 0.75rem; /* 12px */
}

.social-media-eyebrow-line {
  width: 5rem; /* 80px */
  height: 0.0625rem; /* 1px */
  background-color: #37818d;
  margin-bottom: 1.5rem; /* 24px */
}

/* Title */
.social-media-title {
  font-family: "Lexend", sans-serif;
  font-weight: 400;
  font-size: 4.375rem; /* 70px */
  line-height: 4.625rem; /* 74px */
  letter-spacing: -0.0625rem; /* -1px */
  margin: 0;
}

/* --------------------------------------------------------------------------
   CTA Button
   -------------------------------------------------------------------------- */
.social-media-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem; /* 12px */
  padding: 1rem 1.75rem; /* 16px 28px */
  background: linear-gradient(
    90deg,
    #00818d -13.84%,
    #0b828d 3.25%,
    #288790 33.49%,
    #588e94 72.94%,
    #97989a 117.64%
  );
  border-radius: 1rem; /* 16px */
  text-decoration: none;
  transition:
    opacity 0.3s ease,
    transform 0.3s ease;
  white-space: nowrap;
}

.social-media-cta span {
  font-family: "Lexend", sans-serif;
  font-weight: 400;
  font-size: 1.125rem; /* 18px */
  line-height: 1.375rem; /* 22px */
  letter-spacing: -0.05em;
  text-transform: capitalize;
  color: #ffffff;
}

.social-media-cta .cta-dot {
  width: 0.5rem; /* 8px */
  height: 0.5rem; /* 8px */
  background: #ffffff;
  border-radius: 50%;
  display: inline-block;
}

.social-media-cta:hover {
  opacity: 0.9;
  transform: translateY(-0.125rem); /* -2px */
}

/* --------------------------------------------------------------------------
   Feed (Juicer Override Styles)
   -------------------------------------------------------------------------- */

/* Override Juicer default styles to match design */
.social-media-feed .juicer-feed {
  margin: 0 !important;
  padding: 0 !important;
}

.social-media-feed .juicer-feed .j-stacker-wrapper {
  padding: 0 !important;
}

.social-media-feed .juicer-feed .feed-item {
  border-radius: 1.25rem !important; /* 20px */
  overflow: hidden !important;
  background: #ffffff !important;
  margin: 0 0.625rem !important; /* 10px */
}

.social-media-feed .juicer-feed .feed-item .j-image {
  border-radius: 1.25rem 1.25rem 0 0 !important; /* 20px */
}

.social-media-feed .juicer-feed .j-paginate,
.social-media-feed .juicer-feed .j-branding {
  display: none !important;
}

.social-media-feed .juicer-feed h1.referral {
  display: none !important;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 75rem) {
  /* 1200px */
  .social-media-title {
    font-size: 3.125rem; /* 50px */
    line-height: 3.5rem; /* 56px */
  }
}

@media (max-width: 61.9375rem) {
  /* 991px */
  .social-media-wrapper {
    padding: 2.5rem 1.875rem 2.5rem; /* 40px 30px */
  }

  .social-media-title {
    font-size: 2.5rem; /* 40px */
    line-height: 2.875rem; /* 46px */
  }
}

@media (max-width: 47.9375rem) {
  /* 767px */
  .social-media-section {
    padding: 2.5rem 0 0; /* 40px */
  }

  .social-media-wrapper {
    padding: 1.875rem 1.25rem 1.875rem; /* 30px 20px */
    border-radius: 1rem; /* 16px */
  }

  .social-media-header {
    flex-direction: column;
    gap: 1.5rem; /* 24px */
    margin-bottom: 1.875rem; /* 30px */
  }

  .social-media-eyebrow {
    font-size: 0.75rem; /* 12px */
    letter-spacing: 0.3125rem; /* 5px */
  }

  .social-media-title {
    font-size: 1.875rem; /* 30px */
    line-height: 2.25rem; /* 36px */
  }

  .social-media-cta {
    padding: 0.75rem 1.25rem; /* 12px 20px */
    border-radius: 0.75rem; /* 12px */
  }

  .social-media-cta span {
    font-size: 0.875rem; /* 14px */
  }
}