/* FundVisers home page — additions to the landing design (home.css).
   The design's sample campaign card now shows the platform's real campaigns and
   rotates between them; these rules cover what the sample never needed. */

/* Banners keep their own shape (never cropped); home.js holds the showcase at the
   tallest slide's height, so rotating never makes the page jump. */
.fv-slides { position: relative; }
.fv-slide[hidden] { display: none; }
.fv-slide.is-current { animation: fv-slide-in .45s ease both; }
@keyframes fv-slide-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.campaign-preview img { display: block; background: #2d2038; }

/* A campaign with a designed text banner (no picture): its headline on the band colour. */
.fv-preview-art { aspect-ratio: 4 / 1; display: flex; align-items: center; padding: 0 22px; background: #2d2038; color: #fff; }
.fv-preview-art[hidden] { display: none; }
.fv-preview-art span { font-size: 22px; font-weight: 800; letter-spacing: -.03em; line-height: 1.15; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Long titles stay inside the info band. */
.preview-info > p { overflow-wrap: anywhere; }
.fv-preview-status { flex-shrink: 0; }
.fv-preview-status span { display: inline-block; margin: 0; padding: 7px 11px; border-radius: 999px; background: #ffffff1f; color: #fff; font-size: 13px; font-weight: 700; white-space: nowrap; }

/* Foot: status line on the left; single campaign → link, several → controls. */
.fv-showcase .example-foot { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 16px; }
.fv-controls { display: flex; align-items: center; gap: 10px; }
.fv-step { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #cdd2df; border-radius: 50%; background: #fff; color: var(--ink); cursor: pointer; }
.fv-step:hover { border-color: var(--ink); }
.fv-dots { display: flex; align-items: center; gap: 6px; }
.fv-dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: #b9bed0; cursor: pointer; transition: width .2s, background .2s; }
.fv-dot[aria-current="true"] { width: 22px; background: var(--blue); }
.fv-step:focus-visible, .fv-dot:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
/* Dots become too many to tap comfortably on a phone: the counter above says where you are. */
@media (max-width: 760px) { .fv-dots { display: none; } }

/* No live campaign yet: the hero copy takes the whole row. */
.hero.fv-no-campaigns { grid-template-columns: 1fr; }

/* Form states. */
.request-card .form-error[hidden], .request-success[hidden], .request-card form[hidden] { display: none; }
.request-card [aria-invalid="true"] { border-color: #a62c30; }
.request-card .submit-request[aria-disabled="true"] { opacity: .65; cursor: progress; }
.request-success h3:focus { outline: none; }

@media (prefers-reduced-motion: reduce) { .fv-slide.is-current { animation: none; } }