/* 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); }
.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; }

/* 19 — Page carousel: cards for live content pages (the "Featured content" row) */
.page-carousel-block { margin: 1.75rem 0; }
.page-carousel-block .kc-cards-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.page-carousel-block .kc-page-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1rem; }
.page-carousel-block .kc-page-card { display: flex; flex-direction: column; border: 1px solid #e5e7eb; border-radius: var(--kc-radius); overflow: hidden; background: #fff; text-decoration: none; color: inherit; transition: box-shadow .15s ease; }
.page-carousel-block .kc-page-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.page-carousel-block .kc-page-card-media { position: relative; aspect-ratio: 4 / 3; background: var(--kc-panel); }
.page-carousel-block .kc-page-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.page-carousel-block .kc-card-badge { position: absolute; top: .6rem; left: .6rem; background: #fff; border-radius: 6px; padding: .2rem .5rem; font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #1f2937; }
.page-carousel-block .kc-page-card-body { display: flex; flex-direction: column; gap: .35rem; padding: .9rem 1rem 1rem; flex: 1; }
.page-carousel-block .kc-card-title { font-weight: 700; line-height: 1.35; }
.page-carousel-block .kc-card-summary { color: var(--kc-muted); font-size: .85rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.page-carousel-block .kc-card-more { margin-top: auto; font-weight: 700; font-size: .85rem; color: var(--kc-accent); }

/* ---- 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; }