:root{--ink:#2c2030;--rose:#e87b94;--rose2:#f6b4c3;--cream:#fff9f5;--gold:#d7aa62;--glass:rgba(255,255,255,.64);--shadow:0 25px 70px rgba(96,46,67,.16)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Cairo,sans-serif;color:var(--ink);background:radial-gradient(circle at 10% 20%,#ffe6ed,transparent 30%),radial-gradient(circle at 90% 15%,#fff0d7,transparent 26%),var(--cream);overflow-x:hidden}body.locked{overflow:hidden}.intro{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:linear-gradient(135deg,#fff8f5,#f7c8d4);transition:1s cubic-bezier(.7,0,.2,1)}.intro.hide{opacity:0;visibility:hidden;transform:scale(1.08)}.intro-glow{position:absolute;width:42vw;height:42vw;border-radius:50%;background:rgba(255,255,255,.65);filter:blur(12px);animation:pulse 3s infinite}.intro-card{position:relative;text-align:center;padding:45px;animation:float 4s ease-in-out infinite}.intro-card h1{font-size:clamp(36px,7vw,86px);margin:10px}.intro-card p{letter-spacing:2px}.mini-heart{font-size:44px;color:var(--rose)}.start-btn,.ghost-btn{border:0;border-radius:999px;padding:15px 28px;background:var(--ink);color:white;font:700 16px Cairo;cursor:pointer;box-shadow:0 12px 30px rgba(44,32,48,.25);transition:.3s}.start-btn:hover,.ghost-btn:hover{transform:translateY(-4px) scale(1.02)}.start-btn b{display:inline-block;margin-right:8px;animation:beat 1s infinite}.heart-field{position:fixed;inset:0;pointer-events:none;z-index:1;overflow:hidden}.floating-heart{position:absolute;bottom:-30px;color:rgba(232,123,148,.34);animation:rise linear forwards}.hero{min-height:100vh;position:relative;display:grid;place-items:center;padding:90px 7vw;overflow:hidden}.hero:before,.hero:after{content:"";position:absolute;border:1px solid rgba(232,123,148,.22);border-radius:50%;animation:orbit 16s linear infinite}.hero:before{width:600px;height:600px;left:-250px}.hero:after{width:420px;height:420px;right:-150px;animation-direction:reverse}.nav{position:absolute;top:25px;left:50%;transform:translateX(-50%);width:min(1100px,90%);display:flex;gap:25px;align-items:center;padding:14px 20px;z-index:5}.glass{background:var(--glass);backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.75);box-shadow:var(--shadow)}.nav a{text-decoration:none;color:var(--ink);font-weight:700}.brand{margin-left:auto}.hero-content{text-align:center;max-width:900px;position:relative;z-index:2}.eyebrow,.section-head span{color:#b85f78;font-weight:800;letter-spacing:2px}.hero h1{font-size:clamp(46px,8vw,100px);line-height:1.1;margin:20px 0;background:linear-gradient(90deg,var(--ink),#b85f78,var(--gold));-webkit-background-clip:text;color:transparent}.hero p{font-size:clamp(18px,2vw,26px)}.rotating-category{height:52px;margin:30px auto;font-size:25px;font-weight:800;color:#b85f78;animation:wordIn .8s both}.scroll-cue{position:absolute;bottom:25px;font-size:28px;animation:bounce 1.5s infinite}.quote-strip{padding:35px;text-align:center;background:var(--ink);color:white;font-size:clamp(18px,3vw,30px)}.section{padding:100px 6vw}.section-head{text-align:center;margin-bottom:45px}.section-head h2{font-size:clamp(36px,5vw,62px);margin:8px}.category-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-bottom:35px}.tab{border:1px solid rgba(184,95,120,.25);background:white;padding:10px 16px;border-radius:999px;font:700 14px Cairo;cursor:pointer;transition:.3s}.tab:hover,.tab.active{background:var(--ink);color:white;transform:translateY(-3px)}.story-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:25px}.story-card{background:white;border-radius:28px;overflow:hidden;box-shadow:var(--shadow);transition:.45s;animation-delay:var(--delay)}.story-card:hover{transform:translateY(-10px) rotate(.4deg)}.story-media{height:280px;position:relative;overflow:hidden}.story-media img{width:100%;height:100%;object-fit:cover;transition:.7s}.story-card:hover img{transform:scale(1.08)}.placeholder{height:100%;display:grid;place-items:center;background:linear-gradient(135deg,#fde8ee,#fff2dc);font-size:70px}.image-count{position:absolute;left:15px;bottom:15px;background:rgba(44,32,48,.75);color:white;padding:7px 12px;border-radius:99px}.story-body{padding:24px}.story-body small{color:#b85f78;font-weight:800}.story-body h3{font-size:25px;margin:10px 0}.story-body p{color:#665866;line-height:1.9}.story-body time{color:#9d8d97}.people-section{background:linear-gradient(180deg,transparent,#fdeff3)}.people-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:30px;max-width:950px;margin:auto}.person-card{text-align:center;padding:35px;border-radius:30px;transition:.4s}.person-card:hover{transform:translateY(-8px)}.person-photo{width:150px;height:150px;margin:auto;border-radius:50%;overflow:hidden;border:6px solid white;display:grid;place-items:center;background:#f6cbd5;font-size:55px;color:white}.person-photo img{width:100%;height:100%;object-fit:cover}.birth{color:#b85f78;font-weight:700}footer{text-align:center;padding:35px;background:var(--ink);color:white}.reveal{opacity:0;transform:translateY(35px);transition:.8s}.reveal.show{opacity:1;transform:none}.story-card.hidden{display:none}.empty{grid-column:1/-1;text-align:center;padding:60px;border-radius:30px}@keyframes float{50%{transform:translateY(-10px)}}@keyframes pulse{50%{transform:scale(1.12);opacity:.7}}@keyframes beat{50%{transform:scale(1.35)}}@keyframes orbit{to{transform:rotate(360deg)}}@keyframes bounce{50%{transform:translateY(10px)}}@keyframes rise{to{transform:translateY(-115vh) rotate(360deg);opacity:0}}@keyframes wordIn{from{opacity:0;transform:translateX(50px);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}@media(max-width:720px){.nav a:not(.brand){display:none}.section{padding:75px 20px}.hero{padding-inline:20px}.story-media{height:230px}.intro-card{padding:20px}.hero h1{font-size:48px}}
/* =========================================
   Memory image slider
========================================= */

.memory-slider {
  width: 100%;
  margin: 1.4rem auto;
  direction: rtl;
}

.memory-slider__viewport {
  position: relative;
  width: 100%;
  overflow: hidden;
  border-radius: 28px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(255, 237, 244, 0.88));
  border: 1px solid rgba(196, 113, 140, 0.25);
  box-shadow:
    0 22px 55px rgba(96, 40, 67, 0.18),
    0 5px 16px rgba(96, 40, 67, 0.1),
    inset 0 0 0 6px rgba(255, 255, 255, 0.45);
  isolation: isolate;
}

