/* ==========================================================================
   SPSR 2026 — legacy page conversions (About, Contact, Publications, Branches,
   Forums, Gallery, Policies, Awards, Videos, Events).
   Depends on spsr-2026.css (+ spsr-pages.css / spsr-membership.css where pushed).
   Everything here is additive — the design-system files are never edited.
   ========================================================================== */

/* ------------------------------------------------------------- Forms ----- */

.sp-form { display: grid; gap: 18px; }
.sp-form--2col { grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .sp-form--2col { grid-template-columns: 1fr; } }
.sp-form__full { grid-column: 1 / -1; }

.sp-label {
    display: block; font-family: var(--sp-font-ui);
    font-size: 13px; font-weight: 600; color: var(--sp-ink); margin-bottom: 7px;
}
.sp-label .sp-req { color: var(--sp-danger); }

/* spsr-membership.css styles .sp-field input/select; extend to textarea */
.sp-field textarea {
    width: 100%; box-sizing: border-box; min-height: 140px; resize: vertical;
    font-family: var(--sp-font-ui); font-size: 14.5px; color: var(--sp-ink);
    padding: 13px 14px; border: 1.5px solid var(--sp-line); border-radius: var(--sp-r-sm);
    background: #fff; appearance: none;
    transition: border-color .16s ease, box-shadow .16s ease;
}
.sp-field textarea:focus {
    outline: none; border-color: var(--sp-green-600); box-shadow: 0 0 0 3px rgba(30,122,60,.14);
}
.sp-field textarea::placeholder { color: #94A3B8; }

/* Fieldset-style group heading inside long forms */
.sp-formgroup { border: 0; margin: 0; padding: 0; }
.sp-formgroup + .sp-formgroup { margin-top: 30px; }
.sp-formgroup__title {
    font-family: var(--sp-font-display); font-size: 19px; font-weight: 700;
    color: var(--sp-navy-800); margin: 0 0 16px; padding-bottom: 10px;
    border-bottom: 1px solid var(--sp-line);
}

/* ------------------------------------------------------- People / teams -- */

.sp-people { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 1024px) { .sp-people { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px)  { .sp-people { grid-template-columns: 1fr; } }

.sp-person { text-align: center; padding: 26px 20px; }
.sp-person__avatar {
    width: 96px; height: 96px; border-radius: 50%; object-fit: cover;
    margin: 0 auto 14px; display: block; border: 3px solid var(--sp-green-050);
}
.sp-person__name { font-family: var(--sp-font-display); font-size: 17px; font-weight: 700; color: var(--sp-navy-800); line-height: 1.3; }
.sp-person__role {
    font-family: var(--sp-font-ui); font-size: 12.5px; font-weight: 600;
    letter-spacing: .04em; text-transform: uppercase;
    color: var(--sp-green-700); margin-top: 6px; line-height: 1.45;
}

/* Larger featured person (e.g. President on About page) */
.sp-person--feature { padding: 30px 24px; }
.sp-person--feature .sp-person__avatar { width: 140px; height: 140px; border-color: var(--sp-gold-050); }

/* ------------------------------------------------------ Rich page prose -- */
/* .sp-prose lives in spsr-pages.css; these are page-composition helpers. */

.sp-split { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 44px; align-items: start; }
@media (max-width: 980px) { .sp-split { grid-template-columns: 1fr; gap: 30px; } }

.sp-checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.sp-checklist li {
    display: flex; gap: 11px; align-items: flex-start; margin: 0;
    font-family: var(--sp-font-ui); font-size: 14.5px; line-height: 1.6; color: var(--sp-ink-2);
}
.sp-checklist svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--sp-green-600); }
.sp-checklist strong { color: var(--sp-ink); }

/* ---------------------------------------------------------- Journals ----- */

.sp-journal { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 36px; align-items: start; }
@media (max-width: 860px) { .sp-journal { grid-template-columns: 1fr; gap: 22px; } }
.sp-journal__logo {
    background: #fff; border: 1px solid var(--sp-line); border-radius: var(--sp-r);
    box-shadow: var(--sp-shadow-1); padding: 24px;
    display: flex; align-items: center; justify-content: center;
}
.sp-journal__logo img { width: 160px; height: auto; display: block; }
.sp-journal__issn {
    display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px;
}

/* ------------------------------------------------------------- Gallery --- */

.sp-gallerygrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .sp-gallerygrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .sp-gallerygrid { grid-template-columns: 1fr; } }
.sp-galleryitem {
    display: block; border-radius: var(--sp-r); overflow: hidden;
    border: 1px solid var(--sp-line); background: var(--sp-navy-050);
    aspect-ratio: 4 / 3;
}
.sp-galleryitem img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .25s ease;
}
.sp-galleryitem:hover img { transform: scale(1.04); }

/* -------------------------------------------------------------- Videos --- */

.sp-videogrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 1024px) { .sp-videogrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .sp-videogrid { grid-template-columns: 1fr; } }

.sp-embed {
    position: relative; width: 100%; aspect-ratio: 16 / 9;
    background: var(--sp-navy-900); border-radius: var(--sp-r) var(--sp-r) 0 0; overflow: hidden;
}
.sp-embed iframe, .sp-embed img { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; object-fit: cover; }

.sp-videocard { display: flex; flex-direction: column; }
.sp-videocard__body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.sp-videocard__title {
    font-family: var(--sp-font-display); font-size: 16.5px; font-weight: 700;
    line-height: 1.35; color: var(--sp-navy-800); margin: 0;
}
.sp-videocard__title a { color: inherit; text-decoration: none; }
.sp-videocard__title a:hover { color: var(--sp-green-700); }

