/* ==========================================================================
   Responsive — Mobile first
   نقاط الاختبار: 320 · 375 · 390 · 768 · 1024 · 1280 · 1440 · 1920
   ========================================================================== */

/* ---------- أضيق الشاشات ---------- */
@media (max-width:359px){
  :root{--gutter:1rem}
  .btn{padding-inline:1.2rem;font-size:.95rem}
  .btn--lg{padding:.85rem 1.4rem;min-height:50px;font-size:1rem}
  .hero__actions .btn,
  .cta__actions .btn,
  .page-head__actions .btn{width:100%}
  .ptab{padding:.5rem .9rem;font-size:.88rem}
  .plan__amount{font-size:2.1rem}
}

/* ---------- 480 ---------- */
@media (min-width:480px){
  .offers{grid-template-columns:repeat(2,minmax(0,1fr))}
  .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* نموذج CF7 بخانتين في الصف — يقلّل ارتفاعه إلى النصف تقريبًا */
  .cf7 .cf7-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .form-actions{flex-direction:row;align-items:center;flex-wrap:wrap}
  .form-actions .btn{flex:0 0 auto}
  .wa{padding-inline-start:1rem}
}

/* ---------- 600 ---------- */
@media (min-width:600px){
  .grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .signals{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* بطاقتان: عمودان بعرض ثابت ومتمركزان */
  .pgrid{grid-template-columns:repeat(2,minmax(0,332px))}
  .pprev{grid-template-columns:repeat(2,minmax(0,1fr))}
  .brand__text{display:flex}
}

/* ---------- 768 (لوحي) ---------- */
@media (min-width:768px){
  .grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
  .signals{grid-template-columns:repeat(3,minmax(0,1fr))}
  .site-footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* القيم الخمس في صف واحد */
  .values{grid-template-columns:repeat(5,minmax(0,1fr))}
  .value{flex-direction:column;text-align:center;gap:.85rem;padding:clamp(1.5rem,3vw,2rem) clamp(.7rem,1.5vw,1rem)}

  /* صندوق الحجز ينقسم: النص في جهة والأزرار في الأخرى */
  .cta__inner{flex-direction:row;align-items:center;justify-content:space-between}
  .cta__body{align-items:flex-start;text-align:start;max-width:46ch}
  .cta__actions{flex:none;justify-content:flex-end}
}

/* ---------- 1024 (سطح المكتب) ---------- */
@media (min-width:1024px){
  .nav{display:block}
  .site-header__cta{display:inline-flex}
  .nav-toggle{display:none}

  .hero__grid{grid-template-columns:1.02fr .98fr;gap:clamp(3rem,5vw,4.5rem)}
  .split{grid-template-columns:repeat(2,minmax(0,1fr))}

  /*
    الصورة بارتفاع عمود النص: العمودان يتمدّدان بدل التوسيط، والصورة تملأ
    ارتفاع خليتها مع object-fit:contain فتحافظ على نسبتها وتتمركز بلا تشويه.
  */
  .split--stretch{align-items:stretch}
  .split--stretch .split__media{display:flex;align-items:stretch;justify-content:center;min-inline-size:0}
  .split--stretch .split__media .media,
  .split--stretch .split__media picture{display:flex;inline-size:100%;block-size:100%}
  /* object-position علوي: الفائض الرأسي يُترك أسفل الصورة فيحاذي رأسها
     سقف عمود النص بدل أن تتوسّط وتترك فجوة فوقها. */
  .split--stretch .split__media img{block-size:100%;inline-size:100%;object-fit:contain;object-position:center top}

  .svc-row{grid-template-columns:1fr 1fr;gap:clamp(3rem,5vw,4.5rem)}
  .svc-row:nth-child(even) .svc-row__media{order:-1}

  /* كل البطاقات في صف واحد مهما كان عددها */
  .pprev{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);grid-template-columns:none;gap:clamp(.7rem,1.2vw,1rem)}
  .pprev__card{padding:clamp(1.1rem,1.8vw,1.35rem);gap:.7rem}
  .pprev__price{font-size:clamp(1.6rem,2.2vw,1.95rem)}
  .pprev__fact{font-size:.86rem}
  .pprev__go{font-size:.84rem}
  /* المسار يتوسّط والبطاقات تتبادل جانبيه، والعقدة في المنتصف مقابلة لبطاقتها */
  .steps{--node:48px;--rail-x:calc(50% - 1px)}
  .step{
    grid-template-columns:minmax(0,1fr) var(--node) minmax(0,1fr);
    gap:0 clamp(1.25rem,2.5vw,2rem);
    padding-block-end:clamp(1.2rem,2.4vw,1.7rem);
  }
  .step__node{grid-column:2}
  .step__card{grid-column:1}
  .step:nth-child(even) .step__card{grid-column:3}

  /* أكثر من ثلاث باقات: ثلاث في الصف بنفس عرض البطاقتين */
  .pgrid--3up{grid-template-columns:repeat(3,minmax(0,332px))}

  .site-footer__grid{grid-template-columns:1.45fr 1.2fr 1.25fr;gap:clamp(2rem,4vw,3.5rem)}
}