/* إطار زخرفي */
.memory-slider__viewport::before {
  content: "";
  position: absolute;
  inset: 10px;
  z-index: 4;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 21px;
  pointer-events: none;
}

.memory-slider__viewport::after {
  content: "♡";
  position: absolute;
  top: 18px;
  right: 22px;
  z-index: 5;
  display: grid;
  width: 36px;
  height: 36px;
  place-items: center;
  border-radius: 50%;
  color: #ffffff;
  font-size: 20px;
  background: rgba(116, 48, 77, 0.58);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 20px rgba(70, 20, 45, 0.18);
  pointer-events: none;
}

.memory-slider__track {
  position: relative;
  width: 100%;
  height: clamp(280px, 48vw, 560px);
}

.memory-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.045);
  transition:
    opacity 800ms ease,
    transform 1200ms cubic-bezier(0.16, 1, 0.3, 1),
    visibility 800ms ease;
}

.memory-slide.is-active {
  z-index: 2;
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.memory-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  user-select: none;
  transition: transform 7s ease;
}

.memory-slide.is-active img {
  transform: scale(1.025);
}

.memory-slider:hover .memory-slide.is-active img {
  transform: scale(1.07);
}

.memory-slide__overlay {
  position: absolute;
  inset: auto 0 0;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  min-height: 110px;
  padding: 3.5rem 1.4rem 1.25rem;
  color: #fff;
  background:
    linear-gradient(
      to top,
      rgba(33, 12, 23, 0.82),
      rgba(33, 12, 23, 0.25),
      transparent
    );
}