/* Single video / event hero embed */
.sp-embed--single { aspect-ratio: 16 / 9; border-radius: var(--sp-r); box-shadow: var(--sp-shadow-2); }

/* -------------------------------------------------------------- Events --- */

.sp-eventgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 1024px) { .sp-eventgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .sp-eventgrid { grid-template-columns: 1fr; } }

.sp-eventcard { display: flex; flex-direction: column; }
.sp-eventcard__media { aspect-ratio: 16 / 10; background: var(--sp-navy-050); overflow: hidden; }
.sp-eventcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sp-eventcard__body { padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.sp-eventcard__title {
    font-family: var(--sp-font-display); font-size: 17px; font-weight: 700;
    line-height: 1.35; color: var(--sp-navy-800); margin: 0;
}
.sp-eventcard__title a { color: inherit; text-decoration: none; }
.sp-eventcard__title a:hover { color: var(--sp-green-700); }
.sp-eventcard__cta { margin-top: auto; padding-top: 6px; }

/* ------------------------------------------------------- Contact page ---- */

.sp-contactgrid { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 40px; align-items: start; }
@media (max-width: 900px) { .sp-contactgrid { grid-template-columns: 1fr; gap: 28px; } }

.sp-contactinfo { display: grid; gap: 18px; }
.sp-contactinfo__item {
    display: flex; gap: 13px; align-items: flex-start;
    font-family: var(--sp-font-ui); font-size: 14.5px; line-height: 1.6; color: var(--sp-ink-2);
}
.sp-contactinfo__item svg { width: 19px; height: 19px; flex: none; margin-top: 3px; color: var(--sp-green-600); }
.sp-contactinfo__item a { color: var(--sp-green-700); text-decoration: none; }
.sp-contactinfo__item a:hover { text-decoration: underline; }

/* ---------------------------------------------------- Awards / pricing --- */

.sp-feetable-note { font-family: var(--sp-font-ui); font-size: 12.8px; color: var(--sp-muted); margin-top: 12px; }

.sp-badgelist { display: flex; flex-wrap: wrap; gap: 8px; }

/* Numbered guideline list */
.sp-numlist { list-style: none; counter-reset: spnum; margin: 0; padding: 0; display: grid; gap: 14px; }
.sp-numlist > li {
    counter-increment: spnum; position: relative; margin: 0; padding-left: 44px;
    font-family: var(--sp-font-ui); font-size: 14.5px; line-height: 1.65; color: var(--sp-ink-2);
}
.sp-numlist > li::before {
    content: counter(spnum);
    position: absolute; left: 0; top: 1px;
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--sp-navy-050); color: var(--sp-navy-800);
    font-size: 13px; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
}

/* ----------------------------------------------- Events / webinar archive */

.sp-archive__head { margin: 0 0 26px; }
* + .sp-archive__head { margin-top: 64px; }
.sp-archive__year {
    display: flex; align-items: center; gap: 14px;
    margin: 38px 0 18px;
}
.sp-archive__year::after { content: ""; height: 1px; flex: 1; background: var(--sp-line); }

.sp-archive { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.sp-archive > li {
    margin: 0; background: var(--sp-surface); border: 1px solid var(--sp-line);
    border-radius: var(--sp-r); box-shadow: var(--sp-shadow-1);
    padding: 18px 22px;
    font-family: var(--sp-font-ui); font-size: 14px; line-height: 1.65; color: var(--sp-ink-2);
}
.sp-archive > li > strong {
    display: block; font-family: var(--sp-font-display); font-size: 16.5px; font-weight: 700;
    color: var(--sp-navy-800); line-height: 1.35; margin-bottom: 6px;
}
.sp-archive a {
    display: inline-block; margin-top: 8px;
    color: var(--sp-green-700); font-weight: 600; text-decoration: none;
}
.sp-archive a:hover { text-decoration: underline; }

/* ------------------------------------------- Laravel default pagination -- */
/* Styles the framework-rendered {{ $items->links() }} markup to match .sp-pager */

.sp-pagerwrap { margin-top: 44px; font-family: var(--sp-font-ui); }
.sp-pagerwrap nav { display: flex; justify-content: center; }
.sp-pagerwrap .pagination {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    flex-wrap: wrap; list-style: none; margin: 0; padding: 0;
}
.sp-pagerwrap .pagination li { margin: 0; }
.sp-pagerwrap .pagination a,
.sp-pagerwrap .pagination span {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 42px; height: 42px; padding: 0 13px;
    font-size: 14px; font-weight: 600;
    border: 1px solid var(--sp-line); border-radius: var(--sp-r-sm);
    background: #fff; color: var(--sp-ink-2); text-decoration: none !important;
}
.sp-pagerwrap .pagination a:hover { border-color: var(--sp-navy-800); color: var(--sp-navy-800); }
.sp-pagerwrap .pagination .active span { background: var(--sp-navy-800); border-color: var(--sp-navy-800); color: #fff; }
.sp-pagerwrap .pagination .disabled span { opacity: .45; }
/* Tailwind-flavoured paginator (Laravel 8+) renders spans/anchors + svgs */
.sp-pagerwrap svg { width: 16px; height: 16px; }
.sp-pagerwrap p { display: none; }

/* -------------------------------------------------------- Misc helpers --- */

.sp-mt-0 { margin-top: 0 !important; }
.sp-center { text-align: center; }

.sp-cta-band { text-align: center; }
.sp-cta-band .sp-actions { justify-content: center; }