/* –––––––––––––––––––––––––––––– BUTTONS –––––––––––––––––––––––––––––––––*/
button,
.button {
  display: inline-flex;
  padding: var(--spacing-xs) var(--spacing-m);
  border-radius: var(--border-radius-m);
  font-weight: 600;
  cursor: pointer;
  transition: all var(--transition-normal);
  border: none;
  font-size: var(--fs-s);
  font-family: var(--font-secondary);
  letter-spacing: 0.01em;
}

.button-primary {
  background-color: var(--c-primary-1);
  color: var(--c-white);
}

.button-primary:hover {
  background-color: #5b21b6;
  color: var(--c-white);
}

.button-secondary {
  border: 1px solid var(--c-primary-1);
  color: var(--c-primary-1);
  background-color: transparent;
}

.button-secondary:hover {
  background-color: var(--bg-bright-2);
}

.button-inverse {
  background-color: var(--c-white);
  color: var(--c-primary-1);
}

.button-inverse:hover {
  background-color: #f3f4f6;
}

.button-large {
  padding: var(--spacing-s) var(--spacing-m);
  font-size: var(--fs-s);
}

/* –––––––––––––––––––––––––––––– TEXT BUTTONS –––––––––––––––––––––––––––––––––*/
.text-button {
  font-size: var(--fs-l);
  font-weight: 400;
  color: var(--c-primary-1);
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  margin: 0;
}

.text-button.active,
.text-button:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 0.1em;
}

/* –––––––––––––––––––––––––––––– NAV LINKS –––––––––––––––––––––––––––––––––*/
.nav-link {
  font-size: var(--fs-l);
  display: inline-block;
  padding-left: 1em;
  position: relative;
}

.nav-link::before {
  content: '>';
  position: absolute;
  left: 0;
  top: 0;
  transform: scaleY(1.1) scaleX(0.6)
}

.nav-link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
}

/* –––––––––––––––––––––––––––––– FORWARD SLASH –––––––––––––––––––––––––––––––––*/
.forward-slash {
  --slash-spacing: 4.2em;
  width: calc(100% - var(--slash-spacing));
  margin-top: 0.65em;
  margin-left: var(--slash-spacing);
  position: relative;
  display: inline-flex;
  font-weight: 400;
  line-height: var(--lh-s);
}

.forward-slash.no-w {
  width: 0;
}

.forward-slash > div {
  display: inline-block;
  overflow: hidden;
}

.forward-slash > div > span {
  display: inline-block;
  width: 100%;
  transform: translateY(100%);
  transition: transform var(--transition-slow) var(--cubic-bezier) calc(var(--stagger-base) * var(--stagger-multiplier)),
              opacity var(--transition-slow) var(--cubic-bezier);
  opacity: 0;
  transition-delay: var(--transition-delay);
  line-height: var(--lh-l);
}

.a-triggered.forward-slash > div > span,
.a-triggered .forward-slash > div > span {
  transform: translateY(0);
  opacity: 1;
}

.forward-slash::before {
  content: '';
  position: absolute;
  left: calc(var(--slash-spacing) * -1);
  top: -0.9em;
  width: 2px;
  height: 3em;
  background-color: currentColor;
  transform: translateX(0.05em) translateY(-0.54em) rotate(45deg) scaleY(0);
  transform-origin: bottom;
  opacity: 0;
  transition: transform var(--transition-slow) var(--cubic-bezier), opacity var(--transition-slow) var(--cubic-bezier);
  transition-delay: var(--transition-delay);
}

.a-triggered.forward-slash::before,
.a-triggered .forward-slash::before {
  opacity: 1;
  transform: translateX(0.05em) translateY(-0.54em) rotate(45deg) scaleY(1);
}

/* –––––––––––––––––––––––––––––– STACKED IMAGE COL –––––––––––––––––––––––––––––––––*/
.stacked-image-col {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  z-index: 5;
}

.stacked-image-wrapper {
  --stacked-wrapper-width: 80%;
  position: absolute;
  top: 0;
  left: calc(100% - var(--stacked-wrapper-width));
  width: var(--stacked-wrapper-width);
  height: var(--inner-height);
  z-index: -1;
}

.stacked-image-col img {
  --image-size: 69%;
  --image-position: 60%;
  --stagger-base: 0.05s;
  position: absolute;
  object-fit: cover;
  aspect-ratio: 0.55 / 1;
  height: calc(var(--inner-height) * var(--image-size));
  max-width: calc(var(--inner-width) * 0.525);
}

