/* ==========================================================================
   Consulting Room — Industry CONTENT PAGE stylesheet
   For any long-form content page built from stacked blocks: partner /
   supplier profiles today, blog articles later. Loaded AFTER style.css
   (which already defines the --cr-* custom properties and the .ind-hero
   component this file's pages reuse for their header).
   ========================================================================== */

/* Overall page layout — content column on the left, a sticky "On this
   page" section menu floating on the right. Collapses to one column
   (menu hidden) on narrower screens. */
.ind-content-layout {
  max-width: 1080px;
  margin: 0 auto;
  padding: 40px 32px 24px;
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 48px;
  align-items: start;
}
.ind-content-main { min-width: 0; }

@media (max-width: 900px) {
  .ind-content-layout { grid-template-columns: 1fr; }
  .ind-content-toc { display: none; }
}

/* Right-hand floating section menu */
.ind-content-toc {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.ind-content-toc__inner {
  border: 1px solid var(--cr-border);
  border-radius: 10px;
  padding: 18px;
}
.ind-content-toc__heading {
  font: 700 11px var(--cr-font-heading);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--cr-text-muted2);
  margin-bottom: 12px;
}
.ind-content-toc nav {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font: 500 13px var(--cr-font-body);
}
.ind-content-toc nav a { color: var(--cr-text); }
.ind-content-toc nav a:hover { color: var(--cr-gold); }

/* Intro paragraph — the short lede directly under the hero, before the
   block-by-block body begins. */
.ind-content-intro {
  padding: 0 0 8px;
  font: 400 17px/1.75 var(--cr-font-body);
  color: var(--cr-text-body);
}

/* Block stack — every content block (text, images, quote, video...) is a
   direct child of this, spaced evenly, single column. */
.ind-content-blocks {
  padding: 24px 0;
  display: flex;
  flex-direction: column;
  gap: 36px;
}

/* Every block gets this wrapper (it's what the section menu links
   anchor to). Plain by default — no visual footprint of its own. */
.ind-content-block { scroll-margin-top: 24px; }

/* Blocks with a background colour set in the CMS get wrapped in a
   rounded, tinted card instead of that colour touching the hero or
   bleeding into the rest of the page. */
.ind-content-block--tinted {
  border-radius: 14px;
  padding: 28px 32px;
  margin-bottom: 0; /* the palette classes below carry their own margin-bottom: 30px — the block list already spaces blocks with a flex gap, so this neutralises the double-up */
}

/* Text Block — rich text straight from the DB. Scoped heading/list/link
   styles so whatever the editor writes reads like the rest of the page. */
.ind-content-block__prose {
  font: 400 16px/1.75 var(--cr-font-body);
  color: var(--cr-text-body);
}
.ind-content-block__prose p { margin: 0 0 16px; }
.ind-content-block__prose p:last-child { margin-bottom: 0; }
.ind-content-block__prose h2 {
  font: 700 28px var(--cr-font-heading);
  color: var(--cr-text);
  margin: 8px 0 14px;
}
.ind-content-block__prose h3 {
  font: 700 23px var(--cr-font-heading);
  color: var(--cr-text);
  margin: 8px 0 12px;
}
.ind-content-block__prose ul,
.ind-content-block__prose ol {
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 16px;
}
.ind-content-block__prose a { color: var(--cr-gold); text-decoration: underline; }
.ind-content-block__prose a:hover { color: var(--cr-gold-dark); }

/* Safety net: images pasted straight into the CMS rich text (rather than
   added as a dedicated Full Width Image / Left / Right Aligned block)
   carry whatever width/height the editor saved and can otherwise render
   wider than the column and overflow it. */
.ind-content-block__prose img,
.ind-content-intro img {
  max-width: 576px;
  width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
  border-radius: 8px;
}

/* Full Width Image — fills the content column edge to edge. */
.ind-content-block__img--full {
  width: 100%;
  max-width: 576px;
  height: auto;
  border-radius: 10px;
  display: block;
  margin: 0 auto;
  object-fit: cover;
}

/* Left/Right Aligned Image blocks — collapsed into one pattern: the image
   sits centered and narrower than the column (this is the "center the
   image" version), with its text running full width underneath. */
.ind-content-block__img--centered {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 576px;
  height: auto;
  border-radius: 10px;
  object-fit: cover;
}
.ind-content-block__img--centered + .ind-content-block__prose { margin-top: 20px; }

.ind-content-block__caption {
  display: block;
  text-align: center;
  font: 500 13px var(--cr-font-body);
  color: var(--cr-text-muted2);
  margin-top: 8px;
}

