/* ==========================================================================
   Israeli Car — Layout
   Header, hero, grids, footer.
   ========================================================================== */

/* --- Header (solid, opaque — not translucent) ------------------------------ */
.site-header {
    position: fixed;
    top: 0; inset-inline: 0;
    z-index: 100;
    background: var(--ic-bg);
    border-bottom: 1px solid var(--ic-border);
}
.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: var(--ic-sp-3);
}
.brand {
    display: flex;
    align-items: center;
    gap: var(--ic-sp-2);
    font-family: var(--ic-font-display);
    font-size: var(--ic-fs-lg);
    font-weight: 800;
    color: var(--ic-ink);
}
.brand__mark {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}
.brand__accent { color: var(--ic-blue-500); }
.brand__logo-img {
    height: 36px;
    width: auto;
    max-width: 220px;
    object-fit: contain;
}

.site-nav {
    display: flex;
    align-items: center;
    gap: var(--ic-sp-5);
}
.site-nav__links {
    display: flex;
    align-items: center;
    gap: var(--ic-sp-4);
}
.site-nav a:not(.btn),
.site-nav button.nav-link {
    font-size: var(--ic-fs-sm);
    color: var(--ic-grey-300);
    transition: color var(--ic-dur) var(--ic-ease);
}
.site-nav a:not(.btn):hover,
.site-nav button.nav-link:hover { color: var(--ic-ink); }
.nav-link.is-active {
    color: var(--ic-blue-600);
    font-weight: 700;
}

/* Mobile nav toggle — hidden on desktop, bare icon only (no box/border) */
.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--ic-ink);
}
.nav-toggle svg { width: 24px; height: 24px; }
.nav-toggle__icon--close { display: none; }

@media (max-width: 860px) {
    .nav-toggle { display: inline-flex; }

    .site-nav {
        position: fixed;
        top: 65px;
        inset-inline: 0;
        bottom: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--ic-bg);
        padding: var(--ic-sp-4);
        transform: translateY(-8px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity var(--ic-dur) var(--ic-ease), transform var(--ic-dur) var(--ic-ease), visibility var(--ic-dur);
        overflow-y: auto;
    }
    .site-nav.is-open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
    }
    .site-nav__links {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }
    .site-nav__links a:not(.btn),
    .site-nav__links button.nav-link {
        display: block;
        width: 100%;
        text-align: start;
        padding: var(--ic-sp-3) var(--ic-sp-1);
        border-bottom: 1px solid var(--ic-border);
        font-size: var(--ic-fs-base);
    }
    .site-nav > .btn {
        margin-top: var(--ic-sp-4);
    }
    .nav-toggle.is-active .nav-toggle__icon--open { display: none; }
    .nav-toggle.is-active .nav-toggle__icon--close { display: inline-flex; }
}

/* --- Hero: asymmetric text + photo-block, not a centered banner ----------- */
.hero {
    position: relative;
    padding-block: calc(var(--ic-sp-8) + 3rem) var(--ic-sp-7);
    background: var(--ic-bg);
}

/* Full-bleed background-image hero — photo fills the whole section behind a
   dark blue-tinted overlay (same tint family as .cta-band) so white text sits
   on it cleanly at any crop. Homepage default. */
.hero--bg {
    overflow: clip;
    padding-block: calc(var(--ic-sp-8) + 4.5rem) calc(var(--ic-sp-8) + 2rem);
    color: var(--ic-white);
}
.hero__bg-img {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.hero__bg-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
}
.hero__bg-img::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(0deg, rgba(6,17,36,0.62), rgba(6,17,36,0.62)),
        radial-gradient(60% 90% at 50% 40%, rgba(10,49,97,0.3), transparent 70%);
    background-blend-mode: multiply, normal;
}
.hero--bg .hero__inner--bg {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.hero--bg .hero__content { max-width: 780px; }
.hero--bg .hero__title { color: var(--ic-white); max-width: none; }
.hero--bg .hero__title .hl { color: var(--ic-gold-400, var(--ic-gold-500)); }
.hero--bg .hero__lead { color: rgba(255,255,255,0.86); max-width: 560px; margin-inline: auto; }
.hero--bg .hero__actions { justify-content: center; }
.hero--bg .btn--outline-dark {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.4);
    color: var(--ic-white);
}
.hero--bg .btn--outline-dark:hover {
    background: rgba(255,255,255,0.18);
    border-color: var(--ic-white);
    color: var(--ic-white);
}