.stacked-image-col img.first-img {
  bottom: calc(100% - var(--image-position));
}

.stacked-image-col img.last-img {
  top: calc(100% - var(--image-position));
}

@media screen and (max-width: 749px) {
  .stacked-image-col {
    min-height: calc(90vw + 4vh);
    order: 2;
    margin-top: var(--spacing-2xl);
  }

  .stacked-image-col.has-cta {
    min-height: calc(125vw + 10vh);
  }

  .stacked-image-wrapper {
    --stacked-wrapper-width: 86%;
    left: 7%;
  }

  .stacked-image-col img {
    aspect-ratio: 0.75 / 1;
  }

  .stacked-image-col img.first-img {
    right: 0;
    bottom: unset;
    top: 0;
  }
  
  .stacked-image-col img.last-img {
    left: 0;
    top: 40%;
  }

  .stacked-image-col.has-cta img.last-img {
    top: 30%;
  }
}

@media screen and (min-width: 750px) {
  .stacked-image-wrapper {
    --stacked-wrapper-width: 70%;
  }

  .stacked-image-col img.first-img {
    bottom: calc(100% - var(--image-position));
    left: calc(100% - var(--image-position));
    max-width: var(--image-position);
    transform: translateY(calc(var(--p-ratio) * -16vh + 7.5vh));
  }
  
  .stacked-image-col img.last-img {
    top: calc(100% - var(--image-position));
    right: calc(100% - var(--image-position));
    max-width: var(--image-position);
    transform: translateY(calc(var(--p-ratio) * -12vh + 6vh));
  }
  
  .stacked-image-col.has-cta img.first-img {
    transform: translateY(calc(var(--p-ratio) * -23vh));
  }
  
  .stacked-image-col.has-cta img.last-img {
    transform: translateY(calc(var(--p-ratio) * -18vh));
  }
}

@media screen and (min-width: 1150px) {
  .stacked-image-col img.first-img {
    bottom: calc(90% - var(--image-position));
  }
  
  .stacked-image-col img.last-img {
    top: calc(90% - var(--image-position));
  }
}

@media (max-aspect-ratio: 1/1) and (min-width: 750px) {
  .stacked-image-wrapper {
    --stacked-wrapper-width: 80%;
  }
}

/* –––––––––––––––––––––––––––––– VERTICAL IMAGE CONTAINER –––––––––––––––––––––––––––––––––*/

@media screen and (max-width: 749px) {
  .v-img-container {
    margin-top: var(--spacing-2xl);
  }
  
  .v-img-container img {
    width: 75%;
    aspect-ratio: 0.75 / 1;
    margin: 0 auto;
    object-fit: cover;
  } 

  .v-img-container.square {
    width: 100%;
  }

  .v-img-container.square img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
  } 
}

@media screen and (min-width: 750px) {
  .v-img-container {
    position: relative;
    height: 0;
    box-sizing: border-box;
  }
  
  .container > .v-img-container {
    width: 60%;
    padding-top: calc(60% * 1.81);
  }
  
  .container > div > .v-img-container {
    width: 55%;
    padding-top: calc(55% * 1.81);
  }

  .v-img-container.square {
    width: 100%;
    padding-top: 100%;
  }
  
  .container > div:nth-child(2) > .v-img-container:not(.square),
  .container > .v-img-container:nth-child(2):not(.square) {
    margin: auto 0 auto auto;
  }
  
  .container > div:nth-child(1) > .v-img-container:not(.square),
  .container > .v-img-container:nth-child(1):not(.square) {
    margin: auto auto auto 0;
  }

  .v-img-container img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 0.55 / 1;
  }
}

/* –––––––––––––––––––––––––––––– GAP COL –––––––––––––––––––––––––––––––––*/

@media screen and (min-width: 750px) {
  .gap-col:nth-child(1) {
    padding-right: var(--spacing-2xl);
  }

  .gap-col:nth-child(2) {
    padding-left: var(--spacing-2xl);
  }
}

/* –––––––––––––––––––––––––––––– ARTICLE CARD –––––––––––––––––––––––––––––––––*/
.article-card {
  cursor: none;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-s);
}

.article-card .article-image {
  position: relative;
  width: 100%;
  padding-top: 100%;
}

.article-card .article-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.article-card .article-title {
  font-size: var(--fs-l);
  font-weight: 400;
  text-decoration: none;
}

.article-card:hover .article-title {
  text-decoration: underline;
}

