.section-metadata {
  display: none;
}

@property --stack-depth-mask-t {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

@keyframes bento-mobile-stack-slides {
  0% {
    transform: translateY(var(--stack-offset));
    opacity: 0;
  }

  10% {
    transform: translateY(calc(var(--stack-offset) - var(--offset-adjuster)));
    opacity: 1;
  }

  70% {
    transform: translateY(calc(var(--stack-offset) - var(--offset-adjuster)));
    opacity: 1;
  }

  100% {
    transform: translateY(calc(var(--stack-offset) - var(--offset-adjuster)));
    opacity: 0;
  }
}

@keyframes bento-mobile-stack-slides-front {
  0% {
    transform: translateY(var(--stack-offset));
    opacity: 0;
  }

  10% {
    transform: translateY(calc(var(--stack-offset) - var(--offset-adjuster)));
    opacity: 1;
  }

  100% {
    transform: translateY(calc(var(--stack-offset) - var(--offset-adjuster)));
    opacity: 1;
  }
}

@keyframes stack-section-exit {
  0% { transform: translate(0, 0); }
  100% { transform: translate(0, calc(-1 * var(--section-exit-y))); }
}

@keyframes bento-items-shrink {
  0%,
  20% {
    transform: scale(1);
    box-shadow: var(--bento-shadow-none);
  }

  100% {
    transform: scale(var(--stack-scale, 1));
    box-shadow: var(--bento-shadow);
  }
}

@keyframes bento-depth-mask-drive {
  0%,
  20% { --stack-depth-mask-t: 0; }
  100% { --stack-depth-mask-t: 1; }
}

.section.bento.stack-mobile {
  --phone-h: 775px;
  --phone-vh: calc(var(--phone-h) / 100);
  --gnav-offset: 72px;

  /* Single knob for design fine-tuning — everything pins at --stack-pin-top. */
  --bento-stack-top-gap: 40px;
  --stack-pin-top: calc(var(--gnav-offset) + var(--bento-stack-top-gap));
  --title-height: 24px;
  --title-card-gap: var(--s2a-spacing-24);

  /* To re-enable, set this back to 40px; the stack-section-exit animation
     + --section-vt timeline are kept intact */
  --section-exit-y: 0;
  --last-offset: 2.5rem;
  --offset-adjuster: 6px;
  --offset-variance-index: -2px;
  --stack-scale-max: 0.08;
  --bento-surface-front: #fff;
  --bento-surface-middle: #edebeb;
  --bento-surface-deepest: #e3e2e2;
  --bento-shadow:
    0 86.137px 34.455px #00000012,
    0 35.986px 14.394px #0000000d,
    0 19.24px 7.696px #0000000a,
    0 10.786px 4.314px #0000000a,
    0 5.728px 2.291px #00000008,
    0 2.384px 0.953px #00000005;
  --bento-shadow-none: 0 0 0 var(--s2a-color-transparent-black-00);
}

body:has(header.has-breadcrumbs) .section.bento.stack-mobile {
  --stack-pin-top: calc(var(--gnav-offset) + var(--feds-height-breadcrumbs, 33px) + var(--bento-stack-top-gap));
}

body:has(header.local-nav) .section.bento.stack-mobile {
  --stack-pin-top: calc(var(--gnav-offset) + var(--feds-localnav-height, 40px) + var(--bento-stack-top-gap));
}

.section {
  &.has-background {
    background-color: unset;
  }

  &.divider {
    border-bottom: 1px solid var(--s2a-color-gray-300);
  }

  &.vertical-center {
    align-items: center;
  }

  &.rounded-corners,
  &.rounded-corners-top,
  &.rounded-corners-bottom {
    /* TODO: Replace the primative border-radius tokens with the semantic one
      once the stale adoptive-styles are removed or updated  */
    border-radius: var(--s2a-border-radius-22);
    overflow: clip;
    z-index: 3;
    margin-block: calc(-1 * var(--s2a-border-radius-22));
  }

  &.rounded-corners-top {
    border-radius: var(--s2a-border-radius-22) var(--s2a-border-radius-22) 0 0;
    margin-block: calc(-1 * var(--s2a-border-radius-22)) auto;
  }

  /* Fix to remove blank gap caused by rounded-corners :before/:after
     spacing/height adjustment that fall in "-up" layouts */
  &.rounded-corners + .section,
  &.rounded-corners-bottom + .section {
    grid-template-rows: auto;
  }

  &:has(+ .rounded-corners)::after,
  &:has(+ .rounded-corners-top)::after,
  &.rounded-corners + .section::before,
  &.rounded-corners-bottom + .section::before {
    content: '';
    display: block;
    grid-column: 1 / -1;
    width: 100%;
    height: var(--s2a-border-radius-22);
  }

  &.rounded-corners-bottom {
    border-radius: 0 0 var(--s2a-border-radius-22) var(--s2a-border-radius-22);
    margin-block: auto calc(-1 * var(--s2a-border-radius-22));
  }

  /* Fix for consecutive rounded corner sections in order
    to have the first section overlay on to the following section
    For later - need to find a more elegant solution */
  &.rounded-corners:has(+ .section[class*='rounded-corners']),
  &.rounded-corners-bottom:has(+ .section[class*='rounded-corners']) {
    z-index: 4;
  }

  /* 
     Deliberately excludes .rounded-corners-top: it only overlaps *upward* */
  &.rounded-corners:has(~ .section.parallax-garage-door-reveal):not(.parallax-move-up-fast),
  &.rounded-corners-bottom:has(~ .section.parallax-garage-door-reveal):not(.parallax-move-up-fast) {
    z-index: 3;
  }

  &.rounded-corners:has(+ .section[class*='rounded-corners']):has(~ .section.parallax-garage-door-reveal):not(.parallax-move-up-fast),
  &.rounded-corners-bottom:has(+ .section[class*='rounded-corners']):has(~ .section.parallax-garage-door-reveal):not(.parallax-move-up-fast) {
    z-index: 4;
  }

  &.masonry-layout {
    display: grid;
    gap: var(--grid-gutter);
    grid-template-columns: repeat(var(--grid-columns), 1fr);

    .grid-full-width { grid-column: span var(--grid-columns); }
    .grid-half-width { grid-column: span 3; }

    .grid-span-1,
    .grid-span-2,
    .grid-span-3,
    .grid-span-4,
    .grid-span-5,
    .grid-span-6 { grid-column: span 6; }

    & > div[class*='grid-'],
    & > div[class*='grid-'] > div.fragment,
    & > div[class*='grid-'] > div.fragment > div.section {
      display: grid;
    }
  }

  &.masonry-responsive {
    display: grid;
  }

  &.product-grid[class*='-up'] {
    align-items: stretch;
    grid-auto-rows: initial;
  }

  &.bento .explore-card-content {
    padding-inline: 0;
    padding-bottom: var(--s2a-spacing-xl);
    padding-top: 0;
    z-index: 2;

    [class*='heading-'] {
      z-index: 1;
      margin-bottom: var(--s2a-spacing-2xs);
    }

    [class*='body-'] {
      margin-top: initial;
      margin-bottom: 0;
      opacity: 1;
      z-index: 1;
      color: var(--s2a-color-content-body-subtle);
    }

    [class*='heading-'],
    [class*='body-'] {
      padding-inline: var(--s2a-spacing-lg);
      max-width: 450px;
    }

    .icon {
      position: absolute;
      inset: var(--s2a-spacing-lg);
      z-index: 1;
      text-align: start;
    }

    .explore-card-foreground {
      aspect-ratio: 1 / 1.2;
      transition: filter 0.3s ease-in-out, transform 0.3s ease-out;
      will-change: transform;

      img {
        object-fit: cover;
        object-position: top;
      }

      video {
        object-fit: contain;
        object-position: top;
      }
    }

    .content-aux {
      aspect-ratio: 1 / 1.1;
      display: block;
      height: auto;
      order: -1;
      width: 100%;
    }

    .standalone-link {
      display: inline-block;
      text-decoration: none;
      color: var(--s2a-color-content-label);
      margin-top: var(--s2a-spacing-xs);

      &::before {
        content: '';
        position: absolute;
        inset: 0;
      }
    }
  }

  &.bento .dark .explore-card-content [class*='body-'] {
    color: var(--s2a-color-content-body-subtle);
  }

  &.bento .body-color-solid .explore-card-content [class*='body-'],
  &.bento .body-color-solid.dark .explore-card-content [class*='body-'] {
    color: inherit;
  }

  &.bento .scrim {
    .explore-card-container {
      &::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(255 255 255 / 0%) 60.93%, rgba(255 255 255 / 59%) 90%);
        z-index: 1;
      }
    }

    &.dark {
      .explore-card-container::after {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(180deg, rgba(0 0 0 / 0%) 60.93%, rgba(0 0 0 / 59%) 90%);
        z-index: 1;
      }
    }
  }

  &.bento .grid-full-width {
    .explore-card-content {
      [class*='heading-'],
      > :nth-child(1):not(img):not(video) {
        text-align: start;
        margin-top: auto;
      }

      .content-aux {
        aspect-ratio: 1 / 1.1;
      }
    }
  }

  &.bento .explore-card.dark,
  &.bento .explore-card.light {background-color: transparent;}

  &.bento .explore-card {
    border-radius: var(--s2a-border-radius-md);
    z-index: inherit;

    .explore-card-container:hover [class*='body-'] {
      opacity: initial;
    }

    &.center {
      .explore-card-content {
        [class*='body-'],
        [class*='heading-'] {
          max-width: 370px;
        }
      }
    }
  }

  &.bento .explore-card-link-container {
    box-sizing: border-box;
    z-index: 2;

    &:focus-visible {
      border: 2px solid var(--color-accent-focus-ring);
      outline-offset: none;
      border-radius: var(--s2a-border-radius-16);
      box-sizing: border-box;
      overflow: clip;
    }

    &:hover {
      color: inherit;

      &+ .explore-card-background :is(img, video),
      & .explore-card-foreground :is(img, video) {
        filter: brightness(0.98);
        transform: scale(1.015);
        will-change: transform;
      }
    }
  }

  &.bento .explore-card-link-container::before,
  &:has(.bento .explore-card-link-container:focus-visible) .explore-card-link-container::before {
    content: none;
  }

  &.bento .explore-card-background {
    border-radius: inherit;

    img,
    .video-container {
      opacity: 1;
      object-position: top;
      height: auto;
    }

    img,
    video {
      transition: filter 0.3s ease-in-out, transform 0.3s ease-out;
      height: auto;
    }
  }
}

