/* ── Tech Stack Section ──────────────────────────────────────────────────────── */

.home-tech-section {
    padding: 60px 0 80px;
    background:
        radial-gradient(ellipse at 10% 30%, rgba(6, 182, 212, 0.04) 0%, transparent 50%),
        radial-gradient(ellipse at 90% 70%, rgba(99, 102, 241, 0.04) 0%, transparent 50%);
}

/* ── Section header ──────────────────────────────────────────────────────────── */

.home-tech-header {
    text-align: center;
    margin-bottom: 2rem;
}

.home-tech-subtitle {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-muted, #64748b);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-top: 0.4rem;
}

/* ── Carousel: arrow | track | arrow ─────────────────────────────────────────── */

.tech-carousel {
    display: flex;
    align-items: center;
    gap: 12px;
    /* Force LTR so arrows stay in fixed positions in every language.
       In Arabic (RTL) the ← stays on the left and → on the right,
       which matches the scroll direction of the card row. */
    direction: ltr;
}

/* ── Track wrapper: clips the scrolling row ──────────────────────────────────── */

.tech-track-wrapper {
    flex: 1;
    overflow: hidden;
    /* Vertical padding gives room for the card scale(1.07) hover so the
       top/bottom borders are never clipped by overflow:hidden */
    padding: 10px 0;
    min-width: 0; /* prevent flex blowout */
}

/* ── Sliding track (the element we transform) ────────────────────────────────── */

.tech-track {
    /* No overflow here — only the wrapper clips horizontally */
}

/* ── Single-row flex list ────────────────────────────────────────────────────── */