/* Side By Side Images — the one block type that intentionally stays two
   columns, since it's a pair of images rather than an image+text split. */
.ind-content-block--side-by-side {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.ind-content-block--side-by-side img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
  display: block;
}
@media (max-width: 640px) {
  .ind-content-block--side-by-side { grid-template-columns: 1fr; }
}

/* Banner Image — a wide feature image, contained within the content
   column (it sits alongside the section menu now, so it no longer
   breaks out to full viewport width), optionally with an overlaid
   title/subtitle. */
.ind-content-banner {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
}
.ind-content-banner img {
  width: 100%;
  max-height: 420px;
  object-fit: cover;
  display: block;
}
.ind-content-banner__text {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 28px 32px;
  background: linear-gradient(0deg, oklch(10% 0.02 260 / 0.75), transparent);
}
.ind-content-banner__text .title {
  font: 700 24px var(--cr-font-heading);
  color: oklch(98% 0.01 255);
  margin: 0 0 4px;
}
.ind-content-banner__text .subtitle {
  font: 400 14px var(--cr-font-body);
  color: oklch(88% 0.02 255);
  margin: 0;
}

/* Quote block */
.ind-content-quote {
  background: var(--cr-navy);
  color: oklch(97% 0.01 255);
  border-radius: 10px;
  padding: 28px 32px;
  margin: 0;
}
.ind-content-quote__text {
  font: 700 21px/1.5 var(--cr-font-heading);
  margin: 0 0 12px;
}
.ind-content-quote cite {
  display: block;
  font: 500 13px var(--cr-font-body);
  font-style: normal;
  color: var(--cr-gold);
}

/* Video block */
.ind-content-video {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: 10px;
}
.ind-content-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Signup / contact form band — the CTA at the foot of the page. Same
   dark grey as .ind-cta (style.css) so both CTA bands across the site
   match, rather than the navy used elsewhere. */
.ind-content-form-band {
  background: oklch(28% 0.006 255);
  padding: 56px 32px;
  margin-top: 48px;
}
.ind-content-form {
  max-width: 760px;
  margin: 0 auto;
}
.ind-content-form__eyebrow {
  text-align: center;
  font: 600 12px var(--cr-font-body);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--cr-gold);
  margin: 0 0 10px;
}
.ind-content-form h3 {
  text-align: center;
  font: 700 24px var(--cr-font-heading);
  color: oklch(97% 0.01 255);
  margin: 0 0 28px;
}
.ind-content-form__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}
.ind-content-form__field { margin-bottom: 14px; }
.ind-content-form__field label {
  display: block;
  font: 600 11px var(--cr-font-body);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: oklch(78% 0.02 255);
  margin-bottom: 6px;
}
.ind-content-form__name-row { display: flex; gap: 10px; }
.ind-content-form input[type="text"],
.ind-content-form input[type="email"] {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border-radius: 6px;
  border: 1px solid oklch(40% 0.006 255);
  background: oklch(34% 0.006 255);
  color: oklch(95% 0.01 255);
  font: 400 14px var(--cr-font-body);
}
.ind-content-form input::placeholder { color: oklch(65% 0.02 255); }
.ind-content-form input:focus { outline: none; border-color: var(--cr-gold); }
.ind-content-form__submit {
  margin-top: 6px;
  padding: 12px 26px;
  border-radius: 6px;
  border: none;
  background: var(--cr-gold);
  color: oklch(100% 0 0);
  font: 600 14px var(--cr-font-body);
  cursor: pointer;
}
.ind-content-form__submit:hover { background: var(--cr-gold-dark); }
.ind-content-form__response {
  font: 400 13px var(--cr-font-body);
  color: oklch(78% 0.02 255);
  margin-top: 12px;
}

@media (max-width: 640px) {
  .ind-content-form__grid { grid-template-columns: 1fr; }
  .ind-content-form__name-row { flex-direction: column; }
}

/* ==========================================================================
   Blog-specific components
   Author byline, share icons, PDF download card, and the "more great
   blogs" related-posts grid — used on /industry/blog/display1.php only,
   housed here since content.css is the shared long-form content sheet.
   ========================================================================== */

.ind-hero__byline {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 16px 0 0;
}
.ind-hero__author-logo {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  object-fit: cover;
  flex-shrink: 0;
}
.ind-hero__byline-text { min-width: 0; }
.ind-hero__author-name {
  display: block;
  font: 700 14px var(--cr-font-heading);
  color: var(--cr-white);
  text-decoration: underline;
}
.ind-hero__author-name:hover { color: var(--cr-gold); }
.ind-hero__desc {
  font: 400 13px/1.5 var(--cr-font-body);
  color: oklch(100% 0 0 / 0.75);
  margin: 2px 0 0;
  max-width: 75%;
}
@media (max-width: 900px) {
  .ind-hero__desc { max-width: 100%; }
}

