/* Board tracker SFH2026.
 *
 * TWO imports, and the split is not obvious: the theme's shared classes are
 * spread across two layouts' stylesheets. .sfh-container, .sfh-eyebrow,
 * .sfh-heading-xl and .sfh-link-btn are the product slider's; .sfh-btn and
 * .sfh-btn-red are the HERO's. Importing only the first left the submit button
 * rendering as the browser's default grey -- measured rgb(239,239,239) instead
 * of the theme red.
 *
 * Same arrangement modellist/layouts/c.css uses, and for the same reason: a
 * tracker page need not have a slider or a hero on it, and redefining those
 * classes here would be the trap CLAUDE.md already records against
 * .sfh-heading-xl -- three copies of one rule, drifting apart. Relative to this
 * file's own URL, so they survive the ?v={mtime} stamp on the parent.
 *
 * Only the differences live below.
 */
@import url("../../productslider/layouts/sfh2026.css");
@import url("../../hero/layouts/sfh2026.css");

.sfh-bt { padding-block: clamp(40px, 6vw, 80px); background: #f4f4f4; }
.sfh-bt-in { padding-inline: 20px; }
.sfh-bt-head { max-width: 640px; }
.sfh-bt-intro { margin-top: 14px; color: #555; line-height: 1.6; }
.sfh-bt-note { margin-top: 0px; font-size: 12px; color: #555; line-height: 1.6; }

/* Pill form, matching the newsletter band: white field, red button inside the
   same rounded shell on desktop, stacked once there is no room for both. */
.sfh-bt-form { display: flex; gap: 12px; margin-top: 28px; max-width: 640px; flex-wrap: wrap; }
.sfh-bt-input {
    flex: 1 1 240px;
    min-width: 0;                 /* a flex item will not shrink below its content */
    padding: 16px 24px;
    border: 1px solid #e0e0e0;
    border-radius: 100px;
    background: #fff;
    font: inherit; font-size: 15px;
}
.sfh-bt-input:focus { outline: 2px solid #be202e; outline-offset: 1px; }
.sfh-bt-form .sfh-btn { border-radius: 100px; flex: 0 0 auto; }

.sfh-bt-card { margin-top: 28px; padding: 28px; background: #fff; }
.sfh-bt-status { margin: 0; font-size: clamp(17px, 2vw, 21px); font-weight: 700; }
.sfh-bt-status-complete { color: #1a7f3c; }
.sfh-bt-status-inprogress { color: #be202e; }
.sfh-bt-notfound { margin-top: 20px; font-size: 17px; }

.sfh-bt-facts { display: flex; flex-wrap: wrap; gap: 20px 48px; margin: 22px 0 0; }
.sfh-bt-facts dt { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #8a8a8a; }
.sfh-bt-facts dd { margin: 4px 0 0; font-size: 16px; font-weight: 700; }

/* The stages. A single track behind the row, and each stage owns an equal
   share of it -- the API decides how many there are, so nothing here assumes a
   count. --sfh-bt-count carries it from the template. */
.sfh-bt-steps {
    display: grid;
    grid-template-columns: repeat(var(--sfh-bt-count, 5), minmax(0, 1fr));
    list-style: none;
    margin: 34px 0 0;
    padding: 0;
}
.sfh-bt-step { position: relative; padding-top: 42px; text-align: center; }
/* The connecting rule sits behind the dots, drawn per item so it stops at the
   first and last stage instead of running off both ends of the row. */
.sfh-bt-step::before {
    content: ""; position: absolute; top: 15px; left: 0; right: 0;
    height: 2px; background: #dcdcdc;
}
.sfh-bt-step:first-child::before { left: 50%; }
.sfh-bt-step:last-child::before  { right: 50%; }
.sfh-bt-step.is-done::before, .sfh-bt-step.is-current::before { background: #be202e; }
.sfh-bt-step-dot {
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #fff; border: 2px solid #dcdcdc;
    font-size: 13px; font-weight: 700; color: #9a9a9a;
}
.sfh-bt-step.is-done .sfh-bt-step-dot    { background: #be202e; border-color: #be202e; color: #fff; }
.sfh-bt-step.is-current .sfh-bt-step-dot { border-color: #be202e; color: #be202e; box-shadow: 0 0 0 4px rgba(190,32,46,.15); }
.sfh-bt-step-name { display: block; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.sfh-bt-step.is-todo .sfh-bt-step-name { color: #9a9a9a; font-weight: 500; }
.sfh-bt-step-date { display: block; margin-top: 4px; font-size: 12px; color: #8a8a8a; }

@media (max-width: 720px) {
    /* One column: five stages side by side on a phone leaves each about 60px,
       which is narrower than the words. The track becomes the left rule. */
    .sfh-bt-steps { grid-template-columns: 1fr; }
    .sfh-bt-step { padding: 0 0 22px 48px; text-align: left; }
    .sfh-bt-step:last-child { padding-bottom: 0; }
    .sfh-bt-step::before { top: 0; bottom: 0; left: 15px; right: auto; width: 2px; height: auto; }
    .sfh-bt-step:first-child::before { top: 16px; left: 15px; }
    .sfh-bt-step:last-child::before  { bottom: calc(100% - 16px); right: auto; }
    .sfh-bt-step-dot { top: 0; left: 0; transform: none; }
    .sfh-bt-card { padding: 22px 18px; }
}