/*
 * ديزاين الصفحة الرئيسية
 *
 * index.html و en/index.html فقط: الهيرو، سكشن الطقس، الثلاث لوحات،
 * السكشنان المنقسمان، سكشن المعمل، وكارتا العروض.
 *
 * كل القواعد جوّه @layer components عشان ترتيب الأولويات يفضل
 * زي ما كان: كلاسات Tailwind (layer utilities) تقدر تتغلّب عليها،
 * وده نفس ترتيب نسخة Next بالحرف. ماتشيلش السطر ده.
 *
 * الترتيب نفسه معلَن في tailwind.css، فلازم يتحمّل قبل الملفّ ده —
 * وده مظبوط في كل صفحات HTML.
 */

@layer components {
  /* ===== الهيرو =====
     ارتفاعات الثيمة: 800px · 400px (≤991) · 300px (≤767) */
  .hero {
    position: relative;
    height: 300px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
  }
  @media (min-width: 768px) { .hero { height: 400px; } }
  @media (min-width: 992px) { .hero { height: 800px; } }

  .hero__inner {
    height: 100%;
    max-width: 1920px;
    margin-inline: auto;
    padding-inline: var(--gutter);
    display: flex;
    align-items: center;
    justify-content: flex-start;  /* RTL: الكتلة ناحية اليمين */
  }
  .hero__text {
    text-align: center;
    color: #fff;
    max-width: 34rem;
    margin-inline-start: 4%;
  }
  .hero__kicker {
    font-size: 13px;
    letter-spacing: 0.42em;   /* لاتيني فقط */
    margin: 0 0 14px;
    opacity: 0.92;
  }
  .hero__title {
    color: #fff;
    font-size: 30px;
    font-weight: 500;
    line-height: 1.3;
    margin: 0;
  }
  .hero__line {
    font-size: 15px;
    line-height: 1.75;
    margin: 10px 0 0;
    opacity: 0.94;
  }
  @media (min-width: 768px) {
    .hero__title { font-size: 40px; }
    .hero__line { font-size: 18px; }
  }
  @media (min-width: 992px) {
    .hero__title { font-size: 56px; }
    .hero__line { font-size: 22px; margin-top: 14px; }
    .hero__kicker { font-size: 15px; }
  }



  /* ===== سكشن الطقس اليومي ===== */
  .ritual {
    /* فاصل 100px عن السكشن اللي فوقه — بيبان بلون خلفية الصفحة */
    margin-top: 100px;
    position: relative;
    min-height: 320px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
  }
  @media (min-width: 768px) { .ritual { min-height: 430px; } }
  @media (min-width: 992px) { .ritual { min-height: 650px; } }

  .ritual__inner {
    width: 100%;
    max-width: 1920px;
    margin-inline: auto;
    padding-inline: var(--gutter);
    padding-block: 48px;
    display: flex;
    justify-content: flex-start;  /* RTL: الكتلة ناحية اليمين */
  }
  .ritual__text {
    text-align: center;
    color: #fff;
    max-width: 36rem;
    margin-inline-start: 6%;
  }
  .ritual__title {
    color: #fff;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.35;
    margin: 0 0 14px;
  }
  .ritual__line {
    font-size: 15px;
    line-height: 1.7;
    margin: 4px 0 0;
    opacity: 0.94;
  }
  @media (min-width: 768px) {
    .ritual__title { font-size: 32px; }
    .ritual__line { font-size: 17px; }
  }
  @media (min-width: 992px) {
    .ritual__title { font-size: 42px; margin-bottom: 20px; }
    .ritual__line { font-size: 21px; margin-top: 6px; }
  }

  .ritual__icons {
    list-style: none;
    margin: 36px 0 0;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 34px;
    color: #fff;
    opacity: 0.95;
  }
  @media (max-width: 767px) {
    .ritual__icons { gap: 22px; margin-top: 26px; }
    .ritual__icons svg { width: 42px; height: 42px; }
  }


  /* ===== السكشن الثالث: ثلاث لوحات بفواصل ===== */
  .trio {
    /* نفس الفاصل اللي بين الهيرو وسكشن الطقس */
    margin-top: 100px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }
  @media (min-width: 768px) { .trio { grid-template-columns: repeat(3, 1fr); } }

  .trio__panel {
    position: relative;
    margin: 0;
    aspect-ratio: 5 / 7;
    background-size: cover;
    background-position: center;
    color: #fff;
  }
  .trio__top,
  .trio__bottom {
    position: absolute;
    inset-inline: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 26px 28px;
    line-height: 1.45;
  }
  /* النصّ العلوي في بداية السطر، والسفلي في نهايته — زي الأصل */
  .trio__top {
    top: 0;
    align-items: flex-start;
    font-size: 17px;
    font-weight: 500;
  }
  .trio__bottom {
    bottom: 0;
    align-items: flex-end;
    text-align: end;
    font-size: 14px;
    opacity: 0.95;
  }
  @media (min-width: 1200px) {
    .trio__top { font-size: 21px; }
    .trio__bottom { font-size: 16px; }
    .trio__top, .trio__bottom { padding: 34px 36px; }
  }


  /* ===== السكشن المنقسم — لوحتان ملتصقتان ===== */
  .split {
    /* 90px = نصّ المسافة القديمة (80 حشوة السلايدر + 100 هامش) */
    margin-top: 90px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;                 /* ملتصقتان، بدون فاصل */
  }
  @media (min-width: 768px) {
    .split {
      grid-template-columns: 1fr 1fr;
      /* أطول شوية من شاشة كاملة */
      min-height: 106vh;
    }
  }
  .split__panel {
    position: relative;
    min-height: 60vw;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
  }
  @media (min-width: 768px) { .split__panel { min-height: 0; } }

  .split__text {
    color: #fff;
    padding: 40px 32px;
    max-width: 30rem;
    margin-inline-start: 8%;
  }
  .split__brand { font-size: 18px; font-weight: 600; margin: 0; }
  .split__title {
    color: #fff;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.35;
    margin: 2px 0 0;
  }
  .split__sub { font-size: 16px; font-weight: 600; margin: 34px 0 0; }
  .split__body { font-size: 15px; line-height: 1.75; margin: 26px 0 0; opacity: 0.95; }
  @media (min-width: 992px) {
    .split__brand { font-size: 22px; }
    .split__title { font-size: 30px; }
    .split__sub { font-size: 18px; }
    .split__body { font-size: 17px; }
    .split__text { padding: 48px 40px; }
  }


  /* ===== سكشن المعمل ===== */
  .lab {
    margin-top: 100px;
    position: relative;
    min-height: 70vh;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: center;
  }
  @media (min-width: 992px) { .lab { min-height: 106vh; } }

  .lab__inner {
    width: 100%;
    max-width: 1920px;
    margin-inline: auto;
    padding-inline: var(--gutter);
    padding-block: 56px;
  }
  /* 6% زي .ritual__text — كانت 2% وده خلّى النصّ لازق في الحافّة.
     الخاصية منطقية، فبتبقى من اليمين في RTL ومن الشمال في LTR. */
  .lab__text { color: #fff; max-width: 34rem; margin-inline-start: 6%; }
  .lab__title {
    color: #fff;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
  }
  .lab__sub {
    font-size: 16px;
    font-weight: 300;
    line-height: 1.6;
    margin: 14px 0 0;
    opacity: 0.92;
  }
  @media (min-width: 992px) {
    .lab__title { font-size: 44px; }
    .lab__sub { font-size: 24px; margin-top: 18px; }
  }

  .lab__features {
    list-style: none;
    margin: 46px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 30px;
  }
  .lab__features > li { display: flex; align-items: center; gap: 20px; }
  .lab__icon { flex: 0 0 auto; color: #fff; opacity: 0.95; }
  @media (max-width: 991px) {
    .lab__features { margin-top: 32px; gap: 22px; }
    .lab__icon svg { width: 46px; height: 46px; }
  }
  .lab__feature-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    margin: 0;
  }
  .lab__feature-body {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    line-height: 1.45;
    margin: 4px 0 0;
    opacity: 0.95;
  }
  .lab__big { font-size: 26px; font-weight: 700; white-space: nowrap; }
  @media (min-width: 992px) {
    .lab__feature-title { font-size: 25px; }
    .lab__feature-body { font-size: 16px; }
    .lab__big { font-size: 38px; }
  }


  /* ===== كارتا العروض ===== */
  .promo { padding-block: 56px; }
  @media (min-width: 992px) { .promo { padding-block: 80px; } }
  .promo__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
  }
  @media (min-width: 768px) { .promo__grid { grid-template-columns: 1fr 1fr; gap: 24px; } }

  .promo__card {
    color: #fff;
    padding: 44px 40px;
    min-height: 300px;
  }
  @media (min-width: 992px) { .promo__card { padding: 64px 70px; min-height: 440px; } }
  .promo__card--green { background-color: #4a7355; }
  .promo__card--clay { background-color: #9a7441; }

  .promo__kicker { font-size: 14px; margin: 0; opacity: 0.85; }
  .promo__title {
    color: #fff;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.4;
    margin: 14px 0 0;
  }
  @media (min-width: 992px) { .promo__title { font-size: 30px; margin-top: 18px; } }
  .promo__note { font-size: 13px; margin: 14px 0 0; opacity: 0.85; }

  .promo__cta {
    display: inline-block;
    margin-top: 30px;
    background: #fff;
    color: var(--color-ink);
    font-size: 13px;
    font-weight: 600;
    padding: 14px 26px;
    transition: 0.3s;
  }
  .promo__cta:hover { background: var(--color-ink); color: #fff; }

}