/* Display pages carousel module – heading + read all + subtitle + looping cards. */

/* Base block padding; module Settings add extra via inline calc() on this element. */
.display-pages-carousel__container {
  background-color: var(--color-light-gray);
  overflow: hidden;
  padding-block: var(--module-block-padding-block-start-active) var(--module-block-padding-block-end-active);
  position: relative;
}

.display-pages-carousel__wrapper {
  /* 100dvw avoids classic-scrollbar overflow from 100vw on Windows/Chrome */
  --carousel-gap: 1.5rem;
  --carousel-viewport-width: 100dvw;
  --carousel-grid-inset: max(1rem, calc(((var(--carousel-viewport-width) - var(--content-max-width)) / 2) + 1rem));
  --carousel-site-grid-width: min(var(--content-max-width), calc(var(--carousel-viewport-width) - 2rem));
  --carousel-slide-size: calc(
    (var(--carousel-site-grid-width) - (var(--carousel-gap) * 2)) / 3
  );
  --card-image-gradient: linear-gradient(
    237.74deg,
    rgba(0, 0, 0, 0.2) 40%,
    rgba(0, 29, 124, 0.8) 100%
  );
  display: grid;
  gap: 0 2rem;
  grid-template-areas:
    "heading"
    "divider"
    "subtitle"
    "carousel";
  grid-template-columns: 1fr;
  position: relative;
}

@supports not (width: 100dvw) {
  .display-pages-carousel__wrapper {
    --carousel-viewport-width: 100vw;
  }
}

.display-pages-carousel__wrapper--no-read-all {
  grid-template-areas:
    "heading"
    "divider"
    "subtitle"
    "carousel";
  grid-template-columns: 1fr;
}

.display-pages-carousel__heading-row {
  align-items: end;
  display: grid;
  gap: 1rem;
  grid-area: heading;
  grid-template-columns: 1fr auto;
}

.display-pages-carousel__heading {
  color: var(--color-dark-blue);
  font-family: var(--font-heading-family);
  font-size: var(--font-h2-size);
  font-weight: 700;
  line-height: 1;
  margin-block: 0;
  max-inline-size: 20ch;
  text-transform: uppercase;
  text-wrap: balance;
}

.display-pages-carousel__heading-line {
  display: block;
}

.display-pages-carousel__read-all {
  align-self: end;
  color: var(--color-dark-blue);
  font-family: var(--font-heading-family);
  font-size: 2.5rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1;
  margin-block: 0;
  text-decoration: underline;
  text-transform: uppercase;
  transition: color 0.25s ease, opacity 0.25s ease;
}

.display-pages-carousel__read-all:hover {
  opacity: 0.8;
}

.display-pages-carousel__read-all:focus-visible {
  outline: 2px solid var(--color-dark-blue);
  outline-offset: 2px;
}

.display-pages-carousel__subtitle {
  color: var(--color-dark-blue);
  font-family: var(--font-body-family);
  font-size: var(--font-lead-size);
  grid-area: subtitle;
  line-height: 1.21;
  margin-block: 2rem 0;
}

.display-pages-carousel__subtitle span {
  display: block;
  max-inline-size: 70ch;
}

.display-pages-carousel__divider {
  border: 0;
  border-block-start: 1px solid var(--color-dark-blue);
  grid-area: divider;
  margin-block-start: 2rem;
  margin-inline: 0;
  opacity: 0.9;
}

.display-pages-carousel__carousel {
  box-sizing: border-box;
  display: grid;
  gap: 1rem;
  grid-template-areas:
    "viewport"
    "controls";
  inline-size: var(--carousel-viewport-width);
  margin-block-start: 2rem;
  margin-inline: calc(50% - (var(--carousel-viewport-width) / 2));
  position: relative;
  grid-area: carousel;
}

.display-pages-carousel__viewport {
  cursor: grab;
  grid-area: viewport;
  inline-size: 100%;
  min-inline-size: 0;
  overflow: hidden;
  position: relative;
  touch-action: pan-y;
}

.display-pages-carousel__viewport:active {
  cursor: grabbing;
}

