/* ==========================================================================
   SELLING / TOOLS  (#selling headline + #tools card carousel)

   Every rule is namespaced under #selling or #tools, so the shared .headline
   and .paging-indicator names cannot collide with the copies in bento.css
   and templates.css.
   ========================================================================== */

/* ---- headline (#selling) ---------------------------------------------- */
#selling .headline { padding: 80px var(--grid-gutter-width) 64px; }
@media (width >= 1020px) {
  #selling .headline {
    display: grid;
    grid-template-columns: repeat(2, calc((var(--grid-column-width) * 6) + (var(--grid-gutter-width) * 5)));
    grid-template-rows: auto 1fr;
    gap: 0 var(--grid-gutter-width);
    align-items: flex-start;
  }
}
@media (width >= 1280px) {
  #selling .headline { padding: 120px var(--grid-gutter-width) 80px; }
}
/* source order: this follows the 1280 shorthand, so it wins at every width */
#selling .headline--no-padding-top { padding-top: 0; }

#selling .headline__title {
  max-width: calc((var(--grid-column-width) * 11) + (var(--grid-gutter-width) * 10));
  text-wrap: balance;
  margin: 0;
}
@media (width >= 375px) {
  #selling .headline__title { max-width: calc((var(--grid-column-width) * 10) + (var(--grid-gutter-width) * 9)); }
}
@media (width >= 744px) {
  #selling .headline__title { max-width: calc((var(--grid-column-width) * 8) + (var(--grid-gutter-width) * 7)); }
}
@media (width >= 1020px) {
  #selling .headline__title {
    max-width: calc((var(--grid-column-width) * 5) + (var(--grid-gutter-width) * 4));
    grid-row: 1 / 3;
  }
}

#selling .headline__body { margin: 24px 0 0; }
@media (width >= 744px) {
  #selling .headline__body { max-width: calc((var(--grid-column-width) * 8) + (var(--grid-gutter-width) * 7)); }
}
@media (width >= 1020px) {
  #selling .headline__body { margin-top: 0; }
}
@media (width >= 1440px) {
  #selling .headline__body { max-width: calc((var(--grid-column-width) * 5) + (var(--grid-gutter-width) * 4)); }
}
@media (width >= 1920px) {
  #selling .headline__body { max-width: calc((var(--grid-column-width) * 4) + (var(--grid-gutter-width) * 3)); }
}

#selling .headline__cta-container { width: 100%; margin-top: 40px; }
@media (width >= 1020px) {
  #selling .headline__cta-container { grid-column: 2; }
}
#selling .headline__cta { text-align: center; width: 100%; }
@media (width >= 744px) {
  #selling .headline__cta { width: auto; }
}

/* ---- card carousel (#tools) ------------------------------------------- */
#tools .card-carousel {
  display: flex;
  flex-direction: column;
  gap: 40px;
  width: 100%;
  padding-top: 80px;
}
@media (width >= 744px) { #tools .card-carousel { gap: 32px; } }
@media (width >= 1280px) { #tools .card-carousel { gap: 40px; padding-top: 120px; } }
#tools .card-carousel--no-padding-top { padding-top: 0; }
#tools .card-carousel--is-carousel { padding-bottom: 80px; overflow: hidden; }
@media (width >= 1280px) { #tools .card-carousel--is-carousel { padding-bottom: 120px; } }
/* source order: declared after the 1280 block, so 80px wins at every width */
#tools .carousel__card-carousel { padding-bottom: 80px; }

#tools .card-carousel__cards {
  --card-width: calc((var(--grid-column-width) * 10) + (var(--grid-gutter-width) * 9));
  --card-aspect-ratio: 107 / 79;
  --card-height: calc(var(--card-width) * var(--card-aspect-ratio));
  width: calc(var(--card-width) + var(--grid-gutter-width));
  height: var(--card-height);
  gap: var(--grid-gutter-width);
  margin-left: var(--grid-gutter-width);
  perspective: 1000px;
  display: flex;
  position: relative;
  touch-action: pan-y;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}
#tools .card-carousel__cards--is-carousel {
  left: calc((var(--grid-column-width) * 1) + (var(--grid-gutter-width) * 1));
  overflow: visible;
}
@media (width >= 375px) { #tools .card-carousel__cards { --card-aspect-ratio: 383 / 283; } }
@media (width >= 744px) {
  #tools .card-carousel__cards {
    --card-width: calc((var(--grid-column-width) * 5) + (var(--grid-gutter-width) * 4));
    --card-aspect-ratio: 187 / 138;
  }
}
@media (width >= 1020px) {
  #tools .card-carousel__cards {
    --card-width: calc((var(--grid-column-width) * 4) + (var(--grid-gutter-width) * 3));
    --card-aspect-ratio: 418 / 309;
  }
  #tools .card-carousel__cards--is-carousel { left: 0; }
}
@media (width >= 1280px) {
  #tools .card-carousel__cards {
    --card-width: calc((var(--grid-column-width) * 3) + (var(--grid-gutter-width) * 2));
    --card-aspect-ratio: 366 / 270;
  }
}
@media (width >= 1440px) { #tools .card-carousel__cards { --card-aspect-ratio: 42 / 31; } }
@media (width >= 1920px) { #tools .card-carousel__cards { --card-aspect-ratio: 583 / 430; } }

#tools .card-carousel-card { position: relative; }
#tools .card-carousel-card--is-carousel {
  width: calc(var(--card-width) + var(--grid-gutter-width));
  position: absolute;
  top: 0;
  transform: translateX(var(--drag-x, 0px));
  transition: left .55s cubic-bezier(.645, .045, .355, 1),
              transform .55s cubic-bezier(.645, .045, .355, 1);
}
/* live drag: follow the pointer with no easing */
#tools .card-carousel__cards[data-dragging="true"] .card-carousel-card--is-carousel {
  transition: none;
}
/* the slot that wrapped to the other end must not animate across the ring */
#tools .card-carousel-card--is-teleporting { transition: none; }

