/* ===== Olive Hospital – Reels carousel ===== */
:root {
  --olive-teal: #2abcb0;
  --olive-pink: #e12454;
  --olive-ink: #1b2430;
  --olive-muted: #6b7a90;
  --olive-gap: 20px;
}

body { margin: 0; font-family: "Poppins", sans-serif; color: var(--olive-ink); }

.olive-reels { position: relative; background: linear-gradient(var(--olive-teal) 0 300px, #fff 300px); padding: 60px 16px 70px; }

/* Optional: add your stethoscope image like the old section
.olive-reels::before { content:""; position:absolute; left:0; top:0; width:320px; height:300px;
  background:url("public/img/background/bg-02.jpg") left top / contain no-repeat; pointer-events:none; } */

.olive-reels__head { position: relative; text-align: center; color: #fff; max-width: 680px; margin: 0 auto 48px; }
.olive-reels__tag { font-size: 15px; font-weight: 600; }
.olive-reels__head h2 { font-size: clamp(28px, 4.5vw, 40px); font-weight: 700; margin: 10px 0 12px; line-height: 1.2; }
.olive-reels__head p { font-size: 14px; margin: 0; opacity: .95; }

.olive-reels__panel {
  position: relative; max-width: 1155px; margin: 0 auto; background: #fff; border-radius: 6px;
  padding: 44px 64px 40px; box-shadow: 0 10px 40px rgba(20, 40, 60, .08); text-align: center;
}

/* ---------- carousel ---------- */
.reels { position: relative; }
.reels__track {
  display: flex; gap: var(--olive-gap); overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scrollbar-width: none; padding: 4px 2px 10px; outline-offset: 4px;
}
.reels__track::-webkit-scrollbar { display: none; }
.reels__track.is-dragging { scroll-behavior: auto; scroll-snap-type: none; cursor: grabbing; }

.reel {
  flex: 0 0 calc((100% - 3 * var(--olive-gap)) / 4);   /* 4 per view on desktop */
  scroll-snap-align: start; text-align: left;
}
.reel__media {
  position: relative; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; background: #123;
  box-shadow: 0 6px 20px rgba(20, 40, 60, .14); transition: transform .25s ease, box-shadow .25s ease;
}
.reel:hover .reel__media { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(20, 40, 60, .2); }

.reel__thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.reel__media::after {            /* dark fade so the title stays readable */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(10, 20, 30, .75), transparent 45%);
}
.reel__play {
  position: absolute; inset: 0; width: 100%; border: 0; background: none; cursor: pointer; z-index: 2; padding: 0;
}
.reel__play span {
  position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px;
  border-radius: 50%; background: var(--olive-pink); display: grid; place-items: center;
  box-shadow: 0 0 0 8px rgba(255, 255, 255, .28); transition: transform .2s ease;
}
.reel__play:hover span, .reel__play:focus-visible span { transform: scale(1.1); }
.reel__play:focus-visible { outline: 3px solid var(--olive-pink); outline-offset: -3px; }
.reel__play svg { margin-left: 3px; }

.reel__title {
  position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 1; margin: 0; color: #fff;
  font-size: 14px; font-weight: 600; line-height: 1.4; pointer-events: none;
}
.reel__media.is-playing::after, .reel__media.is-playing .reel__title { display: none; }
.reel__media iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; z-index: 3; }

/* ---------- arrows ---------- */
.reels__nav {
  position: absolute; top: 50%; z-index: 4; width: 44px; height: 44px; margin-top: -22px; border-radius: 50%;
  border: 0; background: #fff; color: var(--olive-pink); cursor: pointer; display: grid; place-items: center;
  box-shadow: 0 4px 16px rgba(20, 40, 60, .18); transition: background .2s, color .2s, opacity .2s;
}
.reels__nav:hover:not(:disabled) { background: var(--olive-pink); color: #fff; }
.reels__nav:focus-visible { outline: 3px solid var(--olive-pink); outline-offset: 2px; }
.reels__nav:disabled { opacity: .35; cursor: default; }
.reels__nav--prev { left: -54px; }
.reels__nav--next { right: -54px; }

/* ---------- dots ---------- */
.reels__dots { display: flex; justify-content: center; gap: 8px; margin: 18px 0 26px; }
.reels__dot { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 9px; background: #d5dde6; cursor: pointer; transition: width .25s, background .25s; }
.reels__dot[aria-selected="true"] { width: 26px; background: var(--olive-pink); }
.reels__dot:focus-visible { outline: 2px solid var(--olive-pink); outline-offset: 3px; }

/* ---------- button ---------- */
.olive-reels__btn {
  display: inline-block; padding: 13px 34px; border-radius: 40px; background: #fff; color: var(--olive-pink);
  font-size: 14px; font-weight: 600; text-decoration: none; border: 1px solid #eee;
  box-shadow: 0 4px 16px rgba(20, 40, 60, .08); transition: background .2s, color .2s;
}
.olive-reels__btn:hover { background: var(--olive-pink); color: #fff; }

/* ---------- responsive ---------- */
@media (max-width: 1100px) {
  .olive-reels__panel { padding: 36px 56px 36px; }
  .reels__nav--prev { left: -48px; } .reels__nav--next { right: -48px; }
  .reel { flex-basis: calc((100% - 2 * var(--olive-gap)) / 3); }   /* 3 per view */
}
@media (max-width: 800px) {
  .reel { flex-basis: calc((100% - var(--olive-gap)) / 2); }       /* 2 per view */
}
@media (max-width: 600px) {
  :root { --olive-gap: 14px; }
  .olive-reels { padding: 44px 0 56px; }
  .olive-reels__panel { padding: 28px 14px; border-radius: 0; }
  .reels__nav { display: none; }                                   /* swipe on phones */
  .reel { flex-basis: 72%; }
}
@media (prefers-reduced-motion: reduce) {
  .reels__track { scroll-behavior: auto; }
  .reel__media, .reel__play span, .reels__dot { transition: none; }
}