/* ═══════════════════════════════════════════════════════════
   Collab Pitch Generator — Page-specific layout CSS
   Shared components (buttons, forms, cards, badges, modals)
   come from global CSS. This file handles ONLY layout unique
   to this tool page.
   ═══════════════════════════════════════════════════════════ */

/* ── Sections (Your Channel / Target Creator / Details) ── */
.cpg-section {
    margin-bottom: var(--space-6);
    padding: var(--space-5);
    background: var(--color-gray-50, #f8fafc);
    border-radius: var(--radius-lg, 12px);
    border: 1px solid var(--color-gray-200, #e2e8f0);
}

.cpg-section__title {
    font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
    font-size: var(--font-size-base, 1rem);
    font-weight: 600;
    color: var(--color-gray-800, #1e293b);
    margin: 0 0 var(--space-4) 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.cpg-section__title i {
    color: var(--color-primary, #4F46E5);
    font-size: var(--font-size-sm, 0.875rem);
}

.cpg-section__grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-4);
}

.cpg-section__grid--two {
    grid-template-columns: 1fr 1fr;
}

/* ── Optional label ── */
.cpg-optional {
    font-weight: 400;
    color: var(--color-gray-400, #94a3b8);
    font-size: var(--font-size-sm, 0.875rem);
}

/* ── Generate button wrapper ── */
.cpg-generate-wrap {
    text-align: center;
    padding: var(--space-6) 0 var(--space-2);
}

.cpg-generate-hint {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-gray-500, #64748b);
    margin-top: var(--space-2);
}

.cpg-generate-hint a {
    color: var(--color-primary, #4F46E5);
    font-weight: 500;
}

/* ── Results Section ── */
.cpg-results {
    margin-top: var(--space-8);
}

.cpg-results__title {
    font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
    font-size: var(--font-size-xl, 1.25rem);
    font-weight: 700;
    color: var(--color-gray-900, #0f172a);
    margin: 0 0 var(--space-6) 0;
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.cpg-results__title i {
    color: var(--color-primary, #4F46E5);
}

/* ── Pitch Cards ── */
.cpg-pitch-card {
    background: var(--color-white, #fff);
    border: 1px solid var(--color-gray-200, #e2e8f0);
    border-radius: var(--radius-lg, 12px);
    padding: var(--space-5);
    margin-bottom: var(--space-4);
    transition: all 150ms ease;
}

.cpg-pitch-card:hover {
    box-shadow: var(--shadow-sm);
    border-color: var(--color-gray-300, #cbd5e1);
}

.cpg-pitch-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-3);
}

.cpg-pitch-label {
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full, 9999px);
}

.cpg-pitch-label--idea {
    background: var(--color-primary-50, #eef2ff);
    color: var(--color-primary, #4F46E5);
}

.cpg-pitch-label--appreciate {
    background: var(--color-warning-50, #fef3c7);
    color: var(--color-warning-900, #92400e);
}

.cpg-pitch-label--growth {
    background: var(--color-success-50, #d1fae5);
    color: var(--color-success-900, #065f46);
}

.cpg-pitch-card__subject {
    font-size: var(--font-size-base, 1rem);
    color: var(--color-gray-800, #1e293b);
    padding: var(--space-3);
    background: var(--color-gray-50, #f8fafc);
    border-radius: var(--radius-md, 8px);
    margin-bottom: var(--space-3);
    border-left: 3px solid var(--color-primary, #4F46E5);
}

.cpg-pitch-card__body {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-gray-700, #334155);
    line-height: 1.7;
    white-space: pre-line;
}

/* ── Follow-Up Section ── */
.cpg-followup {
    margin-top: var(--space-6);
    padding: var(--space-5);
    background: var(--color-gray-50, #f8fafc);
    border-radius: var(--radius-lg, 12px);
    border: 1px solid var(--color-gray-200, #e2e8f0);
}

.cpg-followup__title {
    font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
    font-size: var(--font-size-base, 1rem);
    font-weight: 600;
    color: var(--color-gray-800, #1e293b);
    margin: 0 0 var(--space-3) 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.cpg-followup__title i {
    color: var(--color-primary, #4F46E5);
}

.cpg-followup__body {
    position: relative;
}

.cpg-followup__body p {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-gray-700, #334155);
    line-height: 1.7;
    margin: 0 0 var(--space-3) 0;
}

/* ── Why This Works Section ── */
.cpg-why {
    margin-top: var(--space-6);
    padding: var(--space-5);
    background: var(--color-white, #fff);
    border-radius: var(--radius-lg, 12px);
    border: 1px solid var(--color-primary, #4F46E5);
    border-width: 1px 1px 1px 4px;
}

.cpg-why__title {
    font-family: var(--font-display, 'Plus Jakarta Sans', sans-serif);
    font-size: var(--font-size-base, 1rem);
    font-weight: 600;
    color: var(--color-gray-800, #1e293b);
    margin: 0 0 var(--space-4) 0;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.cpg-why__title i {
    color: var(--color-primary, #4F46E5);
}

.cpg-why__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
}

.cpg-why__item {
    padding: var(--space-3);
    background: var(--color-gray-50, #f8fafc);
    border-radius: var(--radius-md, 8px);
}

.cpg-why__item strong {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-primary, #4F46E5);
    display: block;
    margin-bottom: var(--space-1);
}

.cpg-why__item p {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-gray-600, #475569);
    line-height: 1.5;
    margin: 0;
}

/* ── Inline CTA ── */
.cpg-inline-cta {
    margin-top: var(--space-6);
    padding: var(--space-5);
    background: var(--color-primary-50, #eef2ff);
    border-radius: var(--radius-lg, 12px);
    text-align: center;
}

.cpg-inline-cta p {
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-gray-700, #334155);
    margin: 0 0 var(--space-3) 0;
}

.cpg-inline-cta i.fa-users {
    color: var(--color-primary, #4F46E5);
}

/* ── Copy button success state ── */
.cpg-copy-btn--success {
    color: var(--color-success, #059669) !important;
    border-color: var(--color-success, #059669) !important;
}

/* ── Inline error ── */
.cpg-inline-error {
    margin-top: var(--space-3);
    text-align: left;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE — Mobile (max-width: 767px)
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
    .cpg-section {
        padding: var(--space-4);
        margin-bottom: var(--space-4);
    }

    .cpg-section__grid {
        grid-template-columns: 1fr;
        gap: var(--space-3);
    }

    .cpg-pitch-card {
        padding: var(--space-4);
    }

    .cpg-pitch-card__header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-2);
    }

    .cpg-pitch-card__header .button {
        align-self: flex-end;
    }

    .cpg-why__grid {
        grid-template-columns: 1fr;
    }

    .cpg-followup {
        padding: var(--space-4);
    }

    .cpg-why {
        padding: var(--space-4);
    }

    .cpg-inline-cta {
        padding: var(--space-4);
    }
}