/* ==========================================================================
   salam-portfolio — components
   Reusable patterns. Consumes tokens only; no colour literal may appear here.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Scopes — Layer 3
   A scope re-points a handful of Layer-2 tokens. It never sets a literal, so
   anything nested inside inherits a correct, contrast-checked palette without
   knowing it is on a dark panel.
   -------------------------------------------------------------------------- */
.sn-invert {
  --sn-canvas:      var(--c-n-950);
  --sn-surface:     var(--c-n-850);
  --sn-surface-2:   var(--c-n-800);
  --sn-ink:         var(--c-n-020);
  --sn-ink-2:       var(--c-n-350);
  --sn-ink-3:       var(--c-n-400);
  --sn-brand:       var(--c-brand-300);
  --sn-brand-hover: var(--c-brand-200);
  --sn-on-brand:    var(--c-n-950);
  --sn-line:        var(--c-n-800);
  --sn-line-strong: var(--c-n-750);
  --sn-line-input:  var(--c-n-450);
  --sn-focus:       var(--c-brand-300);
  --sn-focus-halo:  var(--c-n-950);

  background-color: var(--sn-canvas);
  color: var(--sn-ink);
}

.sn-band-brand   { background-color: var(--sn-band-brand); }
.sn-band-accent  { background-color: var(--sn-band-accent); }
.sn-band-neutral { background-color: var(--sn-band-neutral); }

/* --------------------------------------------------------------------------
   Section rhythm
   -------------------------------------------------------------------------- */
.sn-section { padding-block: var(--sn-space-3xl); }
.sn-section--tight { padding-block: var(--sn-space-xl); }

.sn-section__lead {
  color: var(--sn-ink-2);
  font-size: var(--sn-fs-lg);
  max-inline-size: var(--sn-w-prose);
}

/* Eyebrow — the small label above a heading. */
.sn-eyebrow {
  display: block;
  margin-block-end: var(--sn-space-2xs);
  color: var(--sn-ink-3);
  font-size: var(--sn-fs-xs);
  font-weight: var(--sn-wt-medium);
  letter-spacing: var(--sn-track-wide);
  text-transform: uppercase;
}
/* Uppercase does nothing in Arabic and the tracking harms joins. */
:lang(ar) .sn-eyebrow { text-transform: none; letter-spacing: 0; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.sn-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 100;
  background-color: color-mix(in srgb, var(--sn-canvas) 88%, transparent);
  backdrop-filter: blur(10px);
  border-block-end: var(--sn-border-hair) solid var(--sn-line);
}

@supports not (backdrop-filter: blur(1px)) {
  .sn-header { background-color: var(--sn-canvas); }
}

.sn-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sn-space-md);
  padding-block: var(--sn-space-xs);
}

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */
.sn-nav a {
  padding-block: var(--sn-space-3xs);
  color: var(--sn-ink-2);
  text-decoration: none;
}
.sn-nav a:hover { color: var(--sn-brand); text-decoration: underline; }

/* Current page marked for everyone, not by colour alone. */
.sn-nav [aria-current="page"] {
  color: var(--sn-ink);
  font-weight: var(--sn-wt-semibold);
  text-decoration: underline;
  text-decoration-thickness: var(--sn-border-thick);
  text-underline-offset: 0.35em;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.wp-block-button__link { transition: background-color var(--sn-dur-2) var(--sn-ease-standard); }

.is-style-sn-btn-secondary > .wp-block-button__link {
  background-color: transparent;
  color: var(--sn-brand);
  box-shadow: inset 0 0 0 var(--sn-border-thick) var(--sn-brand);
}
.is-style-sn-btn-secondary > .wp-block-button__link:hover {
  background-color: var(--sn-brand-tint);
  color: var(--sn-brand-hover);
}

.is-style-sn-btn-quiet > .wp-block-button__link {
  background-color: transparent;
  color: var(--sn-ink-2);
  padding-inline: 0;
  text-decoration: underline;
}
.is-style-sn-btn-quiet > .wp-block-button__link:hover { color: var(--sn-brand); }

/* --------------------------------------------------------------------------
   Card
   -------------------------------------------------------------------------- */
.is-style-sn-card, .sn-card {
  padding: var(--sn-space-lg);
  background-color: var(--sn-surface);
  border: var(--sn-border-hair) solid var(--sn-line);
  border-radius: var(--sn-radius-lg);
}

/* --------------------------------------------------------------------------
   Accent rule — the 6px inline edge used to open a section
   -------------------------------------------------------------------------- */
.is-style-sn-rule-accent {
  border-block-start: 0;
  border-inline-start: var(--sn-border-accent) solid var(--sn-brand);
  block-size: var(--sn-space-lg);
  inline-size: 0;
  margin-inline: 0;
}

/* --------------------------------------------------------------------------
   Definition rows — the CV / fact pattern.
   One row, one fact. Reflows to stacked at narrow widths through grid, never
   by rendering a second copy. This is the structural answer to the duplicated
   authoring that caused a third of the Phase 1 contradictions.
   -------------------------------------------------------------------------- */
.sn-facts { display: grid; gap: var(--sn-space-sm); margin: 0; }

.sn-facts__row {
  display: grid;
  grid-template-columns: minmax(8rem, 14rem) 1fr;
  gap: var(--sn-space-2xs) var(--sn-space-md);
  padding-block-end: var(--sn-space-sm);
  border-block-end: var(--sn-border-hair) solid var(--sn-line);
}

.sn-facts__row:last-child { border-block-end: 0; padding-block-end: 0; }

.sn-facts__key {
  color: var(--sn-ink-3);
  font-size: var(--sn-fs-sm);
  font-weight: var(--sn-wt-medium);
}
.sn-facts__val { color: var(--sn-ink); margin: 0; }

@container (max-width: 34rem) {
  .sn-facts__row { grid-template-columns: 1fr; }
}
/* Container queries need a container; the grid itself is one. */
.sn-facts { container-type: inline-size; }

/* Dates and phone numbers are LTR runs even inside Arabic prose. */
.sn-ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }

