/*
 * site-overrides.css
 * -------------------
 * Small, safe overrides layered on top of the ported compiled bundle
 * (css.min.css). Put any new tweaks here rather than editing the large
 * compiled file. Kept intentionally minimal so the original design is preserved.
 */

/* Ensure markdown-rendered blog/service bodies keep the original prose rhythm. */
.bd-prose img { max-width: 100%; height: auto; }
.bd-prose h2, .bd-prose h3, .bd-prose h4, .bd-prose h5 { margin-top: 1.2em; }

/* --- Service page content rows ----------------------------------------- */

/* Stacked feature blocks: text left, icon right (kept narrow + left-aligned). */
.service-feature-row { margin: 4vh 0; }
.service-feature-row .row { max-width: 760px; }
.service-feature-row .righttext {
  display: flex;
  align-items: center;
  justify-content: center;
}
.service-feature-row .righttext img { max-height: 110px; width: auto; }

/* Teal band of related blog links + orange CTA. */
.service-related-band { padding: 5vh 0; color: #fff; }
.service-related-band .lefttext a,
.service-related-band .lefttext p { color: #fff; }
.service-related-band .lefttext a { text-decoration: underline; }
.service-related-band .righttext { display: flex; align-items: center; }

/* Closing CTA band; dark overlay keeps text legible over the background image. */
.service-closing-band {
  position: relative;
  padding: 8vh 0;
  background-color: #2b3a67;
}
.service-closing-band[style*="background-image"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
}
.service-closing-band .container { position: relative; z-index: 1; }
.service-closing-band .lefttext h3,
.service-closing-band .lefttext p { color: #fff; }
.service-closing-band .call-to-action-btn { margin-right: 12px; }

/* Flexible service sections (centered text + full-width bands). */
.service-centered { margin: 7vh 0 5vh; text-align: center; }
.service-centered p { max-width: 760px; margin: 0 auto 1em; }
.service-centered p:last-child { margin-bottom: 0; }

.service-band { padding: 7vh 0; }
.service-band[style*="background-image"],
.service-band[style*="background-color"] { position: relative; color: #fff; }
.service-band[style*="background-image"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
}
.service-band[style*="background-image"] .container,
.service-band[style*="background-color"] .container { position: relative; z-index: 1; }
.service-band[style*="background-image"] h1, .service-band[style*="background-image"] h2,
.service-band[style*="background-image"] h3, .service-band[style*="background-image"] h4,
.service-band[style*="background-image"] h5, .service-band[style*="background-image"] p,
.service-band[style*="background-color"] h1, .service-band[style*="background-color"] h2,
.service-band[style*="background-color"] h3, .service-band[style*="background-color"] h4,
.service-band[style*="background-color"] h5, .service-band[style*="background-color"] p { color: #fff; }

/* "Other services" slider: keep every card icon a uniform size (fixes the
   oversized AI Solutions illustration). */
.desktopSlider .slide .picture img,
.other-services-slider-container .slide .picture img {
  max-height: 100px;
  width: auto;
  object-fit: contain;
}

/* Links inside coloured/photo bands stay legible (white + underline). */
.service-band[style*="background-image"] a,
.service-band[style*="background-color"] a { color: #fff; text-decoration: underline; }

/* Larger lead paragraphs and pull-quotes. */
.bd-lead { font-size: 1.2rem; line-height: 1.55; }
.bd-quote { font-size: 1.4rem; line-height: 1.5; }

/* Tighten the gap above the "Other services" slider so it balances. */
.other-services-slider-container { padding-top: 7vh; }

/* Image-beside-text rows (e.g. Bespoke page). */
.service-imagetext { margin: 5vh 0; }
.service-imagetext .row { display: flex; flex-wrap: wrap; align-items: center; }
.service-imagetext .service-it-img img { width: 100%; height: auto; }
@media (max-width: 991px) { .service-imagetext .service-it-img { margin-bottom: 3vh; } }

/* Technology logo grid (Partnerships page). */
.bd-logo-grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 3vh 4vw; }
.bd-logo-grid img { max-height: 70px; width: auto; }

/* Reveal prev/next arrows (the ported bundle hides .call-to-action img). */

/* Inline image-beside-text rows inside blog post bodies. */
.bd-blog-row { display: flex; flex-wrap: wrap; gap: 30px; align-items: center; margin: 3vh 0; }
.bd-blog-col { flex: 1 1 0; min-width: 280px; }
.bd-blog-col img { width: 100%; height: auto; }

/* Prev/next arrows: revealed (bundle hides .call-to-action img), offset, and slide on hover. */
.next-prev-posts .call-to-action .nav-arrow { display: inline-block !important; height: 11px; width: auto; vertical-align: middle; transition: transform 0.2s ease; }
.next-prev-posts .nav-arrow-prev { margin-right: 16px; }
.next-prev-posts .nav-arrow-next { margin-left: 16px; }
.next-prev-posts .call-to-action:hover .nav-arrow-prev { transform: translateX(-6px); }
.next-prev-posts .call-to-action:hover .nav-arrow-next { transform: translateX(6px); }

/* Prev/next cards: link pinned to the bottom, Previous left, Next right. */
.next-prev-posts .blog-post-card-container .wrapper { display: flex; flex-direction: column; }
.next-prev-posts .blog-post-card-container .wrapper .post-title { height: auto; }
.next-prev-posts .blog-post-card-container .wrapper .call-to-action { margin-top: auto; }
.next-prev-posts .next-nav .wrapper .call-to-action { text-align: right; }
.next-prev-posts .prev-nav .wrapper .call-to-action { text-align: left; }

/* "What we do" service grid: keep every icon a uniform size (the AI Solutions
   illustration was rendering larger than the others). */
.what-we-do-container .skills-wrapper .skill-container img {
  height: 90px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}