@media (max-width: 760px) {
    .hero--bg { padding-block: calc(var(--ic-sp-7) + 3rem) calc(var(--ic-sp-6) + 1rem); }
    .hero__bg-img img { object-position: center 42%; }
}

/* Compact text-only hero (no photo-block) — used on inner pages like /technologies */
.hero--compact {
    padding-block: calc(var(--ic-sp-7) + 2.5rem) var(--ic-sp-5);
    overflow: clip;
}
.hero--compact::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(45% 70% at 85% 0%, var(--ic-blue-50), transparent 65%),
        linear-gradient(var(--ic-border) 1px, transparent 1px),
        linear-gradient(90deg, var(--ic-border) 1px, transparent 1px);
    background-size: auto, 48px 48px, 48px 48px;
    mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
    opacity: 0.7;
    pointer-events: none;
}
.hero--compact .container { position: relative; }
.hero__inner {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--ic-sp-7);
    align-items: center;
}
.hero__title {
    font-size: clamp(2.5rem, 5vw, 4.25rem);
    letter-spacing: -0.02em;
    margin-block: var(--ic-sp-4);
    max-width: 620px;
}
.hero__title .hl { color: var(--ic-blue-500); }
.hero__title--sm { font-size: var(--ic-fs-4xl); }
.hero__lead {
    font-size: var(--ic-fs-lg);
    color: var(--ic-grey-300);
    max-width: 480px;
    margin-bottom: var(--ic-sp-5);
}
.hero__actions {
    display: flex;
    gap: var(--ic-sp-3);
    flex-wrap: wrap;
}
.hero__photo .photo-block__frame { aspect-ratio: 16 / 9; }

@media (max-width: 900px) {
    .hero__inner { grid-template-columns: 1fr; }
    .hero__photo { order: -1; }
}

/* Wide-screen tweak — homepage background hero only (.hero--bg). Every other
   .hero (all the .hero--compact inner-page banners) keeps the standard
   --ic-container width untouched at every breakpoint. */
@media (min-width: 1200px) {
    .hero--bg .container { max-width: none; padding-inline: var(--ic-sp-7); }
    .hero--bg .hero__title { font-size: clamp(3rem, 4.2vw, 4.75rem); }
}

/* --- Sections & grids ----------------------------------------------------- */
section { padding-block: var(--ic-sp-8); }
.section--raised { background: var(--ic-bg-raised); }
.section--tight-top { padding-top: var(--ic-sp-4); }

@media (max-width: 640px) {
    section { padding-block: var(--ic-sp-6); }
    .hero { padding-block: calc(var(--ic-sp-7) + 2rem) var(--ic-sp-6); }
}

.grid {
    display: grid;
    gap: var(--ic-sp-4);
}
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

@media (max-width: 900px) {
    .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
}

/* --- Split section: photo-block one side, content the other --------------- */
.split {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: var(--ic-sp-7);
    align-items: center;
}
.split--reverse { grid-template-columns: 1.15fr 0.85fr; }
.split--reverse .split__photo { order: 2; }
@media (max-width: 900px) {
    .split, .split--reverse { grid-template-columns: 1fr; }
    .split--reverse .split__photo { order: -1; }
}

.stat-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--ic-bg-card);
    border: 1px solid var(--ic-border);
    border-radius: var(--ic-radius-lg);
}
.stat-strip .stat:not(:last-child) { border-inline-end: 1px solid var(--ic-border); }
@media (max-width: 720px) {
    .stat-strip { grid-template-columns: repeat(2, 1fr); }
    .stat-strip .stat:nth-child(2n) { border-inline-end: 0; }
    .stat-strip .stat:not(:nth-last-child(-n+2)) { border-bottom: 1px solid var(--ic-border); }
}

/* --- CTA band: real community photo behind a dark blue-tinted overlay.
   Single source of truth — every .cta-band on the site gets this by default. */
