/* ==========================================================================
   Layout Primitives
   Reusable page scaffolding for the static site: centered containers, vertical
   section rhythm, two-column editorial layouts, and grid utilities.
   ========================================================================== */

.container {
  width: min(calc(100% - 48px), var(--container));
  margin-inline: auto;
}

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

.section--soft {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0)),
    var(--soft);
}

.section--navy {
  background: var(--navy);
  color: var(--white);
}

.section--navy p,
.section--navy .eyebrow {
  color: rgba(255, 255, 255, 0.72);
}

/* ==========================================================================
   Section Headings and Editorial Columns
   These patterns keep long Persian service pages readable without requiring
   page-specific layout CSS.
   ========================================================================== */

.section-heading {
  max-width: 830px;
  margin-bottom: 54px;
}

.section-heading--split {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, 0.75fr);
  gap: 64px;
  max-width: none;
  align-items: end;
}

.two-column {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 72px;
  align-items: center;
}

.two-column--balanced {
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
}

.two-column--top {
  align-items: start;
}

.card-grid {
  display: grid;
  gap: 24px;
}

.card-grid--four {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.card-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.link-panel-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

/* ==========================================================================
   Homepage Hero System
   Full-bleed image hero with a navy overlay tuned for RTL Persian content.
   Page-specific heroes use component styles in components.css.
   ========================================================================== */

.hero {
  position: relative;
  min-height: 790px;
  isolation: isolate;
  overflow: hidden;
  color: var(--white);
}

.hero__media,
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero__media--image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
}

.hero__overlay {
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(8, 28, 46, 0.9), rgba(8, 28, 46, 0.64) 46%, rgba(8, 28, 46, 0.48)),
    linear-gradient(180deg, rgba(8, 28, 46, 0.18), rgba(8, 28, 46, 0.62));
}

.hero__content {
  display: flex;
  min-height: 790px;
  flex-direction: column;
  justify-content: center;
  padding-top: 110px;
  padding-bottom: 82px;
}

.hero__lead {
  max-width: 720px;
  margin-bottom: 34px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.28rem;
}

.hero__actions,
.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

.hero__proof {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 44px;
}

.hero__proof span {
  padding: 9px 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.9rem;
}