/* =====================================================
   Skills Decoration — Enhancement layer
   Loaded AFTER assets/css/style.css on every page.
   1) Arabic (RTL) typography: same visual size as English
   2) Professional mobile + tablet responsiveness
   3) Ads / Offers page styling (same palette + fonts)
   Nothing here changes desktop graphics or colors.
   ===================================================== */

/* ============ 0) Global overflow guards ============ */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, canvas, svg, iframe { max-width: 100%; }
* { min-width: 0; }

/* ============ 1) ARABIC TYPOGRAPHY ============ */
/* Cairo renders visually smaller than Cinzel/Inter at the same px size,
   so the whole rem scale is nudged up while Arabic is active. */
html.ar { font-size: 16.8px; }

body[dir="rtl"] {
  font-family: var(--font-ar);
  text-rendering: optimizeLegibility;
}
body[dir="rtl"] h1, body[dir="rtl"] h2, body[dir="rtl"] h3,
body[dir="rtl"] h4, body[dir="rtl"] h5, body[dir="rtl"] h6,
body[dir="rtl"] .btn, body[dir="rtl"] .eyebrow,
body[dir="rtl"] .nav-links a, body[dir="rtl"] .mobile-drawer a,
body[dir="rtl"] .footer-links a, body[dir="rtl"] .card h3,
body[dir="rtl"] .card .learn, body[dir="rtl"] .strip-card .name,
body[dir="rtl"] .process-step .name, body[dir="rtl"] .proj-body .cat,
body[dir="rtl"] .proj-body .view, body[dir="rtl"] .article h3,
body[dir="rtl"] .article .cat, body[dir="rtl"] .member .name,
body[dir="rtl"] .member .role, body[dir="rtl"] .stat .lbl,
body[dir="rtl"] .value h3, body[dir="rtl"] .filter,
body[dir="rtl"] .categories .cat, body[dir="rtl"] .mat-label,
body[dir="rtl"] .cta-row .lbl, body[dir="rtl"] .cta-row .val,
body[dir="rtl"] .media-item .info h3, body[dir="rtl"] .exp-item h4,
body[dir="rtl"] .ad-card h3, body[dir="rtl"] .ad-card .badge {
  font-family: var(--font-ar);
}

/* Small uppercase Latin labels are unreadably tiny in Arabic — lift them
   to a comfortable, consistent size and relax the wide letter-spacing. */
body[dir="rtl"] .eyebrow,
body[dir="rtl"] .btn,
body[dir="rtl"] .nav-links a,
body[dir="rtl"] .footer-links a,
body[dir="rtl"] .card .num, body[dir="rtl"] .card .learn,
body[dir="rtl"] .strip-card .num, body[dir="rtl"] .strip-card .name,
body[dir="rtl"] .process-step .num, body[dir="rtl"] .process-step .name,
body[dir="rtl"] .proj-body .cat, body[dir="rtl"] .proj-body .view,
body[dir="rtl"] .article .cat, body[dir="rtl"] .article-meta,
body[dir="rtl"] .member .role, body[dir="rtl"] .stat .lbl,
body[dir="rtl"] .filter, body[dir="rtl"] .categories .cat,
body[dir="rtl"] .mat-label, body[dir="rtl"] .cta-row .lbl,
body[dir="rtl"] .media-item .info .type, body[dir="rtl"] .media-tab,
body[dir="rtl"] .scroll-hint, body[dir="rtl"] .play-btn,
body[dir="rtl"] .dream-orb, body[dir="rtl"] .sample-features .lbl,
body[dir="rtl"] .why-feats .lbl, body[dir="rtl"] .exp-item .num,
body[dir="rtl"] .footer small, body[dir="rtl"] .load-more,
body[dir="rtl"] .ad-card .badge, body[dir="rtl"] .ad-card .ad-cta {
  font-size: .84rem;
  letter-spacing: .06em;
  line-height: 1.9;
}
body[dir="rtl"] .muted,
body[dir="rtl"] .card p, body[dir="rtl"] .article p,
body[dir="rtl"] .proj-body p, body[dir="rtl"] .process-step .desc,
body[dir="rtl"] .media-item .info p, body[dir="rtl"] .exp-item p,
body[dir="rtl"] .ad-card p {
  font-size: .95rem;
  line-height: 2;
  letter-spacing: 0;
}
body[dir="rtl"] .hero-sub { font-size: 1.02rem; line-height: 2; letter-spacing: 0; }
body[dir="rtl"] .process-step .desc { max-width: 190px; }
body[dir="rtl"] .stat .num { font-style: normal; font-family: var(--font-ar); }
body[dir="rtl"] .mobile-drawer a:hover { padding-left: 0; padding-right: 8px; }
body[dir="rtl"] .mobile-close { right: auto; left: 44px; }

