/* =============================================================
   FALMIS — LAYOUT
   Requires falmis-tokens.css
   ============================================================= */

/* ---------- container ---------- */

.fm-container{
  width:100%;
  max-width:var(--fm-container-lg);
  margin-inline:auto;
  padding-inline:var(--fm-gutter);
}
.fm-container--sm{ max-width:var(--fm-container-sm); }  /* reading, forms */
.fm-container--md{ max-width:var(--fm-container-md); }  /* app screens */
.fm-container--full{ max-width:none; }

/* ---------- section rhythm ---------- */

.fm-section{ padding-block:var(--fm-section-y); }
.fm-section--tight{ padding-block:var(--fm-space-12); }
.fm-section + .fm-section{ padding-block-start:0; }

.fm-section__head{ margin-block-end:var(--fm-space-8); max-width:62ch; }
.fm-section__eyebrow{
  display:block;
  margin-block-end:var(--fm-space-2);
  font-size:var(--fm-text-xs);
  font-weight:var(--fm-weight-medium);
  color:var(--fm-text-accent);
}
.fm-section__title{
  margin:0 0 var(--fm-space-3);
  font-size:var(--fm-text-2xl);
  line-height:var(--fm-lh-2xl);
  font-weight:var(--fm-weight-display);
  color:var(--fm-text-primary);
}
.fm-section__lead{
  margin:0;
  font-size:var(--fm-text-md);
  line-height:var(--fm-lh-md);
  color:var(--fm-text-muted);
}
.fm-section__head--center{ margin-inline:auto; text-align:center; }

/* ---------- grid ---------- */

.fm-grid{
  display:grid;
  gap:var(--fm-space-4);
  grid-template-columns:repeat(auto-fit,minmax(min(var(--col,250px),100%),1fr));
}
.fm-grid--2{ --col:420px; }
.fm-grid--3{ --col:300px; }
.fm-grid--4{ --col:230px; }
.fm-grid--gap-lg{ gap:var(--fm-space-6); }

/* a fixed split that collapses in one step */
.fm-split{
  display:grid;
  gap:var(--fm-space-8);
  grid-template-columns:1fr;
  align-items:center;
}
@media (min-width:861px){
  .fm-split{ grid-template-columns:var(--split,1fr 1fr); }
  .fm-split--sidebar{ --split:1fr 320px; }
  .fm-split--wide-start{ --split:1.4fr 1fr; }
}

/* ---------- stack and cluster ---------- */

.fm-stack{ display:flex; flex-direction:column; gap:var(--stack,var(--fm-space-4)); }
.fm-stack--sm{ --stack:var(--fm-space-2); }
.fm-stack--lg{ --stack:var(--fm-space-8); }

.fm-cluster{ display:flex; flex-wrap:wrap; gap:var(--fm-space-3); align-items:center; }
.fm-cluster--between{ justify-content:space-between; }

/* ---------- hero ---------- */

.fm-hero{
  position:relative;
  overflow:hidden;
  padding-block:var(--fm-space-24) var(--fm-space-20);
  background:var(--fm-gradient-deep);
}
.fm-hero__inner{
  position:relative;
  max-width:var(--fm-container-lg);
  margin-inline:auto;
  padding-inline:var(--fm-gutter);
}
.fm-hero__title{
  margin:0 0 var(--fm-space-4);
  max-width:18ch;
  font-size:var(--fm-text-4xl);
  line-height:var(--fm-lh-4xl);
  font-weight:var(--fm-weight-display);
  color:var(--fm-text-primary);
}
.fm-hero__lead{
  margin:0 0 var(--fm-space-8);
  max-width:46ch;
  font-size:var(--fm-text-md);
  line-height:var(--fm-lh-md);
  color:var(--fm-text-body);
}
.fm-hero--center .fm-hero__inner{ text-align:center; }
.fm-hero--center .fm-hero__title,
.fm-hero--center .fm-hero__lead{ margin-inline:auto; }
.fm-hero--center .fm-cluster{ justify-content:center; }

/* ---------- divider ---------- */

.fm-rule{ height:1px; border:none; margin-block:var(--fm-space-8); background:var(--fm-border-subtle); }
.fm-rule--brand{
  height:1px;
  background:var(--fm-gradient-aurora);
  opacity:.45;
}

/* ---------- empty state ---------- */

.fm-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:var(--fm-space-3);
  min-height:320px;
  padding:var(--fm-space-12) var(--fm-space-6);
  text-align:center;
  border-radius:var(--fm-radius-xl);
  border:1px dashed var(--fm-border);
  background:var(--fm-surface-1);
}
.fm-empty__title{
  margin:0;
  font-size:var(--fm-text-lg);
  line-height:var(--fm-lh-lg);
  font-weight:var(--fm-weight-bold);
  color:var(--fm-text-primary);
}
.fm-empty__text{
  margin:0;
  max-width:42ch;
  font-size:var(--fm-text-sm);
  line-height:var(--fm-lh-sm);
  color:var(--fm-text-muted);
}
.fm-empty .fm-cluster{ margin-block-start:var(--fm-space-3); }

/* an empty state that is an error rather than a blank slate */
.fm-empty--error{ border-color:var(--fm-border-error); background:var(--fm-error-bg); }
.fm-empty--error .fm-empty__title{ color:var(--fm-error); }

/* ---------- utilities ---------- */

.fm-only-desktop{ display:none; }
@media (min-width:861px){
  .fm-only-desktop{ display:revert; }
  .fm-only-mobile{ display:none; }
}

.fm-visually-hidden{
  position:absolute;
  width:1px; height:1px;
  margin:-1px; padding:0;
  overflow:hidden;
  clip:rect(0 0 0 0);
  white-space:nowrap;
  border:0;
}

/* =============================================================
   RULES
   · Reading columns cap at --fm-container-sm. A 1200px line of
     Persian body text is unreadable no matter the line height.
   · Section rhythm comes from --fm-section-y, which already
     steps up on desktop. Do not hand-set section margins.
   · Grids use auto-fit with minmax(min(col,100%),1fr) so a
     column can shrink below its minimum instead of overflowing.
   · An empty state always offers an action. A dead end with no
     way forward is a bug, not a state.
   · One hero per page.
   ============================================================= */