/**
 * YogiBee Theme — Hero Slider
 * @package YogiBee
 */

/* ── Slider container ── */
.slider{position:relative;overflow:hidden;background:var(--s0)}
.slides-track{
  display:flex;
  /* Transform dùng cho slider không phải mobile menu → cho phép */
  transition:transform .55s cubic-bezier(.25,.46,.45,.94);
}
.slide{
  flex:0 0 100%;min-width:100%;
  position:relative;display:flex;
  min-height:78vh; /* fallback */
  min-height:78svh; /* iOS safe — loại trừ dynamic chrome */
  align-items:center;
}

/* ── Slide backgrounds ── */
.slide-bg{position:absolute;inset:0}
.sbg1{
  background:
    radial-gradient(ellipse at 80% 100%,rgba(90,168,80,.18) 0%,transparent 60%),
    radial-gradient(ellipse at 20% 80%,rgba(200,136,48,.08) 0%,transparent 50%),
    linear-gradient(175deg,#FFFFFF 0%,#FAFDF8 35%,#F2F8EC 65%,#E6F4DC 100%);
}
.sbg2{
  background:
    radial-gradient(ellipse at 20% 50%,rgba(200,136,48,.14) 0%,transparent 55%),
    radial-gradient(ellipse at 80% 30%,rgba(90,168,80,.10) 0%,transparent 50%),
    linear-gradient(175deg,#FFFFFF 0%,#FBF8F0 40%,#F5EFDD 100%);
}
.sbg3{
  background:
    radial-gradient(ellipse at 70% 40%,rgba(90,168,80,.20) 0%,transparent 60%),
    radial-gradient(ellipse at 20% 90%,rgba(62,131,104,.08) 0%,transparent 50%),
    linear-gradient(175deg,#FFFFFF 0%,#F6FAF4 45%,#E9F4E2 100%);
}

/* ── Slide inner layout ──
   Mobile: 1 cột (ảnh xuống dưới chữ).
   Desktop: xem media query ở cuối file — 50/50 kèm khoảng đệm giữa. */
.slide-in{
  position:relative;z-index:1;
  padding:52px 20px 44px;
  width:100%;max-width:1200px;margin:0 auto;
  display:grid;grid-template-columns:1fr;
  gap:28px;align-items:center;
}
.slide-copy{min-width:0}

/* ── Media (ảnh) ── */
.slide-media{
  min-width:0;
  display:flex;align-items:center;justify-content:center;
}
.slide-media .s-img{
  width:100%;height:auto;
  max-height:46vh;object-fit:cover;
  border-radius:var(--r-lg,18px);
  box-shadow:var(--sh2);
  display:block;
}

/* ── Eyebrow ── */
.s-ey{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12px;font-weight:600;letter-spacing:2px;
  text-transform:uppercase;color:var(--a2);
  margin-bottom:20px;
}
.s-ey::before{
  content:'';
  width:22px;height:1.5px;
  background:var(--amb);
}

/* ── H1 ── */
.s-h1{
  font-family:var(--fh);
  font-style:italic;font-weight:400;
  font-size:clamp(34px,8vw,64px);
  line-height:1.12;letter-spacing:-.03em;
  color:var(--j2);margin-bottom:6px;
  text-wrap:balance;
}
.s-h1 em{color:var(--amb);font-style:inherit}
/* Dòng phụ nhỏ trong H1 (field riêng "Dòng phụ", không lấy từ dòng 3 của H1) */
.s-sm{
  font-size:clamp(16px,3vw,24px);
  font-weight:400;color:var(--tx2);
  display:block;margin-top:6px;
  font-style:normal;font-family:var(--fb);letter-spacing:0;
}

/* ── Description ── */
.s-sub{
  font-size:var(--fs-base);font-weight:300;
  color:var(--tx2);line-height:1.75;
  max-width:480px;margin:18px 0 28px;
}

/* ── CTA buttons row ── */
.s-ctas{display:flex;gap:12px;flex-wrap:wrap}

/* ── Canh giữa (tuỳ chọn từng slide) ── */
.slide--align-center .slide-copy{text-align:center}
.slide--align-center .s-ey{justify-content:center}
.slide--align-center .s-sub{margin-left:auto;margin-right:auto}
.slide--align-center .s-ctas{justify-content:center}

/* ── Navigation arrows ──
   Luôn hiện (bản cũ opacity:0 và chỉ hiện khi hover → trên mobile
   và khi chuột ở ngoài slider thì không thấy nút nào). */
.s-arr{
  position:absolute;top:50%;
  transform:translateY(-50%); /* nav arrows → OK, không phải mobile menu */
  z-index:12;
  width:44px;height:44px;border-radius:50%;
  background:rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  border:1px solid var(--bd);
  color:var(--jade);font-size:22px;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:background var(--tr),box-shadow var(--tr),opacity var(--tr);
  opacity:.72;line-height:1;box-shadow:var(--sh1);
  user-select:none;-webkit-user-select:none;
  padding:0;
}
.slider:hover .s-arr{opacity:1}
.s-arr:hover{background:#fff;opacity:1;box-shadow:var(--sh2)}
.s-arr:focus-visible{opacity:1;outline:2px solid var(--jade);outline-offset:2px}
.s-arr:active{transform:translateY(-50%) scale(.94)}
.s-prev{left:12px}.s-next{right:12px}

/* ── Dots ──
   Nút thật 6px nhưng vùng bấm 28px để chạm được trên mobile. */
.s-dots{
  position:absolute;bottom:4px;left:50%;
  transform:translateX(-50%);
  display:flex;gap:2px;z-index:12;
}
.s-dot{
  position:relative;
  width:6px;height:6px;border-radius:50%;
  background:rgba(62,131,104,.28);
  cursor:pointer;transition:width .3s,background .3s;
  border:none;padding:0;margin:19px;
  user-select:none;-webkit-user-select:none;
}
/* Vùng bấm 44x44 theo chuẩn Apple HIG, không ảnh hưởng hình dạng chấm */
.s-dot-hit{position:absolute;inset:-19px;border-radius:50%}
.s-dot:hover{background:rgba(62,131,104,.55)}
.s-dot:focus-visible{outline:2px solid var(--jade);outline-offset:4px}
.s-dot.on{width:22px;border-radius:3px;background:var(--jade)}

/* ── Progress bar ── */
.slider-progress{
  position:absolute;bottom:0;left:0;width:0;
  height:2px;background:var(--jade);
  z-index:11;opacity:.6;pointer-events:none;
}

/* ─── RESPONSIVE ─── */
@media(min-width:768px){
  .slide{min-height:88vh;min-height:88svh}
  .slide-in{padding:80px 60px}
}

/* Bố cục ảnh–chữ 50/50, có khoảng đệm giữa hai cột.
   text-left  = chữ trái, ảnh phải
   text-right = chữ phải, ảnh trái */
@media(min-width:900px){
  .slide--text-left  .slide-in,
  .slide--text-right .slide-in{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    gap:clamp(32px,5vw,72px);
  }
  /* Chữ bên phải: đảo cột bằng grid-column, giữ nguyên thứ tự DOM để
     trình đọc màn hình vẫn đọc tiêu đề trước ảnh. */
  .slide--text-right .slide-copy {grid-column:2;grid-row:1}
  .slide--text-right .slide-media{grid-column:1;grid-row:1}

  .slide-media .s-img{max-height:62vh}
  /* Ở layout chia đôi, mô tả không cần giới hạn 480px nữa */
  .slide--text-left  .s-sub,
  .slide--text-right .s-sub{max-width:none}
}

/* Người dùng tắt hiệu ứng chuyển động */
@media(prefers-reduced-motion:reduce){
  .slides-track{transition:none}
  .slider-progress{display:none}
}