/* ─── ax-patches.css — additive CSS for pages added after ax-home.css ─── */
/* Loaded by ax.blade.php after ax-home.css. Never overrides existing rules. */

/* ══════════════════════════════════════════════
   AI DATA PAGE — dark section background
   (.dark-block has white-coloured text so needs a dark bg)
══════════════════════════════════════════════ */
.dark-block {
    background: #0a1628;
}
.dark-block .head h2 {
    color: #fff;
    font-size: clamp(28px, 5vw, 48px);
    line-height: 1.1;
}
.dark-block .head p  { color: rgba(255,255,255,.55); }

/* ══════════════════════════════════════════════
   NAV: AI Data link highlight
══════════════════════════════════════════════ */
.ai-nav-link {
    position: relative;
    color: var(--teal-bright) !important;
    background: rgba(45,212,191,.09);
    background: color-mix(in srgb, var(--teal-bright) 9%, transparent);
    border-radius: 8px;
    padding-inline: 12px;
}
.ai-nav-link:hover {
    background: rgba(45,212,191,.16) !important;
    background: color-mix(in srgb, var(--teal-bright) 16%, transparent) !important;
}
.ai-nav-link.current::before { background: var(--teal-bright); }

/* ══════════════════════════════════════════════
   SERVICES PAGE: AI Data card
══════════════════════════════════════════════ */
.service-ai {
    background: var(--ground);
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--teal-bright) 6%, var(--ground)),
        var(--ground));
    border: 1px solid rgba(45,212,191,.22);
    border: 1px solid color-mix(in srgb, var(--teal-bright) 22%, var(--line));
    border-radius: 16px;
    padding: 32px 28px;
    display: flex;
    flex-direction: column;
    gap: 0;
}
.service-ai-inner { display: flex; flex-direction: column; gap: 10px; }
.service-ai-tag {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    background: var(--teal-bright);
    color: #04201e;
    width: fit-content;
    margin-bottom: 4px;
}
.service-ai h2 { color: var(--ink); }
.service-ai a {
    color: var(--teal);
    font-weight: 600;
    font-size: 14px;
    margin-top: 4px;
}
.service-ai a:hover { color: var(--teal-bright); }

