/* =========================================================
   Studio Huevo
   Components
   ========================================================= */


/* =========================================================
   01. LAB Label
   ========================================================= */

.lab-label {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-bottom: var(--space-4);

    color: var(--color-primary);

    font-family: var(--font-mono);

    font-size: 0.75rem;
    font-weight: 700;

    letter-spacing: 0.12em;

    text-transform: uppercase;
}

.lab-label::before {
    content: "";

    display: block;

    width: 24px;
    height: 1px;

    background: var(--color-accent);
}


/* =========================================================
   02. Buttons
   ========================================================= */

.button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 52px;

    padding:
        0
        28px;

    border: 1px solid transparent;

    border-radius: var(--radius-sm);

    font-size: 0.95rem;
    font-weight: 700;

    white-space: nowrap;

    transition:
        background-color var(--transition-fast),
        color var(--transition-fast),
        border-color var(--transition-fast),
        transform var(--transition-fast),
        box-shadow var(--transition-fast);
}

.button:hover {
    transform: translateY(-2px);
}

.button--primary {
    background: var(--color-primary);

    color: var(--color-white);

    box-shadow:
        0 6px 16px rgba(37, 99, 235, 0.18);
}

.button--primary:hover {
    background: var(--color-primary-dark);

    box-shadow:
        0 8px 20px rgba(37, 99, 235, 0.24);
}

.button--secondary {
    background: var(--color-white);

    border-color: var(--color-border);

    color: var(--color-text);
}

.button--secondary:hover {
    border-color: var(--color-primary);

    color: var(--color-primary);
}

.button--outline {
    background: transparent;

    border-color: var(--color-primary);

    color: var(--color-primary);
}

.button--outline:hover {
    background: var(--color-primary);

    color: var(--color-white);
}


/* =========================================================
   03. Arrow Link
   ========================================================= */

.link-arrow {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    color: var(--color-primary);

    font-weight: 700;
}

.link-arrow::after {
    content: "→";

    transition:
        transform var(--transition-fast);
}

.link-arrow:hover::after {
    transform: translateX(5px);
}


/* =========================================================
   04. Card
   ========================================================= */

.card {
    padding: var(--space-8);

    background: var(--color-white);

    border: 1px solid var(--color-border-light);

    border-radius: var(--radius-md);

    box-shadow: var(--shadow-sm);

    transition:
        transform var(--transition-normal),
        box-shadow var(--transition-normal),
        border-color var(--transition-normal);
}

.card:hover {
    transform: translateY(-4px);

    border-color: #cbd8e8;

    box-shadow: var(--shadow-md);
}


/* =========================================================
   05. Technical Card
   ========================================================= */

.tech-card {
    position: relative;

    padding: var(--space-8);

    background: var(--color-white);

    border: 1px solid var(--color-border);

    overflow: hidden;
}

.tech-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 4px;
    height: 100%;

    background:
        linear-gradient(
            to bottom,
            var(--color-primary),
            var(--color-accent)
        );
}

.tech-card__number {
    margin-bottom: var(--space-6);

    color: var(--color-text-light);

    font-family: var(--font-mono);

    font-size: 0.8rem;
}

.tech-card__title {
    margin-bottom: var(--space-3);

    font-size: 1.4rem;

    line-height: 1.4;
}

.tech-card__description {
    margin-bottom: 0;

    color: var(--color-text-secondary);
}


/* =========================================================
   06. LAB Line
   ========================================================= */

.lab-line {
    position: relative;

    padding-left: var(--space-6);
}

.lab-line::before {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;
    left: 0;

    width: 2px;

    background:
        linear-gradient(
            to bottom,
            var(--color-primary),
            var(--color-accent)
        );
}


/* =========================================================
   07. Index Number
   ========================================================= */

.index-number {
    display: block;

    margin-bottom: var(--space-4);

    color: var(--color-text-light);

    font-family: var(--font-mono);

    font-size: 0.8rem;
    font-weight: 700;

    letter-spacing: 0.1em;
}


/* =========================================================
   08. CTA
   ========================================================= */

.cta-box {
    position: relative;

    padding:
        var(--space-12)
        var(--space-10);

    background: var(--color-bg-blue);

    border: 1px solid var(--color-border);

    overflow: hidden;
}

.cta-box::after {
    content: "";

    position: absolute;

    right: -80px;
    bottom: -80px;

    width: 220px;
    height: 220px;

    border: 1px solid rgba(37, 99, 235, 0.12);

    border-radius: 50%;
}

.cta-box__content {
    position: relative;
    z-index: 2;

    max-width: 760px;
}


/* =========================================================
   09. Badge
   ========================================================= */

.badge {
    display: inline-flex;

    align-items: center;

    min-height: 28px;

    padding:
        0
        10px;

    background: var(--color-bg-blue);

    border: 1px solid var(--color-border);

    border-radius: 999px;

    color: var(--color-primary);

    font-family: var(--font-mono);

    font-size: 0.7rem;
    font-weight: 700;

    letter-spacing: 0.08em;
}


/* =========================================================
   10. Code Block
   ========================================================= */

.code-block {
    padding: var(--space-6);

    background: #0f172a;

    border: 1px solid #1e293b;

    border-radius: var(--radius-md);

    color: #e2e8f0;

    font-family: var(--font-mono);

    font-size: 0.85rem;

    line-height: 1.8;

    overflow-x: auto;
}


/* =========================================================
   11. Divider
   ========================================================= */

.divider {
    width: 100%;
    height: 1px;

    margin:
        var(--space-10)
        0;

    background: var(--color-border-light);
}