/* =============================================================================
 * Rahkar — homepage hero (background video) + banners + glassmorphism header.
 * Loaded only on `index` (theme.yml). Built for speed: the poster is the LCP
 * image; the video is painted under it and revealed by home-hero.js only when
 * the connection allows (so this file never blocks first paint).
 * ========================================================================== */

/* ---- FULL-BLEED: break the hero (and the whole home) out of PS's .container
 * ------------------------------------------------------------------------------
 * The homepage renders inside #wrapper > .container (max-width + padding) and
 * #content.page-home (a Bootstrap .card with padding/border/shadow). To let the
 * hero fill 100% of the viewport we (a) strip that card chrome on the home page,
 * and (b) pull .rh-home to the full viewport width with the classic full-bleed
 * trick. The inner content wrapper (.rh-home__inner) re-applies the centered max
 * width for the bands/sliders below the hero. */
body#index #content.page-home {
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
  overflow: visible;
}
/* Flush the home content to the very top: drop the breadcrumb + the container /
 * content-wrapper top padding so the hero starts at the viewport top with the
 * fixed header floating over it (no gap, no band). */
body#index #wrapper .container { overflow: visible; padding-top: 0; }
body#index #wrapper > .container > .breadcrumb,
body#index #content-wrapper > .breadcrumb { display: none; }
body#index #content-wrapper { padding-top: 0; margin-top: 0; }
body#index #main { padding-top: 0; }

.rh-home {
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* ---- HERO ---------------------------------------------------------------- */
.rh-hero {
  position: relative;
  width: 100vw;
  margin-inline: calc(50% - 50vw); /* belt-and-braces if .rh-home is constrained */
  /* svh = small viewport height: avoids the mobile address-bar jump. */
  height: 100vh;
  height: 100svh;
  min-height: 480px;
  overflow: hidden;
  background: #0c0c0c; /* shows while the poster decodes */
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate; /* own stacking context so the overlay/header layer cleanly */
}

/* Poster = the instant first paint (LCP). Fills the hero, behind the video. */
.rh-hero__poster,
.rh-hero__poster-img,
.rh-hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rh-hero__poster { z-index: 1; display: block; }
.rh-hero__poster-img { z-index: 1; }

/* Video sits above the poster; hidden until JS marks it ready, then fades in. */
.rh-hero__video {
  z-index: 2;
  opacity: 0;
  transition: opacity .6s ease;
  pointer-events: none;
}
.rh-hero.is-video-ready .rh-hero__video { opacity: 1; }

/* Dark scrim for white-text legibility (opacity set inline by the admin value). */
.rh-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: #000;
  pointer-events: none;
}

