/* ==========================================================================
   Registration — batch blocks (12 Sep 2026, mockup v5)
   Sticker → status → heading → five facts → links, form beside it.
   Repeats per open batch. Tokens from findi360-design-system.css.
   ========================================================================== */

.fi-batch {
    padding: 40px 0 52px;
    background: linear-gradient(180deg,
        rgba(var(--fd-ivory-rgb, 253, 251, 247), 1) 0%,
        var(--fd-champagne, #f5eddb) 18%,
        var(--fd-champagne, #f5eddb) 70%,
        rgba(var(--fd-ivory-rgb, 253, 251, 247), 1) 100%);
}

/* second and later batches: lighter band, gold hairline above */
.fi-batch + .fi-batch {
    padding-top: 8px;
    background: linear-gradient(180deg,
        rgba(var(--fd-ivory-rgb, 253, 251, 247), 1) 0%,
        rgba(var(--fd-champagne-rgb, 245, 237, 219), .55) 18%,
        rgba(var(--fd-champagne-rgb, 245, 237, 219), .55) 70%,
        rgba(var(--fd-ivory-rgb, 253, 251, 247), 1) 100%);
}
.fi-batch + .fi-batch .fi-batch__wrap {
    border-top: 1px solid rgba(212, 160, 23, .35);
    padding-top: 40px;
}

.fi-batch__wrap {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 44px;
    align-items: start;
}
@media (max-width: 1279px) {
    .fi-batch__wrap { grid-template-columns: minmax(0, 1fr) 340px; gap: 28px; }
}
@media (max-width: 1023px) {
    .fi-batch__wrap { grid-template-columns: 1fr; gap: 26px; }
}

/* --- sticker: landscape 3:2, sits in a soft pool of the page tone */
.fi-batch__sticker {
    aspect-ratio: 3 / 2;
    position: relative;
    margin: 0 0 22px;
    border-radius: 18px;
    background: radial-gradient(70% 70% at 50% 50%, rgba(212, 160, 23, .16), rgba(212, 160, 23, 0) 72%);
}
.fi-batch__sticker img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 12px 22px rgba(60, 45, 10, .16));
}
.fi-batch__sticker::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 14%;
    right: 14%;
    height: 20px;
    border-radius: 50%;
    background: radial-gradient(rgba(60, 45, 10, .16), rgba(60, 45, 10, 0) 70%);
    filter: blur(4px);
}

