/**
 * Latest Insights — [latest_insights]
 *
 * Two columns: event cards on the left, a post carousel on the right. Colours
 * come from the theme's palette presets, each with a literal fallback so the
 * section still renders if this loads before global styles.
 *
 * 24px is the single spacing unit throughout, matching the event cards.
 */

/*
 * `stretch`, not `start`: the progress bar is measured against the height of
 * this row, so the posts column has to fill it rather than shrink to its own
 * content. Whichever column is taller sets the height and the other follows.
 */
.hli {
    display: grid;
    grid-template-columns: minmax(0, var(--hli-split, 2.15fr)) minmax(0, 1fr);
    gap: 40px;
    align-items: stretch;
}

/* With only one column present there is nothing to split. */
.hli--no-events,
.hli--no-posts {
    grid-template-columns: minmax(0, 1fr);
}

.hli__events {
    display: grid;
    grid-template-columns: repeat(var(--hli-event-columns, 2), minmax(0, 1fr));
    gap: 24px;
}

/* =============================================================================
 * Event card
 * ========================================================================== */

/*
 * The white panel starts halfway up the image, so the image's top half sits
 * over the page background. The panel is therefore painted by a pseudo-element
 * rather than being the card's own background.
 *
 * Its offset is derived, not guessed: the image is the card width less its
 * 2 x 24px inset, and 16/9 tall, so half its height is
 * (100cqw - 48px) x 9/32 -> x 0.28125. `container-type` makes 100cqw resolve
 * to the card's own width, so this holds at any column count.
 */
.hli-event {
    position: relative;
    container-type: inline-size;
    display: flex;
    flex-direction: column;
}

.hli-event::before {
    content: '';
    position: absolute;
    top: calc((100cqw - 48px) * 0.28125);
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--wp--preset--color--hang-white, #ffffff);
    box-shadow: 0px 4px 20px rgba(195, 195, 195, 0.25);
}

/* No featured image means no image to straddle — fill the whole card. */
.hli-event:not(:has(.hli-event__image))::before {
    top: 0;
}

/* Inset left and right so the image lines up with the body's 24px padding. */
.hli-event__image {
    position: relative;
    display: block;
    padding: 0 24px;
    line-height: 0;
}

.hli-event__image img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

/*
 * Sits above the panel; both are in flow, so tree order handles the stacking.
 *
 * `flex: 1` makes the body absorb the card's spare height. Grid already
 * stretches every card in a row to the tallest, so this plus the Learn More
 * link's `margin-top: auto` lands that link on the same baseline across all
 * cards, however many lines the title or excerpt runs to.
 */
.hli-event__body {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: 24px;
    padding: 24px;
}

/* Two columns: the date stack, then the type label and title. */
.hli-event__head {
    display: flex;
    align-items: flex-start;
    gap: 24px;
}

.hli-event__date {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    align-items: flex-start;
    font-family: var(--wp--preset--font-family--roboto, Roboto, sans-serif);
    line-height: 1.1;
}

.hli-event__month {
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--wp--preset--color--hang-neptune, #83c1c0);
}

.hli-event__day {
    font-size: 24px;
    font-weight: 700;
    color: #000000;
}

.hli-event__year {
    font-size: 12px;
    font-weight: 700;
    color: #000000;
}

