/* ==========================================================================
   PROGRAMS — programs.css
   Extends style.css and reuses the Builder Quest hero/animation system
   (loaded alongside this file) so the "Programs Universe" hero and the
   Builder Quest card visual share one visual identity with the Builder
   Quest page itself. Everything new here is scoped under a `pg-` prefix.
   Reused as-is (no new classes needed): .ll-container, .ll-section,
   .ll-btn / .ll-btn--text, .ll-eyebrow, .ll-spark, .bq-hero*,
   .bq-pricing__tabs / .bq-pricing__tab (filter pills),
   .bq-positioning__dot (meta separator), [data-reveal] / [data-hero-reveal].
   ========================================================================== */

.pg-page { background: var(--ll-bg); }

/* ---------- Hero — 70% viewport, not a full-screen hero ---------- */
/* Scoped under .pg-page so this only affects the Programs hero, never
   the shared .bq-hero rules builder-quest.php relies on. min-height
   (not height) is used so long content on small screens still has
   room to breathe instead of being clipped. */
.pg-page .bq-hero {
    min-height: 70vh;
    padding: 0;
    display: flex;
    align-items: center;
}
@media (max-width: 640px) {
    .pg-page .bq-hero { min-height: 60vh; padding: 32px 0; }
}

/* ---------- Programs hero visual — original artwork, independent of
   the Builder Quest hero (new canvas, new shapes, new motion; no
   .bq-hero__anim / .bq-hero__core / .bq-hero__line-flow classes used).
   Five fragments arrive from different directions on their own path,
   meet, wobble slightly (interact), converge and lock into a small
   pentagon structure with a spark accent — then drift apart and
   re-form, looping seamlessly. The 0%/100% keyframe on every piece is
   the assembled/"reveal" pose, so a paused or reduced-motion view
   always shows the finished creation, never a mid-scatter frame. ---------- */
.pg-hero__visual {
    position: relative;
    border-radius: var(--ll-radius-md);
    background: var(--ll-soft-green);
    border: 1px solid var(--bq-line);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pg-hero__video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pg-hero__visual-label {
    position: absolute;
    left: 18px; bottom: 16px;
    font-family: var(--ll-font-display);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--ll-forest-faint);
    padding: 5px 10px;
    background: rgba(252, 252, 250, 0.8);
    border: 1px solid var(--bq-line);
    border-radius: 100px;
}

@media (max-width: 991px) {
    .pg-hero__visual { order: -1; aspect-ratio: 16 / 10; max-width: 480px; margin: 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
    .pg-hero__video { display: none; }
}

/* ---------- Filter ---------- */
.pg-filter { background: var(--ll-soft-green); }

.pg-filter__row {
    display: flex;
    justify-content: center;
}

/* Reuses the pill-tab look already established in the Builder Quest
   pricing card (.bq-pricing__tabs / .bq-pricing__tab), just at a
   slightly larger touch size and without the card wrapper. */
.pg-filter__tabs {
    display: inline-flex;
    background: var(--ll-bg);
}

.pg-filter__tab {
    padding: 11px 22px;
}

/* ---------- Programs grid ---------- */
.pg-programs__grid {
    margin-top: clamp(28px, 4vw, 44px);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 300px));
    justify-content: center;
    gap: 18px;
}

.pg-programs__empty {
    margin-top: clamp(28px, 4vw, 44px);
    text-align: center;
    font-size: 15.5px;
    color: var(--ll-forest-faint);
    display: none;
}
.pg-programs__empty.is-visible { display: block; }

/* ---------- Program card ---------- */
.pg-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--bq-line);
    border-radius: var(--ll-radius-md);
    background: var(--ll-bg);
    overflow: hidden;
    transition: border-color 0.25s var(--ll-ease), transform 0.25s var(--ll-ease), box-shadow 0.25s var(--ll-ease);
}
.pg-card:hover {
    border-color: var(--ll-green);
    transform: translateY(-4px);
    box-shadow: 0 14px 28px rgba(18, 60, 50, 0.08);
}

.pg-card__visual {
    aspect-ratio: 16 / 9;
    background: var(--ll-soft-green);
    padding: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.25s var(--ll-ease);
}
.pg-card:hover .pg-card__visual { background: var(--ll-white); }
/* SVG is scaled up and cropped by the overflow:hidden box above so the
   art fills the compact frame with no letterboxing/margin around it. */
.pg-card__visual img { width: 100%; height: 100%; object-fit: cover; }

.pg-card__body {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.pg-card__title {
    font-family: var(--ll-font-display);
    font-weight: 600;
    font-size: 17px;
    color: var(--ll-forest);
}

.pg-card__tagline {
    font-family: var(--ll-font-display);
    font-weight: 600;
    font-size: 14px;
    color: var(--ll-forest);
}

.pg-card__desc {
    font-size: 13px;
    line-height: 1.5;
    color: var(--ll-forest-soft);
}

.pg-card__meta {
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--ll-font-display);
    font-weight: 600;
    font-size: 12.5px;
    color: var(--ll-forest-faint);
}

.pg-card__link {
    margin-top: 6px;
    align-self: flex-start;
    padding: 4px 4px;
}

@media (prefers-reduced-motion: reduce) {
    .pg-card { transition: none !important; }
    .pg-card:hover { transform: none !important; }
}

@media (max-width: 560px) {
    .pg-programs__grid { grid-template-columns: 1fr; }
}