/* =====================================================================
   AS Group — Home-only layout refinements
   The shared visual system (palette, type, buttons, header, footer, cards) lives in theme.css.
   Loaded on the English and Arabic Home pages only.
   ===================================================================== */

/* ---------- Hero ---------- */
.hero { padding: 200px 0 150px; background-position: center 42%; }
.hero__overlay {
    background:
        linear-gradient(90deg, rgba(21, 23, 22, .88) 0%, rgba(21, 23, 22, .6) 45%, rgba(21, 23, 22, .25) 100%),
        linear-gradient(180deg, rgba(21, 23, 22, .45) 0%, rgba(21, 23, 22, 0) 30%, rgba(21, 23, 22, .35) 100%);
}
.hero__content { max-width: 600px; }
.hero__title {
    margin: 6px 0 24px; color: var(--ivory);
    font-size: var(--fs-display); font-weight: 600; line-height: var(--lh-tight); letter-spacing: -0.02em;
}
.hero__text { max-width: 500px; margin-bottom: 32px; font-size: var(--fs-lead); line-height: 1.75; color: rgba(246, 245, 241, .82); }
.hero__points li { margin-bottom: 8px; font-size: var(--fs-small); color: rgba(246, 245, 241, .72); }
.hero__points span { color: var(--bronze); font-weight: 600; font-size: var(--fs-label); letter-spacing: .06em; }

/* ---------- Strength cards overlap the hero ---------- */
.features { margin-top: -78px; padding-bottom: 20px; }
.features .feature-card { box-shadow: 0 20px 40px rgba(21, 23, 22, .18); }

/* ---------- About ---------- */
.about-section { padding: 110px 0 100px; }
.about-section .text-muted-2 { font-size: var(--fs-lead); line-height: 1.75; }

/* ---------- Services (Home rhythm is a touch more generous) ---------- */
.services { padding: 100px 0; }

/* ---------- Project CTA ---------- */
.project-cta { padding: 72px 0; background: var(--graphite); }
.project-cta__title { font-size: var(--fs-h2); font-weight: 600; letter-spacing: -0.015em; color: var(--ivory); }
.project-cta__right h4 { margin-bottom: 6px; font-size: var(--fs-label); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--bronze); }
.project-cta__right p { margin-bottom: 18px; font-size: var(--fs-small); color: rgba(246, 245, 241, .7); }

/* ---------- Marquee: quiet dark band ---------- */
.marquee { padding: 18px 0; background: var(--ink); border-top: 1px solid rgba(246, 245, 241, .06); }
.marquee__track { gap: 28px; }
.marquee__item { font-size: var(--fs-small); font-weight: 500; letter-spacing: .16em; color: rgba(246, 245, 241, .62); }
.marquee__star { font-size: .7rem; color: var(--bronze); }

