/* -------------------------------- 

File#: _1_stacking-cards
Title: Stacking Cards
Descr: Cards stack effect on vertical scrolling
Usage: codyhouse.co/license

-------------------------------- */

/* variables */
:root {
  /* colors */
  --sg0-color-primary-hsl: 250, 84%, 54%;
  --sg0-color-bg-hsl: 0, 0%, 100%;
  --sg0-color-contrast-high-hsl: 230, 7%, 23%;
  --sg0-color-contrast-higher-hsl: 230, 13%, 9%;
  --sg0-color-bg-light-hsl: 0, 0%, 100%;

  /* spacing */
  --sg0-space-sm: 0.75rem;
  --sg0-space-md: 1.25rem;
}

@media(min-width: 64rem){
  :root {
    /* spacing */
    --sg0-space-sm: 1.125rem;
    --sg0-space-md: 2rem;
  }
}

.stack-cards-menu {
    position: sticky;
    top: 0;
    z-index: 1;
    background: white;
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
    transition: transform 0.3s ease, opacity 0.3s ease;
    border-radius: 20px;
}

.stack-cards-menu.is-hidden {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

.stack-cards-menu.is-sticky{
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

.stack-cards-sentinel {
    margin-top: 20px;
    height: 1px;
}

.sticky-sentinel {
  height: 1px;
}

.stack-cards-menu a {
    color: black;
    padding: 5px 20px;
    text-decoration: none;
    display: block;
    font-size: 16px;
    border-left: 0.5px solid black;
    border-right: 0.5px solid black;
}

.stack-cards-menu a:first-child { border-right: none; }
.stack-cards-menu a:last-child { border-left: none; }

/* component */
.stack-cards {
  --stack-cards-gap: var(--sg0-space-sm);
  --stack-cards-item-ratio: 2/1;
    
    margin: auto;
}

.stack-cards__item {
    position: sticky;
    top: var(--sg0-space-md);
  
    padding-bottom: calc(100%/(var(--stack-cards-item-ratio)));
    transform-origin: center top;

    width: clamp(400px, 80vw, 1024px);
    aspect-ratio: var(--stack-cards-item-ratio);
    list-style: none;
}
.stack-cards__item > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

/* utility classes */
.sg0-overflow-hidden {
  overflow: hidden;
}

.sg0-shadow-md {
  box-shadow:0 0.9px 1.5px rgba(0, 0, 0, 0.03),0 3.1px 5.5px rgba(0, 0, 0, 0.08),0 14px 25px rgba(0, 0, 0, 0.12);
}

.sg0-radius-lg {
  border-radius: 20px;
}

:where(.sg0-inner-glow) {
  position: relative;
}

.sg0-inner-glow::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.075);
}


.stack-cards-row{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    padding: 20px;
    width: 100%;
}


.stack-cards-column{
    flex: 1;
    display: flex;
    flex-direction: column;
    text-align: center;
    gap: 20px;
    padding: 0px 20%;
}

.stack-cards-text h2{
   text-transform: uppercase;
   font-weight: 700;
   font-size: 32px;
   font-family: "Space Grotesk" !important;
   line-height: 32px;
   padding-bottom: 20px;
}

.stack-cards-row .stack-cards-column .learndash-wrapper .ld-course-resume.ld-button,
.stack-cards-row .stack-cards-column .coming-soon-btn{
   display: flex !important;
   flex-direction: row !important;
   gap: 15px !important;
   justify-content: center !important;
   align-items: center !important;
   color: #1E1E1E !important;
   font-size: 18px !important;
   font-weight: bold !important;
   background-color: #08FF67 !important;
   border-radius: 40px !important;
   width: 50% !important;
   min-height: 60px !important;
   margin: auto !important;
}

.stack-cards-row .stack-cards-column .learndash-wrapper .ld-course-resume.ld-button:hover,
.stack-cards-row .stack-cards-column .coming-soon-btn:hover{
   color: #F1F1F1 !important;
   background-color: #0d1c135c !important;
   border: 1px solid #08FF67 !important;
}

.stack-cards-row .stack-cards-column .learndash-wrapper .ld-course-resume.ld-button:focus{
    outline: none !important;
}

.stack-cards-arrow-icon{
   font-size: 30px;
}

body.mini-is-open .splide__arrow--next{
   right: 110px !important;
}