/* Optional caption / CTA, centred, white. */
.rh-hero__content {
  position: relative;
  z-index: 4;
  text-align: center;
  color: #fff;
  padding: 1.5rem;
  max-width: 40rem;
  text-shadow: 0 1px 18px rgba(0,0,0,.35);
}
.rh-hero__title {
  margin: 0 0 .5rem;
  font-size: clamp(1.8rem, 4vw, 3.2rem);
  font-weight: var(--rh-fw-strong);
  line-height: 1.2;
  color: #fff;
}
.rh-hero__subtitle {
  margin: 0 0 1.25rem;
  font-size: clamp(1rem, 2vw, 1.35rem);
  opacity: .95;
}
.rh-hero__cta {
  display: inline-block;
  padding: .75rem 2rem;
  border-radius: 999px;
  background: var(--wp--preset--color--primary, #1f6feb);
  color: #fff;
  font-weight: var(--rh-fw-strong);
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
}
.rh-hero__cta:hover { transform: translateY(-2px); color: #fff; }

.rh-hero__sentinel {
  position: absolute;
  bottom: 0; left: 0;
  width: 1px; height: 1px;
  pointer-events: none;
}

/* NOTE: the glassmorphism/overlap/sticky header behaviour lives in the shared
 * header-glass.css (it is site-wide, not home-only). This file owns only the
 * hero + banner bands. The hero's full-bleed 100vh + the header being fixed over
 * it (on home) are coordinated there via the `html.rh-home-hero` flag that
 * home-hero.js sets. */

/* ---- BANNERS (below the hero) -------------------------------------------- */
.rh-home-banners {
  display: block;
  width: 100%;
}
.rh-home-banner {
  width: 100%;
  margin: 1rem 0;
}
.rh-home-banner__img,
.rh-home-banner__link {
  display: block;
  width: 100%;
}
.rh-home-banner__img {
  height: auto;
  border-radius: var(--wp--custom--radius--card, 14px);
  object-fit: cover;
}

/* Device targeting (mirrors the admin "Shown on" choice). */
@media (max-width: 767px) {
  .rh-home-banner--desktop { display: none; }
}
@media (min-width: 768px) {
  .rh-home-banner--mobile { display: none; }
}

/* Respect reduced motion: never fade/animate (the JS also skips the video). */
@media (prefers-reduced-motion: reduce) {
  .rh-hero__video,
  .rh-hero__cta { transition: none; }
}

/* =============================================================================
 * HOMEPAGE COMPOSITION — banner bands + slider spacing.
 * The hero is full-bleed; everything below is centred in a content wrapper.
 * ========================================================================== */
.rh-home__inner {
  max-width: var(--wp--style--global--wide-size, 1280px);
  margin-inline: auto;
  padding-inline: clamp(12px, 3vw, 28px);
}

.rh-band {
  margin-block: clamp(24px, 4vw, 48px);
}

/* Shared banner image look across every band. */
.rh-hb { display: block; }
.rh-hb__link { display: block; }
/* Media wrapper = positioning context for the overlay caption + the rounded
   clip (so the caption scrim follows the card corners) + the hover lift. */
.rh-hb__media {
  position: relative;
  display: block;
  border-radius: var(--wp--custom--radius--card, 14px);
  overflow: hidden;
  background: var(--wp--preset--color--surface, #f4f5f7);
  transition: transform .25s ease, box-shadow .25s ease;
}
.rh-hb__img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.rh-hb__link:hover .rh-hb__media {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .12);
}

/* ---- Minimal overlay caption (Zara / Tama-kids style) -----------------
 * Bottom-RIGHT (RTL-natural via logical insets), thin + restrained, over a
 * soft bottom-only scrim so any image (light or dark) keeps the text legible.
 * pointer-events:none → clicks fall through to the banner link. */
.rh-hb__caption {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;       /* hug the inline-end edge (RIGHT in RTL) */
  gap: 2px;
  padding: clamp(10px, 4%, 22px);
  text-align: end;
  color: #fff;
  pointer-events: none;
  background: linear-gradient(to top,
              rgba(0, 0, 0, .45) 0%,
              rgba(0, 0, 0, .14) 42%,
              rgba(0, 0, 0, 0) 100%);
}
.rh-hb__title {
  font-size: clamp(.95rem, 1.5vw, 1.4rem);
  font-weight: var(--rh-fw-strong);
  line-height: 1.25;
  letter-spacing: .005em;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .3);
}
.rh-hb__subtitle {
  margin-block-start: 1px;
  font-size: clamp(.72rem, 1.05vw, .95rem);
  font-weight: var(--rh-fw-base);
  line-height: 1.3;
  opacity: .94;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .28);
}
/* The strip cells are small squares → keep the caption proportionally smaller
   so it stays elegant and never crowds a 1/6-width banner. */
.rh-strip-rps .rh-hb__title { font-size: clamp(.82rem, 1vw, 1.05rem); }
.rh-strip-rps .rh-hb__subtitle { font-size: clamp(.66rem, .8vw, .82rem); }

/* ---- Caption BELOW the image (strip band «دسته‌بندی» labels) -----------
 * Instead of the white overlay scrim, the title/subtitle sit centered UNDER
 * the (circular) banner in the normal flow — a clean "shop by category" label.
 * Still inside the <a>, so the whole cell stays clickable. */
.rh-hb--cap-below .rh-hb__caption--below {
  position: static;
  inset: auto;
  background: none;
  color: var(--wp--preset--color--foreground, #1c1c1c);
  align-items: center;
  text-align: center;
  gap: 1px;
  padding: 8px 4px 0;
  pointer-events: auto;
}
.rh-hb--cap-below .rh-hb__caption--below .rh-hb__title {
  font-weight: var(--rh-fw-strong);
  text-shadow: none;
}
.rh-hb--cap-below .rh-hb__caption--below .rh-hb__subtitle {
  text-shadow: none;
  opacity: .65;
}

/* Per-banner device targeting (mirrors the admin "Shown on" choice). */
@media (max-width: 767px) { .rh-hb--desktop { display: none; } }
@media (min-width: 768px) { .rh-hb--mobile  { display: none; } }

/* ---- 2) DUO: two banners side by side --------------------------------- */
.rh-band--duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(10px, 2vw, 20px);
}
@media (max-width: 575px) {
  .rh-band--duo { grid-template-columns: 1fr; }
}

/* ---- 3) STRIP: scrollable banner row ----------------------------------
 * The strip now reuses the STANDARD product-slider shell (.rps) so it gets the
 * same arrows / RTL scroll-snap / mobile peek for free (see home-hero.tpl). The
 * template sets --rps-cols-max = min(count, 9) (the MOST columns we ever want);
 * the rule below clamps it to 6 normally and 9 on very wide screens — always
 * via min() so a strip with fewer banners still fills the row instead of leaving
 * gaps. --rps-mob = min(count, 2.5) gives the mobile peek. Per-cell width comes
 * from products-slider.css (.rps-track > *), so .rh-strip__cell needs NO width
 * here. The .rps.rh-strip-rps double-class beats the base .rps{--rps-cols:5}. */