.memory-slide__caption {
  max-width: min(80%, 720px);
  margin: 0;
  line-height: 1.8;
  font-size: clamp(0.9rem, 2vw, 1.05rem);
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.memory-slider__zoom {
  flex: 0 0 auto;
  display: grid;
  width: 46px;
  height: 46px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.48);
  border-radius: 50%;
  color: #fff;
  font-size: 23px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.16);
  backdrop-filter: blur(12px);
  transition:
    transform 220ms ease,
    background 220ms ease,
    box-shadow 220ms ease;
}

.memory-slider__zoom:hover {
  transform: translateY(-3px) scale(1.08);
  background: rgba(255, 255, 255, 0.27);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);
}

.memory-slider__arrow {
  position: absolute;
  top: 50%;
  z-index: 6;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  color: #fff;
  font-size: 21px;
  cursor: pointer;
  background: rgba(71, 23, 47, 0.48);
  box-shadow: 0 10px 28px rgba(44, 14, 29, 0.18);
  backdrop-filter: blur(10px);
  transform: translateY(-50%);
  transition:
    transform 220ms ease,
    background 220ms ease,
    opacity 220ms ease;
}

.memory-slider__arrow:hover {
  background: rgba(133, 57, 92, 0.83);
  transform: translateY(-50%) scale(1.09);
}

.memory-slider__arrow--previous {
  right: 18px;
}

.memory-slider__arrow--next {
  left: 18px;
}

.memory-slider__counter {
  position: absolute;
  top: 18px;
  left: 20px;
  z-index: 6;
  padding: 7px 13px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  color: #fff;
  font-size: 0.82rem;
  background: rgba(63, 20, 40, 0.5);
  backdrop-filter: blur(10px);
}

.memory-slider__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 12px 8px 5px;
}

.memory-slider__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  background: rgba(141, 72, 101, 0.28);
  transition:
    width 280ms ease,
    background 280ms ease,
    transform 280ms ease;
}

.memory-slider__dot:hover {
  transform: scale(1.3);
}

.memory-slider__dot.is-active {
  width: 28px;
  background: linear-gradient(90deg, #9d4f72, #dc789d);
}

.memory-slider__thumbnails {
  display: flex;
  gap: 10px;
  max-width: 100%;
  padding: 5px 4px 12px;
  overflow-x: auto;
  scrollbar-width: thin;
  scroll-behavior: smooth;
}

.memory-thumbnail {
  flex: 0 0 75px;
  height: 60px;
  padding: 3px;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: 13px;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.7);
  opacity: 0.58;
  transition:
    opacity 220ms ease,
    border-color 220ms ease,
    transform 220ms ease,
    box-shadow 220ms ease;
}

.memory-thumbnail:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}

.memory-thumbnail.is-active {
  opacity: 1;
  border-color: #b65e83;
  box-shadow: 0 7px 18px rgba(125, 52, 84, 0.2);
}

.memory-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 9px;
}

.memory-slider__empty {
  display: grid;
  min-height: 250px;
  place-items: center;
  align-content: center;
  gap: 8px;
  border: 1px dashed rgba(155, 73, 108, 0.3);
  border-radius: 26px;
  color: #8f536d;
  background:
    linear-gradient(145deg, rgba(255, 247, 250, 0.94), rgba(249, 228, 237, 0.75));
}

.memory-slider__empty span {
  font-size: 3rem;
}

/* =========================================
   Full-screen lightbox
========================================= */

.image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 300ms ease,
    visibility 300ms ease;
}

.image-lightbox.is-open {
  opacity: 1;
  visibility: visible;
}

.image-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at center, rgba(73, 30, 50, 0.45), rgba(15, 6, 11, 0.95));
  backdrop-filter: blur(16px);
}

.image-lightbox__content {
  position: relative;
  z-index: 2;
  display: grid;
  width: min(94vw, 1250px);
  height: min(88vh, 850px);
  place-items: center;
  transform: scale(0.94);
  transition: transform 350ms cubic-bezier(0.16, 1, 0.3, 1);
}

.image-lightbox.is-open .image-lightbox__content {
  transform: scale(1);
}

