/* ── Code Snippet Section ─────────────────────────────────────── */

/**
 * Standalone container fade effect styles - Plain CSS
 * Apply .container-fade-effect class to any container
 */

.container-fade-effect {
  position: relative;
  --bg-opacity: 1;
  --fade-min-opacity: 0.3;
  --fade-max-opacity: 1;
}

/* Hide the inline background, we'll use ::before instead */
.container-fade-effect {
  background-image: none !important;
}

.platform-story-item--twoColumn {
  .swiper-slide:last-child & {
    .platform-story-item__content {
      text-align: center;
    }

    .button-container {
      justify-content: center;
    }

    @media (min-width: 992px) {
      flex-direction: row-reverse;

      .platform-story-item__content {
        text-align: left;
        gap: 0;
      }

      .button-container {
        justify-content: flex-start;
      }
    }
  }
}

.code-snippet-panel-not-full-height {
  height: 46rem;
}

.container-fade-effect::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-image: var(--bg-image);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  opacity: var(--bg-opacity);
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
}

/* Ensure content is above background */
.container-fade-effect > * {
  position: relative;
  z-index: 1;
}

/* ── Footer Section ───────────────────────────────────────────── */

#footer-gradient {
  @media(max-width: 600px){
    p {
      text-align: center;
    }
  }
}

#footer-gradient.layout-container__overlay.bg-image::before,
#footer-gradient .layout-container__overlay.bg-image::before {
  content: none !important;
  display: none !important;
  background: none !important;
  background-image: none !important;
}

/* ── Product Section ──────────────────────────────────────────── */

/* Product Section Clickable Columns */

#product-section {
  .layout-container.three-columns {
    gap: 2.4rem;

    .layout-column {
      gap: 2.4rem;
    }
  }
}

#product-section-row-1, #product-section-row-2 {
  @media(max-width: 1200px) {
    padding: 5px 32px;
  }
  @media (hover: hover) and (pointer: fine) {
    .layout-column:hover .media__wrapper--hover {
      opacity: 1;
    }

    .layout-column:hover .button.button-primary {
      --button-background: var(--color-blue-700);
      --button-border: var(--color-blue-700);
    }

    .layout-column:hover .button.button-secondary {
      --button-background: var(--color-blue-500);
      --button-border: var(--color-blue-500);
      --button-color: var(--color-white);
    }
  }
}

#the-ultimate-toolbox {
  @media(max-width: 1200px) {
    padding: 32px;
  }
  @media screen and (max-width: 768px) {
    >.layout-column.layout-column:nth-child(1) {
      padding-inline: unset !important;
    }
    .title__sub-text {
      text-align: center !important;
    }
  }
}

/* ── Stats Section ────────────────────────────────────────────── */

#we-believe-in {
  .layout-column:hover {
    .layout-container {
      background-color: #B10F23 !important;
    }
    .text-white {
      color: white !important;
    }
  }
  .h2-style {
    font-size: 64px !important;
    letter-spacing: -3% !important;
    transition: color 0.18s ease-in-out;
  }
  .h3-style {
    font-size: 28px !important;
    letter-spacing: -2% !important;
  }
  p.top-none {
    margin-block-start: unset !important;
  }
  .button-text {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.7rem;
  }
}

/* ── Homepage Nav / Global ────────────────────────────────────── */

/* Global buttons remove border */
.button.button-primary {
  box-shadow: none;
}

/* smooth transition on button border */
.button {
  transition:
    background-color 0.3s ease-in-out,
    color 0.3s ease-in-out,
    border-color 0.3s ease-in-out,
    box-shadow 0.3s ease-in-out,
    color 0.3s ease-in-out,
    border-color 0.3s ease-in-out;
  -webkit-transition:
    background-color 0.3s ease-in-out,
    color 0.3s ease-in-out,
    border-color 0.3s ease-in-out,
    box-shadow 0.3s ease-in-out,
    color 0.3s ease-in-out,
    border-color 0.3s ease-in-out;
}

/* secondary button inverted ink text */
.inverse .button.button-primary {
  --button-color: var(--color-ink);
}