#tools .card-carousel-card__cta {
  width: var(--card-width);
  height: var(--card-height);
  background: #2f2f2f;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  /* Copy sits bottom-left over the picture, as on the bento cards. */
  justify-content: flex-end;
  align-items: flex-start;
  padding: 24px;
  transition: box-shadow .3s linear;
  position: relative;
  overflow: hidden;
}
@media (width >= 1020px) {
  #tools .card-carousel-card__cta:hover,
  #tools .card-carousel-card__cta:focus {
    box-shadow: 0 78px 47px #0000000d, 0 35px 35px #00000017, 0 9px 19px #0000001a;
  }
}

#tools .card-carousel-card__asset {
  z-index: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
#tools .card-carousel-card__asset-image {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: transform .5s;
}
/* Same scrim as the bento cards — white copy, and nothing guarantees the
   bottom of a fashion frame is dark. It lives inside the asset (z-index 0), so
   it stays under the content (z-index 1). See bento.css for how the ramp on
   these gradient stops was arrived at. */
#tools .card-carousel-card__asset::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(
    to bottom,
    rgb(0 0 0 / 0%) 30%,
    rgb(0 0 0 / 55%) 65%,
    rgb(0 0 0 / 78%) 100%
  );
}
#tools .card-carousel-card__cta:hover .card-carousel-card__asset-image,
#tools .card-carousel-card__cta:focus-visible .card-carousel-card__asset-image {
  transform: scale(1.05);
}

#tools .card-carousel-card__content {
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  /* The arrow is pinned bottom-right (24px inset, 24px glyph); now that the
     copy shares that corner, it has to wrap before reaching it. */
  padding-right: 48px;
}
#tools .card-carousel-card__content p { margin: 0; }
@media (width >= 1440px) {
  #tools .card-carousel-card__body { max-width: 300px; }
}

#tools .card-carousel-card__arrow { position: absolute; bottom: 24px; right: 24px; }
#tools .arrow-right-icon { stroke: none; fill: none; color: var(--primitive-black); }
#tools .arrow-right-icon--theme-light { color: var(--primitive-white); }

/* ---- toolbar ----------------------------------------------------------- */
#tools .card-carousel__toolbar {
  width: 100%;
  padding: 0 var(--grid-gutter-width);
  display: none;
  position: relative;
}
#tools .card-carousel__toolbar--is-carousel {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
@media (width >= 1280px) {
  #tools .card-carousel__toolbar--has-four-slides { display: none; }
}

#tools .card-carousel__paging-indicator {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#tools .paging-indicator {
  --paging-indicator-dot-color: #00000069;
  --paging-indicator-progress-color: var(--primitive-black);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
#tools .paging-indicator--is-light {
  --paging-indicator-dot-color: #ffffff59;
  --paging-indicator-progress-color: var(--primitive-white);
}
#tools .paging-indicator__dot {
  --paging-indicator-dot-width: 4px;
  --paging-indicator-dot-height: 4px;
  width: var(--paging-indicator-dot-width);
  height: var(--paging-indicator-dot-height);
  background-color: var(--paging-indicator-dot-color);
  border-radius: 3px;
  position: relative;
  overflow: hidden;
  transition: width .3s cubic-bezier(.455, .03, .515, .955);
}
#tools .paging-indicator__dot-progress {
  width: var(--indicator-progress);
  background-color: var(--paging-indicator-progress-color);
  border-radius: 3px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

#tools .card-carousel__controls {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}
#tools .card-carousel__control {
  border: 1px solid var(--color-gray-200);
  backdrop-filter: blur(10px);
  background: #ffffff4d;
  border-radius: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 30px;
  height: 30px;
  cursor: pointer;
  transition: opacity .15s cubic-bezier(.455, .03, .515, .955);
}
#tools .card-carousel__control--is-light {
  border-color: var(--color-gray-500);
  backdrop-filter: blur(25px);
  background: 0 0;
}
#tools .card-carousel__control--prev { transform: rotate(90deg); }
#tools .card-carousel__control--next { transform: rotate(-90deg); }

/* ---- entrance ---------------------------------------------------------- */
@keyframes sellingCardFadeIn {
    0% { opacity: 0; transform: translateY(var(--anim-rise)); }
    to { opacity: 1; transform: translateY(0); }
  }
#tools .card-carousel-card__cta { opacity: 0; }
#tools .card-carousel[data-in-view="true"] .card-carousel-card__cta {
  animation: var(--anim-duration) var(--anim-ease) forwards sellingCardFadeIn;
}
#tools .paging-indicator__dot { opacity: 0; }
#tools .card-carousel[data-in-view="true"] .paging-indicator__dot {
  animation: var(--anim-duration) var(--anim-ease) .12s forwards sellingCardFadeIn;
}

@media (prefers-reduced-motion: reduce) {
  #tools .card-carousel-card--is-carousel { transition: none; }
  #tools .card-carousel-card__asset-image { transform: none !important; }
  #tools .paging-indicator__dot { width: 4px !important; height: 4px !important; }
  #tools .paging-indicator__dot-progress { width: 100% !important; }
  #tools .card-carousel-card__cta,
  #tools .paging-indicator__dot { opacity: 1 !important; animation: none !important; }
}