.display-pages-carousel__track {
  box-sizing: border-box;
  display: flex;
  gap: var(--carousel-gap);
  padding-inline-end: 1rem;
  padding-inline-start: var(--carousel-grid-inset);
  transform: translate3d(0, 0, 0);
  transition: transform 350ms ease;
  will-change: transform;
}

.display-pages-carousel__track.is-animating {
  transition: transform 350ms ease;
}

.display-pages-carousel__track.is-jumping {
  transition: none;
}

.display-pages-carousel__slide {
  flex: 0 0 var(--carousel-slide-size);
  min-inline-size: 0;
}

.display-pages-carousel__card {
  background-color: var(--color-white);
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  inline-size: 100%;
  min-block-size: 100%;
  overflow: hidden;
}

.display-pages-carousel__card--clickable {
  cursor: pointer;
}

.display-pages-carousel__card--clickable:focus-visible {
  outline: 2px solid var(--color-dark-blue);
  outline-offset: 2px;
}

.display-pages-carousel__card-image-wrapper {
  aspect-ratio: 16 / 10;
  block-size: auto;
  min-block-size: 12rem;
  overflow: hidden;
  position: relative;
}

.display-pages-carousel__card-image-wrapper--placeholder {
  background: var(--card-image-gradient);
}

.display-pages-carousel__card-image {
  block-size: 100%;
  display: block;
  inline-size: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 0.35s ease;
  will-change: transform;
}

.display-pages-carousel__card:hover .display-pages-carousel__card-image,
.display-pages-carousel__card:focus-within .display-pages-carousel__card-image {
  transform: scale(1.04);
}

.display-pages-carousel__card-image-overlay {
  background: var(--card-image-gradient);
  inset: 0;
  pointer-events: none;
  position: absolute;
}

.display-pages-carousel__card-title {
  color: var(--color-white);
  font-family: var(--font-heading-family);
  font-size: var(--font-h4-size);
  font-weight: 700;
  inset-block-end: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  margin: 0;
  margin-block-end: 2rem;
  overflow-wrap: break-word;
  padding-block: var(--card-padding-block-title);
  padding-inline: var(--card-padding-inline);
  position: absolute;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
  text-wrap: pretty;
}

.display-pages-carousel__card-title::after {
  background-color: #fff;
  block-size: 2px;
  content: "";
  inset-block-end: 0;
  inset-inline: var(--card-padding-inline);
  position: absolute;
}

.display-pages-carousel__card-header {
  padding-block: var(--card-padding-block-title);
  padding-inline: var(--card-padding-inline);
}

.display-pages-carousel__card-header .display-pages-carousel__card-title {
  color: var(--color-dark-blue);
  position: static;
  text-shadow: none;
}

.display-pages-carousel__card-header .display-pages-carousel__card-title::after {
  background-color: var(--color-dark-blue);
  block-size: 2px;
  display: block;
  margin-block-start: 0.5rem;
  margin-inline: 1.25rem;
}

.display-pages-carousel__card-body {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  gap: 1rem;
  min-block-size: 0;
  padding-block: var(--card-padding-block-body);
  padding-inline: var(--card-padding-inline);
}

.display-pages-carousel__card-body > .display-pages-carousel__btn {
  align-self: flex-start;
  margin-block-start: auto;
}

.display-pages-carousel__card-description {
  color: var(--color-black);
  flex-grow: 1;
  font-family: var(--font-body-family);
  font-size: 1.125rem;
  line-height: 1.5;
  margin-block: 0;
  text-wrap: pretty;
}

.display-pages-carousel__card-description p {
  margin-block: 0;
}

.display-pages-carousel__card-button {
  align-self: flex-start;
  margin-block-start: auto;
}

.display-pages-carousel__card-button .hs_cos_wrapper_type_cta a {
  text-decoration: none;
}