/*Layout Container*/
div#products-grid-1,
div#products-grid-2 {
  /* remove gap to make grid */
  --grid-gap: 0rem;

  /* Add transition to default state so it also applies when hover is removed */
  .layout-column {
    transition: background-color 0.18s ease-in-out;
    /* set gap 2.4rem inner card content*/
    gap: 2.4rem;
  }

  /*Hover effect*/
  .layout-column:hover {
    background-color: #232b45;
    /* color gray-800 */
  }

  /* Remove delayed hover effect on children */
  .layout-column:hover *:not(.button) {
    background-color: transparent !important;
  }

  /* Disable hover button */
  a:hover .button {
    --button-background: var(--color-blue-60);
    --button-border: var(--color-blue-60);
  }

  /* Layout container grid color */
  .layout-container.stroke {
    border: 2px solid #232b45;
  }

  /* Improve focus:visible outline */
  >a:focus-visible {
    outline: 0.2rem dotted rgb(var(--color-white));
    outline-offset: 0.1rem;
    z-index: 2;
  }

  .button.button-primary:focus-visible,
  a:focus-visible .button.button-primary {
    --button-background: var(--color-blue-60);
    --button-border: var(--color-blue-60);
  }

  a:nth-of-type(6) .button.button-primary {
    --button-background: var(--color-white);
    --button-border: var(--color-white);
    --button-color: var(--color-ink);
  }
}

.slider-item {
  .button.button-primary {
    --button-background: var(--color-white);
    --button-border: var(--color-white);
    --button-color: var(--color-blue-900);
  }
  .button.button-primary:hover {
    --button-color: var(--color-white);
    --button-background: var(--color-blue-500);
    --button-border: var(--color-blue-500);
  }
  .button.button-primary:focus-visible {
    --button-background: var(--color-blue-700);
    --button-border: var(--color-blue-700);
    --button-color: var(--color-white);
  }
}

div#products-grid-1 {

  /* Remove bottom border*/
  .layout-column:nth-child(1),
  .layout-column:nth-child(2),
  .layout-column:nth-child(3) {
    .layout-container.stroke {
      border-bottom: none;
    }
  }

  /* Styling just for last card of second grid */
  /* Remove bottom border*/
  .layout-column:nth-child(4),
  .layout-column:nth-child(5) {
    .layout-container.stroke {
      border-bottom: none;
    }
  }

  .layout-column:nth-child(6):hover .button {
    /* Disable hover button */
    --button-background: var(--color-white);
    --button-border: var(--color-white);
    --button-color: var(--color-ink);
  }

  /* Custom card black/red gradient class for last products grid card */
  .card-gradient {
    position: relative;
    background:
      linear-gradient(188deg,
        rgba(0, 0, 0, 0) 3.88%,
        rgba(0, 0, 0, 0.85) 76.43%),
      var(--bg-image) lightgray 50% / cover no-repeat !important;
    z-index: 1;
  }

  .card-gradient:before {
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background:
      linear-gradient(199deg,
        rgba(0, 0, 0, 0) 14.32%,
        rgba(219, 19, 42, 0.85) 89.78%),
      var(--bg-image) lightgray 50% / cover no-repeat !important;
    z-index: -1;
    transition: opacity 0.18s linear;
    opacity: 0;
  }

  .card-gradient:hover::before {
    opacity: 1;
  }
}

/* Desktop styles */
@media screen and (min-width: 768px) {

  /* Homepage typography WEBX-2774 */
  #home-hero h1 {
    line-height: 6.6rem;
    font-size: 5.6rem;
    font-weight: 700;
    font-style: normal;
    letter-spacing: -0.03em;
  }

  div#products-grid-1 {

    /* Remove right border for the first and second column */
    .layout-column:nth-child(1),
    .layout-column:nth-child(2) {
      .layout-container.stroke {
        border-right: none;
      }
    }

    /* Remove right and left border for the first and third column */
    .layout-column:nth-child(4),
    .layout-column:nth-child(5) {
      .layout-container.stroke {
        border-right: none;
        border-bottom: 2px solid #232b45;
      }
    }

    .layout-column:nth-child(5) {
      .layout-container.stroke {
        border-bottom: 2px solid #232b45;
      }
    }
  }

  #we-believe-in {
    .button-text {
      color: rgb(var(--color-gray-850));
    }
  }
}

/* Hide logo list */
#ready-set-code .logo-list {
  display: none;
}

:root {
  /* H1 56px */
  --font-title-extra-large: var(--font-size-100);
  /* H2 40px */
  --font-title-medium: var(--font-size-80);
  /* h3 title-small 28px */
  --font-title-small: var(--font-size-68);
  /* h4 title-extra-small 18px */
  --font-title-extra-small: var(--font-size-50);
}

/* Full width */
body {
  margin: 0;
  max-width: 100vw;
}

.navigation-v2 {
  margin-inline: 0;
  max-width: 100vw;
}

.navigation-v2__overlay {
  max-width: none;
  margin-inline: auto;
}

.navigation-v2__main {
  .navigation-v2__container {
    max-width: 160rem;
    margin-inline: auto;
  }
}

.global-header {
  max-width: 100vw;

  .navigation-v2__topnav {
    .navigation-v2__container {
      @media (min-width: 1600px) {
        width: calc(160rem - 2 * 2.3rem);
        margin: 0 auto;
      }
    }
  }
}

