/* Shared styles for inner pages (why-o1, services, b2b, contact, blog, projects) */

.hero-inner {
  display: grid;
  align-content: end;
  min-height: 56dvh;
  padding-block: 8rem var(--space-6);
}
.hero-inner-title {
  font-size: var(--text-3xl);
  font-weight: 600;
  max-inline-size: 18ch;
  margin-block: var(--space-3);
}
[lang="ar"] .hero-inner-title { font-weight: 600; }
.hero-inner-sub {
  font-size: var(--text-lg);
  font-weight: 300;
  max-inline-size: 52ch;
  opacity: 0.85;
}

/* Service detail */
.svc-detail {
  display: grid;
  grid-template-columns: 1.7fr 1fr;
  gap: var(--space-6);
  align-items: start;
}
.svc-desc { font-size: var(--text-lg); }
.svc-aside {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  position: sticky;
  top: 6.5rem;
}
.svc-related .chip-row { margin-block: var(--space-3); }

/* Contact */
.contact-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--space-6);
  align-items: start;
}
.contact-info { display: grid; gap: var(--space-4); align-content: start; }
.contact-info .footer-contact { display: grid; gap: 0.6rem; }
.contact-info a:hover { text-decoration: underline; }
.contact-socials { display: flex; flex-wrap: wrap; gap: var(--space-3); font-weight: 600; }
.contact-socials a { display: inline-flex; align-items: center; gap: 0.45rem; }
.contact-socials a:hover { text-decoration: underline; }

/* Blog / Projects listings (SSR) */
.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-block-start: var(--space-5);
}
.card {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: grid;
  transition: transform var(--dur-fast) var(--ease-out);
}
.card:hover { transform: translateY(-4px); }
.card-media { aspect-ratio: 16 / 10; background: var(--cream-dim); }
.card-media img { width: 100%; height: 100%; object-fit: cover; }
.card-body { padding: var(--space-4); display: grid; gap: var(--space-2); }
.card-title { font-size: var(--text-lg); }
.card-meta { font-size: var(--text-xs); opacity: 0.6; }
.card-excerpt { font-size: var(--text-sm); opacity: 0.85; }
.empty-state {
  border: 1px dashed var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  text-align: center;
  opacity: 0.75;
  margin-block-start: var(--space-5);
}

/* Article */
.article { max-inline-size: 46rem; margin-inline: auto; }
.article-meta { font-size: var(--text-sm); opacity: 0.65; margin-block-end: var(--space-4); }
.article-cover { border-radius: var(--radius-md); margin-block-end: var(--space-5); }
.article .prose h2 { font-size: var(--text-xl); margin-block: var(--space-5) var(--space-3); }
.article .prose h3 { font-size: var(--text-lg); margin-block: var(--space-4) var(--space-2); }
.article .prose ul { padding-inline-start: 1.2rem; margin-block-end: var(--space-3); }
.article .prose a { text-decoration: underline; }
.article-back { margin-block-start: var(--space-5); }

/* Project detail */
.project-gallery { display: grid; gap: var(--space-4); margin-block: var(--space-5); }
.project-gallery img { border-radius: var(--radius-md); border: 1px solid var(--line); }
.project-facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-size: var(--text-sm);
  opacity: 0.8;
  margin-block-end: var(--space-4);
}

@media (max-width: 60rem) {
  .svc-detail, .contact-grid { grid-template-columns: 1fr; }
  .svc-aside { position: static; }
  .cards-grid { grid-template-columns: 1fr; }
}