/* --------------------------------------------------------------------------
   Style-guide swatches — used by the style guide pattern only
   -------------------------------------------------------------------------- */
.sn-swatches {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  gap: var(--sn-space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sn-swatch {
  border: var(--sn-border-hair) solid var(--sn-line);
  border-radius: var(--sn-radius-md);
  overflow: hidden;
}
.sn-swatch__chip { block-size: 4.5rem; }
.sn-swatch__meta {
  padding: var(--sn-space-2xs) var(--sn-space-xs);
  background-color: var(--sn-canvas);
  font-size: var(--sn-fs-2xs);
}
.sn-swatch__name { display: block; font-weight: var(--sn-wt-medium); }
.sn-swatch__note { display: block; color: var(--sn-ink-3); }

.sn-scale-row {
  display: flex;
  align-items: baseline;
  gap: var(--sn-space-md);
  padding-block: var(--sn-space-2xs);
  border-block-end: var(--sn-border-hair) solid var(--sn-line);
}
.sn-scale-row__label {
  flex: 0 0 7rem;
  color: var(--sn-ink-3);
  font-family: var(--sn-font-mono);
  font-size: var(--sn-fs-2xs);
}
.sn-scale-row__demo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sn-space-row { display: flex; align-items: center; gap: var(--sn-space-md); padding-block: var(--sn-space-3xs); }
.sn-space-row__label { flex: 0 0 7rem; color: var(--sn-ink-3); font-family: var(--sn-font-mono); font-size: var(--sn-fs-2xs); }
.sn-space-row__bar { block-size: var(--sn-space-2xs); background-color: var(--sn-brand); border-radius: var(--sn-radius-full); }

/* --------------------------------------------------------------------------
   Theme toggle
   -------------------------------------------------------------------------- */
.sn-theme-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--sn-space-3xs);
  padding: var(--sn-space-3xs) var(--sn-space-2xs);
  background: transparent;
  color: var(--sn-ink-2);
  border: var(--sn-border-hair) solid var(--sn-line-input);
  border-radius: var(--sn-radius-full);
  cursor: pointer;
  font-size: var(--sn-fs-xs);
}
.sn-theme-toggle:hover { color: var(--sn-ink); border-color: var(--sn-brand); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.sn-footer {
  margin-block-start: var(--sn-space-4xl);
  padding-block: var(--sn-space-2xl);
  border-block-start: var(--sn-border-hair) solid var(--sn-line);
  color: var(--sn-ink-2);
  font-size: var(--sn-fs-sm);
}

/* --------------------------------------------------------------------------
   Utility
   -------------------------------------------------------------------------- */
.screen-reader-text {
  position: absolute !important;
  inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* ==========================================================================
   Homepage
   --------------------------------------------------------------------------
   Owner ruling, 26 Aug 2026: choosing blue does not authorise a giant empty
   blue hero. The ground here is warm paper (--sn-canvas). Cobalt appears only
   as link colour, one primary button and a narrow accent rail. There is no
   full-bleed brand field above the fold, and --sn-hero-field is deliberately
   NOT used on this page. scripts/check-cobalt-share.mjs measures the actual
   pixel share of the first viewport so this is enforced, not intended.
   ========================================================================== */

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

.sn-hero__grid {
  display: grid;
  gap: var(--sn-space-xl);
  align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 60rem) {
  .sn-hero__grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--sn-space-2xl); }
}

/* The rail is the one piece of structural cobalt above the fold: a 6px edge,
   not a field. */
.sn-hero__text {
  border-inline-start: var(--sn-border-accent) solid var(--sn-brand);
  padding-inline-start: var(--sn-space-md);
}

.sn-hero__name {
  margin-block: 0 var(--sn-space-3xs);
  font-size: var(--sn-fs-6xl);
  line-height: var(--sn-lh-tight);
  letter-spacing: var(--sn-track-tight);
}

.sn-hero__role {
  margin-block: 0 var(--sn-space-2xs);
  color: var(--sn-brand);
  font-size: var(--sn-fs-2xl);
  font-weight: var(--sn-wt-semibold);
  line-height: var(--sn-lh-snug);
}