.image-lightbox__figure {
  display: grid;
  width: 100%;
  height: 100%;
  margin: 0;
  place-items: center;
}

.image-lightbox__figure img {
  display: block;
  max-width: 100%;
  max-height: calc(100% - 55px);
  object-fit: contain;
  border: 7px solid rgba(255, 255, 255, 0.9);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.42);
}

.image-lightbox__figure figcaption {
  min-height: 40px;
  padding-top: 12px;
  color: #fff;
  line-height: 1.7;
  text-align: center;
}

.image-lightbox__close {
  position: absolute;
  top: -8px;
  right: -8px;
  z-index: 5;
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  color: #fff;
  font-size: 32px;
  cursor: pointer;
  background: rgba(83, 30, 54, 0.72);
  backdrop-filter: blur(10px);
}

.image-lightbox__arrow {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  color: #fff;
  font-size: 23px;
  cursor: pointer;
  background: rgba(83, 30, 54, 0.68);
  backdrop-filter: blur(10px);
  transform: translateY(-50%);
}

.image-lightbox__arrow--previous {
  right: 15px;
}

.image-lightbox__arrow--next {
  left: 15px;
}

.image-lightbox__counter {
  position: absolute;
  bottom: 12px;
  left: 50%;
  z-index: 5;
  padding: 7px 14px;
  border-radius: 999px;
  color: #fff;
  background: rgba(83, 30, 54, 0.62);
  transform: translateX(-50%);
}

body.lightbox-open {
  overflow: hidden;
}

/* =========================================
   Responsive
========================================= */

