/* ==========================================================================
   Insights Clone Test (post 15567, clone of live post 1717).

   EVERY number below was measured off the LIVE page in a real browser with
   getComputedStyle()/getBoundingClientRect() — not copied from the
   rk_archive_cards / card-slider stylesheet defaults, because both live
   widget instances override several of those defaults through Elementor
   settings. Where a value differs from the widget's own stylesheet the
   comment says so.
   ========================================================================== */

/* Live body background is #F6F6F6 (measured). */
.ins-page { overflow-x: clip; background: #F6F6F6; }

/* Live content container is NOT a 1280px boxed column: measured x=76 at a
   1521px viewport with a matching 76px right gutter = a full-width
   container with 5% horizontal padding. */
.ins-inner {
  width: 100%;
  padding: 0 5%;
  box-sizing: border-box;
}

/* Section headings: 42px/700, line-height 54.6px, #233963, margin 0
   (measured on all three of "Explore Our Articles", "Explore the Case
   studies", "Explore Our Latest LinkedIn Posts"). */
.ins-page .ins-h1 {
  margin: 0;
  font-family: 'Public Sans', sans-serif;
  font-size: 42px;
  font-weight: 700;
  line-height: 54.6px;
  color: #233963;
}
@media (max-width: 767px) {
  .ins-page .ins-h1 { font-size: 30px; line-height: 1.25; }
}

/* Heading row: heading left, "View More" right-aligned to the grid's right
   edge (measured: button right edge 1062 == grid right edge 76+986). */
.ins-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 30px;
}
@media (max-width: 767px) {
  .ins-section-head { flex-direction: column; align-items: flex-start; gap: 16px; }
}

/* "View More": #233963 fill, white 16px/800 capitalized, 16px 26px padding,
   2px radius (measured 136x51). */
.ins-page .ins-btn {
  flex: 0 0 auto;
  display: inline-block;
  padding: 16px 26px;
  border-radius: 2px;
  background: #233963;
  color: #fff;
  font-family: 'Public Sans', sans-serif;
  font-size: 16px;
  font-weight: 800;
  line-height: 1;
  text-transform: capitalize;
  text-decoration: none;
  transition: background-color 0.25s ease;
}
.ins-page .ins-btn:hover,
.ins-page .ins-btn:focus-visible { background: #1E2E4C; color: #fff; }

/* ---------- Hero: article grid + Trending rail ----------
   Measured at 1521px viewport: grid 986px, rail 363px, 20px gap. */
.ins-hero { padding: 56px 0 24px; }

.ins-hero-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 363px;
  gap: 20px;
  align-items: start;
}
@media (max-width: 1024px) {
  .ins-hero-layout { grid-template-columns: minmax(0, 1fr); }
}

/* ==========================================================================
   style2 grid — 1 big vertical card (left) + 2 horizontal cards (right).
   Shared by the hero grid and the case-studies grid.
   ========================================================================== */

/* Row gap 10px: the live widget instances both set style2_column_gap=10px,
   overriding the widget stylesheet's own 30px default. margin-bottom 30px
   is the stylesheet value and is unchanged on live. */
.ins-style2-row {
  display: flex;
  gap: 10px;
  margin-bottom: 30px;
  width: 100%;
  align-items: stretch;
}
.ins-style2-row:last-child { margin-bottom: 0; }

.ins-style2-col { display: flex; flex-direction: column; }

/* Measured flex "0 0 50%" on BOTH columns (the widget's own defaults). */
.ins-style2-col-left,
.ins-style2-col-right { flex: 0 0 50%; max-width: 50%; }

/* Right-column card gap 20px — stylesheet default, not overridden on live
   (style2_right_column_card_gap is unset on both instances). */
.ins-style2-col-right { gap: 20px; }

