/*
  نوار اشتراک قهوه در صفحه‌ی اصلی: دو عکس تمام‌قد در دو طرف و یک پنل
  سبز در وسط. عرض کامل صفحه است و ors-wrap ندارد، چون سه ستون باید تا
  لبه‌ی صفحه بروند.

  چرا سبز اینجا با نوار سبز هیرو یکی نیست: هیرو فقط الگوی تزئینی دارد و
  متن ریز رویش نمی‌نشیند، ولی این پنل یک پاراگراف دارد. سفید روی
  #4b9855 نسبت ۳٫۵۵:۱ می‌دهد که برای متن کوچک از AA پایین‌تر است. سبز
  کنش‌گر (#3f8049) همان لحن را دارد و ۴٫۷۸:۱ می‌دهد.
*/

.ors-sub-wrap {
  /*
    توکن‌ها اینجا تعریف می‌شوند نه روی .ors-sub، چون متغیرهای CSS فقط
    به پایین ارث می‌رسند و خودِ این عنصر هم به رنگ سبز نیاز دارد.
  */
  --sub-green: var(--ors-green-action);
  --sub-height: clamp(430px, 44vw, 620px);

  background-color: var(--sub-green);
}

.ors-sub {
  display: grid;
  grid-template-columns: 1fr 1.06fr 1fr;
  align-items: stretch;

  /*
    روی نمایشگر خیلی پهن، هر ستون عکس بیش از ۱۱۰۰ پیکسل می‌شد در حالی
    که قد نوار ۶۲۰ می‌ماند. عکس‌ها پرتره‌اند (نسبت ۰٫۶۹)، پس object-fit
    مجبور می‌شد ۲٫۶ برابر بزرگشان کند و فقط یک نوار باریک از وسطشان
    دیده می‌شد — همان چیزی که «کشیده» به نظر می‌رسد. با سقفِ عرض، شبکه
    وسط می‌ماند و زمینه‌ی سبزِ خودِ سکشن دو طرف را پر می‌کند.
  */
  max-width: 2200px;
  margin-inline: auto;
}


/* ---------------- عکس‌های دو طرف ---------------- */

.ors-sub__media {
  position: relative;
  margin: 0;
  overflow: hidden;
  min-height: var(--sub-height);
}

/*
  عکس absolute است تا از جریان بیرون بماند. اگر در جریان بماند، قد
  نوار را نسبت ابعاد خودِ عکس تعیین می‌کند نه --sub-height، و نوار
  ۱۵۰ پیکسل بلندتر از چیزی می‌شود که خواسته‌ایم.
*/
.ors-sub__media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------------- پنل سبز وسط ---------------- */

.ors-sub__panel {
  position: relative;
  overflow: hidden;

  display: flex;
  align-items: center;

  min-height: var(--sub-height);
  padding: clamp(40px, 4.4vw, 72px) clamp(28px, 3.6vw, 58px);

  background-color: var(--sub-green);
}

/*
  شاخه‌ی پس‌زمینه. در طرح مرجع سمت انتهای پنل است و متن رویش نمی‌افتد؛
  چون چیدمان ما راست‌به‌چپ است، هم جایش قرینه می‌شود و هم خود تصویر،
  وگرنه برگ‌ها به‌سمت متن خم می‌شوند.
*/
.ors-sub__branch {
  position: absolute;
  inset-inline-end: -4%;
  bottom: -3%;

  width: 62%;
  max-width: 360px;
  height: auto;

  opacity: 0.3;
  transform: scaleX(-1);
  pointer-events: none;
  user-select: none;
}

/*
  متن وسط‌چین است، ولی عرضش همچنان محدود می‌ماند (۳۲ نویسه).
  متن وسط‌چینِ تمام‌عرض، هر سطر را از جای متفاوتی شروع می‌کند و
  چشم برای پیدا کردن ابتدای سطر بعدی باید بگردد — در متن فارسی
  بیشتر هم آزار دارد. با عرض محدود، این هزینه ناچیز است.

  `margin-inline: auto` لازم است چون پنل فلکس است و بدون آن، بلوکِ
  ۳۲ نویسه‌ای در لبه‌ی راست می‌ماند و فقط متنِ داخلش وسط می‌شود.
  دکمه inline-flex است، پس با همین text-align وسط می‌آید.
*/
.ors-sub__body {
  position: relative; /* بالای شاخه */
  z-index: 1;
  max-width: 32ch;
  margin-inline: auto;
  text-align: center;
}

.ors-sub__eyebrow {
  margin: 0 0 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  /* شفافیت کمتر از این، نسبت را زیر ۴٫۵:۱ می‌برد و برای متن ۱۳ پیکسلی کافی نیست */
  color: #ffffff;
}

.ors-sub__title {
  margin: 0 0 18px;
  font-family: var(--ors-font-fa);
  font-size: clamp(30px, 3.1vw, 46px);
  font-weight: 800;
  line-height: 1.35;
  color: #ffffff;
}

.ors-sub__lead {
  margin: 0 0 30px;
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.95;
  color: #ffffff;
}

.ors-sub__cta.ors-btn--dark:hover:not(:disabled),
.ors-sub__cta.ors-btn--dark:focus-visible {
  /* هاور سبزِ پیش‌فرض روی پنل سبز ناپدید می‌شود */
  background-color: #000000;
  border-color: #000000;
}

/* ---------------- موبایل ---------------- */

@media (max-width: 900px) {
  .ors-sub {
    grid-template-columns: 1fr;
  }

  .ors-sub__media {
    min-height: 0;
    height: 230px;
  }

  .ors-sub__panel {
    min-height: 0;
    padding: 46px 22px 52px;
  }

  .ors-sub__body {
    max-width: none;
  }

  .ors-sub__branch {
    width: 64%;
    opacity: 0.16;
  }
}