/* ============ 2) LAYOUT HELPERS (replace inline grids) ============ */
.sd-split { display: grid; gap: 60px; align-items: center; }
.sd-split-11 { grid-template-columns: 1fr 1fr; }
.sd-split-12 { grid-template-columns: 1fr 2fr; }
.sd-split-13 { grid-template-columns: 1fr 3fr; }
.sd-split.sd-start { align-items: start; }

/* ============ 3) TABLET ============ */
@media (max-width: 1024px) {
  .sd-split { grid-template-columns: 1fr !important; gap: 40px; }
  .container { padding-left: 32px; padding-right: 32px; }
  section { padding: 80px 0; }

  .values[style], .stats[style], .why-feats[style],
  .cards-grid[style], .team[style], .articles[style] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .process-track { grid-template-columns: repeat(3, 1fr) !important; }
  .dream-orb { position: static; margin: 8px auto 0; width: 150px; height: 150px; }
  .hero-right { height: 52vh; min-height: 360px; }
  .cta-info { padding: 32px !important; }
  .footer .container { gap: 26px; }
}

/* ============ 4) MOBILE ============ */
@media (max-width: 640px) {
  .container, .hero-left, .nav { padding-left: 18px; padding-right: 18px; }
  section { padding: 56px 0; }

  .nav { gap: 10px; }
  .brand-logo { height: 44px !important; }
  .footer .brand-logo { height: 34px !important; }

  h1 { font-size: clamp(1.75rem, 8vw, 2.4rem) !important; line-height: 1.18; }
  h2 { font-size: clamp(1.35rem, 6vw, 1.9rem) !important; line-height: 1.25; }
  .hero-sub, .muted { font-size: .92rem; }

  .hero { padding-top: 110px !important; padding-bottom: 40px !important; }
  .hero-right { height: 40vh; min-height: 260px; }

  /* every multi-column block collapses to a single readable column */
  .sd-split, .section-grid, .cards-grid, .values, .team, .articles,
  .strip-grid, .proj-grid, .exp-row, .why-feats, .media-grid,
  .our-projects-preview, .contact-grid, .mission, .featured-article,
  .why-grid, .samples, .ads-grid,
  .values[style], .why-feats[style], .cards-grid[style],
  .team[style], .articles[style] {
    grid-template-columns: 1fr !important;
    gap: 22px;
  }
  .proj-grid .wide { grid-column: span 1 !important; }

  /* stats stay 2-up so numbers never clip */
  .stats, .stats[style] { grid-template-columns: repeat(2, 1fr) !important; gap: 22px 12px !important; }
  .stat .num { font-size: 1.8rem !important; }
  .stat .lbl { font-size: .6rem; letter-spacing: .16em; word-break: break-word; }

  /* process steps: 2 per row, wave hidden, orb inline */
  .process-track { grid-template-columns: repeat(2, 1fr) !important; gap: 34px 14px !important; }
  .process-step .desc { max-width: 100%; }
  .dream-orb {
    position: static !important; grid-column: 1 / -1; margin: 4px auto 0;
    width: 168px; height: 168px; transform: none !important;
  }

  /* horizontal scrollers */
  .filters, .categories, .media-tabs, .mat-strip {
    overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch;
    scrollbar-width: thin; padding-bottom: 8px;
  }
  .filters .filter, .categories .cat, .media-tab { white-space: nowrap; flex: 0 0 auto; }
  .mat-universe-grid { grid-template-columns: 1fr !important; gap: 26px !important; }
  .mat-strip { scroll-snap-type: x mandatory; gap: 12px !important; }
  .mat-panel-col { flex: 0 0 58% !important; scroll-snap-align: start; }
  .mat-panel-col .mat-item, .mat-panel-col .mat-panel {
    height: 300px !important; min-height: 0 !important; width: 100% !important;
  }
  .mat-nav-arrow { display: none !important; }

  /* readable captions over images on small screens */
  .proj-preview-item .label, .proj-card .label, .strip-card .strip-body {
    background: linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,.25) 60%, transparent);
    padding: 18px !important;
  }
  .proj-preview-item .label h4 { font-size: .95rem; line-height: 1.3; }
  .ba-wrap, .ba-images { max-width: 100%; }
  .ba-images img { height: 240px !important; object-fit: cover; }

  /* cards / boxes breathing room */
  .card, .value, .exp-item, .article .body, .proj-body,
  .why-feats > *, .sample-features > * { padding: 22px !important; }
  .cta-body { padding: 44px 20px !important; }
  .cta-info { padding: 26px 20px !important; border-left: 0 !important; border-right: 0 !important; }
  .cta-body h2 { font-size: 1.6rem !important; }
  .cta-body .serif-italic { font-size: 1.9rem !important; }
  .btn { padding: 13px 22px !important; font-size: .64rem !important; letter-spacing: .2em !important; }
  .btn .arrow { flex: 0 0 auto; }
  .load-more { width: 100%; justify-content: center; }

  .footer .container { text-align: center; }
  .footer-links { flex-wrap: wrap; justify-content: center; gap: 12px 16px; }

  .mobile-drawer { padding: 92px 26px 40px; overflow-y: auto; }
  .mobile-drawer a { font-size: 1.12rem; padding: 15px 0; }

  .contact-form { padding: 22px !important; }
  .contact-form input, .contact-form textarea { font-size: 16px; }
  .newsletter form { flex-direction: column; }
  .newsletter input, .newsletter button { width: 100%; border-radius: 4px; }

  body[dir="rtl"] .stat .lbl { font-size: .74rem; }
}

