/* ============================================================
   PROGRAM PAGE
   Matches the established visual language already used on Home
   (dark hero, #F47A20 orange accents, Montserrat, generous
   whitespace, rounded image placeholders) — this page's own
   stylesheet was missing entirely, so nothing below is a redesign,
   it's bringing this page in line with what the rest of the site
   already looks like.
============================================================ */

/* ---- Hero ---- */
.ab-hero {
    background: linear-gradient(120deg, #0B1B33 0%, #33455C 55%, #FFFFFF 100%);
    padding: 72px 80px 64px;
    color: #FFFFFF;
    text-align: center;
}
.ab-hero-eyebrow {
    display: inline-block;
    background: #F2B705;
    color: #0B1B33;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 12px;
    letter-spacing: 0.4px;
    padding: 5px 14px;
    border-radius: 20px;
    margin-bottom: 20px;
}
.ab-hero-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 40px;
    line-height: 1.25;
    max-width: 640px;
    margin: 0 auto 16px;
}
.ab-highlight {
    color: #F47A20;
    font-style: normal;
}
.ab-hero-desc {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 15px;
    line-height: 1.6;
    color: #D7DEE8;
    max-width: 560px;
    margin: 0 auto;
}

/* ---- Program blocks ---- */
.pg-programs {
    padding: 72px 80px;
    display: flex;
    flex-direction: column;
    gap: 64px;
}
.pg-program-inner {
    display: flex;
    align-items: center;
    gap: 56px;
}
.pg-program-block--reverse .pg-program-inner {
    flex-direction: row-reverse;
}
.pg-program-photo {
    flex: 0 0 44%;
    aspect-ratio: 4 / 3;
    border-radius: 20px;
    background: #F3E9DC url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><rect width="24" height="24" fill="none"/></svg>') center/cover no-repeat;
    background-size: cover;
    background-position: center;
}
.pg-program-content {
    flex: 1;
    min-width: 0;
}
.pg-program-title {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 28px;
    color: #0B1B33;
    margin: 0 0 12px;
}
.pg-program-meta {
    display: inline-block;
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #F47A20;
    background: #FFF1E6;
    padding: 5px 12px;
    border-radius: 20px;
    margin: 0 8px 12px 0;
}
.pg-program-desc {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.7;
    color: #4A5568;
    margin: 4px 0 20px;
    max-width: 62ch;
}
.pg-program-communities-label {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 0.6px;
    color: #8A94A6;
    margin-bottom: 10px;
}
.pg-communities-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.pg-community-item {
    font-family: 'Montserrat', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #0B1B33;
    background: #F5F6F8;
    border: 1px solid #E2E8F0;
    padding: 6px 12px;
    border-radius: 8px;
}

/* ---- Photo strip: a slow, continuously scrolling belt of program
   photos. The HTML already duplicates the photo set once for a
   seamless loop — the belt just needs to be twice as wide as its
   wrapper and animate exactly -50%, so the duplicate set lines up
   perfectly with the first as it loops. ---- */
.pg-photo-strip {
    padding: 8px 0 72px;
    overflow: hidden;
}
.pg-photo-belt-wrapper {
    width: 100%;
    overflow: hidden;
}
.pg-photo-belt {
    display: flex;
    gap: 16px;
    width: max-content;
    animation: pgPhotoBeltScroll 32s linear infinite;
}
.pg-strip-photo {
    height: 220px;
    border-radius: 14px;
    background: #F3E9DC;
    background-size: cover;
    background-position: center;
    flex-shrink: 0;
}
.pg-strip-photo--square { width: 220px; }
.pg-strip-photo--wide { width: 320px; }

@keyframes pgPhotoBeltScroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
    .ab-hero { padding: 56px 24px 48px; }
    .ab-hero-title { font-size: 30px; }
    .pg-programs { padding: 48px 24px; gap: 48px; }
    .pg-program-inner,
    .pg-program-block--reverse .pg-program-inner {
        flex-direction: column;
    }
    .pg-program-photo { flex-basis: auto; width: 100%; }
}

/* Respect reduced-motion preferences — the belt keeps its final
   scrolled frame paused rather than jumping or continuing to move. */
@media (prefers-reduced-motion: reduce) {
    .pg-photo-belt { animation: none; }
}