.section[class*='grid-width-'] {
  display: grid;
  gap: var(--grid-gutter);
}

.section-background {
  z-index: 0;

  /* Bleed -1px into the section background top/bottom to remove hairline gap created by
     sub-pixel compositor (from parallax/view-timeline animations during smooth-scroll) */
  position: absolute;
  inset: -1px 0;

  & > * {
    position: absolute;
    inset: 0;
  }

  img,
  video {
    object-fit: cover;
    height: 100%;
    width: 100%;
  }

  .video-container {
    width: 100%;
  }

  .mobile-only,
  .tablet-only,
  .desktop-only {
    display: none;
  }
}

.section.scrim .section-background {
  &::after {
    --scrim-stop-start: -84.26%;
    --scrim-stop-end: 25.77%;

    content: '';
    position: absolute;
    inset: 0;
    background-image: linear-gradient(271deg,
      var(--s2a-color-transparent-black-00) var(--scrim-stop-start),
      var(--s2a-color-transparent-black-64) var(--scrim-stop-end));
    pointer-events: none;
  }

  [dir='rtl'] &::after {
    scale: -1 1;
  }
}

/* mobile only */
@media (width < 768px) {
  .section.bento.stack-mobile:where(.bento-stack-ready) {
    display: flex;
    flex-direction: column;
    gap: var(--title-card-gap);
    padding-bottom: calc(var(--offset-adjuster) + var(--phone-vh) * 12);
    scroll-margin-top: var(--stack-pin-top);

    --card-front-y: calc(var(--stack-pin-top) + var(--title-height) + var(--title-card-gap));

    view-timeline-name: --section-vt, --stack-title-vt;
    view-timeline-axis: block;
    animation: stack-section-exit linear both;
    animation-timeline: --section-vt;
    animation-range: exit;

    &:not(:has(> .rich-content)) {
      --card-front-y: var(--stack-pin-top);
    }

    > .explore-card {
      --depth: calc((var(--slides) - 1 - var(--card-idx)) / max(1, (var(--slides) - 1)));
      --stack-offset: calc(
        var(--last-offset)
        - (var(--last-offset) / var(--slides) * (var(--slides) - var(--card-idx)))
        - var(--offset-variance-index) * (var(--slides) - var(--card-idx))
      );
      --stack-scale: calc(1 - var(--depth) * var(--stack-scale-max));
      --stack-depth-mask-opacity: calc(var(--depth) * 0.15);

      overflow: visible;
      position: sticky;
      top: var(--card-front-y);
      width: 100%;
      max-width: 100%;
      height: var(--card-height, auto);
      z-index: calc(var(--card-idx) + 1);
      animation: bento-mobile-stack-slides var(--parallax-easing) both;
      animation-timeline: view();
      animation-range: entry exit;
    }

    > .explore-card:nth-last-child(1 of .explore-card) {
      --stack-scale: 1;
      --stack-depth-mask-opacity: 0;

      animation-name: bento-mobile-stack-slides-front;
    }

    > .explore-card .explore-card-container {
      transform-origin: center top;
      height: 100%;
      border-radius: inherit;
      overflow: clip;
      animation:
        bento-items-shrink var(--parallax-easing) both,
        bento-depth-mask-drive var(--parallax-easing) both;
      animation-timeline: view(), view();
      animation-range: entry exit, entry exit;
    }

    > .explore-card:not(.dark):not(.scrim) .explore-card-background {
      background-color: color-mix(
        in srgb,
        var(--bento-surface-deepest) calc(var(--depth) * 100%),
        var(--bento-surface-front)
      );
    }

    > .explore-card .explore-card-content::after {
      content: '';
      position: absolute;
      inset: 0;
      z-index: 1;
      border-radius: inherit;
      pointer-events: none;
      background: var(--s2a-color-gray-1000);
      opacity: calc(var(--stack-depth-mask-opacity) * var(--stack-depth-mask-t));
    }

    > .explore-card:nth-last-child(1 of .explore-card) .explore-card-content::after {
      content: none;
    }
  }

  .section-background .mobile-only {
    display: block;
  }

  .section[class*='grid-width-'] {
    display: block;
  }
}