.h2-style {
  line-height: var(--line-height-small);
  font-weight: var(--font-weight-bold);
  font-family: inherit;
  font-size: var(--font-title-medium);
  letter-spacing: -0.02em;
}

.h3-style {
  line-height: var(--line-height-extra-small);
  font-weight: var(--font-weight-bold);
  font-family: inherit;
  font-size: var(--font-title-small);
  line-height: 3.6rem;
}

/* Freedom for builders section left align */
#freedom-for-builders {
  h2 {
    text-align: left;
  }

  padding-inline: 0rem;

  .layout-column:first-child {
    .layout-container {
      height: 100%;
    }
  }

  figure.media {
    height: 100%;

    .media-image img {
      height: 100%;
      object-fit: cover;
      object-position: right;
    }
  }
}

#freedom-for-builders-copy {
  padding-right: 3rem;
}

#where-innovation {

  /* black gradient */
  .layout-column:has(.card-gradient) {
    background: rgb(var(--color-gray-850));

    /* black gradient */
    .card-gradient {
      background:
        linear-gradient(188deg,
          rgba(0, 0, 0, 0) 3.88%,
          rgba(0, 0, 0, 0.85) 76.43%),
        var(--bg-image) 50% / cover no-repeat !important;
      padding-right: 15rem;
    }
  }

  @media screen and (max-width: 991px) {
    #stats-container {
      padding: 2.4rem;
    }

    #chip-container {
      padding-inline: 2.4rem;
    }
  }
}

@media screen and (max-width: 991px) {
  #testimonial-banner {
    padding-top: 6.4rem;
  }

  #where-innovation {
    padding-bottom: 6.4rem;
  }

  #where-innovation-header {
    padding-bottom: 3.2rem;
  }
}

/* Where innovation header gap 12px */
#where-innovation-header {
  .layout-column {
    gap: 1.2rem;
  }
}

.proof-description {
  margin: 0rem;
}

/* Slider Customer logos force height to avoid losing 1px bottom  */
.slider-button svg {
  height: 4rem;
}

/* Because average experiences section cards personalization */
#because-average {
  .layout-column {
    gap: 1.6rem;
  }

  .layout-container {
    --grid-gap: 1.6rem;
    row-gap: 1.6rem;

    .layout-container {
      padding-inline: 2.4rem;
      padding-block: 2.4rem;
    }
  }
}

/* We believe cards hover effect */
#we-believe-in {
  /* Create space for focus:visible outline */
  padding-inline: 0.4rem;
  max-width: 120.8rem;

  @media (min-width: 768px) {
    --repeat-value: 1;
    --grid-columns: var(--grid-repeat);
  }

  @media (min-width: 992px) {
    --repeat-value: 3;
    --grid-columns: var(--grid-repeat);
  }

  /* Add transition to default state so it also applies when hover is removed */
  .layout-column .layout-container {
    transition: background-color 0.18s ease-in-out;
  }

  .button-text {
    transition: color 0.18s ease-in-out;
  }

  /* adding hover on card */
  .layout-column:hover {
    .layout-container {
      background-color: #ef213a;
    }

    /* show text on hover */
    .button-text {
      color: rgb(var(--button-color));
    }
  }

  /* Remove delayed hover effect on children */
  .layout-column:hover *:not(.layout-container:first-child) {
    background-color: transparent !important;
  }

  /* Make arrow bigger */
  .button-icon {
    width: 3.2rem;
    height: 3.2rem;
    color: rgb(var(--button-color));
  }

  /* Disappear border */
  .button {
    border: none;
    box-shadow: none;
    padding: 0rem;
  }

  /* Remove button background on focus-visible */
  .button[class*="button-"] {
    background-color: unset;
  }

  /* Disappear text */
  .button-text {
    font-size: var(--font-copy-large);
    font-weight: var(--font-weight-semi-bold);
  }

  /* Rounded borders */
  >a {
    border-radius: 2rem;
  }

  >a:focus-visible {
    outline: 0.2rem dotted rgb(var(--color-white));
  }
}

/* Reduce logos gap */
#customer-logos {
  .layout-column {
    gap: 2.4rem;
  }
}

/* Secondary button as primary inverted style */
#builder-is-a-mindset {
  div.tabs-slide div.button-container {
    a.button:nth-child(2) {
      background-color: unset;
      -webkit-box-shadow: inset 0 0 0 var(--border-light) rgb(var(--button-border));
      box-shadow: inset 0 0 0 var(--border-light) rgb(var(--button-border));
      --button-border: var(--color-white);
      --button-color: var(--color-white);
    }

    a.button:nth-child(2):hover {
      background-color: rgb(var(--button-background));
      --button-background: var(--color-blue-60);
      --button-border: var(--color-blue-60);
      --button-color: var(--color-white);
    }

    a.button:focus-visible {
      --button-background: var(--color-blue-70);
      --button-border: var(--color-blue-70);
      --button-color: var(--color-white);
      background-color: rgb(var(--button-background));
      --color-focus-visible: var(--color-white);
    }
  }
}

