/* A single row of images that drifts on its own. Used for the lifestyle
 * gallery, which was wrapping to two rows as a static grid. */

.cc_srrpi96w_xyndAhP8q1 .imq {
  background: var(--imq-bg, var(--color-surface));
  padding: 2.5rem 0 3rem;
  overflow: hidden;
}

/* Centred as a flex row, matching the other section headings — the theme
 * shrink-wraps its h2 boxes, so text-align alone does not centre them. */
.cc_srrpi96w_xyndAhP8q1 .imq .imq-title {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0 0.3em;
  width: 100%;
  max-width: 82rem;
  margin: 0 auto 1.75rem;
  padding: 0 1rem;
  text-align: center;
  font-size: var(--text-h3);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--color-text-primary);
}

.cc_srrpi96w_xyndAhP8q1 .imq .imq-title-accent {
  color: var(--imq-accent, var(--color-accent));
}

.cc_srrpi96w_xyndAhP8q1 .imq-viewport {
  overflow: hidden;
  /* Soften both ends so images enter and leave without a hard cut. */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 3rem,
    #000 calc(100% - 3rem),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 3rem,
    #000 calc(100% - 3rem),
    transparent 100%
  );
}

.cc_srrpi96w_xyndAhP8q1 .imq-track {
  display: flex;
  width: max-content;
  animation: cc_srrpi96w_xyndAhP8q1_imq-scroll var(--imq-duration, 60s) linear infinite;
}

/* Same keyframes played backwards — this is what sends the row left-to-right. */
.cc_srrpi96w_xyndAhP8q1 .imq-track--reverse {
  animation-direction: reverse;
}

.cc_srrpi96w_xyndAhP8q1 .imq-track--pausable:hover, .cc_srrpi96w_xyndAhP8q1 .imq-track--pausable:focus-within {
  animation-play-state: paused;
}

.cc_srrpi96w_xyndAhP8q1 .imq-group {
  display: flex;
  flex: 0 0 auto;
  gap: 0.75rem;
  padding-right: 0.75rem;
}

.cc_srrpi96w_xyndAhP8q1 .imq-item {
  flex: 0 0 auto;
  width: 45vw;
  margin: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 6px;
  background: var(--color-surface-alt);
}

.cc_srrpi96w_xyndAhP8q1 .imq-img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

@keyframes cc_srrpi96w_xyndAhP8q1_imq-scroll {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}

/* Readers who ask for less motion get a static, swipeable strip. */
@media (prefers-reduced-motion: reduce) {
  .cc_srrpi96w_xyndAhP8q1 .imq-viewport {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .cc_srrpi96w_xyndAhP8q1 .imq-viewport::-webkit-scrollbar {
    display: none;
  }

  .cc_srrpi96w_xyndAhP8q1 .imq-track {
    animation: none;
  }

  .cc_srrpi96w_xyndAhP8q1 .imq-group[aria-hidden="true"] {
    display: none;
  }
}

@media (min-width: 768px) {
  .cc_srrpi96w_xyndAhP8q1 .imq {
    padding: 3.5rem 0 4rem;
  }

  .cc_srrpi96w_xyndAhP8q1 .imq .imq-title {
    font-size: var(--text-h2);
    margin-bottom: 2.25rem;
  }

  .cc_srrpi96w_xyndAhP8q1 .imq-group {
    gap: 1rem;
    padding-right: 1rem;
  }

  .cc_srrpi96w_xyndAhP8q1 .imq-item {
    width: 24vw;
  }
}

@media (min-width: 1024px) {
  .cc_srrpi96w_xyndAhP8q1 .imq-item {
    width: 19vw;
  }
}