.cta-band {
    position: relative;
    text-align: center;
    padding: var(--ic-sp-8) var(--ic-sp-5);
    border-radius: var(--ic-radius-lg);
    background:
        linear-gradient(155deg, rgba(10,38,71,0.88), rgba(24,104,201,0.82)),
        url('/assets/images/cta-crowd.jpg') center / cover no-repeat;
    overflow: clip;
}
.cta-band h2, .cta-band p, .cta-band__actions, .cta-band__icon { position: relative; }
.cta-band h2 { font-size: var(--ic-fs-2xl); margin-bottom: var(--ic-sp-2); color: var(--ic-white); }
.cta-band p { color: rgba(255,255,255,0.85); max-width: 480px; margin-inline: auto; margin-bottom: var(--ic-sp-5); }
.cta-band__actions { display: flex; gap: var(--ic-sp-3); justify-content: center; flex-wrap: wrap; }
.cta-band__icon { margin-inline: auto; margin-bottom: var(--ic-sp-4); }
.cta-band .card__icon { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.22); }
.cta-band .card__icon svg { color: var(--ic-white); }
.cta-band .btn--primary { background: var(--ic-white); color: var(--ic-blue-600); box-shadow: none; }
.cta-band .btn--primary:hover { background: var(--ic-blue-50); }
.cta-band .btn--outline { background: transparent; border-color: rgba(255,255,255,0.4); color: var(--ic-white); }
.cta-band .btn--outline:hover { background: rgba(255,255,255,0.12); border-color: var(--ic-white); color: var(--ic-white); }

@media (max-width: 640px) {
    .cta-band { padding: var(--ic-sp-6) var(--ic-sp-4); }
    .cta-band__actions .btn { width: 100%; }
}

/* --- Footer (multi-column, matches header brand) --------------------------- */
.site-footer {
    background: var(--ic-bg-raised);
    border-top: 1px solid var(--ic-border);
    padding-block: var(--ic-sp-7) var(--ic-sp-5);
}
.site-footer__top {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    gap: var(--ic-sp-6);
    margin-bottom: var(--ic-sp-6);
}
.site-footer__brand .brand { margin-bottom: var(--ic-sp-3); }
.site-footer__tagline {
    font-size: var(--ic-fs-sm);
    color: var(--ic-grey-300);
    max-width: 320px;
    margin-bottom: var(--ic-sp-4);
}
.site-footer__col {
    display: flex;
    flex-direction: column;
    gap: var(--ic-sp-2);
}
.site-footer__heading {
    font-size: var(--ic-fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ic-grey-500);
    margin-bottom: var(--ic-sp-1);
}
.site-footer__col a,
.site-footer__col button.nav-link {
    display: block;
    width: 100%;
    text-align: start;
    font-size: var(--ic-fs-sm);
    color: var(--ic-grey-300);
    transition: color var(--ic-dur) var(--ic-ease);
}
.site-footer__col a:hover,
.site-footer__col button.nav-link:hover { color: var(--ic-blue-600); }

.site-footer .rule { margin-bottom: var(--ic-sp-4); }

.site-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--ic-sp-1) var(--ic-sp-4);
    color: var(--ic-grey-500);
    font-size: var(--ic-fs-xs);
    text-align: center;
}
.site-footer__legal {
    display: flex;
    gap: var(--ic-sp-3);
}
.site-footer__legal a { color: var(--ic-grey-500); }
.site-footer__legal a:hover { color: var(--ic-ink); }

@media (max-width: 860px) {
    .site-footer__top {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--ic-sp-5);
    }
    .site-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 500px) {
    .site-footer__top { grid-template-columns: 1fr; }
}

/* --- Placeholder page (coming-soon sections) -------------------------------- */
.placeholder-page {
    padding-block: calc(var(--ic-sp-8) + 3rem) var(--ic-sp-8);
    min-height: 60vh;
    display: flex;
    align-items: center;
}
.placeholder-page__inner {
    max-width: 620px;
    text-align: center;
    margin-inline: auto;
}
.placeholder-page__title {
    font-size: var(--ic-fs-4xl);
    margin-block: var(--ic-sp-4);
}
.placeholder-page__lead {
    font-size: var(--ic-fs-lg);
    color: var(--ic-grey-300);
    margin-bottom: var(--ic-sp-5);
}
.placeholder-page__actions {
    justify-content: center;
}