/* === Insights Page ===
   Requires: global.css (tokens, resets, Kadence overrides, topbar, footer)
   ========================================================================== */

.cc-ins {
  padding-top: 79px;
}

/* --- Hero --- */
/* 130px here stacked on the articles section's own 99px top pad, so the gap
   between the page title and the first article ran to 229px. */
.cc-ins-hero {
  max-width: var(--cc-max-width);
  margin: 0 auto;
  padding: 90px var(--cc-gutter) 32px;
  display: grid;
  grid-template-columns: 614fr 595fr;
  gap: 0 100px;
}

.cc-ins-hero__title {
  font-family: var(--cc-font-heading);
  font-weight: 400;
  font-size: 40px;
  line-height: 1.2;
  color: var(--cc-ink);
  margin-left: 123px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.cc-ins-hero__right {
  padding-top: 20px;
}

.cc-ins-hero__subtitle {
  font-family: var(--cc-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.48;
  letter-spacing: 0.28px;
  color: var(--cc-ink-2);
  max-width: 560px;
  margin-bottom: 0;
}

.cc-ins-hero__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 472px;
  height: 54px;
  background: var(--cc-bg);
  border: var(--cc-hairline, 0.5px) solid var(--cc-archive);
  font-family: var(--cc-font-body);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cc-archive);
  text-decoration: none;
  transition: background 0.3s, color 0.3s;
}

.cc-ins-hero__cta:hover {
  background: var(--cc-dark-parchment);
  color: var(--cc-bg);
}

.cc-ins-hero__cta:focus:not(:hover),
.cc-ins-hero__cta:active {
  outline: none;
  background: var(--cc-bg);
  color: var(--cc-archive);
  border-color: var(--cc-archive);
}

/* --- Insights Articles --- */
.cc-ins-articles {
  max-width: var(--cc-max-width);
  margin: 0 auto;
  padding: 56px var(--cc-gutter) 0;
}

.cc-ins-articles__heading {
  font-family: var(--cc-font-heading);
  font-weight: 400;
  font-size: 27px;
  line-height: 1.2;
  color: var(--cc-ink);
  margin-bottom: 35px;
}

.cc-ins-articles__grid {
  display: grid;
  grid-template-columns: 472fr 961fr;
  gap: 0;
}

.cc-ins-articles__list {
  padding-right: 20px;
  /* The vertical rule that used to sit here was removed at the client's
     request; the horizontal dividers between articles carry the structure. */
  /* Shared first-column width so every article's date sits on one rail. */
  --cc-ins-meta-col: 82px;
}

.cc-ins-articles__item {
  /* The divider is this row's first child, so any padding here lands above the
     rule and never below it. The spacing lives on the rule instead. */
  padding: 0;
}

.cc-ins-articles__item--hidden {
  display: none;
}

/* Hidden while the sticky hover column is doing the job; revealed with it in
   the mobile block below. */
.cc-ins-articles__item-img {
  display: none;
}

.cc-ins-articles__divider {
  height: 0;
  border-top: var(--cc-hairline, 0.5px) solid var(--cc-archive);
}

.cc-ins-articles__item-meta {
  display: grid;
  /* Date takes the flexible middle column and READ MORE sizes to its own
     content, so the link never gets squeezed into a wrapping two-line block
     pressed against the date. No column-gap here — a gap would shift the
     date off the shared rail and break its alignment with the "INSIGHTS"
     tab above it; the link carries its own padding-left instead. */
  grid-template-columns: var(--cc-ins-meta-col) minmax(0, 1fr) auto;
  align-items: center;
  margin-bottom: 21px;
  /* The row's own 18px padding now sets the space under the rule; this
     stacked another 25px on top of it. */
  margin-top: 0;
}

.cc-ins-articles__item-cat {
  font-family: var(--cc-font-body);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cc-dark-parchment);
}

.cc-ins-articles__item-date {
  font-family: var(--cc-font-body);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cc-archive);
}

.cc-ins-articles__item-link {
  justify-self: end;
  white-space: nowrap;
  padding-left: 16px;
  font-family: var(--cc-font-body);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cc-dark-parchment);
  text-decoration: underline;
  text-decoration-skip-ink: none;
}

.cc-ins-articles__item-title {
  font-family: var(--cc-font-heading);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.45;
  color: var(--cc-ink);
}

.cc-ins-articles__item-title a {
  color: inherit;
  text-decoration: none;
}

.cc-ins-articles__item-title a:hover {
  color: var(--cc-dark-parchment);
}

.cc-ins-articles__item-title a:focus,
.cc-ins-articles__item-title a:active {
  outline: none;
  color: inherit;
}