@media (max-width: 700px) {
  .memory-slider__track {
    height: clamp(250px, 75vw, 390px);
  }

  .memory-slider__viewport {
    border-radius: 21px;
  }

  .memory-slider__viewport::before {
    inset: 7px;
    border-radius: 16px;
  }

  .memory-slider__arrow {
    width: 40px;
    height: 40px;
    font-size: 17px;
  }

  .memory-slider__arrow--previous {
    right: 10px;
  }

  .memory-slider__arrow--next {
    left: 10px;
  }

  .memory-slide__overlay {
    min-height: 90px;
    padding: 2.8rem 1rem 0.9rem;
  }

  .memory-slider__zoom {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }

  .memory-thumbnail {
    flex-basis: 62px;
    height: 52px;
  }

  .image-lightbox {
    padding: 12px;
  }

  .image-lightbox__content {
    width: 100%;
    height: 88vh;
  }

  .image-lightbox__arrow {
    width: 42px;
    height: 42px;
  }

  .image-lightbox__arrow--previous {
    right: 4px;
  }

  .image-lightbox__arrow--next {
    left: 4px;
  }

  .image-lightbox__close {
    top: 0;
    right: 0;
    width: 42px;
    height: 42px;
  }

  .image-lightbox__figure img {
    border-width: 4px;
    border-radius: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .memory-slide,
  .memory-slide img,
  .memory-slider__dot,
  .image-lightbox,
  .image-lightbox__content {
    transition-duration: 1ms !important;
    animation-duration: 1ms !important;
  }
}

/* تحسين عرض الصور والفيديوهات: يظهر المحتوى كاملًا بدون قص */
.memory-slider__track{height:clamp(340px,55vw,680px);background:linear-gradient(135deg,#f8eef2,#fffaf7)}
.memory-slide{display:grid;place-items:center;padding:14px}
.memory-slide img,.memory-slide video{display:block;width:100%;height:100%;object-fit:contain;object-position:center;border-radius:18px;background:#120e11;user-select:none}
.memory-slide.is-active img{transform:none}.memory-slider:hover .memory-slide.is-active img{transform:none}
.memory-slide video{outline:none}
.memory-thumbnail{position:relative}.memory-thumbnail img,.memory-thumbnail video{width:100%;height:100%;object-fit:contain;border-radius:9px;background:#1a1418}
.video-badge{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:25px;height:25px;border-radius:50%;background:rgba(0,0,0,.65);color:#fff;font-size:11px;pointer-events:none}
.image-lightbox__figure video{display:block;max-width:100%;max-height:calc(100% - 55px);border:7px solid rgba(255,255,255,.9);border-radius:22px;background:#000;box-shadow:0 30px 90px rgba(0,0,0,.42)}
.image-lightbox__figure [hidden]{display:none!important}
@media(max-width:700px){.memory-slider__track{height:clamp(310px,105vw,520px)}.memory-slide{padding:8px}.memory-slide img,.memory-slide video{border-radius:14px}.image-lightbox__figure video{border-width:4px;border-radius:16px}}


/* ===== تحسين نهائي لعرض الوسائط واتجاه العربية ===== */
.admin-nav-btn{
  padding:8px 16px;
  border-radius:999px;
  color:#fff!important;
  background:var(--ink);
  box-shadow:0 8px 20px rgba(44,32,48,.18);
}

/* الصورة والفيديو يظهران كاملين من أول لحظة، من دون قص أو تكبير إجباري */
.memory-slider__viewport{
  background:linear-gradient(135deg,#f7edf1,#fffaf7);
}
.memory-slider__track{
  height:clamp(360px,52vw,720px);
  min-height:360px;
}
.memory-slide{
  padding:12px;
  background:transparent;
}
.memory-slide img,
.memory-slide video{
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;
  object-fit:contain!important;
  object-position:center center!important;
  background:#171216;
  border-radius:18px;
  transform:none!important;
}
.memory-slider:hover .memory-slide.is-active img{transform:none!important}

/* الأسهم مع نص واضح، ومعكوسة حسب طلب الموقع العربي */
.memory-slider__arrow{
  width:auto;
  min-width:92px;
  height:44px;
  padding:0 13px;
  gap:7px;
  border-radius:999px;
  font-family:Cairo,sans-serif;
  font-size:17px;
  white-space:nowrap;
}
.memory-slider__arrow--previous{left:16px;right:auto}
.memory-slider__arrow--next{right:16px;left:auto}
.arrow-text{font-size:12px;font-weight:800}

@media (min-width:1200px){
  .story-grid{grid-template-columns:repeat(auto-fit,minmax(420px,1fr))}
  .memory-slider__track{height:clamp(480px,42vw,760px)}
}

@media (max-width:720px){
  .nav{gap:9px;padding:11px 12px}
  .nav a:not(.brand){display:none}
  .nav .admin-nav-btn{display:inline-flex!important;margin-right:auto;padding:7px 11px;font-size:12px}
  .memory-slider__track{height:clamp(300px,105vw,540px);min-height:300px}
  .memory-slide{padding:7px}
  .memory-slider__arrow{min-width:43px;width:43px;height:43px;padding:0;border-radius:50%}
  .memory-slider__arrow--previous{left:8px;right:auto}
  .memory-slider__arrow--next{right:8px;left:auto}
  .memory-slider__arrow .arrow-text{display:none}
}

/* ===== تثبيت العارض وإظهار الصورة كاملة على كل الشاشات ===== */
.memory-slider,
.memory-slider__viewport,
.memory-slider__track{
  width:100%;
  max-width:100%;
}

.memory-slider__viewport{
  overflow:hidden;
  position:relative;
  overscroll-behavior:contain;
  scroll-margin:0!important;
}

.memory-slider__track{
  position:relative;
  height:clamp(380px,62vw,780px);
  min-height:380px;
  overflow:hidden;
}

.memory-slide{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  padding:10px;
  overflow:hidden;
}

.memory-slide img,
.memory-slide video{
  display:block;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  object-fit:contain!important;
  object-position:50% 50%!important;
  transform:none!important;
  transition:opacity .35s ease!important;
  background:#171216;
}

.memory-slide__overlay{
  pointer-events:none;
}
.memory-slide__overlay button{
  pointer-events:auto;
}

/* الصور المصغرة لا تحرّك الصفحة عند تغير المحتوى */
.memory-slider__thumbnails{
  overflow-x:auto;
  overflow-y:hidden;
  scroll-behavior:auto!important;
  overscroll-behavior-inline:contain;
}

@media (min-width:1400px){
  .memory-slider__track{height:min(76vh,820px)}
}

@media (max-width:720px){
  .memory-slider__track{
    height:min(76vh,620px);
    min-height:340px;
  }
  .memory-slide{padding:5px}
}

@media (max-width:420px){
  .memory-slider__track{
    height:min(72vh,560px);
    min-height:320px;
  }
}