/* Share icons sitting under the hero image — forced white via filter
   since the shared icon PNGs are a fixed grey, not a colour we can
   override with CSS `color`. */
.ind-hero__share {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-top: 14px;
}
.ind-hero__share-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--cr-white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .15s ease;
}
.ind-hero__share-icon:hover { transform: translateY(-2px); }
.ind-hero__share-icon img {
  width: 20px;
  height: 20px;
  display: block;
}

.ind-blog-share {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
}
.ind-blog-share--bottom {
  justify-content: flex-end;
  flex-wrap: wrap;
}
.ind-blog-share--bottom p {
  font: 500 14px var(--cr-font-body);
  color: var(--cr-text-body);
  margin: 0 auto 0 0;
}
.ind-blog-share__icon img { width: 24px; height: 24px; display: block; }

.ind-content-pdf-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  border: 1px solid var(--cr-border);
  border-radius: 10px;
  padding: 18px 22px;
  margin-bottom: 8px;
}
.ind-content-pdf-card__info { display: flex; align-items: center; gap: 14px; }
.ind-content-pdf-card__icon { width: 34px; height: 34px; fill: var(--cr-gold); flex-shrink: 0; }
.ind-content-pdf-card__title {
  font: 700 14px var(--cr-font-heading);
  color: var(--cr-text);
  margin: 0;
}
.ind-content-pdf-card__filename {
  font: 400 12px var(--cr-font-body);
  color: var(--cr-text-muted2);
  margin: 2px 0 0;
}

.ind-blog-related {
  max-width: 1080px;
  margin: 0 auto;
  padding: 40px 32px 48px;
  border-top: 1px solid var(--cr-border);
}
@media (max-width: 800px) {
  .ind-blog-related .ind-blog-grid { grid-template-columns: 1fr !important; }
}

/* "Read it? Loved it?" row — a plain right-aligned line under a thin
   top border, no band background, just enough to separate it from the
   article body above. */
.ind-blog-share-band {
  max-width: 1080px;
  margin: 0 auto;
  padding: 24px 32px 0;
  border-top: 1px solid var(--cr-border);
}

/* ==========================================================================
   Block background-colour palette
   Set by the `background_colour` field on a content block — this is a
   CLASS NAME (e.g. "background_663399"), not a raw colour value, applied
   directly to the .ind-content-block--tinted wrapper. Carried over as-is
   from the legacy stylesheet so existing content keeps working.
   ========================================================================== */
.background_663399 { background-color: #663399; margin-bottom: 30px; color: #fff; } /* Purple */
.background_56b6c4 { background-color: #56b6c4; margin-bottom: 30px; color: #fff; } /* Turquoise */
.background_ab00ff { background-color: #ab00ff; margin-bottom: 30px; color: #fff; } /* Light Purple */
.background_8300c4 { background-color: #8300c4; margin-bottom: 30px; color: #fff; } /* Medium Purple */
.background_33007b { background-color: #33007b; margin-bottom: 30px; color: #fff; } /* Dark Purple */
.background_31004a { background-color: #31004a; margin-bottom: 30px; color: #fff; } /* Very Dark Purple */
.background_c5c5c9 { background-color: #e5e5e9; margin-bottom: 30px; color: #212529; } /* Light Grey */
.background_3c3b4b { background-color: #3c3b4b; margin-bottom: 30px; color: #fff; } /* Dark Grey */
.background_f5ae52 { background-color: #f5ae52; margin-bottom: 30px; color: #fff; } /* Gold */

.background_663399 strong, .background_56b6c4 strong, .background_ab00ff strong,
.background_8300c4 strong, .background_33007b strong, .background_31004a strong,
.background_3c3b4b strong, .background_f5ae52 strong { color: #fff; }

.background_663399 h2, .background_56b6c4 h2, .background_ab00ff h2,
.background_8300c4 h2, .background_33007b h2, .background_31004a h2,
.background_3c3b4b h2, .background_f5ae52 h2 { color: #fff; }

.background_663399 a, .background_56b6c4 a, .background_ab00ff a,
.background_8300c4 a, .background_33007b a, .background_31004a a,
.background_3c3b4b a, .background_f5ae52 a { color: #fff; }

/* Light Grey background needs dark text, not white */
.background_c5c5c9 strong, .background_c5c5c9 h2, .background_c5c5c9 p { color: #212529; }
.background_c5c5c9 a { color: #ab46bc; }