/* Knowledge-Centre content blocks — visual design to match the block-library mockup.
   Shipped with the FalconTwo.Web.Content RCL (served at _content/FalconTwo.Web.Content/kc-blocks.css).
   Accent colour = the brand orange (--hot-orange-d1, from the site's compiled.css) with a hex fallback so
   the accents are orange on the live site AND in the F2 editor preview (which doesn't load the site CSS).
   Buttons reuse the site's .btn.primary-btn (brand blue). */

:root {
    --kc-navy: #1b2a4a;
    --kc-panel: #f6f4f0;
    --kc-muted: #6b7280;
    --kc-radius: 14px;
    --kc-accent: var(--hot-orange-d1, #ff8e1d);
}

.hero-block, .cta-block, .quote-block, .statistics-block,
.markup-image-block, .video-block, .download-block, .image-grid-content,
.image-gallery-block, .accordion-block {
    margin: 1.75rem 0;
}

/* 1 — Hero: soft panel, orange eyebrow, big heading, image right */
.hero-block { background: var(--kc-panel); border-radius: var(--kc-radius); padding: 3rem; }
.hero-block .kc-eyebrow { text-transform: uppercase; letter-spacing: .12em; font-weight: 700; font-size: .78rem; display: block; margin-bottom: .5rem; color: var(--kc-accent); }
.hero-block img { border-radius: var(--kc-radius); }

/* 3 — Content + Image */
.markup-image-block { padding: 1rem 0; }

/* 7 — Call to action: dark navy panel, white text, orange button */
.cta-block { background: var(--kc-navy); border-radius: var(--kc-radius); padding: 2.5rem 3rem; }
.cta-block .mud-typography { color: #fff; }
.cta-block .cta-sub, .cta-block p { color: rgba(255,255,255,.72); margin: 0; }

/* 8 — Quote / testimonial: soft panel, big orange quote mark, avatar */
.quote-block { background: var(--kc-panel); border-radius: var(--kc-radius); padding: 2.5rem; }
.quote-block .quote-mark { font-size: 3.25rem; line-height: .6; color: var(--kc-accent); }
.quote-block .kc-quote-author { display: flex; align-items: center; gap: .75rem; margin-top: 1.25rem; }
.quote-block .kc-avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }

/* 9 — Statistics: centred columns, orange icon, big figure, muted label */
.statistics-block { padding: 1.5rem 0; }
.statistics-block .kc-stat-icon { font-size: 2.75rem !important; height: 2.75rem; width: 2.75rem; color: var(--kc-accent) !important; }
.statistics-block .kc-stat-value { font-size: 2.6rem; font-weight: 800; line-height: 1.1; }
.statistics-block .kc-stat-label { color: var(--kc-muted); }

/* 6 — Featured content / image grid: "Read more →" link */
.image-grid-content .kc-read-link { font-weight: 700; display: inline-block; margin-top: .35rem; color: var(--kc-accent); }

/* 12 — Download: PDF icon + text */
.download-block .kc-download-icon { font-size: 4rem !important; height: 4rem; width: 4rem; color: #d23f3f; }
.download-block .kc-download-link { font-weight: 700; }

/* ---- Image sizing: keep ANY source image tidy regardless of its native dimensions ---- */
/* Hero image fills its column cleanly instead of towering over the copy. */
.hero-block img { max-height: 360px; width: 100%; object-fit: cover; }
/* Content + image: a contained image beside the text. */
.markup-image-block img { max-height: 320px; width: 100%; object-fit: cover; border-radius: var(--kc-radius); }
/* Featured cards: uniform 4:3 thumbnails so the row stays even. */
.image-grid-content img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; }
/* Gallery: uniform square thumbnails. */
.image-gallery-block img { aspect-ratio: 1 / 1; width: 100%; object-fit: cover; }
/* Quote avatar already fixed-size via .kc-avatar; product cards show the whole product (no crop), bounded height. */
.category-carousel-multi-mini .content-center img { max-height: 200px; width: auto; max-width: 100%; object-fit: contain; }