/* --- status, heading, facts */
.fi-batch__status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--fd-text-secondary, #3d3a34);
    margin: 0 0 8px;
}
.fi-batch__status i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--fd-gold, #d4a017);
    box-shadow: 0 0 0 4px rgba(212, 160, 23, .18);
}
.fi-batch__title {
    font-family: var(--fd-font-heading, inherit);
    font-size: clamp(28px, 3vw, 36px);
    line-height: 1.12;
    letter-spacing: -.02em;
    font-weight: 700;
    margin: 0 0 18px;
    color: var(--fd-charcoal, #111);
}
.fi-batch__lede {
    font-size: 17px;
    color: var(--fd-text-secondary, #3d3a34);
    max-width: 56ch;
    margin: 0 0 20px;
}
.fi-batch__facts {
    margin: 0 0 22px;
    padding: 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 28px;
    font-size: 15px;
}
.fi-batch__facts dt {
    color: var(--fd-text-muted, #6f6a60);
    padding: 9px 0;
    border-top: 1px solid rgba(212, 160, 23, .30);
}
.fi-batch__facts dd {
    margin: 0;
    padding: 9px 0;
    border-top: 1px solid rgba(212, 160, 23, .30);
    font-weight: 600;
    color: var(--fd-charcoal, #111);
}
.fi-batch__facts dt:last-of-type,
.fi-batch__facts dd:last-of-type {
    border-bottom: 1px solid rgba(212, 160, 23, .30);
}
@media (max-width: 640px) {
    .fi-batch__facts { grid-template-columns: 1fr; }
    .fi-batch__facts dt { padding-bottom: 0; }
    .fi-batch__facts dd { border-top: 0; padding-top: 2px; }
    .fi-batch__facts dt:last-of-type { border-bottom: 0; }
}

/*
    --- Pinned share bar (20 Sep 2026)

    Only on /register/{slug}, where the page is one batch and one URL. Sits
    directly under the site header and stays there, matching the course page
    and Data Dare.

    Opaque background, not translucent: it passes over the sticker and the
    form card, and anything see-through makes both unreadable underneath.
*/
.fi-reg-sharebar {
    position: sticky;
    top: var(--fd-header-offset, var(--fd-header-height, 64px));
    z-index: 6;
    background: var(--fd-bg-page, #fdfbf7);
    border-bottom: 1px solid rgba(17, 17, 17, .08);
}

.fi-reg-sharebar__wrap {
    display: flex;
    justify-content: flex-end;
    padding-top: 8px;
    padding-bottom: 8px;
}

/* The partial sets margin-left:auto for the in-flow row; the bar handles its
   own alignment, so that would only add a stray gap here. */
.fi-reg-sharebar .fi-batch__share { margin-left: 0; }

@media (max-width: 640px) {
    /* A pinned bar costs too much of a phone screen — let it scroll away. */
    .fi-reg-sharebar { position: static; }
    .fi-reg-sharebar__wrap { justify-content: flex-start; }
}

/*
    --- Course details block (20 Sep 2026)

    Was a plain underlined link in the row below, which read as a footnote.
    It is the second most useful thing on this page after the form, so it gets
    a tinted panel of its own: gold wash, gold left edge, and the same rounded
    card language as the rest of the page.
*/
.fi-batch__details {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px 22px;
    flex-wrap: wrap;
    margin: 18px 0 0;
    padding: 14px 18px;
    border: 1px solid rgba(212, 160, 23, .28);
    border-left: 4px solid var(--fd-gold, #d4a017);
    border-radius: 12px;
    background: rgba(212, 160, 23, .08);
}

.fi-batch__details-text {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.fi-batch__details-title {
    font-weight: 700;
    font-size: 15.5px;
    color: var(--fd-charcoal, #111);
}

.fi-batch__details-line {
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--fd-text-secondary, #3d3a34);
}

.fi-batch__details-cta {
    flex: 0 0 auto;
    padding: 8px 16px;
    border-radius: 999px;
    border: 1px solid var(--fd-gold, #d4a017);
    background: var(--fd-gold, #d4a017);
    color: #1b1608;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: filter .18s ease;
}

.fi-batch__details-cta:hover,
.fi-batch__details-cta:focus-visible { filter: brightness(1.06); }

/* --- links row */
.fi-batch__acts {
    display: flex;
    align-items: center;
    gap: 22px;
    flex-wrap: wrap;
}
.fi-batch__link {
    font-weight: 600;
    color: var(--fd-charcoal, #111);
    text-decoration: none;
    border-bottom: 1px solid rgba(212, 160, 23, .6);
    padding-bottom: 1px;
}
.fi-batch__link:hover { border-bottom-color: var(--fd-gold, #d4a017); }

.fi-batch__share {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 14px;
    color: var(--fd-text-secondary, #3d3a34);
}
.fi-batch__share-label { display: inline-flex; align-items: center; gap: 6px; margin-right: 4px; }
.fi-batch__share button {
    font: inherit;
    font-size: 13px;
    padding: 6px 10px;
    border-radius: 999px;
    border: 1px solid rgba(17, 17, 17, .16);
    background: rgba(255, 255, 255, .6);
    color: var(--fd-charcoal, #111);
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease;
}
.fi-batch__share button:hover { border-color: var(--fd-gold, #d4a017); background: rgba(212, 160, 23, .08); }
@media (max-width: 640px) { .fi-batch__share { margin-left: 0; } }

/* --- form card */
.fi-batch__side { position: relative; }
.fi-batch__form {
    background: rgba(255, 255, 255, .86);
    border: 1px solid rgba(212, 160, 23, .28);
    border-radius: 18px;
    padding: 24px 24px 20px;
    box-shadow: 0 18px 40px rgba(60, 45, 10, .10), inset 0 1px 0 rgba(255, 255, 255, .9);
    position: sticky;
    top: calc(var(--fd-header-height, 64px) + 16px);
    display: grid;
    gap: 11px;
}
@media (max-width: 1023px) { .fi-batch__form { position: static; } }
.fi-batch__form h2 {
    font-size: 21px;
    letter-spacing: -.01em;
    margin: 0 0 4px;
    color: var(--fd-charcoal, #111);
}
.fi-batch__field { display: grid; gap: 5px; font-size: 13px; color: var(--fd-text-secondary, #3d3a34); }
.fi-batch__field input {
    font: inherit;
    /* D72: 16px, not 15px. iOS Safari auto-zooms the page on focus for any field
       under 16px, so a phone user taps a field, the page jumps, and they pinch
       back out — once per field. Scoped to this form; nothing else moves. */
    font-size: 16px;
    padding: 11px 12px;
    border: 1px solid rgba(17, 17, 17, .16);
    border-radius: 9px;
    background: #fff;
    color: var(--fd-charcoal, #111);
    width: 100%;
}
.fi-batch__field input:focus {
    outline: none;
    border-color: var(--fd-gold, #d4a017);
    box-shadow: 0 0 0 3px rgba(212, 160, 23, .18);
}
.fi-batch__two { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
@media (max-width: 420px) { .fi-batch__two { grid-template-columns: 1fr; } }
.fi-batch__error { display: block; font-style: normal; font-size: 12.5px; color: var(--fd-danger, #9b2c2c); }
.fi-batch__notice {
    margin: 0;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(212, 160, 23, .10);
    border: 1px solid rgba(212, 160, 23, .35);
    font-size: 14px;
}

.fi-batch__consent {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 13.5px;
    line-height: 1.4;
    color: var(--fd-text-secondary, #3d3a34);
    margin-top: 2px;
}
.fi-batch__consent input { margin: 3px 0 0; width: 16px; height: 16px; accent-color: var(--fd-gold, #d4a017); flex: none; }
.fi-batch__terms-link {
    font: inherit;
    font-weight: 600;
    color: var(--fd-charcoal, #111);
    background: none;
    border: 0;
    padding: 0 0 1px;
    border-bottom: 1px solid rgba(212, 160, 23, .6);
    cursor: pointer;
}
.fi-batch__terms-link:hover { border-bottom-color: var(--fd-gold, #d4a017); }

.fi-batch__submit { width: 100%; margin-top: 6px; justify-content: center; }
.fi-batch__submit[disabled] {
    background: var(--fd-warm-grey, #e7e2da) !important;
    color: var(--fd-text-muted, #6f6a60) !important;
    border-color: transparent !important;
    box-shadow: none !important;
    cursor: not-allowed;
    transform: none !important;
}

.fi-batch__seats {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--fd-text-secondary, #3d3a34);
    margin: 4px 0 0;
}
.fi-batch__bar { flex: 1; height: 6px; border-radius: 6px; background: var(--fd-warm-grey, #e7e2da); overflow: hidden; }
.fi-batch__bar i { display: block; height: 100%; background: linear-gradient(90deg, #e8c65a, var(--fd-gold, #d4a017)); }

.fi-batch__fine { font-size: 13px; color: var(--fd-text-muted, #6f6a60); margin: 4px 0 0; line-height: 1.45; }
.fi-batch__fine a { color: var(--fd-charcoal, #111); }
.fi-batch__form--closed { position: static; }

/* --- terms dialog */
.fi-batch__terms {
    border: 1px solid rgba(212, 160, 23, .35);
    border-radius: 18px;
    padding: 28px 30px;
    max-width: 640px;
    width: calc(100% - 32px);
    background: var(--fd-ivory, #fdfbf7);
    color: var(--fd-charcoal, #111);
    box-shadow: 0 30px 70px rgba(0, 0, 0, .25);
}
.fi-batch__terms::backdrop { background: rgba(17, 17, 17, .45); }
.fi-batch__terms h3 { margin: 0 0 14px; font-size: 22px; letter-spacing: -.01em; }
.fi-batch__terms-body {
    font-size: 15px;
    line-height: 1.55;
    color: var(--fd-text-secondary, #3d3a34);
    max-height: 55vh;
    overflow: auto;
    margin: 0 0 20px;
}
.fi-batch__terms-body h4 { margin: 14px 0 6px; font-size: 15px; color: var(--fd-charcoal, #111); }
.fi-batch__terms-body ul { margin: 0; padding-left: 22px; display: grid; gap: 10px; }
.fi-batch__terms-body li { padding-left: 2px; }
.fi-batch__terms-body li::marker { color: var(--fd-gold, #d4a017); }
.fi-batch__terms-row { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }

/* --- the one line to the catalogue, and the foot */
.fi-batch-more { padding: 12px 0 36px; }
.fi-batch-more__wrap {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: nowrap;
    font-size: 16px;
    color: var(--fd-text-secondary, #3d3a34);
    border-top: 1px solid rgba(17, 17, 17, .10);
    padding-top: 30px;
}
.fi-batch-more__wrap svg { flex: none; color: var(--fd-gold, #d4a017); }
@media (max-width: 640px) {
    .fi-batch { padding-bottom: 28px; }
    .fi-batch-more { padding: 0 0 28px; }
    .fi-batch-more__wrap { padding-top: 22px; font-size: 15px; }
    .fi-batch-more__wrap svg { width: 18px; height: 18px; margin-top: 2px; align-self: flex-start; }
}

.fi-batch-foot { background: var(--fd-charcoal, #111); color: #fff; padding: 26px 0; }
.fi-batch-foot__wrap { display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; font-size: 15px; }
.fi-batch-foot a { color: #e8c65a; }
.fi-batch-foot small { color: rgba(255, 255, 255, .6); font-size: 13px; }

/* empty state */
.fi-batch--empty .fi-batch__wrap { grid-template-columns: minmax(0, 1fr); max-width: 820px; }

@media (prefers-reduced-motion: reduce) {
    .fi-batch__share button { transition: none; }
}