/* Tablet/mobile styles */
@media screen and (max-width: 1270px) {

  /* Add padding on hero mobile and tablet */
  #home-hero {
    padding-inline: var(--spacing-size-5);
  }

  /* Add padding on section on mobile */
  #because-average {
    padding-inline: var(--spacing-size-5);
  }
}

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

  /* Center h1 and h2 on mobile */
  #home-hero h1 {
    text-align: center;
    font-size: 3.4rem;
    line-height: 4rem;
    font-weight: 700;
    font-style: normal;
    letter-spacing: -0.03em;
  }

  h2 {
    text-align: center;
  }

  /* Hide code snippet */
  #ready-set-code div.code-snippet {
    display: none;
  }

  /* Show logo list instead of code snippet */
  #ready-set-code .logo-list {
    display: flex;
  }

  /* Center align */
  #home-hero {
    text-align: center;

    .copy-small {
      font-size: 1.4rem;
    }
  }

  /* Add padding on section on mobile */
  #the-ultimate-toolbox {
    gap: 2.4rem;

    >.layout-column.layout-column:nth-child(1) {
      padding-inline: var(--spacing-size-5);
    }
  }

  /* Remove left/right padding on mobile    */
  #freedom-for-builders-container {
    padding-inline: 0rem;
  }

  #freedom-for-builders {
    row-gap: 3.2rem;
  }

  #freedom-for-builders-copy {
    padding: 0rem 3.2rem 3.2rem;
  }

  /* Horizontal buttons */
  #builder-is-a-mindset {

    div:nth-child(1).tabs-slide div.button-container,
    div:nth-child(2).tabs-slide div.button-container {
      flex-direction: row;
    }
  }

  /* Horizontal buttons */
  #dont-wait {
    h2 {
      text-align: left;
    }

    div.button-container {
      flex-direction: column;
    }
  }

  div#products-grid-1 {
    padding-inline: 3.2rem;
  }

  #where-innovation {

    /* left align */
    div.richtext p:nth-of-type(even) {
      margin: 0;
    }

    .layout-column:has(.card-gradient) {

      /* black gradient */
      .card-gradient {
        background:
          linear-gradient(188deg,
            rgba(0, 0, 0, 0) 3.88%,
            rgba(0, 0, 0, 0.85) 56.94%),
          var(--bg-image) 50% / cover no-repeat;
        padding-right: 3.2rem;

        /* inner content gap */
        .layout-column {
          gap: 1.6rem;
        }
      }
    }

    .layout-column:has(.chip-list) {

      /* inner content gap */
      .layout-column {
        gap: 0;
      }

      .layout-container {
        gap: 0;
      }
    }
  }

  /*  font-size on mobile */
  :root {
    /* H1 */
    --font-title-extra-large: 3.4rem;
    /* H2 */
    --font-title-medium: 2.8rem;
    /* H3 */
    --font-title-small: 2.4rem;
    /* H4 */
    --font-title-extra-small: 1.8rem;
  }
}

/* Mobile styles */
@media screen and (max-width: 480px) {
  #freedom-for-builders-copy {
    padding: 0rem 3.2rem;
  }
}

/**
 * Platform Story Item CSS Changes
 */

/* One Column Layout - Visual wrapper min-height */
.platform-story-item--oneColumn .platform-story-item__visual-wrapper {
  min-height: 30rem;
}

/* Richtext h2 text alignment */
.platform-story-item .richtext h2 {
  text-align: unset;
}

/* One Column Layout - Large screens (992px+) */
@media (min-width: 992px) {
  .platform-story-item--oneColumn .platform-story-item__content,
  .platform-story-item--oneColumn .platform-story-item__visual {
    opacity: 0;
  }

  .platform-story-item--oneColumn .platform-story-item__visual-wrapper {
    min-height: 0rem;
    max-height: 40rem;
  }
}

.platform-story-item--twoColumn {
  .swiper-slide:last-child & {
    .platform-story-item__content {
      text-align: center;
    }

    .button-container {
      justify-content: center;
    }

    @media (min-width: 992px) {
      flex-direction: row-reverse;

      .platform-story-item__content {
        text-align: left;
        gap: 0;
      }

      .button-container {
        justify-content: flex-start;
      }
    }
  }
}