/* border-box across the card subtree, mirroring the live widget's own
   `.rk-c-card { box-sizing: border-box }`. Load-bearing at <=767px: the
   horizontal card's image keeps `min-height:150px` there while switching to
   a padding-top:56.25% aspect box, and under content-box that min-height
   ADDS to the padding (measured 340px tall vs live's 200px). With
   border-box the min-height is satisfied by the padding box and the aspect
   ratio wins, which is what live actually computes. */
.ins-card, .ins-card * { box-sizing: border-box; }

/* The white fill lives on .ins-card-inner rather than .ins-card so the
   gradient glow (.ins-card::after, below) can sit behind the inner panel
   without being painted over by the card's own background. */
.ins-card { position: relative; background: transparent; }
.ins-style2-col-left .ins-card { height: 100%; }
.ins-style2-col-right .ins-card { flex: 1; min-height: 0; }

.ins-card-inner {
  position: relative;
  z-index: 1;
  background: #fff;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* ---------- Hover: gradient glow + image scale ----------
   A box-shadow cannot take a gradient, so the "gradient shadow" is a
   blurred pseudo-element carrying the brand teal->green gradient, inset a
   few px and blurred outward so it reads as a coloured glow around the
   card. It is painted after .ins-card's (transparent) background but
   before .ins-card-inner's z-index:1 panel, so no negative z-index is
   needed — which matters because a negative z-index would drop it behind
   the section background and make it invisible. */
.ins-card::after {
  content: '';
  position: absolute;
  /* Sits flush to the card and biased downward so the blurred gradient
     reads as a coloured drop shadow rather than an even outline glow. */
  inset: 2px 0 -6px;
  background: linear-gradient(90deg, #6AC2B7 0%, #8AD6C0 50%, #8ADBBB 75%, #86DCAF 87.5%, #84DDA5 93.75%, #95E091 96.88%, #9FDD5F 100%);
  filter: blur(18px);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
.ins-card:hover::after,
.ins-card:focus-within::after { opacity: 0.85; }

/* The image scales inside its own clipped frame (.ins-card-image already
   carries overflow:hidden for both card variants). */
.ins-card-thumb { transition: transform 0.5s cubic-bezier(0.22, 0.61, 0.36, 1); }
.ins-card:hover .ins-card-thumb,
.ins-card:focus-within .ins-card-thumb { transform: scale(1.07); }

@media (prefers-reduced-motion: reduce) {
  .ins-card::after { transition: none; }
  .ins-card-thumb { transition: none; }
  .ins-card:hover .ins-card-thumb,
  .ins-card:focus-within .ins-card-thumb { transform: none; }
}

/* Vertical card image: measured 493x277 == a 16:9 box driven by
   padding-top:56.25%, with the <img> absolutely filling it and carrying a
   16px padding that insets the artwork inside the white card. */
.ins-card-image {
  position: relative;
  overflow: hidden;
  padding-top: 56.25%;
}
.ins-card-image-link {
  position: absolute;
  inset: 0;
  display: block;
}
.ins-card-thumb {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  padding: 16px;
  box-sizing: border-box;
}

/* Content padding 20px; title 18px/600, line-height 25.2px, margin
   0 0 15px. The <h3> itself computes black but the anchor inside — which is
   what is actually visible — is #233963. */
.ins-card-content { padding: 20px; }
.ins-page .ins-card-title {
  margin: 0 0 15px;
  font-family: 'Public Sans', sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 25.2px;
}
.ins-page .ins-card-title a {
  color: #233963;
  font-weight: 600;
  text-decoration: none;
}
.ins-page .ins-card-title a:hover,
.ins-page .ins-card-title a:focus-visible { text-decoration: underline; }

/* ---------- Horizontal card ----------
   Inner gap 5px: both live instances set style2_horizontal_card_gap=5px,
   overriding the stylesheet's 15px. Image width comes from the per-grid
   custom property (55% hero / 50% case studies, both measured). */
.ins-card--horizontal .ins-card-inner {
  flex-direction: row;
  gap: 5px;
  height: 100%;
}
.ins-card--horizontal .ins-card-image {
  flex: 0 0 var(--ins-hcard-image-width, 55%);
  max-width: var(--ins-hcard-image-width, 55%);
  padding-top: 0;
  height: 100%;
  min-height: 150px;
}
.ins-card--horizontal .ins-card-image-link { position: relative; inset: auto; height: 100%; }
/* 10px padding + 4px radius here vs the vertical card's 16px/0 (measured). */
.ins-card--horizontal .ins-card-thumb {
  padding: 10px;
  border-radius: 4px;
}
.ins-card--horizontal .ins-card-content { flex: 1; padding: 15px; min-height: 0; }
.ins-page .ins-card--horizontal .ins-card-title {
  font-size: 16px;
  line-height: 22.4px;
  margin: 0 0 10px;
}

/* Mobile: live forces rows to stack and horizontal cards to become vertical
   at <=767px, with the image becoming a full-width 16:9 box. The live
   instances use small-screen-behavior "maintain", so the 768-1024px stack
   rule in the widget stylesheet does NOT apply — only this breakpoint. */
@media (max-width: 767px) {
  .ins-style2-row { flex-direction: column; }
  .ins-style2-col-left,
  .ins-style2-col-right { flex: 1 1 auto; max-width: 100%; }
  .ins-card--horizontal .ins-card-inner { flex-direction: column; }
  .ins-card--horizontal .ins-card-image {
    flex: 0 0 auto;
    max-width: 100%;
    padding-top: 56.25%;
    margin-bottom: 15px;
  }
  .ins-card--horizontal .ins-card-image-link { position: absolute; inset: 0; }
  .ins-card--horizontal .ins-card-content { padding: 20px; }
}

/* ==========================================================================
   Trending rail — hand-coded reproduction of the live `card-slider` widget.
   ========================================================================== */

/* Heading is 28px/600 #233963 (distinct from the 42px section headings). */
.ins-page .ins-trending-heading {
  margin: 0 0 20px;
  font-family: 'Public Sans', sans-serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 32px;
  color: #233963;
}

/* Card is a fixed 350x350 (card_max_width / card_height on the live widget)
   with items absolutely stacked and crossfaded. */
.ins-cs-wrapper {
  position: relative;
  width: 100%;
  max-width: 350px;
  height: 350px;
}
.ins-cs-item {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  text-decoration: none;
  opacity: 0;
  z-index: 1;
  /* Measured transition: 0.5s ease-in-out. */
  transition: opacity 0.5s ease-in-out;
  pointer-events: none;
}
.ins-cs-item.is-active { opacity: 1; z-index: 2; pointer-events: auto; }

/* Image sits in the TOP portion of the card (measured 350x183.875), not
   full-bleed — the gradient overlay then covers the whole card, which is
   why live's cards read as flat mint panels. */
.ins-cs-image {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 12px;
  overflow: hidden;
}
.ins-cs-img {
  display: block;
  width: 100%;
  height: 184px;
  object-fit: cover;
  border-radius: 8px;
}

/* Measured: linear-gradient(135deg, rgba(106,194,183,.9), rgba(132,221,165,.7))
   at opacity .8, covering the full card. */
.ins-cs-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(106, 194, 183, 0.9) 0%, rgba(132, 221, 165, 0.7) 100%);
  opacity: 0.8;
  pointer-events: none;
}

.ins-cs-content {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  z-index: 2;
}
/* Title 20px/500, line-height 32px, #1E2E4C (navy, NOT white). */
.ins-cs-title {
  display: block;
  font-family: 'Public Sans', sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 32px;
  color: #1E2E4C;
}

/* Dots: gap 16px, padding 0 16px 20px; active 13px #1E2E4C,
   inactive 12px #D0D0D0 (all measured). */
.ins-cs-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  padding: 0 16px 20px;
  margin-top: 20px;
  max-width: 350px;
}
.ins-cs-dot {
  width: 12px;
  height: 12px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: #D0D0D0;
  cursor: pointer;
  transition: background-color 0.25s ease;
}
.ins-cs-dot.is-active { width: 13px; height: 13px; background: #1E2E4C; }

@media (max-width: 1024px) {
  .ins-cs-wrapper, .ins-cs-pagination { max-width: none; }
  .ins-cs-wrapper { height: 320px; }
}

@media (prefers-reduced-motion: reduce) {
  .ins-cs-item { transition: none; }
}

/* ==========================================================================
   LinkedIn feed — corrections to the plugin's own [rk_social_posts] output.
   All scoped under .ins-page so no other consumer of the shortcode changes.
   ========================================================================== */

/* PLUGIN BUG. `.rk-post-text-full` is a <span>, so it computes
   display:inline — and max-height/overflow do NOT apply to non-replaced
   inline elements. The plugin's collapsed state (`max-height:0;
   overflow:hidden`) is therefore silently ignored and the ENTIRE post body
   renders at full height: measured 1040px per card on desktop and 1287px on
   mobile, which blew individual cards out to 1309-1549px and the whole
   section to 2380px desktop / 2913px mobile. Promoting it to a block makes
   the plugin's own collapse work as intended, and the Read-more toggle
   (whose JS is already wired and functional) then expands it correctly. */
.ins-page .rk-post-text-full { display: block; }

/* With the collapse working, the only remaining height variance is the
   preview's line count — clamp it so every card's text block is identical
   and the carousel reads as a row of equal cards. The preview is replaced
   by the full text on expand (the plugin adds .is-hidden to it), so the
   clamp never fights the expanded state. */
.ins-page .rk-post-text-preview {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Equal-height cards. Only some posts carry an attached image, so without
   this the cards differ by exactly the media block's height (measured 300px
   vs 484px). Flexing Owl's stage stretches every slide to the tallest;
   `flex: 0 0 auto` on the item preserves the per-slide width Owl sets
   inline, so its transform-based track still positions correctly. */
.ins-page .rk-social-posts-carousel-inner .owl-stage { display: flex; align-items: stretch; }
.ins-page .rk-social-posts-carousel-inner .owl-item { flex: 0 0 auto; display: flex; height: auto; }
.ins-page .rk-social-posts-carousel-item { display: flex; width: 100%; }
.ins-page .rk-social-post-card { min-height: 300px; width: 100%; }
.ins-page .rk-social-post-card-inner { display: flex; flex-direction: column; height: 100%; }
/* Pins the "Read on LinkedIn" footer to the bottom of every card so the
   extra height from stretching lands in the content area, not as a gap
   under the link. */
.ins-page .rk-social-post-engagement { margin-top: auto; }

/* Attached media gets an EXPLICIT height rather than a max-height cap.
   Only some posts carry an image, and the plugin's .rk-social-post-content
   is itself a flex column, so a media box sized only by its image's
   intrinsic height collapsed to 0 once the cards were flexed — and because
   the plugin's images are lazy-loaded, a 0-height box never entered the
   viewport, so the image never loaded, so the box stayed 0: a deadlock that
   left every media image permanently invisible (measured 0/5 loaded even
   after scrolling the section into view). A fixed 180px box is independent
   of load state, breaks that cycle, and also caps the tall portrait assets
   (several are 923x1024) that caused the original runaway card height. */
.ins-page .rk-social-post-media {
  flex: 0 0 180px;
  height: 180px;
  overflow: hidden;
}
.ins-page .rk-social-post-media--image img {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: cover;
}

/* ---------- Section spacing ---------- */
.ins-case-studies { padding: 32px 0 56px; }
.ins-linkedin { padding: 24px 0 56px; }
.ins-cta { padding: 0 0 96px; }
@media (max-width: 767px) {
  .ins-hero { padding: 32px 0 16px; }
  .ins-cta { padding: 0 0 56px; }
}