/* tablet up */
@media (width >= 768px) {
  .section.product-grid[class*='-up'] {
    grid-auto-rows: 1fr;
  }

  .section.masonry-layout {
    .grid-span-1 { grid-column: span 1; }
    .grid-span-2 { grid-column: span 2; }
    .grid-span-3 { grid-column: span 3; }
    .grid-span-4 { grid-column: span 4; }
    .grid-span-5 { grid-column: span 5; }
  }

  .section.bento {
    .explore-card-content {
      & [class*='heading-'] {
        margin-top: 0;
      }

      .content-aux {
        aspect-ratio: 1 / 0.88;
      }
    }

    & .grid-full-width {
      .explore-card-content {
        .content-aux {
          aspect-ratio: 4 / 1.65;
        }
      }
    }
  }

  .section.scrim .section-background::after {
    --scrim-stop-start: 0.88%;
    --scrim-stop-end: 69.65%;
  }
}

@media (768px <= width < 1280px) {
  .section-background .tablet-only {
    display: block;
  }
}

@media (width >= 1280px) {
  .section-background .desktop-only {
    display: block;
  }

  .section {
    &.masonry-layout {
      display: grid;

      .grid-half-width { grid-column: span 6; }
      .grid-span-7 { grid-column: span 7; }
      .grid-span-8 { grid-column: span 8; }
      .grid-span-9 { grid-column: span 9; }
      .grid-span-10 { grid-column: span 10; }
      .grid-span-11 { grid-column: span 11; }
    }

    &.container {
      &.grid-width-6 { --grid-content-width: var(--grid-width-6); }
      &.grid-width-8 { --grid-content-width: var(--grid-width-8); }
      &.grid-width-10 { --grid-content-width: var(--grid-width-10); }
    }

    &.rounded-corners,
    &.rounded-corners-top,
    &.rounded-corners-bottom {
      border-radius: var(--s2a-border-radius-xl);
      margin-block: calc(-1 * var(--s2a-border-radius-xl));
    }

    &.rounded-corners-top {
      border-radius: var(--s2a-border-radius-xl) var(--s2a-border-radius-xl) 0 0;
      margin-block: calc(-1 * var(--s2a-border-radius-xl)) auto;
    }

    &:has(+ .rounded-corners)::after,
    &:has(+ .rounded-corners-top)::after,
    &.rounded-corners + .section::before,
    &.rounded-corners-bottom + .section::before {
      content: '';
      height: var(--s2a-border-radius-xl);
    }

    &.rounded-corners-bottom {
      border-radius: 0 0 var(--s2a-border-radius-xl) var(--s2a-border-radius-xl);
      margin-block: auto calc(-1 * var(--s2a-border-radius-xl));
    }
  }
}

