/**
 * Žluté Stránky — API pro firmy (teaser)
 *
 * Follows the gamifikace vocabulary: full-bleed alternating sections, a playful
 * hero, generous spacing. Uses main.css tokens throughout.
 */

/* ==================== HERO ==================== */

.api-hero {
    position: relative;
    padding-top: calc(var(--header-height, 72px) + 3.5rem);
    padding-bottom: 3rem;
    background: linear-gradient(135deg, #1e293b, #334155);
    color: var(--color-white);
    overflow: hidden;
}

.api-hero-inner { max-width: 44rem; position: relative; z-index: 1; }

/* "Not built yet" has to be visible before anything else, so the badge is the
   first element and carries a live-ish pulse rather than looking like a label. */
.api-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.875rem;
    margin-bottom: 1.25rem;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--color-yellow);
}

.api-hero-badge-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-yellow);
    animation: api-pulse 2s ease-in-out infinite;
}

@keyframes api-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.4; transform: scale(0.8); }
}

.api-hero-title {
    font-size: clamp(1.875rem, 5vw, 3.25rem);
    font-weight: 900;
    line-height: 1.1;
    letter-spacing: -0.03em;
    margin-bottom: 1rem;
}

.api-hero-title .highlight { color: var(--color-yellow); }

.api-hero-lead {
    font-size: 1.0625rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.75);
    max-width: 38rem;
}

.api-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.75rem;
}

/* Ghost button on a dark hero needs its own treatment — the site's version
   assumes a light background. */
.api-hero .btn-ghost {
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--color-white);
}

.api-hero .btn-ghost:hover { background: rgba(255, 255, 255, 0.1); }

/* ---- The pipe illustration ---- */

.api-hero-pipe {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: 2.5rem;
    max-width: 30rem;
}

.api-pipe-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
}

.api-pipe-icon {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-lg);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 1.5rem;
}

.api-pipe-label { font-size: 0.6875rem; color: rgba(255, 255, 255, 0.6); }

.api-pipe-line {
    position: relative;
    flex: 1;
    height: 2px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 2px;
}

/* Packets travelling both ways — the point of the page is that it is a two-way
   connection, not a feed. */
.api-pipe-packet {
    position: absolute;
    top: -3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-yellow);
    animation: api-travel 3s linear infinite;
}

.api-pipe-packet--2 { animation-delay: 1s; }
.api-pipe-packet--3 { animation-delay: 2s; animation-direction: reverse; }

@keyframes api-travel {
    from { left: 0; opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    to   { left: 100%; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .api-hero-badge-dot,
    .api-pipe-packet { animation: none; }
    .api-pipe-packet { left: 45%; }
}

/* ==================== SECTIONS ==================== */

.api-section { padding: 3.5rem 0; }

.api-section-dark {
    background: linear-gradient(135deg, #1e293b, #334155);
    color: var(--color-white);
}

.api-section-dark .api-section-lead { color: rgba(255, 255, 255, 0.7); }

.api-section-yellow { background: var(--color-yellow-light); }

.api-section-title {
    font-size: clamp(1.5rem, 3.5vw, 2.125rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    margin-bottom: 0.625rem;
}

.api-section-lead {
    font-size: 1rem;
    line-height: 1.65;
    color: var(--color-gray-600);
    max-width: 44rem;
    margin-bottom: 2rem;
}

/* ==================== PAIN ==================== */

.api-pain-grid,
.api-who-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
}

.api-pain,
.api-who {
    padding: 1.5rem;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-xl);
}

.api-pain-icon,
.api-who-icon,
.api-shape-icon {
    font-size: 1.75rem;
    display: block;
    margin-bottom: 0.625rem;
}

.api-pain h3,
.api-who h3,
.api-shape h3 {
    font-size: 1.0625rem;
    font-weight: 800;
    margin-bottom: 0.4375rem;
}

.api-pain p,
.api-who p,
.api-shape p {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--color-gray-600);
}

/* ==================== CAPABILITIES ==================== */

.api-cap-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.25rem;
}