.cc-ins-articles__item--active .cc-ins-articles__item-title {
  color: var(--cc-ink);
}

.cc-ins-articles__load-more {
  display: inline-block;
  margin-top: 25px;
  font-family: var(--cc-font-body);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cc-dark-parchment);
  text-decoration: underline;
  text-decoration-skip-ink: none;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  cursor: pointer;
  box-shadow: none;
}

.cc-ins-articles__load-more:hover,
.cc-ins-articles__load-more:focus,
.cc-ins-articles__load-more:active {
  outline: none;
  color: var(--cc-dark-parchment);
  background: none;
  box-shadow: none;
  border: none;
}

/* Image column */
/* The whole column sticks as one piece. The image and the caption card below
   it used to be sticky individually at the same offset, which was harmless
   while the card only appeared on hover; now that the panel cycles on its own
   the card is always there, and two elements pinning to the same top fought
   each other on scroll. */
.cc-ins-articles__image-col {
  position: sticky;
  top: 120px;
  align-self: start;
  margin-left: 20px;
}

.cc-ins-articles__image {
  position: relative;
  width: 100%;
  height: 560px;
  overflow: hidden;
}

.cc-ins-articles__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.4s ease;
}

.cc-ins-articles__image--hidden {
  display: none;
}

.cc-ins-articles__preview--hidden {
  display: none;
}

.cc-ins-articles__preview {
  position: relative;
  width: 100%;
  margin-top: 20px;
  padding: 28px 32px;
  background: var(--cc-bg);
  border: var(--cc-hairline, 0.5px) solid var(--cc-archive);
}

.cc-ins-articles__preview-title {
  font-family: var(--cc-font-heading);
  font-weight: 400;
  font-size: 28px;
  line-height: 1.2;
  color: var(--cc-ink);
  margin: 0 0 24px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: opacity 0.2s ease;
}

.cc-ins-articles__preview-text {
  font-family: var(--cc-font-body);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.55;
  letter-spacing: 0.28px;
  color: var(--cc-ink-2);
  margin: 0;
  transition: opacity 0.2s ease;
}

/* --- Media Section --- */
.cc-ins-media {
  max-width: var(--cc-max-width);
  margin: 0 auto;
  padding: 60px var(--cc-gutter) 0;
}

.cc-ins-media__divider {
  height: 0;
  border-top: var(--cc-hairline, 0.5px) solid var(--cc-archive);
  margin-bottom: 35px;
}

.cc-ins-media__heading {
  font-family: var(--cc-font-heading);
  font-weight: 400;
  font-size: 27px;
  line-height: 1.2;
  color: var(--cc-ink);
  margin-bottom: 45px;
}

.cc-ins-media__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 20px;
  row-gap: 80px;
  margin-left: 0;
  align-items: stretch;
}

.cc-ins-media__card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.cc-ins-media__card--hidden {
  display: none;
}

.cc-ins-media__card-image {
  width: 100%;
  height: 414px;
  overflow: hidden;
}

.cc-ins-media__card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Three lines for every card, the same way the excerpt takes four.
   Sized to its own content, a two-line headline next to a four-line one put
   the two dates 60px apart down the row. Subgrid would align them without a
   cap, but the grid's rows are implicit, so the card's five parts mapped onto
   tracks that had nothing to do with them and opened a 55px hole under every
   date. A fixed height keeps the dates on one line and the spacing tight. */
.cc-ins-media__card-title {
  font-family: var(--cc-font-heading);
  font-weight: 400;
  font-size: 25px;
  line-height: 1.2;
  color: var(--cc-ink);
  margin-top: 31px;
  max-width: 385px;
  height: calc(3 * 1.2em);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.cc-ins-media__card-date {
  display: block;
  font-family: var(--cc-font-body);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cc-ink);
  margin-top: 21px;
}

/* `max-height` let each card size to its own excerpt, so the row ran one line,
   five lines and nine lines side by side. Four lines for everyone, filled or
   not, and the cards line up. The type is set here rather than on the <p> so
   the height can be expressed in the same em the text is measured in — change
   the font size and the box follows. */
.cc-ins-media__card-excerpt {
  position: relative;
  font-family: var(--cc-font-body);
  font-size: 14px;
  line-height: 1.48;
  height: calc(4 * 1.48em);
  overflow: hidden;
  margin-top: 11px;
}

.cc-ins-media__card-excerpt p {
  font-weight: 400;
  font-size: inherit;
  line-height: inherit;
  letter-spacing: 0.28px;
  color: var(--cc-ink-2);
  max-width: 402px;
}