.hli-event__headings {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.hli-event__type {
    font-family: var(--wp--preset--font-family--roboto, Roboto, sans-serif);
    font-size: 15px;
    font-weight: 400;
    text-transform: uppercase;
    color: var(--wp--preset--color--hang-olive, #9a8700);
}

.hli-event__title {
    margin: 0;
    font-family: var(--wp--preset--font-family--roboto, Roboto, sans-serif);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.3;
}

/*
 * Family and weight are repeated on the anchor: theme.json styles links
 * directly, so the <a> takes both from that rule rather than inheriting the
 * h3's — without this the title falls back to the body serif.
 */
.hli-event__title a {
    font-family: var(--wp--preset--font-family--roboto, Roboto, sans-serif);
    font-weight: 400;
    color: var(--wp--preset--color--hang-wine-berry, #551c25);
    text-decoration: none;
    transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.hli-event__title a:hover,
.hli-event__title a:focus-visible {
    color: var(--wp--preset--color--hang-neptune, #83c1c0);
}

.hli-event__excerpt {
    margin: 0;
    font-size: 16px;
    line-height: 1.5;
    color: var(--wp--preset--color--hang-neutral-darker, #1f2222);
}

/*
 * Mirrors the Link button variation (`is-style-link`): Roboto 400 16px,
 * #538988, no underline, 8px gap, and an arrow that inherits the text colour
 * so both change together on hover.
 */
.hli-event__more {
    display: inline-flex;
    align-items: center;
    /* Shrink-wrap the hit area; as a column flex item it would stretch full width. */
    align-self: flex-start;
    gap: 8px;
    margin-top: auto;
    font-family: var(--wp--preset--font-family--roboto, Roboto, sans-serif);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #538988;
    text-decoration: none;
    transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.hli-event__more:hover,
.hli-event__more:focus-visible {
    color: var(--wp--preset--color--hang-wine-berry, #551c25);
}

.hli-event__more-icon {
    flex-shrink: 0;
}

/* =============================================================================
 * Post carousel
 * ========================================================================== */

/*
 * Two columns — progress bar, then the carousel — with the dots on a second
 * row under the carousel only, so they centre on the posts rather than on the
 * posts-plus-bar.
 *
 * Three rows: carousel, dots, then an empty `1fr` spacer. The spacer takes up
 * whatever extra height the taller events column hands down, which keeps the
 * dots tucked under the posts where the design puts them while still leaving
 * the bar something to span all the way to the bottom.
 */
.hli__posts {
    display: grid;
    grid-template-columns: 2px minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
    column-gap: 40px;
    row-gap: 24px;
    align-items: stretch;
}

/*
 * The bar fills a step per slide, reaching the full track on the last one.
 *
 * `--hli-progress` is the fraction filled, 0-1. It defaults to the first step
 * so the server-rendered markup is already correct before the carousel script
 * runs; the script then overwrites it on each slide change.
 */
.hli__posts {
    --hli-progress: calc(1 / var(--hli-slide-count, 1));
}

/*
 * Spans every row — carousel and pagination alike — so the bar runs the section's
 * full height. Confined to the carousel's row it stopped at the slides' height
 * and left a gap below.
 */
.hli-progress {
    position: relative;
    grid-column: 1;
    grid-row: 1 / -1;
    min-height: 0;
    overflow: hidden;
    background: var(--wp--preset--color--hang-neutral-lighter, #e6e6e6);
}

/*
 * The fill spans the whole track and is scaled down from the top, rather than
 * being given a percentage height.
 *
 * `scaleY` is preferred over animating `height` because the track is a grid item
 * whose row Swiper's `autoHeight` resizes as slides change — a percentage height
 * would be measured against a containing block moving underneath it. The scale
 * is also composited, so stepping the bar costs no layout pass.
 */
.hli-progress__fill {
    position: absolute;
    inset: 0;
    transform-origin: top center;
    transform: scaleY(var(--hli-progress, 1));
    background: var(--wp--preset--color--hang-neptune, #83c1c0);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/*
 * `width: 100%` is load-bearing, not decoration.
 *
 * Swiper's base rule centres every `.swiper` with auto inline margins. Auto
 * margins on a grid item switch off stretch alignment, so the item stops taking
 * the track's width and is sized by fit-content instead — and since Swiper's
 * slides are themselves `width: 100%`, that resolves circularly and blows the
 * carousel out to the browser's "infinite" 16777216px. Resetting the margins
 * fixes it only while this file wins the cascade; a definite width means the
 * track size is used no matter what order the stylesheets land in.
 */
.hli-carousel {
    grid-column: 2;
    grid-row: 1;
    width: 100%;
    min-width: 0;
    margin-inline: 0;
}

.hli-slide {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* A single slide has nothing to page through, so the bar and dots are dropped. */
.hli__posts--single {
    grid-template-columns: minmax(0, 1fr);
}

.hli__posts--single .hli-progress,
.hli__posts--single .hli-pagination {
    display: none;
}

.hli__posts--single .hli-carousel {
    grid-column: 1;
}

/* --- Post ---------------------------------------------------------------- */

.hli-post {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

/* An anchor, so it needs the same theme.json link override as the titles. */
.hli-post__category {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 2px;
    background: var(--wp--preset--color--hang-wine-berry, #551c25);
    font-family: var(--wp--preset--font-family--roboto, Roboto, sans-serif);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--wp--preset--color--hang-white, #ffffff);
    text-decoration: none;
    transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.hli-post__category:hover,
.hli-post__category:focus-visible {
    background: var(--wp--preset--color--hang-wine-berry-dark, #3d141a);
    color: var(--wp--preset--color--hang-white, #ffffff);
}

.hli-post__title {
    margin: 0;
    font-family: var(--wp--preset--font-family--roboto, Roboto, sans-serif);
    font-size: 20px;
    font-weight: 400;
    line-height: 1.35;
}

/* Same theme.json link override as the event title above. */
.hli-post__title a {
    font-family: var(--wp--preset--font-family--roboto, Roboto, sans-serif);
    font-weight: 400;
    color: var(--wp--preset--color--hang-wine-berry, #551c25);
    text-decoration: none;
    transition: color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.hli-post__title a:hover,
.hli-post__title a:focus-visible {
    color: var(--wp--preset--color--hang-neptune, #83c1c0);
}

/* --- Meta row ------------------------------------------------------------ */

/*
 * Author | date | read time. The separators are drawn as borders between
 * items rather than as characters, so they never end up read out or copied.
 */
.hli-post__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    font-family: var(--wp--preset--font-family--roboto, Roboto, sans-serif);
    font-size: 13px;
    line-height: 1.4;
    color: var(--wp--preset--color--hang-neutral-dark, #5a5a5a);
}

.hli-post__meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.hli-post__meta-item + .hli-post__meta-item {
    padding-left: 12px;
    border-left: 1px solid var(--wp--preset--color--hang-neutral-lighter, #e6e6e6);
}

.hli-post__meta-icon {
    flex-shrink: 0;
    opacity: 0.85;
}

.hli-post__avatar {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    object-fit: cover;
}

.hli-post__excerpt {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--wp--preset--color--hang-neutral-darker, #1f2222);
}

/* --- Pagination ---------------------------------------------------------- */

.hli-pagination {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.hli-pagination__dot {
    width: 6px;
    height: 6px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: var(--wp--preset--color--hang-neptune-lighter, #c6dedd);
    cursor: pointer;
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.hli-pagination__dot--active {
    width: 26px;
    background: var(--wp--preset--color--hang-neptune, #83c1c0);
}

.hli-pagination__dot:focus-visible {
    outline: 2px solid var(--wp--preset--color--hang-neptune-dark, #538988);
    outline-offset: 3px;
}

.hli-empty {
    margin: 0;
    color: var(--wp--preset--color--hang-neutral, #838484);
}

/* =============================================================================
 * Responsive
 * ========================================================================== */

/* The 2:1 split stops working once the event cards get narrow — stack instead. */
@media (max-width: 1024px) {
    .hli {
        grid-template-columns: minmax(0, 1fr);
        gap: 48px;
    }
}

@media (max-width: 767px) {
    .hli__events {
        grid-template-columns: minmax(0, 1fr);
    }

    /* Reclaim the bar's 40px gutter for content on a narrow screen. */
    .hli__posts {
        column-gap: 20px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hli-progress__fill,
    .hli-pagination__dot {
        transition: none;
    }
}