@media (width >= 1440px) {
  .section.bento {
    .explore-card-content {
      padding-bottom: var(--s2a-spacing-xl);
      min-height: initial;

      [class*='heading-'],
      [class*='body-'] {
        padding-inline: var(--s2a-spacing-xl);
      }

      .icon {
        inset: var(--s2a-spacing-xl);
      }
    }
  }
}

@supports not (animation-timeline: view()) {
  @media (width < 768px) {
    .section.bento.stack-mobile {
      display: flex;
      flex-direction: column;
      gap: var(--title-card-gap, 24px);
    }

    .section.bento.stack-mobile > .explore-card {
      position: static;
      height: auto;
      transform: none;
      opacity: 1;
      animation: none;
    }

    .section.bento.stack-mobile > .explore-card .explore-card-container {
      transform: none;
      animation: none;
    }

    .section.bento.stack-mobile > .explore-card .explore-card-content::after { content: none; }
  }
}

@media (prefers-reduced-motion: reduce) and (width < 768px) {
  .section.bento.stack-mobile {
    display: flex;
    flex-direction: column;
    gap: var(--title-card-gap, 24px);
  }

  .section.bento.stack-mobile > .explore-card {
    position: static;
    height: auto;
    transform: none;
    opacity: 1;
    animation: none;
  }

  .section.bento.stack-mobile > .explore-card .explore-card-container {
    transform: none;
    animation: none;
  }

  .section.bento.stack-mobile > .explore-card .explore-card-content::after { content: none; }
}