.rh-strip-rps { margin-block: 0; }
.rps.rh-strip-rps { --rps-cols: min(6, var(--rps-cols-max, 6)); }
/* Wide screens: the strip shows up to 9 banners (instead of 6) so they stay a
 * tidy size on large monitors. min() keeps it ≤ the actual banner count, so a
 * short strip still fills the row with no gaps. Scoped to the strip only —
 * product sliders keep their own (larger) card sizing. */
@media (min-width: 1500px) {
  .rps.rh-strip-rps { --rps-cols: min(9, var(--rps-cols-max, 9)); }
}

/* ---- 5) SPLIT: two-column band ---------------------------------------- */
.rh-band--split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(10px, 2vw, 20px);
}
@media (max-width: 575px) {
  .rh-band--split { grid-template-columns: 1fr; }
}

/* ---- 7) QUAD: four-banner band ---------------------------------------- */
.rh-band--quad {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(8px, 1.6vw, 16px);
}
@media (max-width: 991px) {
  .rh-band--quad { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
  .rh-band--quad { grid-template-columns: 1fr; }
}

/* ---- 4/6/8) SLIDER bands: the .rps partial already styles itself ------ */
.rh-band--slider { margin-block: clamp(20px, 3.5vw, 40px); }

/* =============================================================================
 * HERO MODE: full-bleed image slider (alternative to the video hero).
 * ----------------------------------------------------------------------------
 * Full viewport width; height comes from a fixed per-breakpoint aspect-ratio
 * (desktop 2880×600 = 4.8:1, mobile 1080×540 = 2:1) so the box is reserved
 * before images load → ZERO layout shift. The track is native CSS scroll-snap
 * (RTL-safe, swipes on touch with no JS); home-hero.js adds autoplay + arrows +
 * dots as enhancement. The whole hero (header included) stays sticky/normal —
 * this hero does NOT use the glass-overlap header, so the slider sits cleanly
 * below the header.
 * ========================================================================== */
.rh-hero-slider {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw); /* full-bleed even if .rh-home is constrained */
  overflow: hidden;
  background: #f2f2f2; /* shown while the first slide decodes */
  aspect-ratio: 2880 / 600;
  isolation: isolate;
}
@media (max-width: 767px) {
  .rh-hero-slider { aspect-ratio: 1080 / 540; }
}

.rh-hslider__track {
  display: flex;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;          /* Firefox */
  overscroll-behavior-x: contain;
}
.rh-hslider__track::-webkit-scrollbar { display: none; } /* WebKit */

.rh-hslider__slide {
  position: relative;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.rh-hslider__link { display: block; width: 100%; height: 100%; }

.rh-hslider__slide picture,
.rh-hslider__img {
  display: block;
  width: 100%;
  height: 100%;
  /* The container's aspect-ratio equals the image's, so cover == no crop. */
  object-fit: cover;
}

/* ---- Arrows (desktop only; touch uses native swipe) ------------------- */
.rh-hslider__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: #1a1a1a;
  background: rgba(255, 255, 255, .85);
  box-shadow: 0 2px 10px rgba(0, 0, 0, .18);
  transition: background .2s ease, opacity .2s ease;
}
.rh-hslider__arrow:hover { background: #fff; }
.rh-hslider__arrow--prev { inset-inline-start: clamp(10px, 2vw, 28px); }
.rh-hslider__arrow--next { inset-inline-end: clamp(10px, 2vw, 28px); }
.rh-hslider__arrow[aria-disabled="true"] { opacity: .3; pointer-events: none; }
@media (max-width: 767px) {
  .rh-hslider__arrow { display: none; }
}

/* ---- Dots ------------------------------------------------------------- */
.rh-hslider__dots {
  position: absolute;
  inset-inline: 0;
  bottom: clamp(8px, 1.5vw, 16px);
  z-index: 4;
  display: flex;
  gap: 8px;
  justify-content: center;
  pointer-events: none;
}
.rh-hslider__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  pointer-events: auto;
  background: rgba(255, 255, 255, .55);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .15);
  transition: width .25s ease, background .25s ease, border-radius .25s ease;
}
.rh-hslider__dot.is-active {
  width: 22px;
  border-radius: 4px;
  background: #fff;
}

/* Respect reduced-motion: no smooth auto-scroll animation (JS also bails). */
@media (prefers-reduced-motion: reduce) {
  .rh-hslider__track { scroll-behavior: auto; }
}