.article-image .missing-image {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background: var(--cloud-pink);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.article-image .missing-image::after {
  content: 'Image coming soon';
  opacity: 0.75;
  text-align: center;
  font-size: var(--fs-l);
  font-weight: 300;
}

@media screen and (max-width: 749px) {
  .article-card {
    gap: var(--spacing-2xs);
  }

  .article-card .article-image {
    padding-top: min(150px, 100%);
  }

  .category-content {
    gap: var(--spacing-m) !important;
  }
}


/* –––––––––––––––––––––––––––––– CTA BUTTON –––––––––––––––––––––––––––––––––*/
.cta-button {
  display: grid;
  grid-template-columns: auto 1fr;
  font-size: var(--fs-l);
  align-items: flex-end;
  gap: var(--spacing-m);
  text-decoration: none;
  border-bottom: 1px solid var(--c-primary-1);
  padding: var(--spacing-xs) 0;
  width: clamp(10.5em, 13vw, 13em);
  background: transparent;
  border-radius: 0;
}

.dark-bg .cta-button {
  border-bottom: 1px solid var(--c-white);
}

.cta-button i.plus-icon::before {
  width: 0.7em;
  height: 0.7em;
}

.dark-bg .cta-button i {
  filter: invert(1);
}

.cta-button:hover i:not(.plus-icon) {
  transform: translateX(1em);
}

.cta-button:hover .cta-button-text {
  text-decoration: underline;
}

.cta-button-text {
  font-weight: 400;
  text-decoration: none;
  text-align: right;
}



/* –––––––––––––––––––––––––––––– ARROWS –––––––––––––––––––––––––––––––––*/
.arrow-right,
.arrow-left,
.arrow-up,
.arrow-down,
.plus-icon {
  display: inline-block;
  margin-bottom: -0.3em;
  transition: transform var(--transition-fast) var(--cubic-bezier);
}

.arrow-right::before,
.arrow-left::before,
.arrow-up::before,
.arrow-down::before,
.plus-icon::before {
  content: '';
  display: inline-block;
  width: 1em;
  height: 1em;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.arrow-right::before,
.arrow-left::before,
.arrow-up::before,
.arrow-down::before {
  background-image: url('/wp-content/themes/workshop/assets/icons/ws-arrow.svg');
}

.plus-icon::before {
  background-image: url('/wp-content/themes/workshop/assets/icons/ws-plus.svg');
}

.arrow-left::before {
  transform: rotate(180deg);
}

.arrow-up::before {
  transform: rotate(-90deg);
}

.arrow-down::before {
  transform: rotate(90deg);
}

/* –––––––––––––––––––––––––––––– NEWSLETTER SIGNUP –––––––––––––––––––––––––––––––––*/
.newsletter-signup {
  display: grid;
  grid-template-columns: 1fr auto;
  padding-bottom: 2px;
  border-bottom: solid 2px var(--text-color);
  margin-bottom: var(--spacing-2xs);
  align-items: center;
}

.newsletter-signup > input,
.newsletter-signup > .newsletter-status-final {
  padding: 0.9em 0.9em 0.9em 0;
  background: none;
  border: none;
  outline: none;
  color: var(--text-color);
}

.newsletter-signup > button {
  padding: 0 0 0 1em;
  background: none;
  border: none;
  outline: none;
  cursor: pointer;
  transition: transform var(--transition-fast) var(--cubic-bezier);
}

.dark-bg .newsletter-signup > button {
  filter: invert(1);
}

.newsletter-signup > button:hover {
  transform: translateX(0.25em);
}

.newsletter-signup > .newsletter-status {
  margin-bottom: 0.25em;
  margin-top: -0.25em;
  color: var(--impact-orange);
  font-style: italic;
  font-size: var(--fs-xs);
  font-weight: 300;
}

/* –––––––––––––––––––––––––––––– FULL WIDTH IMAGE –––––––––––––––––––––––––––––––––*/
.full-col-image {
  margin-left: min(40%, 250px);
}

.full-col-image .image-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.full-col-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  visibility: visible;
}

@media screen and (max-width: 749px) {
  .full-col-image {
    order: 2;
    width: 100%;
    height: 250px;
    margin: 0;
    padding: 0 var(--spacing-s) var(--spacing-l) var(--spacing-s);
    box-sizing: border-box;
  }
}

/* –––––––––––––––––––––––––––––– HERO TEXT (HORIZONTAL PARALLAX) –––––––––––––––––––––––––––––––––*/
.hero-text-image {
  display: inline-block;
  height: 0.71em;
  width: 0.71em;
  background: #FFC0C0;
  flex-shrink: 0;
  margin-top: -0.04em;
}

.hero-text-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}