/* ==========================================================================
   layout.css — page shell, header, section rhythm, grids, footer
   All inline-axis spacing uses logical properties so RTL mirrors for free.
   ========================================================================== */

/* --- Page shell ---------------------------------------------------------- */

.shell {
  inline-size: 100%;
  max-inline-size: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* --- Site header --------------------------------------------------------- */

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  background-color: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  border-block-end: 1px solid transparent;
  transition: border-color var(--dur-fast) linear;
}

/* .is-stuck is toggled from js/animations.js once the page scrolls past the
   hero, so the header only grows a rule when there is content behind it. */
.site-header.is-stuck {
  border-block-end-color: var(--rule);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  min-block-size: 4.25rem;
}

/* The header is a single line at every width: the wordmark, the nav and the
   language switcher must never wrap. Elements are dropped at breakpoints
   instead — see .availability and .site-nav__links. */
.wordmark {
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* The header carries the name only. The role is stated by the hero eyebrow
   and by schema.jobTitle, so repeating it here only crowded the bar. */

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(var(--space-s), 2.5vw, var(--space-l));
}

.site-nav__links {
  display: none;
  gap: clamp(var(--space-s), 2.5vw, var(--space-l));
  font-size: var(--step--1);
  white-space: nowrap;
}

@media (min-width: 48rem) {
  .site-nav__links { display: flex; }
}

/* --- Section rhythm ------------------------------------------------------ */

.section {
  padding-block: var(--space-2xl);
}

.section--tight {
  padding-block: var(--space-xl);
}

.section + .section {
  border-block-start: 1px solid var(--rule);
}

.section--sunken {
  background-color: var(--paper-sunken);
}

/* Section head: eyebrow + title on the left, optional lead paragraph beside
   it on wide screens. Collapses to a single column on mobile. */
.section-head {
  display: grid;
  gap: var(--space-m);
  margin-block-end: var(--space-xl);
}

@media (min-width: 60rem) {
  .section-head {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: var(--space-xl);
    align-items: end;
  }
}

.section-head__title {
  margin-block-start: var(--space-2xs);
}

.section-head__lead {
  max-inline-size: var(--measure);
}

/* --- Hero ---------------------------------------------------------------- */

.hero {
  padding-block: clamp(var(--space-xl), 12vh, var(--space-3xl)) var(--space-2xl);
}

.hero__title {
  margin-block: var(--space-m) 0;
  max-inline-size: 18ch;
}

/* The one place the accent colour carries meaning rather than decoration:
   it marks the half of the promise most agencies skip. */
.hero__title em {
  font-style: normal;
  color: var(--accent);
}

.hero__lead {
  margin-block-start: var(--space-m);
  font-size: var(--step-1);
  max-inline-size: 52ch;
  color: var(--ink-2);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  margin-block-start: var(--space-l);
}

/* Hero stat strip — four facts pulled straight from the CV. */
.stat-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-block-start: var(--space-xl);
  background-color: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}

