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

/* hero (article header) */
.hero-block { background: #fff; border-radius: var(--kc-radius); overflow: hidden; }
/* Content sits inset from the card edges; the right padding keeps the copy clear of the full-bleed image.
   A flex column lets the meta row pin to the bottom (margin-top:auto) when the image makes the card taller. */
.hero-block .kc-hero-content { padding: 1.5rem 2rem; display: flex; flex-direction: column; }
.hero-block .kc-eyebrow {
    align-self: flex-start;           /* stay shrink-wrapped in the flex column (don't stretch to full width) */
    display: inline-block;
    background: var(--hot-blue);
    color: #fff;
    font-size: 12px;
    font-weight: 600;                 /* Semibold */
    text-transform: uppercase;
    letter-spacing: .06em;
    line-height: 1;
    padding: .4rem .6rem;
    border-radius: 4px;
    margin-bottom: 1rem;
}
.hero-block .mud-typography-h1 { 
    color: var(--kc-navy); 
}

.hero-block .kc-hero-copy, .hero-block .kc-hero-copy p {
    font-size: 1rem;                  /* 16px */
    font-weight: 400;                 /* Regular */
    line-height: 1.6;
    color: var(--kc-muted);
    margin: 0;
}
/* meta row: 12px muted, icon + label pairs (read time · last updated); pinned to the bottom of the content column. */
.hero-block .kc-hero-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; margin-top: auto; padding-top: 1.5rem; font-size: 12px; color: var(--kc-muted); }
.hero-block .kc-hero-meta-item { display: inline-flex; align-items: center; gap: .4rem; }
.hero-block .kc-hero-meta-icon { font-size: 16px !important; height: 16px !important; width: 16px !important; color: var(--kc-muted); }
/* image: fills its column and bleeds to the top/right/bottom edges (the card's overflow:hidden clips it to the
   rounded corners). The left edge fades to transparent, dissolving the photo into the white card. */
.hero-block .kc-hero-media { display: flex; }
.hero-block .kc-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 32%);
    mask-image: linear-gradient(to right, transparent 0, #000 32%);
}
/* Stacked layout: content padding tightens and the image shows at a bounded height instead of filling a tall
   column. The left-edge fade is a side-by-side effect — drop it so the full image shows as a clean banner. */
@media (max-width: 959.98px) {
    .hero-block .kc-hero-content {
        padding: 1.75rem 1.5rem;
    }

    .hero-block .kc-hero-media img {
        height: auto;
        max-height: 260px;
        -webkit-mask-image: none;
        mask-image: none;
    }
}

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

/* Rich-text (Markup) lists: the site's global reset strips the default list indent, leaving bullets flush with
   the copy. Indent them so the markers sit just inside the text column. Applies wherever MarkUpContent renders. */
.markup-content ul, .markup-content ol { padding-left: 1.5rem; }

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

/* 21 — Section Header: section intro — H2 + optional 16px description + optional CTA. Alignment via .sh-align-*
   (default centre), applied to the whole block so the heading, description and button all follow it. */
.section-header-block { margin: 1.75rem 0; }
.section-header-block.sh-align-left { text-align: left; }
.section-header-block.sh-align-center { text-align: center; }
.section-header-block.sh-align-right { text-align: right; }
.section-header-block .section-header-heading { color: var(--kc-navy); font-weight: 800; margin: 0 0 .5rem; }
.section-header-block .section-header-desc { font-size: 1rem; line-height: 1.6; color: var(--kc-muted); max-width: 46rem; margin: 0; }
.section-header-block.sh-align-center .section-header-desc { margin-left: auto; margin-right: auto; }
.section-header-block.sh-align-right .section-header-desc { margin-left: auto; }
.section-header-block .section-header-cta { margin-top: 1.25rem; }

/* 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 + the shared page-card grid.
   The .kc-page-cards grid + card selectors are UNSCOPED because PageCardGrid is reused standalone by the search
   results page and the landing-page defaults (not only inside .page-carousel-block). */
