/*
 * Component: fc-about-thankyou
 * File:      fc-about-thankyou.css
 * BEM prefix: fc-ty__
 * Theme:      FelixChess dark — #0a0c0a bg / #aaff00 lime accent
 *
 * Clientlib category: felixchess.about.thankyou
 * Fonts: Playfair Display + Source Sans 3 — loaded once in base page template
 */

/* ── Section wrapper ──────────────────────────────────────────────────────── */

.fc-ty {
    background-color: #0a0c0a;
    color: #e8e8e0;
    font-family: 'Source Sans 3', 'Segoe UI', system-ui, sans-serif;
    padding: 5rem 3.5rem;
    box-sizing: border-box;
}

/* ── Overline ─────────────────────────────────────────────────────────────── */

.fc-ty__overline {
    font-size: 0.6875rem;           /* 11px */
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #aaff00;
    margin: 0 0 1.25rem;
    padding: 0;
    text-align: center;
}

/* ── Headline ─────────────────────────────────────────────────────────────── */

.fc-ty__headline {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 900;
    line-height: 1.1;
    color: #f5f5ee;
    margin: 0 0 3rem;
    text-align: center;
}

.fc-ty__headline-accent {
    color: #aaff00;
    font-style: normal;
}

/* ── Intro paragraph ─────────────────────────────────────────────────────── */

.fc-ty__intro {
    margin: 0 0 3rem;
    text-align: center;
}

.fc-ty__intro-body {
    font-size: 0.9375rem;           /* 15px */
    font-weight: 300;
    line-height: 1.8;
    color: #7a8070;
    margin: 0 0 0.75rem;
}

.fc-ty__intro-thanks {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1rem;
    font-weight: 700;
    font-style: italic;
    color: #aaff00;
    margin: 0;
}

/* ── Four-panel grid ──────────────────────────────────────────────────────── */

.fc-ty__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

/* ── Card shared styles ───────────────────────────────────────────────────── */

.fc-ty__card {
    background-color: #0f120f;
    border: 1px solid #1a201a;
    border-radius: 6px;
    padding: 1.75rem;
    box-sizing: border-box;
}

.fc-ty__card-label {
    font-size: 0.625rem;            /* 10px */
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #4a5048;
    margin: 0 0 1.1rem;
}

/* ── Panel 1 — Data Sources list ─────────────────────────────────────────── */

.fc-ty__source-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.fc-ty__source-list li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: #7a8075;
    line-height: 1.6;
    padding: 0.3rem 0;
    border-bottom: 1px solid #141814;
}

.fc-ty__source-list li:last-child {
    border-bottom: none;
}

.fc-ty__source-list li::before {
    content: '↗';
    font-size: 0.75rem;
    color: #aaff00;
    opacity: 0.45;
    flex-shrink: 0;
}

/* ── Panel 2 — Contributors list ─────────────────────────────────────────── */

.fc-ty__contrib-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.fc-ty__contrib-list li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.35rem 0;
    border-bottom: 1px solid #141814;
}

.fc-ty__contrib-list li:last-child {
    border-bottom: none;
}

.fc-ty__contrib-name {
    font-size: 0.9rem;
    color: #7a8075;
    line-height: 1.6;
}

.fc-ty__contrib-role {
    font-size: 0.6875rem;           /* 11px */
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #2e332e;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Placeholder state — slightly more muted while no real names exist */
.fc-ty__contrib-list--placeholder .fc-ty__contrib-name {
    color: #3a3e38;
    font-style: italic;
}

/* ── Panel 3 — Library tag cloud ─────────────────────────────────────────── */

.fc-ty__tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.fc-ty__tag {
    font-size: 0.75rem;
    font-family: 'Source Sans 3', 'SF Mono', 'Fira Code', monospace;
    color: #7a8075;
    background-color: #141814;
    border: 1px solid #1e241e;
    border-radius: 3px;
    padding: 0.2rem 0.6rem;
    line-height: 1.6;
    white-space: nowrap;
}

/* ── Panel 4 — Platform text ─────────────────────────────────────────────── */

.fc-ty__platform-text {
    font-size: 0.9rem;
    font-weight: 300;
    line-height: 1.8;
    color: #7a8075;
    margin: 0;
}

.fc-ty__platform-text strong {
    color: #b8c0b0;
    font-weight: 600;
}

/* ── History link strip ───────────────────────────────────────────────────── */

.fc-ty__history-strip {
    background-color: #0d100d;
    border-left: 2px solid #aaff00;
    border-radius: 0;
    padding: 1.5rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.fc-ty__history-text {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: clamp(0.875rem, 1.75vw, 1.0625rem);
    font-weight: 700;
    font-style: italic;
    line-height: 1.5;
    color: #c8d0c0;
}

.fc-ty__history-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;           /* 13px */
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #aaff00;
    text-decoration: none;
    border-bottom: 1px solid rgba(170, 255, 0, 0.25);
    padding-bottom: 2px;
    white-space: nowrap;
    flex-shrink: 0;
    transition: border-color 0.2s ease;
}

.fc-ty__history-link:hover,
.fc-ty__history-link:focus-visible {
    border-color: #aaff00;
    outline: none;
}

.fc-ty__history-arrow {
    display: inline-block;
    transition: transform 0.2s ease;
}

.fc-ty__history-link:hover .fc-ty__history-arrow {
    transform: translateX(4px);
}

/* ── Responsive — narrow viewports ───────────────────────────────────────── */

@media (max-width: 720px) {
    .fc-ty {
        padding: 3.5rem 1.5rem;
    }

    .fc-ty__grid {
        grid-template-columns: 1fr;
    }

    .fc-ty__history-strip {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
}