@media (min-width: 48rem) {
  .stat-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.stat {
  padding: var(--space-m);
  background-color: var(--paper);
}

/* Replaces an inline margin reset: <dd> carries a UA margin by default. */
.stat__body {
  margin: 0;
}

.stat__value {
  display: block;
  font-size: var(--step-3);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.stat__label {
  display: block;
  margin-block-start: var(--space-2xs);
  font-size: var(--step--1);
  color: var(--ink-3);
}

/* --- Case study grid — the structural centre of the page ----------------- */

.case-grid {
  display: grid;
  gap: var(--space-m);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

/* The first case is the flagship: it spans the full row on wide screens and
   lays out as image-beside-text instead of image-above-text. */
@media (min-width: 60rem) {
  .case-grid > .case--feature {
    grid-column: 1 / -1;
  }
}

.case-footnote {
  margin-block-start: var(--space-l);
  font-size: var(--step--1);
  color: var(--ink-3);
  max-inline-size: var(--measure);
}

/* --- Services ------------------------------------------------------------ */

.service-list {
  display: grid;
  gap: 1px;
  background-color: var(--rule);
  border-block: 1px solid var(--rule);
}

@media (min-width: 44rem) {
  .service-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 72rem) {
  .service-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- Engineering / open-source split row --------------------------------- */

.split {
  display: grid;
  gap: var(--space-xl);
}

@media (min-width: 60rem) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Facts row (tech + languages/reach) ---------------------------------- */

.fact-row {
  display: grid;
  gap: var(--space-l);
}

@media (min-width: 52rem) {
  .fact-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-xl);
  }
}

.fact__title {
  font-size: var(--step-1);
  margin-block: var(--space-2xs) var(--space-xs);
}

/* --- Contact ------------------------------------------------------------- */

.contact-layout {
  display: grid;
  gap: var(--space-xl);
}

@media (min-width: 60rem) {
  .contact-layout {
    grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
    gap: clamp(var(--space-xl), 6vw, var(--space-2xl));
  }
}

.contact-aside__lead {
  margin-block-start: var(--space-s);
}

.contact-aside dl {
  display: grid;
  gap: var(--space-m);
  margin-block-start: var(--space-l);
}

.contact-aside dt {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  margin-block-end: var(--space-3xs);
}

[lang="ar"] .contact-aside dt {
  letter-spacing: normal;
  text-transform: none;
}

.contact-aside dd {
  margin: 0;
  color: var(--ink);
  /* Phone numbers and emails keep their own direction inside the Arabic
     page; without this the leading "+" of a phone number jumps to the end. */
  unicode-bidi: plaintext;
}

/* --- Footer -------------------------------------------------------------- */

.site-footer {
  padding-block: var(--space-xl);
  border-block-start: 1px solid var(--rule);
  font-size: var(--step--1);
  color: var(--ink-3);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
  align-items: center;
  justify-content: space-between;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
}

/* Trailing link under a .mini-list (the GitHub profile link). */
.section-link {
  margin-block-start: var(--space-m);
}

/* --- Locale landing page (generated /index.html) -------------------------- */

.locale-picker {
  padding-block: var(--space-2xl);
}

.locale-picker__title {
  font-size: var(--step-2);
}

.locale-picker__list {
  display: grid;
  gap: var(--space-2xs);
  margin-block-start: var(--space-m);
}

/* --- About ---------------------------------------------------------------- *
 * Portrait + hard facts on one side, prose + career line on the other. The
 * portrait column comes SECOND in the markup so screen readers and narrow
 * screens get the prose first; `order` puts it back on the left visually.    */

.about-layout {
  display: grid;
  gap: var(--space-l);
  /* Phone order: the face first — it is the trust element — then the story,
     then the hard facts. */
  grid-template-areas:
    "portrait"
    "prose"
    "facts";
}

.about-layout > .portrait   { grid-area: portrait; }
.about-layout > .about__prose { grid-area: prose; }
.about-layout > .about__facts { grid-area: facts; align-self: start; }

@media (min-width: 60rem) {
  .about-layout {
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    /* The prose spans both rows; portrait and facts stack beside it. */
    grid-template-areas:
      "portrait prose"
      "facts    prose";
    /* The prose spans both rows and is the taller column. Without an explicit
       row sizing it would stretch row 1, pushing the facts away from the
       portrait; auto/1fr pins row 1 to the portrait's own height. */
    grid-template-rows: auto 1fr;
    align-content: start;
    column-gap: clamp(var(--space-xl), 5vw, var(--space-2xl));
    row-gap: var(--space-l);
  }
}

.about__prose > p + p {
  margin-block-start: var(--space-m);
}

.about__prose {
  max-inline-size: var(--measure);
  font-size: var(--step-1);
}

/* Career line — three dates, not a résumé. */
.timeline {
  margin-block-start: var(--space-xl);
  border-block-start: 1px solid var(--rule);
  padding-block-start: var(--space-m);
  display: grid;
  gap: var(--space-s);
}

@media (min-width: 44rem) {
  .timeline { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-m); }
}

/* --- 404 ------------------------------------------------------------------ */

.notfound {
  display: grid;
  align-content: center;
  min-block-size: 80vh;
  padding-block: var(--space-2xl);
  max-inline-size: 44rem;
}

.notfound__code {
  color: var(--accent);
  font-size: var(--step-1);
}

.notfound__title {
  margin-block-start: var(--space-s);
  font-size: var(--step-4);
}

.notfound__text {
  margin-block-start: var(--space-m);
  max-inline-size: var(--measure);
}

.notfound__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-s);
  margin-block-start: var(--space-l);
}

.notfound__langs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-m);
  margin-block-start: var(--space-2xl);
  padding-block-start: var(--space-m);
  border-block-start: 1px solid var(--rule);
  font-size: var(--step--1);
}