/*
 * Insights carousel (static mirror).
 *
 * Turns the Insights grid on the homepage into a horizontal carousel holding every
 * post from /insights/, two per view on desktop and one on mobile.
 *
 * Nothing here touches the card itself - .featured_post_card, .card_img_holder,
 * .card_content_holder and friends keep every rule from the base stylesheet. The only
 * override is on the *list*, which the base stylesheet lays out as a 2-column grid
 * (1-column under 767px); inside the carousel it becomes a single non-wrapping flex
 * row instead, keeping the same 16px / 30px gaps.
 *
 * Paging uses CSS scroll-snap, so touch swipe works natively and the JS only has to
 * move the scroll position and keep the dots in sync.
 */

/* The parent <section> is display:flex, so this container is a flex item with the
   default min-width:auto - it therefore refuses to shrink below the carousel track's
   min-content width and stretches the whole section past the viewport. CSS cannot
   select an ancestor, so the container carries an explicit marker class. */
.container.has_insights_carousel {
  /* the parent <section> is a *column* flex container, so the horizontal axis is the
     cross axis: min-width / flex-basis do not size it, and it was sizing to the
     carousel track's content width. align-self:stretch pins it to the section instead
     - it must stay, or the section stretches past the viewport again. */
  align-self: stretch;
  min-width: 0;
  width: 100%;
  max-width: 1580px;
  margin-left: auto;
  margin-right: auto;
  padding: 20px 60px;
}

/* The base stylesheet narrows .container's side padding on smaller screens (30px at
   991, 20px at 767). Those rules are `.container` (0,1,0) while the marker class above
   is `.container.has_insights_carousel` (0,2,0), so the shorthand `padding` would win
   and leave Insights on 60px while every other section dropped to 30/20. Re-state them
   at the higher specificity so it keeps matching Our News. */
@media screen and (max-width: 991px) {
  .container.has_insights_carousel {
    padding-left: 30px;
    padding-right: 30px;
  }
}

@media screen and (max-width: 767px) {
  .container.has_insights_carousel {
    padding-left: 20px;
    padding-right: 20px;
  }
}

.insights_carousel {
  position: relative;
  /* the track is far wider than the screen; without min-width:0 that min-content
     width propagates up through the flex/grid ancestors and stretches the whole
     section past the viewport instead of scrolling inside the viewport */
  min-width: 0;
  max-width: 100%;
}

.insights_carousel_viewport {
  min-width: 0;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;          /* Firefox */
  -ms-overflow-style: none;       /* old Edge */
}

.insights_carousel_viewport::-webkit-scrollbar {
  display: none;
}

/* base stylesheet: display:grid, grid-template-columns:1fr 1fr, 16px gap */
.insights_carousel .featured_posts_collection_list {
  display: flex;
  flex-wrap: nowrap;
  /* stretch (the flex default) would equalise all eight cards against the tallest,
     making every card taller than the grid this replaced. The JS equalises each page
     group instead, reproducing the old grid's per-row behaviour. */
  align-items: flex-start;
  grid-column-gap: 24px;
  gap: 24px;
}

/* Fixed 350px cards: the base .card_img_holder has a min-height (240 / 188 / 296 / 157
   per breakpoint) and the text sits below it, so at 350px the copy overflowed the card
   entirely - the excerpt vanished and the title spilled onto the page background.
   Make the card a flex column and let the IMAGE absorb whatever is left after the text,
   so the copy always fits and only the image height varies. */
.insights_carousel .featured_post_card {
  display: flex;
  flex-direction: column;
}

.insights_carousel .card_img_holder {
  /* base stylesheet sets a per-breakpoint min-height (240/188/296/157); override it
     so the image is a fixed 250 everywhere */
  flex: 0 0 250px;
  height: 250px;
  min-height: 250px;
}

.insights_carousel .card_content_holder {
  flex: 0 0 200px;
  height: 200px;
  /* the longest excerpts need slightly more than 200px, so clip inside the card
     rather than let the text spill onto the page background */
  overflow: hidden;
}

/* With the content box pinned to 200px, longer copy was being sliced through the
   middle of a line (worst at 991px, where text wraps more). Clamp the title and
   excerpt to whole lines instead, so they end cleanly with an ellipsis. */
.insights_carousel .card_text_holder h3 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.insights_carousel .card_text_holder p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.insights_carousel .featured_posts_collection_item {
  flex: 0 0 calc((100% - 24px) / 2);   /* two per view */
  scroll-snap-align: start;
  height: 450px;      /* 250 image + 200 content */
}

/* ---- controls ---- */

/* Placement mirrors the testimonial slider: both arrows on the left, dots pushed to
   the right. The markup order is prev / dots / next, so flex `order` rearranges them
   rather than the HTML. */
.insights_carousel_controls {
  display: flex;
  align-items: center;
  grid-column-gap: 10px;
  gap: 10px;
  /* Rhythm: the controls belong to the carousel, so sit closer to the cards (16px)
     than to the section's "View All Insights" CTA (24px). Previously the CTA butted
     straight against the dots with a 0px gap. */
  margin-top: 16px;
  margin-bottom: 24px;
}

.insights_carousel_arrow[data-dir="prev"] { order: 1; }
.insights_carousel_arrow[data-dir="next"] { order: 2; }

.insights_carousel_dots {
  order: 3;
  margin-left: auto;   /* pins the dots to the right edge */
}

.insights_carousel_arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--light-teal-2);
  border-radius: 6px;
  background-color: var(--light-teal-2);
  color: #0e3a52;
  cursor: pointer;
  transition: background-color .3s, border-color .3s, color .3s, opacity .3s;
}

.insights_carousel_arrow svg {
  /* sized to match the 14px webflow-icons chevron the testimonial slider uses */
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.insights_carousel_arrow:hover:not([disabled]),
.insights_carousel_arrow:focus-visible:not([disabled]) {
  background-color: #0e3a52;
  border-color: #0e3a52;
  color: var(--light-teal-2);
}

.insights_carousel_arrow:focus-visible {
  outline: 2px solid #0e3a52;
  outline-offset: 2px;
}

.insights_carousel_arrow[disabled] {
  opacity: .35;
  cursor: default;
}

.insights_carousel_dots {
  display: flex;
  align-items: center;
  grid-column-gap: 6px;
  gap: 6px;
}

.insights_carousel_dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--gray-3);
  cursor: pointer;
  transition: width .2s, background-color .2s;
}

.insights_carousel_dot.is-active {
  width: 20px;
  border-radius: 4px;
  background-color: var(--teal);
}

/* one card per view below the tablet breakpoint, matching the base stylesheet's
   single-column grid and its wider 30px gap */
@media screen and (max-width: 767px) {
  .insights_carousel .featured_posts_collection_list {
    grid-column-gap: 30px;
    gap: 30px;
  }
  .insights_carousel .featured_posts_collection_item {
    flex: 0 0 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .insights_carousel_viewport {
    scroll-behavior: auto;
  }
  .insights_carousel_arrow,
  .insights_carousel_dot {
    transition: none;
  }
}