.display-pages-carousel__btn {
  align-items: center;
  border-radius: 10px;
  display: inline-flex;
  font-family: var(--font-heading-family);
  font-size: 1rem;
  font-weight: 600;
  gap: 0.25rem;
  letter-spacing: 0.02em;
  padding-block: 0.75rem 0.875rem;
  padding-inline: 1.25rem 1.5rem;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.display-pages-carousel__btn:hover {
  text-decoration: none;
}

.display-pages-carousel__btn:focus-visible {
  outline: 2px solid var(--color-dark-blue);
  outline-offset: 2px;
}

.display-pages-carousel__btn span {
  line-height: 1;
}

.display-pages-carousel__btn-arrow {
  align-items: center;
  display: inline-flex;
  font-size: 1.25em;
  line-height: 1;
}

@media (prefers-reduced-motion: reduce) {
  .display-pages-carousel__card-image {
    transition: none;
  }

  .display-pages-carousel__card:hover .display-pages-carousel__card-image,
  .display-pages-carousel__card:focus-within .display-pages-carousel__card-image {
    transform: none;
  }
}

.display-pages-carousel__nav {
  align-items: center;
  background-color: var(--color-dark-blue);
  border: 0;
  border-radius: 999px;
  color: var(--color-white);
  cursor: pointer;
  display: inline-flex;
  font-family: var(--font-heading-family);
  font-size: 2rem;
  justify-content: center;
  line-height: 1;
  margin: 0;
  min-block-size: 3rem;
  min-inline-size: 3rem;
  padding: 0;
  position: static;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.display-pages-carousel__nav span {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  line-height: 1;
  transform: translateY(-1px);
}

.display-pages-carousel__nav:hover {
  opacity: 0.9;
  transform: scale(1.03);
}

.display-pages-carousel__nav:focus-visible {
  outline: 2px solid var(--color-dark-blue);
  outline-offset: 2px;
}

.display-pages-carousel__nav[disabled] {
  cursor: default;
  opacity: 0.4;
}

.display-pages-carousel__controls {
  align-items: center;
  display: inline-flex;
  gap: 0.75rem;
  grid-area: controls;
  justify-self: start;
  margin-inline-start: var(--carousel-grid-inset);
  margin-block-start: 1rem;
}

/* 1–3 items: hide nav on desktop (all visible); mobile shows one slide — keep nav for 2–3 items. */
@media (min-width: 768px) {
  [data-carousel-root][data-carousel-count="1"] .display-pages-carousel__controls,
  [data-carousel-root][data-carousel-count="2"] .display-pages-carousel__controls,
  [data-carousel-root][data-carousel-count="3"] .display-pages-carousel__controls {
    display: none;
  }
}

@media (max-width: 1024px) {
  .display-pages-carousel__read-all {
    font-size: 2rem;
  }

  .display-pages-carousel__controls {
    margin-inline-start: var(--carousel-grid-inset);
  }
}

@media (max-width: 767px) {
  [data-carousel-root][data-carousel-count="1"] .display-pages-carousel__controls {
    display: none;
  }

  .display-pages-carousel__card-image-wrapper {
    aspect-ratio: 4 / 3;
    min-block-size: 14rem;
  }

  .display-pages-carousel__wrapper {
    --carousel-grid-inset: 0;
    --carousel-slide-size: 100%;
    gap: 0;
    grid-template-areas:
      "heading"
      "divider"
      "subtitle"
      "carousel";
    grid-template-columns: 1fr;
  }

  .display-pages-carousel__heading-row {
    gap: 0;
    grid-template-columns: 1fr;
  }

  .display-pages-carousel__heading {
    font-size: var(--font-h2-size);
  }

  .display-pages-carousel__read-all {
    font-size: 1.5rem;
    margin-block-start: 1.5rem;
  }

  .display-pages-carousel__subtitle {
    margin-block: 1.5rem 0;
  }

  .display-pages-carousel__divider {
    margin-block: 1rem 0;
  }

  .display-pages-carousel__carousel {
    gap: 0.5rem;
    inline-size: auto;
    margin-inline: 0;
    position: static;
  }

  .display-pages-carousel__controls {
    justify-self: start;
    margin-inline-start: 0;
  }

  .display-pages-carousel__nav {
    min-block-size: 2.5rem;
    min-inline-size: 2.5rem;
  }
}