/* ══════════════════════════════════════════════
   AI DATA PAGE — KPI bar
══════════════════════════════════════════════ */
.results-kpis {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border: 1px solid var(--line);
    border-radius: 16px;
    overflow: hidden;
}
.results-kpi {
    flex: 1 1 140px;
    padding: 20px 24px;
    border-inline-end: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.results-kpi:last-child { border-inline-end: none; }
.results-kpi b     { font-size: clamp(22px, 3vw, 32px); font-weight: 800; color: var(--teal); line-height: 1; }
.results-kpi span  { font-size: 13px; font-weight: 600; color: var(--ink); margin-top: 4px; }
.results-kpi small { font-size: 12px; color: var(--ink-soft); }
@media (max-width: 700px) {
    .results-kpi { border-inline-end: none; border-bottom: 1px solid var(--line); }
    .results-kpi:last-child { border-bottom: none; }
}

/* ══════════════════════════════════════════════
   AI DATA PAGE — 4 service cards grid
══════════════════════════════════════════════ */
.ai-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
@media (max-width: 700px) { .ai-grid { grid-template-columns: 1fr; } }

.ai-card {
    background: var(--ground);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.ai-card h3 { font-size: 18px; font-weight: 700; }
.ai-card p  { font-size: 14px; color: var(--ink-soft); line-height: 1.6; flex: 1; }

.ai-icon {
    width: 40px; height: 40px;
    color: var(--teal);
    flex-shrink: 0;
}
.ai-icon svg { width: 100%; height: 100%; }

.ai-badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    background: rgba(45,212,191,.12);
    background: color-mix(in srgb, var(--teal-bright) 12%, transparent);
    color: var(--teal);
    border: 1px solid rgba(45,212,191,.22);
    border: 1px solid color-mix(in srgb, var(--teal-bright) 22%, transparent);
    width: fit-content;
    margin-top: auto;
}

/* colour accents per card */
.ai-c1 { border-top: 3px solid #6C63FF; }
.ai-c2 { border-top: 3px solid var(--teal-bright); }
.ai-c3 { border-top: 3px solid #F5A623; }
.ai-c4 { border-top: 3px solid #00C56F; }

/* ══════════════════════════════════════════════
   AI DATA PAGE — Why section advantage list
══════════════════════════════════════════════ */
.adv {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 32px 48px;
    margin-top: 40px;
}
@media (max-width: 700px) { .adv { grid-template-columns: 1fr; gap: 24px; } }
.adv h3 { font-size: 17px; font-weight: 700; margin-bottom: 6px; }
.adv p  { font-size: 14px; line-height: 1.65; }

/* ══════════════════════════════════════════════
   AI DATA PAGE — Case studies grid
══════════════════════════════════════════════ */
.cs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 8px;
}
@media (max-width: 900px) { .cs-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .cs-grid { grid-template-columns: 1fr; } }

.cs-card {
    background: var(--ground);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cs-tag {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--teal);
}
.cs-card h3 { font-size: 16px; font-weight: 700; }
.cs-card p  { font-size: 13px; color: var(--ink-soft); line-height: 1.6; flex: 1; }

.cs-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--line);
}
.cs-stat { display: flex; flex-direction: column; gap: 2px; }
.cs-stat b  { font-size: 15px; font-weight: 700; color: var(--teal); }
.cs-stat span { font-size: 11px; color: var(--ink-soft); }

/* ══════════════════════════════════════════════
   AI DATA PAGE — Steps list (How to start)
   NOTE: .steps is already defined in ax-home.css — no override needed.
   The ai-data page uses the same <ol class="steps"> structure.
══════════════════════════════════════════════ */

/* ══════════════════════════════════════════════
   ACADEMY NAV: Logo image variant
══════════════════════════════════════════════ */
.academy-logo-img {
    height: 44px;
    width: auto;
    display: block;
}
@media (max-width: 600px) { .academy-logo-img { height: 36px; } }

/* ══════════════════════════════════════════════
   FIX: Floating WhatsApp / LinkedIn on mobile
   Move to bottom-right so they don't overlap text
══════════════════════════════════════════════ */
@media (max-width: 768px) {
    .float-contact {
        left: auto !important;
        right: 14px !important;
        bottom: 82px !important; /* clear the chat widget bubble (~70px tall) */
        flex-direction: row !important;
        gap: 10px !important;
    }
    .float-btn {
        width: 46px !important;
        height: 46px !important;
        min-width: 0 !important;
        padding: 0 !important;
        border-radius: 50% !important;
        justify-content: center !important;
    }
    .float-btn span { display: none !important; }
    .float-btn svg { width: 22px !important; height: 22px !important; }
}

/* ══════════════════════════════════════════════
   CAREERS PAGE: Why join section
══════════════════════════════════════════════ */
.careers-why {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-top: 32px;
}
@media (max-width: 900px) { .careers-why { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .careers-why { grid-template-columns: 1fr; } }

.careers-why-card {
    background: var(--ground);
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 24px 22px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.careers-why-card .cwc-icon {
    width: 36px; height: 36px;
    color: var(--teal);
    margin-bottom: 4px;
}
.careers-why-card .cwc-icon svg { width: 100%; height: 100%; }
.careers-why-card h3 { font-size: 16px; font-weight: 700; }
.careers-why-card p  { font-size: 13px; color: var(--ink-soft); line-height: 1.6; }

/* ══════════════════════════════════════════════
   SERVICES PAGE: service title class
══════════════════════════════════════════════ */
.svc-title { font-size: 21px !important; font-weight: 700 !important; }

/* ══════════════════════════════════════════════
   ABOUT PAGE: stats strip
══════════════════════════════════════════════ */
.about-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    margin-top: 48px;
}
.about-stat {
    flex: 1 1 160px;
    padding: 28px 24px;
    border-inline-end: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.about-stat:last-child { border-inline-end: none; }
.about-stat b { font-size: clamp(28px, 4vw, 40px); font-weight: 800; color: var(--teal); line-height: 1; }
.about-stat span { font-size: 13px; color: var(--ink-soft); line-height: 1.4; margin-top: 4px; }
@media (max-width: 600px) {
    .about-stat { border-inline-end: none; border-bottom: 1px solid var(--line); }
    .about-stat:last-child { border-bottom: none; }
}

/* ══════════════════════════════════════════════
   AI DATA PAGE: dedicated contact CTA
══════════════════════════════════════════════ */
.ai-contact-cta {
    background: var(--ground);
    background: linear-gradient(135deg,
        color-mix(in srgb, #6C63FF 8%, var(--ground)),
        color-mix(in srgb, var(--teal-bright) 6%, var(--ground)));
    border: 1px solid rgba(45,212,191,.2);
    border: 1px solid color-mix(in srgb, var(--teal-bright) 20%, var(--line));
    border-radius: 20px;
    padding: 48px 40px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 32px;
    align-items: center;
}
@media (max-width: 700px) {
    .ai-contact-cta { grid-template-columns: 1fr; padding: 32px 24px; }
    .ai-contact-cta .ai-cta-actions { flex-direction: column; }
}
.ai-contact-cta h2 { font-size: clamp(22px, 3vw, 32px); font-weight: 800; margin-bottom: 10px; }
.ai-contact-cta p  { font-size: 15px; color: var(--ink-soft); max-width: 520px; line-height: 1.6; }
.ai-cta-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.ai-cta-lang-tags {
    display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px;
}
.ai-cta-lang-tag {
    padding: 4px 12px; border-radius: 20px; font-size: 12px; font-weight: 600;
    background: rgba(45,212,191,.12);
    background: color-mix(in srgb, var(--teal-bright) 12%, transparent);
    color: var(--teal);
    border: 1px solid rgba(45,212,191,.2);
    border: 1px solid color-mix(in srgb, var(--teal-bright) 20%, transparent);
}

/* ══════════════════════════════════════════════
   HOME GLOBAL: markets strip
══════════════════════════════════════════════ */
.markets-strip {
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    background: var(--ground);
}
.markets-strip .wrap {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 24px;
}
.markets-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-soft);
    text-transform: uppercase;
    letter-spacing: .06em;
    white-space: nowrap;
}
.markets-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 16px;
}
.markets-list span {
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.he-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #1a3a5c;
    color: #e8d5a3;
    font-size: 11px;
    font-weight: 700;
    font-family: 'IBM Plex Sans Hebrew', sans-serif;
    padding: 1px 6px;
    border-radius: 4px;
    letter-spacing: .02em;
    line-height: 1.4;
}
@media (max-width: 600px) {
    .markets-strip .wrap { flex-direction: column; align-items: flex-start; }
}

/* ══════════════════════════════════════════════
   BLOG LISTING: post card title + excerpt
══════════════════════════════════════════════ */
.post-h {
    font-size: 19px;
    line-height: 1.25;
    font-weight: 700;
}
.post-excerpt {
    font-size: 14px;
    line-height: 1.55;
    color: var(--ink-soft);
    margin-top: 6px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Featured first blog post */
.posts .post-featured {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: 1.3fr 1fr;
    gap: 36px;
    align-items: start;
}
.posts .post-featured img {
    height: 300px !important;
    object-fit: cover;
    border-radius: 14px;
    aspect-ratio: auto !important;
}
.post-featured-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 8px;
}
.post-featured-body .post-h {
    font-size: clamp(20px, 2.5vw, 26px);
    line-height: 1.2;
}
.post-featured-body .post-excerpt {
    -webkit-line-clamp: 4;
    font-size: 15px;
}
@media (max-width: 700px) {
    .posts .post-featured { grid-template-columns: 1fr !important; }
    .posts .post-featured img { height: 200px !important; }
}