/* ===== APIs / Integrations — Base (mobile-first) ===== */
:root {
    --bg: #0c0f0d;
    --panel: #121614;
    --ink: #e8ffee;
    --muted: #a7c4b6;
    --acc: #25e066;
    --acc2: #0bbf52;
    --border: #162019;
    --shadow: rgba(0, 0, 0, .35);
    --ringA: #7ef6a1;
    --ringB: #3de0ff;
}

/* Section container */
.apis-section {
    position: relative;
    max-width: 1200px;
    margin-inline: auto;
    /* safe gutters + notch-aware padding */
    padding: clamp(32px, 6vw, 72px) max(16px, 4vw, env(safe-area-inset-left)) clamp(32px, 6vw, 72px) max(16px, 4vw, env(safe-area-inset-right));
    border-top: 1px solid var(--border);
    background: transparent;
    box-sizing: border-box;
}

/* Header */
.section-head {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1rem;
}

.section-title {
    display: flex;
    gap: .5rem;
    align-items: center;
    color: var(--ink);
    font-weight: 900;
    font-size: 1.35rem;
}

.section-emoji {
    font-size: 1.2em;
}

/* Chips */
.chips {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

.chip {
    background: rgba(255, 255, 255, .04);
    color: var(--muted);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: .35rem .7rem;
    font: inherit;
    font-size: .85rem;
    cursor: pointer;
    transition: all .2s ease;
}

.chip:hover,
.chip.is-active {
    background: rgba(37, 224, 102, .12);
    border-color: var(--acc);
    color: var(--ink);
}

/* Grid with built-in gutters */
.project-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: clamp(14px, 2.2vw, 28px);
    padding-inline: clamp(10px, 2vw, 20px);
    box-sizing: border-box;
    word-break: break-word;
    margin-bottom: 20px;
}

/* Card — transparent “project-style” */
.project-card {
    grid-column: span 12;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: rgba(255, 255, 255, .02);
    border: 1px solid rgba(255, 255, 255, .06);
    border-radius: 16px;
    padding: clamp(14px, 2vw, 20px);
    backdrop-filter: blur(10px);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .04), 0 10px 22px rgba(0, 0, 0, .4);
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.project-card:hover {
    transform: translateY(-3px);
    border-color: rgba(126, 246, 161, .28);
    box-shadow: 0 0 0 1px rgba(126, 246, 161, .15), 0 18px 30px rgba(0, 0, 0, .55);
}

/* Card content */
.card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .4rem;
}

.card-title {
    color: var(--ink);
    font-weight: 800;
    font-size: 1.02rem;
    margin: 0;
    line-height: 1.2;
}

.badge {
    background: rgba(255, 255, 255, .04);
    color: var(--acc);
    border: 1px solid rgba(37, 224, 102, .3);
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 800;
    padding: .24rem .55rem;
}

.badge.-full {
    color: var(--acc2);
    border-color: rgba(11, 191, 82, .45);
}

.card-desc {
    color: var(--muted);
    font-size: .92rem;
    line-height: 1.55;
    margin: .3rem 0 .9rem;
}

.card-actions {
    margin-top: auto;
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

/* Buttons */
.btn {
    display: inline-block;
    padding: .45rem .9rem;
    font-weight: 800;
    font-size: .88rem;
    color: #051006;
    background: linear-gradient(90deg, var(--ringA), var(--ringB));
    border: none;
    border-radius: 8px;
    text-decoration: none;
    transition: transform .2s ease, box-shadow .2s ease;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(0, 0, 0, .4);
}

/* Empty state */
.empty-state {
    margin-top: 1rem;
    color: var(--muted);
    background: rgba(255, 255, 255, .03);
    border: 1px dashed var(--border);
    border-radius: 10px;
    padding: .8rem 1rem;
    text-align: center;
    font-size: .9rem;
}

/* Reveal */
.reveal {
    opacity: 0;
    transform: translateY(10px);
}

.reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* === ALIGN TITLE, CHIPS, AND CARDS === */
/* 1) define a single horizontal gutter for the whole section */
.apis-section {
    --apis-gutter: clamp(24px, 6vw, 60px);
    /* left/right padding to use everywhere */
    padding-left: var(--apis-gutter);
    padding-right: var(--apis-gutter);
}

/* 2) give the header the same gutter (so Title + Chips line up with cards) */
.apis-section .section-head {
    margin-left: calc(-1 * var(--apis-gutter));
    /* reset any internal spacing */
    margin-right: calc(-1 * var(--apis-gutter));
    padding-left: var(--apis-gutter);
    padding-right: var(--apis-gutter);
}

/* 3) remove extra padding from the grid so it doesn't shift further right */
.apis-section .project-grid {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0;
    margin-right: 0;
}






/* Pending/disabled style */
.btn.-pending {
    background: rgba(255, 255, 255, .06);
    color: var(--muted);
    border: 1px dashed var(--border);
    cursor: not-allowed;
    pointer-events: none;
    /* make it non-clickable */
    box-shadow: none;
}

.btn.-pending:hover {
    transform: none;
    box-shadow: none;
    border-color: rgba(126, 246, 161, .25);
}

.btn.-pending i {
    margin-right: .45rem;
    font-size: .9em;
    vertical-align: -1px;
}




/* Lock the "Client-side" badge to the top-right of each card */
.project-card {
    position: relative;
}

.project-card .card-head {
    justify-content: flex-start;
    /* title stays left */
    align-items: flex-start;
    padding-right: 96px;
    /* space so the title doesn't collide with badge */
}

.project-card .badge {
    position: absolute;
    top: clamp(10px, 1.6vw, 14px);
    right: clamp(10px, 1.6vw, 14px);
    font-size: .72rem;
    /* small + consistent */
    line-height: 1;
    padding: .22rem .52rem;
    white-space: nowrap;
    /* keeps pill on one line */
    border-radius: 999px;
}

/* keep Fullstack color variant but same size/placement */
.project-card .badge.-full {
    position: absolute;
    top: clamp(10px, 1.6vw, 14px);
    right: clamp(10px, 1.6vw, 14px);
}