@media (max-width: 400px) {
  .stats, .stats[style] { grid-template-columns: 1fr !important; }
  .process-track { grid-template-columns: 1fr !important; }
}

/* ============ 5) ADS / OFFERS PAGE ============ */
.ads-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 28px;
}
.ad-card {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--border-2);
  border-radius: 10px;
  overflow: hidden;
  transition: transform .45s cubic-bezier(.2,.8,.2,1), border-color .45s, box-shadow .45s;
}
.ad-card:hover {
  transform: translateY(-6px);
  border-color: var(--gold);
  box-shadow: 0 24px 50px -28px rgba(201,169,110,.55);
}
.ad-card .ad-img {
  height: 220px; background-size: cover; background-position: center;
  position: relative;
}
.ad-card .ad-img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(26,26,26,.85));
}
.ad-card .badge {
  position: absolute; top: 14px; inset-inline-start: 14px; z-index: 2;
  background: var(--gold); color: #06231f;
  font-family: var(--font-sans); font-weight: 700;
  font-size: .6rem; letter-spacing: .24em; text-transform: uppercase;
  padding: 7px 14px; border-radius: 40px;
}
.ad-card .ad-body { padding: 26px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.ad-card .sub {
  color: var(--gold); font-family: var(--font-sans); font-weight: 600;
  font-size: .64rem; letter-spacing: .3em; text-transform: uppercase;
}
.ad-card h3 { font-family: var(--font-display); font-size: 1.02rem; letter-spacing: .1em; margin: 0; }
.ad-card p { color: var(--muted); font-size: .86rem; line-height: 1.8; margin: 0; }
.ad-card .price {
  font-family: var(--font-serif); font-style: italic;
  color: var(--gold); font-size: 1.6rem; line-height: 1; margin-top: 4px;
}
.ad-card .ad-cta {
  margin-top: auto; padding-top: 16px;
  color: var(--gold); font-family: var(--font-sans); font-weight: 600;
  font-size: .66rem; letter-spacing: .28em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 12px; transition: gap .35s;
}
.ad-card:hover .ad-cta { gap: 20px; }
.ads-empty {
  grid-column: 1 / -1; text-align: center; color: var(--muted);
  padding: 70px 0; font-size: .9rem; letter-spacing: .18em;
}
@media (max-width: 640px) {
  .ads-grid { grid-template-columns: 1fr !important; gap: 20px; }
  .ad-card .ad-img { height: 190px; }
  .ad-card .ad-body { padding: 20px; }
}


/* ===== About — animated team photo (replaces the old MEET THE TEAM button) ===== */
.team-photo-anim{
  margin-top:22px;
  width:100%;
  max-width:340px;
  aspect-ratio:4/3;
  border-radius:10px;
  background-size:cover;
  background-position:center;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 18px 40px rgba(0,0,0,.35);
  animation:teamPhotoFloat 7s ease-in-out infinite;
  transition:transform .6s cubic-bezier(.4,0,.2,1), box-shadow .6s;
}
.team-photo-anim:hover{ transform:translateY(-6px) scale(1.02); box-shadow:0 26px 55px rgba(0,0,0,.45); }
@keyframes teamPhotoFloat{
  0%,100%{ transform:translateY(0) }
  50%{ transform:translateY(-10px) }
}
@media (max-width:640px){ .team-photo-anim{ max-width:100%; } }
@media (prefers-reduced-motion:reduce){ .team-photo-anim{ animation:none } }


/* ============ 6) GOLD / LIGHT THEME ADJUSTMENTS ============ */
/* Arabic and English now share Tajawal/Poppins, so the old wide
   letter-spacing overrides are relaxed to match the new theme. */
body[dir="rtl"] .eyebrow,
body[dir="rtl"] .btn,
body[dir="rtl"] .nav-links a,
body[dir="rtl"] .footer-links a,
body[dir="rtl"] .card .num, body[dir="rtl"] .card .learn,
body[dir="rtl"] .strip-card .num, body[dir="rtl"] .strip-card .name,
body[dir="rtl"] .process-step .num, body[dir="rtl"] .process-step .name,
body[dir="rtl"] .proj-body .cat, body[dir="rtl"] .proj-body .view,
body[dir="rtl"] .article .cat, body[dir="rtl"] .article-meta,
body[dir="rtl"] .member .role, body[dir="rtl"] .stat .lbl,
body[dir="rtl"] .filter, body[dir="rtl"] .categories .cat,
body[dir="rtl"] .mat-label, body[dir="rtl"] .cta-row .lbl,
body[dir="rtl"] .media-item .info .type, body[dir="rtl"] .media-tab,
body[dir="rtl"] .scroll-hint, body[dir="rtl"] .dream-orb,
body[dir="rtl"] .sample-features .lbl, body[dir="rtl"] .why-feats .lbl,
body[dir="rtl"] .exp-item .num, body[dir="rtl"] .footer small,
body[dir="rtl"] .load-more, body[dir="rtl"] .ad-card .badge,
body[dir="rtl"] .ad-card .ad-cta{
  letter-spacing: 0;
}
body[dir="rtl"] .btn{ font-size: .98rem; font-weight: 700; }
body[dir="rtl"] h1, body[dir="rtl"] h2{ font-weight: 900; letter-spacing: 0; }
body[dir="rtl"] .stat .num{ font-weight: 900; }

/* Ads cards inherit the white card treatment */
.ad-card{ background:#fff; border:1px solid rgba(0,0,0,.06); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); }
.ad-card:hover{ box-shadow: 0 8px 50px rgba(0,0,0,.16); border-color: rgba(201,169,110,.5); }

/* Team photo card */
.team-photo-anim{ border-radius: var(--radius-lg); border:1px solid rgba(0,0,0,.06); box-shadow: var(--shadow-md); }
.team-photo-anim:hover{ box-shadow: 0 8px 50px rgba(0,0,0,.18); }

@media (max-width: 640px){
  .btn{ padding: 12px 26px !important; font-size: .9rem !important; letter-spacing: 0 !important; }
  .eyebrow{ font-size: .78rem; }
}

/* ================================================================
   LOGO UPSCALE — تكبير اللوجو في الهيدر والفوتر بدون تغيير حجمهما
   الهامش السلبي يمنع اللوجو من زيادة ارتفاع الشريط
   ================================================================ */
.nav .brand-logo{
  height:132px !important;
  width:auto !important;
  margin:-30px 0 !important;
  filter:drop-shadow(0 4px 14px rgba(0,0,0,.28)) !important;
}
.nav.scrolled .brand-logo{ height:120px !important; margin:-30px 0 !important; }
.brand:hover .brand-logo{ filter:drop-shadow(0 6px 20px rgba(0,80,255,.35)) !important; }

.footer .brand-logo{
  height:104px !important;
  width:auto !important;
  margin:-28px 0 !important;
}

@media(max-width:1024px){
  .nav .brand-logo{ height:110px !important; margin:-25px 0 !important; }
  .nav.scrolled .brand-logo{ height:100px !important; margin:-25px 0 !important; }
  .footer .brand-logo{ height:88px !important; margin:-24px 0 !important; }
}
@media(max-width:640px){
  .nav .brand-logo{ height:82px !important; margin:-16px 0 !important; }
  .nav.scrolled .brand-logo{ height:76px !important; margin:-16px 0 !important; }
  .footer .brand-logo{ height:70px !important; margin:-18px 0 !important; }
}