.tech-row {
    display: flex;
    flex-wrap: nowrap;
    gap: 14px;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

/* ── Tech card ───────────────────────────────────────────────────────────────── */

.tech-card {
    flex: 0 0 140px;
    width: 140px;
    background: rgba(6, 182, 212, 0.06);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 14px;
    padding: 1.5rem 0.75rem 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    cursor: default;
    position: relative;
}

.tech-card:hover {
    transform: scale(1.07);
    box-shadow: 0 6px 20px rgba(6, 182, 212, 0.22);
    border-color: #06b6d4;
    z-index: 1;
}

/* ── Card icon ───────────────────────────────────────────────────────────────── */

.tech-card-icon {
    width: 62px;
    height: 62px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #fff;
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.tech-card:hover .tech-card-icon {
    transform: scale(1.08);
}

.tech-card-icon img {
    width: 36px;
    height: 36px;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

/* ── Category icon colours ───────────────────────────────────────────────────── */

.tc-languages  { background: linear-gradient(135deg, #06b6d4, #3b82f6); box-shadow: 0 3px 8px rgba(6,182,212,0.25); }
.tc-embedded   { background: linear-gradient(135deg, #8b5cf6, #6366f1); box-shadow: 0 3px 8px rgba(139,92,246,0.25); }
.tc-protocols  { background: linear-gradient(135deg, #f59e0b, #f97316); box-shadow: 0 3px 8px rgba(245,158,11,0.25); }
.tc-automotive { background: linear-gradient(135deg, #ef4444, #f97316); box-shadow: 0 3px 8px rgba(239,68,68,0.25); }
.tc-pcb        { background: linear-gradient(135deg, #ec4899, #a855f7); box-shadow: 0 3px 8px rgba(236,72,153,0.25); }
.tc-tools      { background: linear-gradient(135deg, #10b981, #06b6d4); box-shadow: 0 3px 8px rgba(16,185,129,0.25); }
.tc-web        { background: linear-gradient(135deg, #3b82f6, #6366f1); box-shadow: 0 3px 8px rgba(59,130,246,0.25); }

/* ── Card label ──────────────────────────────────────────────────────────────── */

.tech-card-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-color, #1e293b);
    line-height: 1.3;
    text-align: center;
    /* Keep LTR text direction regardless of page language */
    direction: ltr;
    unicode-bidi: embed;
}

/* ── Navigation arrow buttons ─────────────────────────────────────────────────
   Buttons are normal flex items (NOT absolutely positioned), so they sit
   cleanly outside the card row at all times.
──────────────────────────────────────────────────────────────────────────────── */

.tech-nav-btn {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1.5px solid #06b6d4;
    background: rgba(6, 182, 212, 0.1);
    color: #06b6d4;
    font-size: 16px;
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
    padding: 0;
    line-height: 1;
    user-select: none;
}

.tech-nav-btn:hover {
    background: rgba(6, 182, 212, 0.25);
    box-shadow: 0 0 0 4px rgba(6, 182, 212, 0.15);
    transform: scale(1.1);
}

/* Infinite loop — no disabled state needed, both arrows always active */

/* ── Card reveal animation ───────────────────────────────────────────────────── */

@keyframes techReveal {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: no-preference) {
    .home-tech-section.is-visible .home-tech-header {
        animation: techReveal 0.55s ease 0s backwards;
    }
    .home-tech-section.is-visible .tech-carousel {
        animation: techReveal 0.55s ease 0.12s backwards;
    }
}

/* ── Responsive ──────────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
    .home-tech-section { padding: 48px 0 64px; }
}

@media (max-width: 768px) {
    /* Drop the dual radial-gradient background on mobile — it paints the full
       section width and shows up as jank on first scroll into the carousel.
       The cards stand fine on a plain background.
       The dark-mode selector is needed to beat the higher-specificity
       [data-theme="dark"] .home-tech-section rule further down. */
    .home-tech-section,
    [data-theme="dark"] .home-tech-section {
        padding: 36px 0 52px;
        background: none;
    }
    /* The carousel only moves when the user taps a nav arrow, which is rare on
       mobile. Keeping a permanent compositor layer costs memory for nothing. */
    .tech-row { will-change: auto; }
    /* Containment lets the browser skip layout + paint for cards that are
       clipped by overflow:hidden, which matters because the carousel clones
       cards on each side — without containment the browser may still paint
       all ~60 cards (original + clones) even though only 3–4 are visible. */
    .tech-track-wrapper { contain: content; }
    /* filter: brightness(0) invert(1) is the most expensive per-element
       paint operation on this page (~60 images). On mobile we remove it
       and rely on the gradient icon background alone — the small icon
       size (26-30px) makes the loss of the white overlay imperceptible
       at phone pixel densities.  If white icons are needed, serve white
       SVGs from the server instead of relying on a CSS filter. */
    .tech-card-icon img { filter: none; }
    .tech-card {
        flex: 0 0 115px;
        width: 115px;
        padding: 1.25rem 0.5rem 1rem;
    }
    .tech-card-icon {
        width: 52px;
        height: 52px;
        font-size: 23px;
        border-radius: 12px;
    }
    .tech-card-icon img { width: 30px; height: 30px; }
    .tech-carousel { gap: 8px; }
    .tech-nav-btn { width: 36px; height: 36px; font-size: 15px; }
}

@media (max-width: 480px) {
    .tech-card {
        flex: 0 0 100px;
        width: 100px;
        padding: 1rem 0.4rem 0.875rem;
    }
    .tech-card-icon {
        width: 46px;
        height: 46px;
        font-size: 20px;
        border-radius: 11px;
    }
    .tech-card-icon img { width: 26px; height: 26px; }
    .tech-nav-btn { width: 32px; height: 32px; font-size: 13px; }
    .tech-carousel { gap: 6px; }
}

/* ── Dark mode ───────────────────────────────────────────────────────────────── */

[data-theme="dark"] .home-tech-section {
    background:
        radial-gradient(ellipse at 10% 30%, rgba(6, 182, 212, 0.06) 0%, transparent 50%),
        radial-gradient(ellipse at 90% 70%, rgba(99, 102, 241, 0.06) 0%, transparent 50%);
}

[data-theme="dark"] .tech-card {
    background: rgba(6, 182, 212, 0.05);
    border-color: var(--border-color, #334155);
}

[data-theme="dark"] .tech-card:hover {
    border-color: #06b6d4;
    box-shadow: 0 6px 20px rgba(6, 182, 212, 0.15);
}

[data-theme="dark"] .tech-card-label { color: #e2e8f0; }

[data-theme="dark"] .tech-nav-btn {
    background: rgba(6, 182, 212, 0.12);
    border-color: #06b6d4;
    color: #06b6d4;
}

[data-theme="dark"] .tech-nav-btn:hover {
    background: rgba(6, 182, 212, 0.25);
}