.api-cap {
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-xl);
}

/* Direction label: which way the data flows is the thing people get wrong about
   integrations, so it leads each card rather than hiding in the prose. */
.api-cap-dir {
    font-size: 0.6875rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-yellow);
    margin-bottom: 0.625rem;
}

.api-cap-icon { font-size: 1.75rem; display: block; margin-bottom: 0.5rem; }

.api-cap h3 {
    font-size: 1.0625rem;
    font-weight: 800;
    margin-bottom: 0.4375rem;
    color: var(--color-white);
}

.api-cap p {
    font-size: 0.9375rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.7);
}

/* ==================== CODE SKETCH ==================== */

/* Caption above the block, not below: it has to be read BEFORE the code, because
   the whole point is that this is not documentation. */
.api-code-caption {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    max-width: 44rem;
    margin-bottom: 0.875rem;
    padding: 0.75rem 1rem;
    background: var(--color-warning-light, #FEF3C7);
    border-left: 3px solid var(--color-warning, #F59E0B);
    border-radius: 0 8px 8px 0;
    font-size: 0.8125rem;
    line-height: 1.55;
    color: #92400E;
}

.api-code {
    max-width: 44rem;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #0f172a;
    border: 1px solid #1e293b;
    margin-bottom: 2rem;
}

.api-code-head {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.625rem 0.875rem;
    background: #1e293b;
}

.api-code-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
}

.api-code-title {
    margin-left: 0.5rem;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

.api-code-body {
    margin: 0;
    padding: 1.125rem;
    overflow-x: auto;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 0.8125rem;
    line-height: 1.65;
    color: #e2e8f0;
}

/* ==================== SHAPE ==================== */

.api-shape-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.api-shape {
    padding: 1.25rem;
    background: var(--color-gray-50);
    border-radius: var(--radius-lg);
}

.api-shape h3 { font-size: 0.9375rem; }
.api-shape p { font-size: 0.875rem; }

.api-who-note {
    margin-top: 1.5rem;
    font-size: 0.9375rem;
    line-height: 1.6;
    color: var(--color-gray-700);
    max-width: 44rem;
}

/* ==================== EARLY ACCESS ==================== */

.api-early {
    padding: 3.5rem 0;
    background: var(--color-yellow);
    color: var(--color-black);
}

.api-early-inner { max-width: 42rem; }

.api-early-badge {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    margin-bottom: 0.875rem;
    border-radius: var(--radius-full);
    background: var(--color-black);
    color: var(--color-yellow);
    font-size: 0.75rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.api-early-title {
    font-size: clamp(1.5rem, 3.5vw, 2.125rem);
    font-weight: 900;
    letter-spacing: -0.02em;
    margin-bottom: 0.75rem;
}

.api-early-lead {
    font-size: 1rem;
    line-height: 1.7;
    color: var(--color-gray-800, #262626);
    margin-bottom: 1.5rem;
}

.api-early-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Inverted, as on the ceník closing band: a yellow primary button would vanish
   on a yellow field. */
.api-early .btn-primary {
    background: var(--color-black);
    color: var(--color-yellow);
    border-color: var(--color-black);
}

.api-early .btn-primary:hover { background: var(--color-gray-900, #171717); }

.api-early .btn-secondary {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.2);
    color: var(--color-black);
}

.api-early-note {
    margin-top: 1.25rem;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: rgba(0, 0, 0, 0.6);
}

/* ==================== MEANWHILE ==================== */

.api-meanwhile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

.api-meanwhile {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1.25rem;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    color: var(--color-gray-900);
    text-decoration: none;
    transition: border-color var(--transition-fast), transform var(--transition-fast);
}

.api-meanwhile:hover { border-color: var(--color-black); transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
    .api-meanwhile:hover { transform: none; }
}

.api-meanwhile-title { font-size: 0.9375rem; font-weight: 700; }
.api-meanwhile-desc { font-size: 0.8125rem; color: var(--color-gray-500); }