/* ---------- 1280 ---------- */
/* 1280–1439 — يشمل عرض العرض الافتراضي 1360 بكسل */
@media (min-width:1280px){
  :root{--container:1240px}
  /* ثلاثة أقسام فقط: صفّ واحد مريح */
  .grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ---------- 1440+ ---------- */
@media (min-width:1440px){
  :root{--container:1200px}
}

@media (min-width:1900px){
  :root{--container:1260px;--gutter:3rem}
  body{font-size:1.08rem}
}

/* ---------- الطباعة ---------- */
@media print{
  .site-header,.drawer,.wa,.section--deep,.skip-link{display:none !important}
  body{background:#fff;color:#000;font-size:12pt}
  .section{padding-block:1.25rem}
  .plan,.card,.faq__item{break-inside:avoid;border:1px solid #ccc}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em;color:#555}
}

/* ---------- تباين أعلى ---------- */
@media (prefers-contrast:more){
  :root{--ink-soft:#4A3B60;--lav-300:#B9A0D4}
  .btn{border-width:2px}
  .control{border-width:2px}
}

/* نقاط الهيرو: منع كسر العبارة الواحدة عبر سطرين */
@media (min-width:900px){
  .hero__point{white-space:nowrap}
}

/* ==========================================================================
   تبويبات الأسعار على الجوّال — شريط قابل للسحب بدل حاوية تلتفّ
   الالتفاف داخل حاوية بيضاوية يكسر شكلها ويترك صفوفًا متفاوتة، فنستبدله
   بصفّ واحد يُسحب أفقيًا مع تثبيت (snap) — نمط الشرائط المقطّعة المعتاد.
   ========================================================================== */
@media (max-width:767px){
  .ptabs{
    flex-wrap:nowrap;
    justify-content:flex-start;
    inline-size:auto;max-inline-size:none;
    /* يمتدّ حتى حافة الشاشة ليُقرأ كشريط لا كصندوق مضغوط */
    margin-inline:calc(var(--gutter) * -1);
    padding:0 var(--gutter);
    background:none;
    border:0;
    border-radius:0;
    gap:.5rem;
    overflow-x:auto;
    overscroll-behavior-inline:contain;
    scroll-snap-type:inline proximity;
    scroll-padding-inline:var(--gutter);
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .ptabs::-webkit-scrollbar{display:none}

  .ptab{
    flex:none;
    scroll-snap-align:start;
    padding:.62rem 1.1rem;
    background:rgba(255,255,255,.85);
    border:1px solid var(--lav-300);
    transition:color var(--t-base) var(--ease),
               background-color var(--t-base) var(--ease),
               border-color var(--t-base) var(--ease);
  }
  .ptab[aria-selected="true"]{
    background:var(--purple-600);
    border-color:var(--purple-600);
    box-shadow:0 4px 14px rgba(58,28,96,.18);
  }
}