.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; }
.kc-page-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 1rem; }
.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; }
.kc-page-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.kc-page-card-media { position: relative; aspect-ratio: 4 / 3; background: var(--kc-panel); }
.kc-page-card-media img { width: 100%; height: 100%; object-fit: cover; display: 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; }
.kc-page-card-body { display: flex; flex-direction: column; gap: .35rem; padding: .9rem 1rem 1rem; flex: 1; }
.kc-card-title { font-weight: 700; line-height: 1.35; }
.kc-card-summary { color: var(--kc-muted); font-size: .85rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kc-card-more { margin-top: auto; font-weight: 700; font-size: .85rem; color: var(--kc-accent); }

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

/* ---- Knowledge Centre navigation: breadcrumbs, search banner, results refine bar ---- */

/* Derived breadcrumb on every KC page */
.kc-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: .82rem; margin: .25rem 0 1rem; color: var(--kc-muted); }
.kc-breadcrumb-link { color: var(--kc-muted); text-decoration: none; }
.kc-breadcrumb-link:hover { color: var(--kc-navy); text-decoration: underline; }
.kc-breadcrumb-sep { color: #c3c7cf; }
.kc-breadcrumb-current { color: var(--kc-navy); font-weight: 700; }

/* 20 — Page Search banner (block) + the results-page refine bar */
/* Block: no cream panel — the search sits clean on the page, centred. (Keeps bg-image support for authored banners.) */
.page-search-block { position: relative; border-radius: var(--kc-radius); overflow: hidden; background-size: cover; background-position: center; margin: 1.75rem 0; }
.page-search-overlay { position: relative; padding: 2rem 1rem; text-align: center; }
.page-search-block[style*="background-image"] .page-search-overlay { background: linear-gradient(90deg, rgba(255,255,255,.92) 0%, rgba(255,255,255,.72) 55%, rgba(255,255,255,.30) 100%); }
.page-search-heading { font-size: 2.4rem; font-weight: 800; color: var(--kc-navy); margin: 0 0 .5rem; }
.page-search-subtext { color: var(--kc-muted); max-width: 34rem; margin: 0 auto 1.25rem; }
.kc-search-form, .kc-search-refine { display: flex; flex-wrap: wrap; gap: .5rem; max-width: 40rem; align-items: center; }
.kc-search-refine { max-width: none; margin: .5rem 0 1.5rem; }
.kc-search-input { flex: 1 1 14rem; min-width: 0; padding: .7rem 1rem; border: 1px solid #d7dbe0; border-radius: 10px; font-size: 1rem; background: #fff; }
.kc-search-select { padding: .7rem 1rem; border: 1px solid #d7dbe0; border-radius: 10px; font-size: 1rem; background: #fff; }
.kc-search-btn { padding: .7rem 1.4rem; border: none; border-radius: 10px; font-weight: 700; background: var(--kc-accent); color: #fff; cursor: pointer; }
.kc-search-btn:disabled { opacity: .6; cursor: default; }
.kc-search-note { font-size: .78rem; color: var(--kc-muted); margin-top: .5rem; }

/* Page Search BLOCK only: one clean, centred white box — borderless input + magnifying-glass submit.
   (The results-page refine bar keeps the standard input/select/button styling above.) */
.page-search-block .kc-search-form {
    flex-wrap: nowrap;
    gap: .25rem;
    max-width: none;                  /* width is defined by the surrounding column (MudItem), not a fixed px cap */
    padding: .25rem .25rem .25rem .75rem;
    background: #fff;
    border: 1px solid #e2e5ea;
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(0,0,0,.04);
    text-align: left;
}
.page-search-block .kc-search-input { flex: 1 1 auto; border: none; background: transparent; padding: .6rem .25rem; }
.page-search-block .kc-search-input:focus { outline: none; }
.page-search-block .kc-search-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .5rem .65rem;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--kc-muted);
    cursor: pointer;
}
.page-search-block .kc-search-btn:hover:not(:disabled) { color: var(--kc-navy); }
.page-search-block .kc-search-btn svg { display: block; }