.sn-hero__support {
  margin-block: 0 var(--sn-space-md);
  max-inline-size: 46ch;
  color: var(--sn-ink-2);
  font-size: var(--sn-fs-lg);
}

.sn-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sn-space-2xs) var(--sn-space-md);
  margin-block: 0 var(--sn-space-md);
  padding: 0;
  list-style: none;
  color: var(--sn-ink-3);
  font-size: var(--sn-fs-sm);
}

/* The amber accent, used exactly as ruled: a small decorative marker, never
   text. --sn-accent-graphic measures 2.31:1, so it may only ever be a shape. */
.sn-hero__meta li { display: flex; align-items: center; gap: var(--sn-space-3xs); }
.sn-hero__meta li::before {
  content: "";
  inline-size: 0.5rem; block-size: 0.5rem;
  border-radius: var(--sn-radius-full);
  background-color: var(--sn-accent-graphic);
  flex: none;
}

.sn-hero__cta { display: flex; flex-wrap: wrap; gap: var(--sn-space-2xs); }

.sn-hero__media { margin: 0; }
.sn-hero__media img {
  inline-size: 100%;
  border-radius: var(--sn-radius-lg);
  border: var(--sn-border-hair) solid var(--sn-line);
}
.sn-hero__media figcaption {
  margin-block-start: var(--sn-space-2xs);
  color: var(--sn-ink-3);
  font-size: var(--sn-fs-xs);
}

/* --------------------------------------------------------------------------
   Counts strip. Every number is computed from real data, never typed.
   -------------------------------------------------------------------------- */
.sn-stats {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sn-space-md) var(--sn-space-xl);
  margin: 0;
  padding-block: var(--sn-space-lg);
  border-block: var(--sn-border-hair) solid var(--sn-line);
  list-style: none;
}
.sn-stat__n {
  display: block;
  font-size: var(--sn-fs-3xl);
  font-weight: var(--sn-wt-semibold);
  line-height: var(--sn-lh-tight);
  letter-spacing: var(--sn-track-tight);
}
.sn-stat__l { display: block; color: var(--sn-ink-3); font-size: var(--sn-fs-sm); }

/* --------------------------------------------------------------------------
   Project cards
   -------------------------------------------------------------------------- */
.sn-projects {
  display: grid;
  gap: var(--sn-space-lg);
  grid-template-columns: repeat(auto-fill, minmax(min(20rem, 100%), 1fr));
  margin-block: 0 var(--sn-space-xl);
  padding: 0;
  list-style: none;
}

.sn-projects__group { margin-block: var(--sn-space-xl) var(--sn-space-sm); }

.sn-proj {
  display: flex;
  flex-direction: column;
  background-color: var(--sn-canvas);
  border: var(--sn-border-hair) solid var(--sn-line);
  border-radius: var(--sn-radius-lg);
  overflow: hidden;
  transition: border-color var(--sn-dur-2) var(--sn-ease-standard),
              box-shadow var(--sn-dur-2) var(--sn-ease-standard);
}
.sn-proj:hover { border-color: var(--sn-brand); box-shadow: var(--sn-shadow-2); }

.sn-proj__media { background-color: var(--sn-surface-2); }
.sn-proj__img { inline-size: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }

.sn-proj__body { padding: var(--sn-space-md); display: grid; gap: var(--sn-space-2xs); }

.sn-proj__title { margin: 0; font-size: var(--sn-fs-xl); line-height: var(--sn-lh-snug); }
.sn-proj__title a { text-decoration: none; }
.sn-proj__title a:hover { text-decoration: underline; }

.sn-proj__badges { display: flex; flex-wrap: wrap; gap: var(--sn-space-3xs); margin: 0; }
.sn-proj__badge {
  padding: 0.15em 0.6em;
  background-color: var(--sn-surface-2);
  border-radius: var(--sn-radius-full);
  color: var(--sn-ink-2);
  font-size: var(--sn-fs-2xs);
}
/* The Q2 disclosure gets the amber accent - a marker, and the text stays on a
   text-safe token. */
.sn-proj__badge--owned {
  background-color: var(--sn-band-accent);
  color: var(--sn-accent);
  font-weight: var(--sn-wt-medium);
}

.sn-proj__desc { margin: 0; color: var(--sn-ink-2); font-size: var(--sn-fs-sm); }
.sn-proj__url { margin: 0; color: var(--sn-ink-3); font-size: var(--sn-fs-2xs); }

/* --------------------------------------------------------------------------
   Film strip
   -------------------------------------------------------------------------- */
.sn-films {
  display: grid;
  gap: var(--sn-space-sm);
  grid-template-columns: repeat(auto-fill, minmax(min(13rem, 100%), 1fr));
  margin: 0; padding: 0; list-style: none;
}
.sn-film { border-radius: var(--sn-radius-md); overflow: hidden; border: var(--sn-border-hair) solid var(--sn-line); }
.sn-film img { inline-size: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background-color: var(--sn-surface-2); }
.sn-film__t { padding: var(--sn-space-2xs) var(--sn-space-xs); font-size: var(--sn-fs-2xs); color: var(--sn-ink-2); }