/*
 * أنماط سلايدر البنرات وبانرات الصفحة الرئيسية.
 *
 * مبني على النموذج المعتمد design-mockups/04-banner-slider-proposal.html
 * بلوحة الهوية --tahado-* من tahado-theme.css. RTL أساس بخصائص منطقية.
 *
 * @package Tahado
 * @since   1.12.0
 */

/* ===== حاوية السلايدر ===== */
.tahado-hero-slider{padding:1.25rem 0 .75rem}
.tahado-slider{
  position:relative;
  border-radius:var(--tahado-radius);
  overflow:hidden;
  box-shadow:0 10px 30px rgba(var(--tahado-ink-rgb) / .10);
  background:var(--tahado-purple-deep);
  outline:none;
}
.tahado-slider:focus-visible{box-shadow:0 0 0 3px #fff,0 0 0 6px var(--tahado-gold)}
.tahado-slider__viewport{overflow:hidden;touch-action:pan-y;cursor:grab}
.tahado-slider__viewport.is-dragging{cursor:grabbing}
.tahado-slider__track{
  display:flex;
  transition:transform .65s cubic-bezier(.33,.9,.25,1);
  will-change:transform;
}
.tahado-slider__track.no-anim{transition:none}
.tahado-slide{
  position:relative;
  flex:0 0 100%;
  min-width:100%;
  aspect-ratio:1774/887;
  max-height:74vh;
}
.tahado-slide a{position:absolute;inset:0;display:block}
.tahado-slide img{width:100%;height:100%;object-fit:cover}
.tahado-slide.is-active img{animation:tahado-kenburns 6.5s ease-out forwards}
@keyframes tahado-kenburns{from{transform:scale(1)}to{transform:scale(1.045)}}

/* أسهم التنقل — هدف لمس 48px */
.tahado-slider__arrow{
  position:absolute;top:50%;
  translate:0 -50%;
  z-index:5;
  width:48px;height:48px;
  display:grid;place-items:center;
  border:none;border-radius:50%;
  background:rgba(250,244,233,.9);
  color:var(--tahado-text);
  cursor:pointer;
  box-shadow:0 4px 14px rgba(var(--tahado-ink-rgb) / .25);
  transition:background .2s,color .2s,transform .2s;
}
.tahado-slider__arrow:hover{background:var(--tahado-gold);color:var(--tahado-on-gold);transform:scale(1.06)}
.tahado-slider__arrow:active{transform:scale(.96)}
.tahado-slider__arrow:focus-visible{outline:3px solid var(--tahado-gold-light);outline-offset:2px}
.tahado-slider__arrow--prev{inset-inline-start:18px}
.tahado-slider__arrow--next{inset-inline-end:18px}

/* شريحة العدّاد */
.tahado-slider__count{
  position:absolute;top:16px;inset-inline-end:16px;
  z-index:5;
  background:rgba(var(--tahado-ink-rgb) / .55);
  color:#fff;
  font-size:.8rem;font-weight:700;letter-spacing:.06em;
  padding:4px 14px;border-radius:99px;
  backdrop-filter:blur(6px);
  font-variant-numeric:tabular-nums;
  direction:ltr; /* «2 / 5» تُقرأ يسار-يمين حتى في سياق RTL */
}

/* النقاط + زر الإيقاف — النقطة النشطة تمتلئ ذهبياً خلال مدة الشريحة */
.tahado-slider__footer{
  position:absolute;bottom:14px;inset-inline:0;
  z-index:5;
  display:flex;justify-content:center;align-items:center;gap:14px;
}
.tahado-slider__dots{display:flex;gap:8px}
.tahado-slider__dot{
  position:relative;
  width:12px;height:12px;border:none;border-radius:99px;
  background:rgba(250,244,233,.55);
  cursor:pointer;padding:0;
  overflow:hidden;
  transition:width .3s,background .3s;
  box-shadow:0 1px 4px rgba(var(--tahado-ink-rgb) / .4);
}
.tahado-slider__dot:focus-visible{outline:2px solid var(--tahado-gold-light);outline-offset:2px}
.tahado-slider__dot.is-active{width:38px;background:rgba(250,244,233,.35)}
.tahado-slider__dot.is-active::after{
  content:"";
  position:absolute;inset:0;border-radius:99px;
  background:var(--tahado-gold);
  transform-origin:right;
  animation:tahado-dotprogress var(--tahado-autoplay,5.5s) linear forwards;
}
.tahado-slider.is-paused .tahado-slider__dot.is-active::after{animation-play-state:paused}
@keyframes tahado-dotprogress{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.tahado-slider__toggle{
  width:36px;height:36px;
  display:grid;place-items:center;
  border:none;border-radius:50%;
  background:rgba(250,244,233,.55);
  color:var(--tahado-text);
  cursor:pointer;
  transition:background .2s;
}
.tahado-slider__toggle:hover{background:var(--tahado-gold)}
.tahado-slider__toggle:focus-visible{outline:2px solid var(--tahado-gold-light);outline-offset:2px}
.tahado-slider__toggle .i-play{display:none}
.tahado-slider.is-paused .tahado-slider__toggle .i-play{display:block}
.tahado-slider.is-paused .tahado-slider__toggle .i-pause{display:none}

/* احتياط لمنطقة الإعلان إن لم يعرّف القالب screen-reader-text */
.tahado-slider [data-tahado-slider="live"]{
  position:absolute;width:1px;height:1px;margin:-1px;
  clip-path:inset(50%);overflow:hidden;white-space:nowrap;
}

/* ===== الموبايل: شريط التحكم أسفل السلايدر بدل التراكب على الصورة
   (يمنع تغطية نصوص البنرات المدمجة) والأسهم تخفى — السحب والنقاط تكفي
   ولا يمكن ضمان عدم تغطية السهم لنصوص مختلفة المواضع في 5 بنرات =====
   + عرض كامل بلا هوامش جانبية (اختراق حاوية القالب) وأبعاد 16:9
   لتملأ مساحة أكبر من الشاشة؛ موضع القص لكل شريحة يأتي من PHP
   (object-position) حتى لا تُقصّ نصوص البنرات المدمجة. */
@media(max-width:48em){
  .tahado-hero-slider{padding:.5rem 0 0}
  .tahado-slider{
    width:100vw;
    max-width:100vw;
    margin-inline:calc(50% - 50vw);
    border-radius:0;
  }
  /* الأسهم تُعاد على الموبايل بحجم أصغر وشفافية منخفضة حتى لا
     تغطي نصوص البنرات المدمجة — والسحب والنقاط يبقيان متاحين.
     الموضع يُضبط هنا على صِغتي --prev/--next لِتغلّب قواعد الاستعلام
     (الأخيرة في المصدر) على القواعد الأساسية؛ وإلا التقى السهمان
     على الحافة نفسها. */
  .tahado-slider__arrow{
    width:36px;height:36px;
    opacity:.55;
  }
  .tahado-slider__arrow--prev{inset-inline-start:8px}
  .tahado-slider__arrow--next{inset-inline-end:8px}
  .tahado-slider__arrow:active{opacity:1}
  .tahado-slider__count{top:10px;inset-inline-end:10px;font-size:.72rem}
  .tahado-slide{aspect-ratio:16/9;max-height:none}
  .tahado-slider__footer{
    position:static;
    padding:12px 0 14px;
    background:var(--tahado-purple-deep);
  }
  .tahado-slider__dot.is-active{background:rgba(250,244,233,.25)}
}

/* تقليل الحركة: بلا تكبير تدريجي ولا انتقالات */
@media (prefers-reduced-motion: reduce){
  .tahado-slider__track{transition:none}
  .tahado-slide.is-active img{animation:none}
  .tahado-slider__dot.is-active::after{animation:none;transform:scaleX(1)}
}

/* ===== قسم الإبراز: بانر المصحف ===== */
.tahado-banner-spotlight{padding:2.5rem 0}
.tahado-banner-spotlight__card{
  display:grid;grid-template-columns:1.15fr .85fr;
  border-radius:var(--tahado-radius);overflow:hidden;
  box-shadow:0 10px 30px rgba(var(--tahado-ink-rgb) / .10);
  background:var(--tahado-surface);
}
.tahado-banner-spotlight__body{
  padding:2.25rem 2rem;
  display:flex;flex-direction:column;justify-content:center;gap:.9rem;
  background:linear-gradient(160deg,var(--tahado-surface) 60%,var(--tahado-bg));
}
.tahado-banner-spotlight__title{
  font-family:'El Messiri',sans-serif;
  font-size:1.9rem;font-weight:700;
  color:var(--tahado-purple-deep);line-height:1.4;margin:0;
}
.tahado-banner-spotlight__sub{color:var(--tahado-mute);font-size:.98rem;margin:0}
.tahado-banner-spotlight__body .tahado-btn{align-self:flex-start}
.tahado-banner-spotlight__img{min-height:280px}
.tahado-banner-spotlight__img a{display:block;height:100%}
.tahado-banner-spotlight__img img{width:100%;height:100%;object-fit:cover}
@media(max-width:48em){
  .tahado-banner-spotlight{padding:1.5rem 0}
  /* عرض كامل بلا هوامش + صورة 16:9 — موضع القص يسار لأن نص البنر
     المدمج على يسار الصورة (انظر verify/crop-analysis) */
  .tahado-banner-spotlight__card{
    grid-template-columns:1fr;
    width:100vw;max-width:100vw;
    margin-inline:calc(50% - 50vw);
    border-radius:0;
  }
  .tahado-banner-spotlight__img{min-height:0;aspect-ratio:16/9;order:-1}
  .tahado-banner-spotlight__img img{object-position:0% 50%}
  .tahado-banner-spotlight__title{font-size:1.5rem}
}

/* ===== البانرات العريضة (السجاد الخضراء + إسلامت الأطفال) ===== */
.tahado-banner-promo,.tahado-banner-kids{padding:1.5rem 0}
.tahado-wide-banner{
  position:relative;
  border-radius:var(--tahado-radius);overflow:hidden;
  box-shadow:0 10px 30px rgba(var(--tahado-ink-rgb) / .10);
  aspect-ratio:1774/887;max-height:430px;
}
.tahado-wide-banner a{position:absolute;inset:0;display:block}
.tahado-wide-banner img{width:100%;height:100%;object-fit:cover}
@media(max-width:48em){
  /* عرض كامل + 16:9؛ القصّ مثبت يميناً لسجاد (نصها المدمج يمين)
     ويساراً لإسلامت الأطفال (نصها يسار) — انظر verify/crop-analysis */
  .tahado-wide-banner{
    width:100vw;max-width:100vw;
    margin-inline:calc(50% - 50vw);
    border-radius:0;
    aspect-ratio:16/9;max-height:none;
  }
  .tahado-banner-promo .tahado-wide-banner img{object-position:100% 50%}
  .tahado-banner-kids .tahado-wide-banner img{object-position:0% 50%}
}

/* ===== شبكة البانرات المزدوجة (القهوة + زمزم) ===== */
.tahado-banner-duo{padding:1.5rem 0}
.tahado-banner-duo__grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}
.tahado-banner-duo__card{
  position:relative;
  border-radius:var(--tahado-radius);overflow:hidden;
  box-shadow:0 10px 30px rgba(var(--tahado-ink-rgb) / .10);
  aspect-ratio:16/9;
}
.tahado-banner-duo__card a{position:absolute;inset:0;display:block}
.tahado-banner-duo__card img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.tahado-banner-duo__card:hover img{transform:scale(1.04)}
.tahado-banner-duo__label{
  position:absolute;bottom:12px;inset-inline-start:12px;
  background:rgba(var(--tahado-purple-deep-rgb) / .85);
  color:#fff;font-weight:700;font-size:.9rem;
  padding:6px 16px;border-radius:99px;
  backdrop-filter:blur(4px);
  pointer-events:none;
}
@media(max-width:48em){
  /* بطاقتا الضيافة بعرض الشاشة كاملاً على النسبة الأصلية 2:1 بلا قصّ —
     المنتجات ممتدة لحافة الصورة وأي قصّ 16:9 يشرّح البرطمان الأخير
     (نتيجة judge على m3-banner-duo) */
  .tahado-banner-duo__grid{
    grid-template-columns:1fr;
    width:100vw;max-width:100vw;
    margin-inline:calc(50% - 50vw);
  }
  .tahado-banner-duo__card{border-radius:0;aspect-ratio:1774/887}
}