/**
 * CRREM Library — Misalignment Year carousel.
 *
 * Used in two contexts:
 *   - Worked Examples card on the Library hub (/library/)
 *   - Hero visual on /library/reference-implementations/
 *
 * Same markup, two parent containers. Modifier class --card / --hero scopes
 * the small size differences. All trajectory data is sourced from
 * assets/data/library-worked-examples.json (real CRREM workbook output).
 */

/* ── Hub-grid layout overrides ────────────────────────────────────────
   All four hub previews lock to the same compact envelope (~180px) so
   the 2×2 grid reads cleanly and matches the calc-mini sizing Omar
   asked for. Tech Blueprint renders fewer lines in card context (PHP
   side) so the code window fits naturally; the carousel chart uses a
   shorter aspect ratio in card context to fit the same envelope. */

.crrem-lib-page__grid:has(.crrem-lib-mc) {
    grid-auto-rows: auto !important;
}

.crrem-lib-page__grid:has(.crrem-lib-mc) .crrem-lib-page__card-preview {
    flex: 0 0 220px !important;
    height: 220px !important;
    min-height: 220px !important;
    max-height: 220px !important;
    overflow: hidden;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Compact blueprint card preview — 9 visible lines (asset block + close
   brace) at 11.5px / 1.35 line-height fit inside the 180px envelope
   with chrome and padding. Hero context keeps full 17 lines at 12/1.35. */
.crrem-lib-page__grid:has(.crrem-lib-mc) .crrem-lib-blueprint-window {
    width: 100%;
    max-width: 100%;
    margin: 0 !important;
}
.crrem-lib-page__grid:has(.crrem-lib-mc) .crrem-lib-blueprint-window__code {
    font-size: 11.5px !important;
    line-height: 1.08 !important;
    padding: 10px 14px 12px !important;
}
.crrem-lib-page__grid:has(.crrem-lib-mc) .crrem-lib-blueprint-window .bp-num {
    width: 14px !important;
    margin-right: 10px !important;
}

.crrem-lib-mc {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
    position: relative;
    font-family: 'Lexend Deca', system-ui, sans-serif;
}

/* Slides stack via absolute positioning so only the active slide
   contributes to the container's intrinsic height. This is critical
   because all four <li> are in the DOM at once — without this they
   would each claim their own block height and balloon the container. */
.crrem-lib-mc__slides {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
    width: 100%;
}

.crrem-lib-mc__slide {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    /* Inactive slides float out of flow so they take 0 layout space */
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateY(4px);
    pointer-events: none;
    transition: opacity 320ms ease, transform 320ms ease;
}
.crrem-lib-mc__slide.is-active {
    /* Active slide is in normal flow and drives the slides height */
    position: relative;
    inset: auto;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Chart head: asset id (name + meta) left, status pill right.
   Single row, no wrap — meta truncates with ellipsis if space is tight
   so the pill never falls onto a second line. */
.crrem-lib-mc__head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    flex-wrap: nowrap;
    min-width: 0;
}
.crrem-lib-mc__head-id {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
}
.crrem-lib-mc__head-id .crrem-lib-mc__asset-name {
    flex: 0 0 auto;
    white-space: nowrap;
}
.crrem-lib-mc__head-id .crrem-lib-mc__asset-meta {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.crrem-lib-mc__title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: #213338;
    text-transform: uppercase;
}
.crrem-lib-mc__legend {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-size: 11px;
    color: #7A8588;
    letter-spacing: 0.02em;
}
.crrem-lib-mc__legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.crrem-lib-mc__sw {
    width: 14px;
    height: 2px;
    border-radius: 1px;
    display: inline-block;
    flex-shrink: 0;
}
.crrem-lib-mc__sw--pathway { background: #174A3B; }
.crrem-lib-mc__sw--asset   { background: #C2603A; }

/* Chart SVG */
.crrem-lib-mc__chart {
    width: 100%;
    height: auto;
    display: block;
    flex: 0 0 auto;
}
.crrem-lib-mc__grid {
    stroke: rgba(33, 51, 56, 0.10);
    stroke-width: 1;
    stroke-dasharray: 2 4;
    fill: none;
}
.crrem-lib-mc__line {
    fill: none;
    stroke-width: 1.75;
    stroke-linejoin: round;
    stroke-linecap: round;
}
.crrem-lib-mc__line--pathway { stroke: #174A3B; }
.crrem-lib-mc__line--asset   { stroke: #C2603A; }

.crrem-lib-mc__cross-halo {
    fill: #fff;
    stroke: #C2603A;
    stroke-width: 1.5;
    transform-box: fill-box;
    transform-origin: center;
    /* Soft expanding ring on the misalignment crossover dot — slow,
       ambient signal that draws the eye to the moment the asset's
       trajectory parts ways with its pathway. */
    animation: crrem-lib-mc-cross-pulse 2.4s cubic-bezier(0.45, 0.05, 0.25, 1) infinite;
}
.crrem-lib-mc__cross {
    fill: #C2603A;
    transform-box: fill-box;
    transform-origin: center;
    animation: crrem-lib-mc-cross-core 2.4s cubic-bezier(0.45, 0.05, 0.25, 1) infinite;
}
@keyframes crrem-lib-mc-cross-pulse {
    0%   { stroke-opacity: 1;   transform: scale(1); }
    50%  { stroke-opacity: 0.45; transform: scale(1.45); }
    100% { stroke-opacity: 1;   transform: scale(1); }
}
@keyframes crrem-lib-mc-cross-core {
    0%, 100% { fill-opacity: 1; }
    50%      { fill-opacity: 0.78; }
}
@media (prefers-reduced-motion: reduce) {
    .crrem-lib-mc__cross-halo,
    .crrem-lib-mc__cross { animation: none !important; }
}

.crrem-lib-mc__year {
    font-family: 'Lexend Deca', system-ui, sans-serif;
    font-size: 10.5px;
    fill: #7A8588;
    letter-spacing: 0.04em;
}

/* (Footer removed — asset name + meta + status pill now live in head;
   bottom of the slide is just the centered carousel dots nav.) */
.crrem-lib-mc__foot { display: none !important; }
.crrem-lib-mc__asset-name {
    font-size: 12.5px;
    font-weight: 600;
    color: #174A3B;
    letter-spacing: 0.01em;
}
.crrem-lib-mc__asset-meta {
    font-size: 11px;
    color: #7A8588;
    flex: 1 1 auto;
    min-width: 0;
}
.crrem-lib-mc__status {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 9px;
    border-radius: 999px;
    white-space: nowrap;
}
.crrem-lib-mc__status--misaligned {
    background: rgba(194, 96, 58, 0.10);
    color: #9A4824;
}
.crrem-lib-mc__status--aligned {
    background: rgba(74, 124, 89, 0.12);
    color: #4A7C59;
}

/* Carousel nav: prev · dots · next.
   Margin-top creates a clear gutter between the chart's year-axis labels
   and the dot row — they used to collide when the chart filled the
   envelope. */
.crrem-lib-mc__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 12px;
}
.crrem-lib-mc__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1px solid rgba(33, 51, 56, 0.14);
    background: rgba(255, 255, 255, 0.55);
    color: #7A8588;
    cursor: pointer;
    padding: 0;
    transition: background-color 180ms ease, border-color 180ms ease, color 180ms ease, transform 180ms ease;
}
.crrem-lib-mc__btn:hover,
.crrem-lib-mc__btn:focus-visible {
    background: #fff;
    border-color: #174A3B;
    color: #174A3B;
    outline: none;
    transform: translateY(-1px);
}
.crrem-lib-mc__btn .material-symbols-rounded { font-size: 18px; }

.crrem-lib-mc__dots {
    list-style: none;
    margin: 0;
    padding: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.crrem-lib-mc__dots li { display: inline-flex; margin: 0; padding: 0; }

/* The hub Worked Examples card is wrapped in <a href="...inner page">,
   which means clicks anywhere — including on dots and arrows — would
   navigate away. Lift the carousel buttons above the card-link overlay
   AND give them their own pointer-events so the JS click handlers
   (which preventDefault) can intercept the click first. */
.crrem-lib-page__card .crrem-lib-mc__btn,
.crrem-lib-page__card .crrem-lib-mc__dot {
    pointer-events: auto !important;
    position: relative !important;
    z-index: 5 !important;
}

/* Hello Elementor's reset.css forces [type=button] to padding:.5rem 1rem +
   border 1px + width:auto, which inflates the dots into pills. Override hard. */
.crrem-lib-mc__nav .crrem-lib-mc__dot,
.crrem-lib-mc__nav button.crrem-lib-mc__dot {
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
    width: 9px !important;
    height: 9px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    max-width: 9px !important;
    max-height: 9px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 50% !important;
    background: rgba(33, 51, 56, 0.22) !important;
    color: transparent !important;
    cursor: pointer !important;
    overflow: visible !important;       /* allow hover ring to escape */
    box-shadow: 0 0 0 0 rgba(23, 74, 59, 0) !important;
    text-transform: none !important;
    text-align: center !important;
    font-size: 0 !important;
    line-height: 0 !important;
    white-space: nowrap !important;
    position: relative !important;
    transition: background-color 200ms ease, transform 200ms ease, box-shadow 200ms ease !important;
}
.crrem-lib-mc__nav .crrem-lib-mc__dot:hover,
.crrem-lib-mc__nav button.crrem-lib-mc__dot:hover {
    background: rgba(23, 74, 59, 0.55) !important;
    color: transparent !important;
    transform: none !important;
    box-shadow: none !important;
}
.crrem-lib-mc__nav .crrem-lib-mc__dot.is-active,
.crrem-lib-mc__nav button.crrem-lib-mc__dot.is-active {
    background: #174A3B !important;
    color: transparent !important;
    transform: none !important;
    box-shadow: none !important;
}
.crrem-lib-mc__nav .crrem-lib-mc__dot.is-active:hover {
    background: #174A3B !important;
    transform: none !important;
    box-shadow: none !important;
}
.crrem-lib-mc__nav .crrem-lib-mc__dot:focus { outline: none !important; }
.crrem-lib-mc__nav .crrem-lib-mc__dot:focus-visible {
    color: transparent !important;
    outline: 1px solid rgba(23, 74, 59, 0.45) !important;
    outline-offset: 2px !important;
}
.crrem-lib-mc__dot .crrem-lib-mc__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ── Card-context (hub card preview) ──────────────────────────────────
   The carousel is content-sized — it doesn't try to fill the preview
   area, and it doesn't push the card taller. With the grid override
   above, the row sizes to Tech Blueprint's natural code-window height
   and the carousel just sits inside the resulting preview panel,
   centered vertically by .crrem-lib-page__card-preview. */
.crrem-lib-mc--card                          { gap: 10px; height: 100%; justify-content: space-between; }
.crrem-lib-mc--card .crrem-lib-mc__head      { gap: 10px; align-items: center; }
.crrem-lib-mc--card .crrem-lib-mc__head-id   { gap: 6px; }
.crrem-lib-mc--card .crrem-lib-mc__head-aside { gap: 10px; }
.crrem-lib-mc--card .crrem-lib-mc__legend    { font-size: 10.5px; gap: 10px; }
.crrem-lib-mc--card .crrem-lib-mc__sw        { width: 12px; }
.crrem-lib-mc--card .crrem-lib-mc__year      { font-size: 10px; }
.crrem-lib-mc--card .crrem-lib-mc__line      { stroke-width: 1.5; }
.crrem-lib-mc--card .crrem-lib-mc__chart     { max-height: 130px; }
.crrem-lib-mc--card .crrem-lib-mc__slides    { flex: 1; min-height: 0; }
.crrem-lib-mc--card .crrem-lib-mc__slide     { gap: 8px; }
.crrem-lib-mc--card .crrem-lib-mc__slide.is-active { display: flex; flex-direction: column; justify-content: space-between; height: 100%; }
.crrem-lib-mc--card .crrem-lib-mc__asset-name { font-size: 12px; }
.crrem-lib-mc--card .crrem-lib-mc__asset-meta { font-size: 10.5px; }
.crrem-lib-mc--card .crrem-lib-mc__status    { font-size: 9px; padding: 2px 7px; }

/* Hide arrow buttons in card context — dots are enough at this size. */
.crrem-lib-mc--card .crrem-lib-mc__btn       { display: none !important; }
.crrem-lib-mc--card .crrem-lib-mc__nav       { gap: 6px; margin-top: 0; }

/* ── Mobile: hide arrows, swipe + dots ──────────────────────────────── */
@media (max-width: 720px) {
    .crrem-lib-mc__btn { display: none; }
    .crrem-lib-mc__nav { gap: 10px; }
    .crrem-lib-mc__head { gap: 8px; }
    .crrem-lib-mc__legend { gap: 10px; }
    .crrem-lib-mc__foot { gap: 8px; }
    .crrem-lib-mc__asset-meta { flex-basis: 100%; order: 2; }
    .crrem-lib-mc__status { order: 1; }
}

/* Honour reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    .crrem-lib-mc__slide,
    .crrem-lib-mc__btn,
    .crrem-lib-mc__dot { transition: none !important; transform: none !important; }
}