.cc-ins-media__card-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 42px;
  background: linear-gradient(to top, var(--cc-bg) 40%, transparent);
  pointer-events: none;
}

.cc-ins-media__card-link {
  display: inline-block;
  margin-top: auto;
  padding-top: 18px;
  align-self: flex-start;
  font-family: var(--cc-font-body);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cc-dark-parchment);
  text-decoration: underline;
  text-decoration-skip-ink: none;
}

/* Centred under the grid. The hard 495px left margin it used to carry put it
   under the second column at 1512px and nowhere sensible at any other width. */
.cc-ins-media__loadmore {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.cc-ins-media__loadmore-btn {
  font-family: var(--cc-font-body);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--cc-dark-parchment);
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-skip-ink: none;
  box-shadow: none;
}

.cc-ins-media__loadmore-btn:hover,
.cc-ins-media__loadmore-btn:focus,
.cc-ins-media__loadmore-btn:active {
  outline: none;
  color: var(--cc-dark-parchment);
  background: none;
  box-shadow: none;
  border: none;
}

/* --- Footer Override --- */

/* ============================================================
   RESPONSIVE — Tablet (max-width: 1024px)
   ============================================================ */
@media (max-width: 1024px) {
  .cc-ins-hero {
    grid-template-columns: 1fr;
    gap: 40px 0;
    padding-top: 120px;
  }

  .cc-ins-hero__title {
    margin-left: 0;
  }

  .cc-ins-hero__right {
    padding-top: 0;
  }

  .cc-ins-hero__cta {
    width: 100%;
    max-width: 472px;
  }

  .cc-ins-articles__grid {
    grid-template-columns: 1fr 1fr;
  }

  .cc-ins-articles__image {
    height: 500px;
  }

  .cc-ins-media__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-left: 0;
    gap: 60px 20px;
    justify-content: center;
  }

  .cc-ins-media__card-image {
    width: 100%;
    height: auto;
    aspect-ratio: 471 / 414;
  }

}

/* ============================================================
   RESPONSIVE — Mobile (max-width: 768px)
   ============================================================ */
@media (max-width: 768px) {
  .cc-ins {
    overflow-x: hidden;
    width: 100%;
  }

  .cc-ins-hero {
    padding-top: 80px;
    gap: 30px 0;
  }

  .cc-ins-hero__title {
    font-size: 30px;
  }

  .cc-ins-hero__subtitle {
    margin-bottom: 30px;
  }

  .cc-ins-articles__grid {
    grid-template-columns: 1fr;
  }

  .cc-ins-articles__list {
    padding-right: 0;
    border-right: none;
  }

  .cc-ins-articles__image-col {
    display: none;
  }

  /* Takes over from the hover column, which cannot work without a pointer. */
  .cc-ins-articles__item-img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    margin-top: 18px;
  }

  .cc-ins-articles__item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .cc-ins-articles__image {
    height: 300px;
  }

  .cc-ins-articles__heading {
    font-size: 24px;
  }

  /* Both grids collapse to one column here, so the two "load more" links should
     sit in the same place. The media one centres on desktop because it sits
     under a three-column grid; on mobile that left it out of line with every
     other element on the page. Align both to the content edge, and give them a
     finger-sized target rather than the 15px the text alone occupies. */
  .cc-ins-media__loadmore {
    justify-content: flex-start;
  }

  .cc-ins-articles__load-more,
  .cc-ins-media__loadmore-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .cc-ins-media {
    overflow: hidden;
  }

  .cc-ins-media__grid {
    grid-template-columns: 1fr;
    gap: 50px 0;
    margin-left: 0;
  }

  .cc-ins-media__card {
    max-width: 100%;
    overflow: hidden;
  }

  .cc-ins-media__card-image {
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 471 / 414;
  }

  .cc-ins-media__card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .cc-ins-media__card-excerpt p {
    max-width: 100%;
  }

  .cc-ins-media__card-title {
    max-width: 100%;
    font-size: 20px;
  }

  .cc-ins-media__heading {
    font-size: 24px;
  }

}

/* ── Media cards on mobile ──
 *
 * The card reserves four lines for its excerpt and pushes READ MORE to the foot
 * with `margin-top: auto`, so every card in a desktop row ends level. Stacked on
 * a phone there is no row to level with — each card still stretched to the
 * tallest sibling, which left 130px of nothing between "Amazon Prime" and its
 * READ MORE. Each card sizes to its own content here. */
@media (max-width: 768px) {
  .cc-ins-media__card {
    height: auto;
  }

  .cc-ins-media__card-excerpt {
    height: auto;
  }

  .cc-ins-media__card-link {
    margin-top: 18px;
  }
}