/* ============================================
   PROGRAM IDEAS
   One card per topic, listing the programs it is built from.

   Enqueued from the block's own render.php, so the stylesheet only loads on
   pages that actually use the block. Class names are all pi- prefixed: the
   generic ones this design wants (.tag, .pill, .prog) are either taken already
   or too broad to claim.
   ============================================ */
.program-ideas {
    background: var(--bg);
    border-radius: 12px;
    padding: 40px 32px;
    margin: 40px 0;
}

.pi-head {
    text-align: center;
    max-width: 640px;
    margin: 0 auto 32px;
}

.pi-eyebrow {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 10px;
}

.pi-head h2 {
    font-size: 1.9rem;
    font-weight: 600;
    font-style: italic;
    margin-bottom: 10px;
}

.pi-head p {
    font-size: 0.95rem;
    color: var(--muted);
    margin: 0;
}

/* One column by default. The breakpoints are picked against the width
   .content-body actually leaves (1100px capped, minus its padding), not against
   the viewport in the abstract. */
.pi-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
}

@media (min-width: 700px) {
    .pi-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
    .pi-grid { grid-template-columns: repeat(3, 1fr); }
}

.pi-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pi-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(44, 35, 33, 0.09);
}

/* The rule is keyed to the family of the topic's first program, so the mix is
   legible before a word is read. An untyped program leaves it taupe. */
.pi-rule {
    height: 5px;
    background: var(--accent);
}

.pi-card[data-lead="plays"] .pi-rule { background: var(--primary); }
.pi-card[data-lead="truth"] .pi-rule { background: var(--secondary); }
.pi-card[data-lead="songs"] .pi-rule { background: var(--accent); }

.pi-card__body {
    padding: 22px 22px 18px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.pi-card__title {
    font-size: 1.5rem;
    font-weight: 600;
    font-style: italic;
    margin-bottom: 6px;
}

.pi-card__intro {
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 14px;
}

.pi-meta {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 18px;
    padding: 0;
}

.pi-pill {
    display: inline-block;
    font-family: 'Nunito', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    padding: 3px 10px;
    border-radius: 12px;
    background: rgba(168, 144, 128, 0.16);
    color: var(--text);
    white-space: nowrap;
}

.pi-pill--time {
    background: var(--text);
    color: var(--bg);
}

.pi-programs {
    list-style: none;
    margin: 0;
    padding: 0;
    border-top: 1px solid var(--border);
}

.pi-program {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 0 11px 18px;
    border-bottom: 1px solid var(--border);
    position: relative;
}

.pi-program:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.pi-program::before {
    content: '';
    position: absolute;
    left: 0;
    top: 18px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--accent);
}

.pi-program--truth::before { background: var(--secondary); }
.pi-program--plays::before { background: var(--primary); }
.pi-program--songs::before { background: var(--accent); }

.pi-program__name {
    font-family: 'Nunito', sans-serif;
    font-weight: 600;
    font-size: 0.92rem;
    line-height: 1.4;
    color: var(--secondary-dk);
}

a.pi-program__name {
    border-bottom: 1px solid transparent;
}

a.pi-program__name:hover {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.pi-program--plays a.pi-program__name {
    color: var(--primary-dk);
}

.pi-program__family {
    display: block;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--muted);
    margin-top: 3px;
}

.pi-program__min {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--muted);
    white-space: nowrap;
    padding-top: 2px;
}

/* A program that exists but is not published. It stays in the list — dropping it
   would quietly shorten the topic — but it is never a link. */
.pi-program.is-unpublished::before {
    background: transparent;
    border: 1px dashed var(--muted);
    top: 17px;
}

.pi-program.is-unpublished .pi-program__name {
    color: var(--muted);
    font-weight: 400;
    font-style: italic;
}

@media (max-width: 600px) {
    .program-ideas {
        padding: 28px 20px;
    }
}