/* Round17 — Customization — section-build-it
   Figma: desktop 1023:13337 | mobile 1246:11278 (tablet shares the mobile frame)
   Layout: heading + 2 CTAs (left) | build card 1106:7046 (right) = purple image + floating code window + language tabs.
   Rule: single breakpoint, @media (max-width: 1024px) covers tablet + mobile; default = desktop. */

/* DM Mono is only used for the code sample (Figma: code 1105:6942). Not loaded anywhere else in the theme,
   so it is self-hosted here (latin subset) instead of a render-blocking Google Fonts @import. */
@font-face {
    font-family: 'DM Mono';
    src: url('../../../../../assets/Round17/customization/build-it/dm-mono-400.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

.r17-build-it {
    display: flex;
    justify-content: center;
    padding: var(--var-140, 140px) var(--section-horizontal-padding, 32px);
    background: var(--color-1st-bg);
    font-family: var(--font-body, 'DM Sans', sans-serif);
}

.r17-build-it * {
    box-sizing: border-box;
}

.r17-build-it__content {
    flex: 1 0 0;
    min-width: 0;
    max-width: var(--container-max, 1400px);
    display: flex;
    align-items: center;
    gap: var(--section-gap, 80px);
}

/* ---------- Headings (1023:13339) ---------- */
.r17-build-it__headings {
    flex: 1 0 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--var-28, 28px);
}

.r17-build-it__copy {
    display: flex;
    flex-direction: column;
    gap: var(--var-16, 16px);
    width: 100%;
}

.r17-build-it__title {
    margin: 0;
    max-width: 800px;
    font-weight: 600;
    font-size: var(--fs-h2, 48px);
    line-height: var(--lh-heading, 1.15);
    color: var(--color-1st-fg);
}

.r17-build-it__desc {
    margin: 0;
    max-width: 600px;
    font-weight: 400;
    font-size: var(--fs-body, 16px);
    line-height: var(--lh-body, 1.4);
    color: var(--color-2nd-fg);
}

/* ---------- Buttons (Figma: button/text) ---------- */
.r17-build-it__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--var-12, 12px);
}

.r17-build-it__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--var-6, 6px);
    /* stroke inside the padding (Figma button/text = 42px high): subtract the 1px border */
    padding: calc(var(--var-14, 14px) - var(--var-1)) calc(var(--var-28, 28px) - var(--var-1));
    border: 1px solid var(--color-stroke);
    border-radius: var(--radius-pill, 999px);
    background: var(--color-2nd-btn-bg);
    color: var(--color-2nd-btn-fg);
    font-family: inherit;
    font-weight: 500;
    font-size: var(--fs-label-md, 14px);
    line-height: var(--lh-label, 1);
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: opacity 0.2s ease;
}

.r17-build-it__btn--primary {
    border-color: var(--color-1st-btn-bg);
    background: var(--color-1st-btn-bg);
    color: var(--color-1st-btn-fg);
}

.r17-build-it__btn:hover {
    opacity: 0.85;
}

.r17-build-it__btn:focus-visible {
    outline: 2px solid var(--color-2nd-brd);
    outline-offset: 2px;
}

/* ---------- Build card (1106:7046) ---------- */
.r17-build-it__card {
    flex: 1 0 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--var-16, 16px);
    overflow: hidden;
}

/* Image stage (1105:6931): wave image fills it, code window floats in the centre */
.r17-build-it__stage {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: var(--r17-build-it-stage-h);
    padding: 0 var(--var-12, 12px);
    overflow: hidden;
}

.r17-build-it__bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    pointer-events: none;
}

/* Code window (1105:6932) */
.r17-build-it__code {
    position: relative;
    flex: 1 0 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    height: var(--r17-build-it-code-h);
    max-width: var(--r17-build-it-code-max-w);
    border: 1px solid var(--color-glass-brd);
    border-radius: var(--var-12);
    background: var(--color-code-bg);
    -webkit-backdrop-filter: blur(var(--var-8));
    backdrop-filter: blur(var(--var-8));
    overflow: hidden;
}

.r17-build-it__code-head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--var-6, 6px);
    padding: var(--var-20, 20px);
    border-bottom: 1px solid var(--color-glass-brd);
}

.r17-build-it__code-title {
    display: flex;
    align-items: center;
    gap: var(--var-6, 6px);
    min-width: 0;
}

.r17-build-it__code-dots {
    display: block;
    flex: 0 0 auto;
    width: 29px;
    height: 7px;
}

.r17-build-it__code-label {
    font-weight: 500;
    font-size: var(--fs-label-md, 14px);
    line-height: var(--lh-label, 1);
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--color-2nd-fg);
}

.r17-build-it__copy-btn {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: var(--var-6, 6px);
}

.r17-build-it__copy-text {
    font-weight: 500;
    font-size: var(--fs-label-md, 14px);
    line-height: var(--lh-label, 1);
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--color-3rd-btn-fg);
}

.r17-build-it__copy-icon {
    display: block;
    width: 12px;
    height: 12px;
}

.r17-build-it__code-body {
    position: relative;
    flex: 1 0 0;
    min-height: 0;
    padding: var(--var-20, 20px);
    overflow: hidden;
}

.r17-build-it__pre {
    margin: 0;
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: var(--fs-label-xs);
    line-height: var(--lh-code);
    color: var(--color-1st-fg);
    white-space: pre-wrap;
    word-break: break-word;
}

.r17-build-it__pre code {
    font: inherit;
}

.r17-build-it__tok--kw {
    color: var(--color-2nd-brd);
}

.r17-build-it__tok--fn {
    color: var(--color-code-cyan);
}

.r17-build-it__tok--cls {
    color: var(--color-code-yellow);
}

.r17-build-it__tok--var {
    color: var(--color-1st-brd);
}

.r17-build-it__tok--str {
    color: var(--color-code-green);
}

.r17-build-it__tok--cmt {
    color: var(--color-disabled-fg);
}

.r17-build-it__tok--plain {
    color: var(--color-1st-fg);
}

/* Fake scrollbar thumb (1105:6957) */
.r17-build-it__scroller {
    position: absolute;
    top: var(--var-6, 6px);
    right: var(--var-6, 6px);
    width: var(--var-4, 4px);
    height: var(--r17-build-it-scroller-h);
    border-radius: var(--var-2, 2px);
    background: var(--color-stroke);
}

/* Language tabs (1105:6943) */
.r17-build-it__tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--var-8, 8px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.r17-build-it__tab {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--var-8, 8px) var(--var-16, 16px);
    border-radius: var(--radius-pill, 999px);
    font-weight: 500;
    font-size: var(--fs-label-md, 14px);
    line-height: var(--lh-label, 1);
    text-align: center;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--color-2nd-fg);
}

.r17-build-it__tab--active {
    background: var(--color-3rd-bg);
    color: var(--color-1st-fg);
}

/* ---------- Responsive (<=1024 = tablet + mobile, single breakpoint) ---------- */
@media (max-width: 1024px) {
    /* Figma mobile 1246:11279: heading block on top, card full width below */
    .r17-build-it__content {
        flex-direction: column;
        align-items: stretch;
        gap: var(--section-gap, 40px);
    }

    .r17-build-it__headings {
        flex: none;
        width: 100%;
    }

    .r17-build-it__card {
        flex: none;
        width: 100%;
    }
}