/* ---------- Portfolio ---------- */
.projects { padding: 110px 0; }
.projects .text-center .text-muted-2 { max-width: 60ch; margin: 0 auto; }
.project-filters { gap: 8px; margin: 28px 0 44px; }
.project-filter {
    padding: 8px 18px; border-radius: 999px;
    background: transparent; border: 1px solid var(--border);
    font-size: var(--fs-xs); font-weight: 600; color: var(--grey);
    transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.project-filter:hover { background: transparent; border-color: var(--graphite); color: var(--ink); }
.project-filter.active { background: var(--ink); border-color: var(--ink); color: var(--ivory); }
.project-card {
    border-radius: 12px; border-color: var(--border); background: #fff;
    transition: border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease);
}
.project-card:hover { transform: translateY(-4px); border-color: #C9C3B6; box-shadow: var(--shadow); }
.project-card__media { height: auto; aspect-ratio: 16 / 10; border-radius: 11px 11px 0 0; }
/* the logo is the image: no duplicate name overlay */
.project-card__media-overlay, .project-card__logo { display: none; }
.project-card__img { transition: transform .6s var(--ease); }
.project-card__img--logo { padding: 30px 48px; }
.project-card__img--africana { padding: 26px 40px; }
.project-card__img--white { background: #fff; padding: 22px 56px; }
.project-card:hover .project-card__img { transform: scale(1.03); }
.project-card__body { padding: 22px 24px 24px; border-top: 1px solid var(--border); }
.project-card__cat { margin-bottom: 6px; font-size: var(--fs-label); letter-spacing: .14em; color: var(--bronze-dark); }
.project-card__title { margin-bottom: 12px; font-size: var(--fs-h4); font-weight: 600; letter-spacing: -0.01em; }
.project-card__link { gap: 8px; font-size: var(--fs-xs); color: var(--grey); }
.project-card__link i { transition: transform .3s var(--ease); }
.project-card:hover .project-card__link { color: var(--ink); }
.project-card:hover .project-card__link i { color: var(--bronze); transform: translate(2px, -2px); }
.project-card--group { border-top: 2px solid var(--bronze); }
.project-card--group:hover { transform: none; }
.project-card--group .project-card__desc { margin: -4px 0 16px; font-size: var(--fs-small); color: var(--body-text); }
.brand-chip { border-color: var(--border); border-radius: 10px; font-size: var(--fs-small); transition: border-color .25s var(--ease); }
.brand-chip__logo { width: 56px; height: 56px; border-color: var(--border); border-radius: 6px; }
.brand-chip:hover { border-color: var(--bronze); color: var(--ink); }
.brand-chip:hover i { color: var(--bronze); }

/* ---------- Tablet ---------- */
@media (max-width: 991px) {
    .hero { padding: 170px 0 120px; }
    .about-section { padding: 90px 0 80px; }
    .services, .projects { padding: 84px 0; }
    .project-cta { padding: 60px 0; }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
    .hero { padding: 150px 0 110px; }
    .hero__text { margin-bottom: 26px; }
    .features { margin-top: -60px; }
    .features .row { --bs-gutter-y: 12px; }
    .features .feature-card { padding: 22px; display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: start; }
    .features .feature-card__icon { grid-row: span 2; margin: 2px 0 0; font-size: 1.2rem; }
    .features .feature-card__title { margin-bottom: 4px; }
    .about-section { padding: 72px 0 64px; }
    .services, .projects { padding: 68px 0; }
    .project-cta { padding: 52px 0; }
    .project-filters { gap: 6px; margin: 22px 0 32px; }
    .project-filter { padding: 7px 14px; }
    .project-card__img--logo { padding: 26px 40px; }
}

/* ---------- Arabic (RTL) — Home specifics ---------- */
[dir="rtl"] .hero__title { font-weight: 600; letter-spacing: 0; line-height: 1.35; max-width: 18ch; }
[dir="rtl"] .hero__text, [dir="rtl"] .about-section .text-muted-2 { line-height: 1.95; }
[dir="rtl"] .hero__overlay {
    background:
        linear-gradient(270deg, rgba(21, 23, 22, .88) 0%, rgba(21, 23, 22, .6) 45%, rgba(21, 23, 22, .25) 100%),
        linear-gradient(180deg, rgba(21, 23, 22, .45) 0%, rgba(21, 23, 22, 0) 30%, rgba(21, 23, 22, .35) 100%);
}
[dir="rtl"] .project-cta__right h4, [dir="rtl"] .project-card__cat, [dir="rtl"] .marquee__item,
[dir="rtl"] .project-card__title, [dir="rtl"] .project-cta__title { letter-spacing: 0; }
[dir="rtl"] .marquee__item { font-size: .95rem; }
[dir="rtl"] .project-card:hover .project-card__link i { transform: translate(-2px, -2px); }
[dir="rtl"] .project-card__img--light { padding-bottom: 30px; }

/* Africana card: the parent name links to the Africana page (its brands keep their own chips) */
.project-card__title-link { display: inline-flex; align-items: center; gap: 8px; color: inherit; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 4px; transition: text-decoration-color .25s var(--ease); }
.project-card__title-link i { font-size: .75em; color: var(--bronze); }
.project-card__title-link:hover, .project-card__title-link:focus-visible { color: inherit; text-decoration-color: var(--bronze); }
.project-card__title-link { padding-block: 10px; margin-block: -10px; }   /* 40px touch target, no layout change */

/* ---------- Sector band: seamless loop ----------
   The track holds the sector set repeated in two identical halves (EN 3 sets per half, AR 4),
   long enough to cover wide screens. The trailing padding equals the gap, so translateX(±50%)
   lands exactly on the start of the second half (no jump). Durations are scaled to the longer
   track so the perceived speed stays the same as before (EN ~55px/s, AR ~35px/s). */
.marquee__track { padding-inline-end: 28px; animation-duration: 67s; }
[dir="rtl"] .marquee__track { animation-duration: 90s; }