/* Executive Alignment — layout only. Type lives in css/common.css. */

.ea-phases {
    display: grid;
    gap: var(--space-lg);
    margin: var(--space-xl) 0 0;
    list-style: none;
}

.ea-phase {
    padding: var(--space-lg);
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--space-sm);
}

.ea-visible {
    display: grid;
    gap: var(--space-md);
    margin: var(--space-xl) 0 0;
    list-style: none;
}

.ea-visible li {
    padding: var(--space-md);
    background: var(--color-bg-white);
    border: 1px solid var(--color-border);
    border-radius: var(--space-sm);
}

.ea-signature {
    margin-top: var(--space-2xl);
}

@media (min-width: 768px) {
    .ea-phases {
        grid-template-columns: 1fr 1fr;
    }

    .ea-visible {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

/* #319 color pass: white sections become maroon bands, same treatment as
   .band in css/common.css. Cards inside keep their own background and dark
   text, so every text rule below skips anything inside a card. */

.page-executive-alignment .section:not(.section-alt) {
    background: var(--color-primary);
    color: var(--color-on-primary);
}

:is(.page-executive-alignment .section:not(.section-alt)) :is(.card, .ea-visible li) {
    color: var(--color-text);
}

:is(.page-executive-alignment .section:not(.section-alt)) :is(h1, h2, h3, h4, h5, h6, .kicker):not(:is(.card, .ea-visible li) *) {
    color: var(--color-on-primary);
}

:is(.page-executive-alignment .section:not(.section-alt)) :is(p, li, .text-muted):not(:is(.card, .ea-visible li), :is(.card, .ea-visible li) *) {
    color: var(--color-on-primary-muted);
}

:is(.page-executive-alignment .section:not(.section-alt)) p a:not(.btn, .h-btn, :is(.card, .ea-visible li) *) {
    color: inherit;
    text-decoration: underline;
}

:is(.page-executive-alignment .section:not(.section-alt)) p a:not(.btn, .h-btn, :is(.card, .ea-visible li) *):hover {
    color: var(--color-on-primary);
}

:is(.page-executive-alignment .section:not(.section-alt)) .btn-primary:not(:is(.card, .ea-visible li) *) {
    background: var(--color-bg-white);
    color: var(--color-primary);
}

:is(.page-executive-alignment .section:not(.section-alt)) .btn-primary:not(:is(.card, .ea-visible li) *):hover {
    background: var(--color-bg-luxury);
    color: var(--color-primary);
}

/* #319 v4: dark sections rotate through maroon, black, and gray (client asked
   for maroon, black, and gray). Text treatment is the same as the maroon block above. */

/* Who This Program Serves (the section with the cards): black */
.page-executive-alignment .section:not(.section-alt):has(.card) {
    background: var(--color-dark);
}

/* Begin the Conversation (the section with the signature line): charcoal gray */
.page-executive-alignment .section:not(.section-alt):has(.ea-signature) {
    background: var(--color-slate);
}