/* =========================================================================
   NAJA RESTAURANT — EXPERIENCE PAGE
   Loaded after style.css on the Experience page only. Reuses the homepage
   tokens, hero, banner, buttons, footer and reveal animations.
   Logical properties keep the layout correct in both RTL and LTR.
   ========================================================================= */

/* =========================================================================
   A — HERO
   ========================================================================= */
.hero--experience {
  min-height: 86vh;
  min-height: 86svh;
  justify-content: center;
  padding-bottom: clamp(72px, 10vh, 120px);
}
.hero--experience .hero__content { max-width: 820px; }
.hero--experience .hero__title { font-size: clamp(2.8rem, 8vw, 6.6rem); }
.hero--experience .hero__img { object-position: center 55%; }
.hero--experience .hero__shade {
  background:
    linear-gradient(to top, var(--bg) 0%, rgba(17, 17, 17, 0.8) 26%, rgba(17, 17, 17, 0.35) 62%, rgba(17, 17, 17, 0.6) 100%),
    linear-gradient(to left, rgba(17, 17, 17, 0.9) 0%, rgba(17, 17, 17, 0.4) 60%, rgba(17, 17, 17, 0.15) 100%);
}
[dir="ltr"] .hero--experience .hero__shade {
  background:
    linear-gradient(to top, var(--bg) 0%, rgba(17, 17, 17, 0.8) 26%, rgba(17, 17, 17, 0.35) 62%, rgba(17, 17, 17, 0.6) 100%),
    linear-gradient(to right, rgba(17, 17, 17, 0.9) 0%, rgba(17, 17, 17, 0.4) 60%, rgba(17, 17, 17, 0.15) 100%);
}

/* =========================================================================
   Shared image frames. The frame fixes the ratio (no layout shift); the photo
   is slightly oversized so the optional parallax never exposes an edge.
   ========================================================================= */
.xp-frame { position: relative; aspect-ratio: 4 / 3; box-shadow: var(--shadow-deep); }
.xp-zoom { position: absolute; inset: 0; display: block; transition: transform 1.1s var(--ease); }
.xp-frame img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  transition: opacity 0.6s;
}
[data-xp-parallax] img { height: 112%; top: -6%; will-change: transform; }
/* hover zoom sits on a wrapper so it never fights the parallax transform on the photo */
.xp-card:hover .xp-zoom { transform: scale(1.05); }

.xp-alt {
  margin-top: 18px; font-family: var(--font-en); color: var(--brand);
  font-size: 0.8rem; letter-spacing: 0.3em; text-transform: uppercase;
}
.xp-alt:lang(ar) { font-family: var(--font-ar); letter-spacing: 0; text-transform: none; font-size: 1.05rem; }

/* =========================================================================
   B — PHILOSOPHY (text + tall photo)
   ========================================================================= */
.xp-philosophy { overflow: hidden; }
.xp-split { display: grid; gap: clamp(40px, 7vw, 110px); align-items: center; }
.xp-split__media { position: relative; }
.xp-split__media .xp-frame { aspect-ratio: 3 / 4; z-index: 1; }
.xp-outline {
  position: absolute; inset: 22px -22px -22px 22px; border: 1px solid var(--brand-line); z-index: 0;
  pointer-events: none;
}
[dir="rtl"] .xp-outline { inset: 22px 22px -22px -22px; }
.xp-philosophy .accent-rule { margin-block: 30px 6px; }
@media (min-width: 1024px) {
  .xp-split { grid-template-columns: 1.1fr 0.9fr; }
}
/* phones: keep the outline inside the viewport */
@media (max-width: 767px) {
  .xp-outline, [dir="rtl"] .xp-outline { inset: 14px -8px -14px 8px; }
  [dir="rtl"] .xp-outline { inset: 14px 8px -14px -8px; }
}

/* =========================================================================
   C — FOOD & PRESENTATION (landscape + portrait composition)
   ========================================================================= */
.xp-card { position: relative; margin: 0; min-width: 0; display: flex; flex-direction: column; }
.xp-card .xp-frame { overflow: hidden; flex: 0 0 auto; }
.xp-card__cap {
  display: flex; align-items: center; gap: 10px; margin-top: 12px;
  font-size: 0.92rem; color: var(--muted);
}
.xp-card__cap::before { content: ""; width: 22px; height: 1px; background: var(--brand); flex: none; }

.xp-food__grid { display: grid; gap: clamp(16px, 2.2vw, 28px); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.xp-card--feature { grid-column: 1 / -1; }
.xp-card--feature .xp-frame { aspect-ratio: 16 / 10; }
.xp-card--tall .xp-frame { aspect-ratio: 3 / 4; }
.xp-card--wide .xp-frame { aspect-ratio: 3 / 4; }
@media (min-width: 1024px) {
  /* portrait feature on one side, two landscape photos stacked on the other */
  .xp-food__grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: repeat(2, clamp(240px, 24vw, 360px));
  }
  .xp-card--feature { grid-column: 1 / 6; grid-row: 1 / 3; }
  .xp-card--tall { grid-column: 6 / 13; grid-row: 1; }
  .xp-card--wide { grid-column: 6 / 13; grid-row: 2; }
  .xp-food__grid .xp-frame { flex: 1 1 auto; aspect-ratio: auto; min-height: 0; }
}

/* =========================================================================
   D — AMBIENCE & HOSPITALITY
   ========================================================================= */
.xp-ambience__grid { display: grid; gap: clamp(16px, 2.2vw, 28px); }
.xp-card--room .xp-frame { aspect-ratio: 4 / 3; }
.xp-card--sign .xp-frame { aspect-ratio: 1 / 1; }
@media (min-width: 768px) {
  .xp-ambience__grid { grid-template-columns: 1.7fr 1fr; align-items: end; }
}

/* =========================================================================
   E — HIGHLIGHT CARDS
   ========================================================================= */
.xp-features {
  display: grid; gap: clamp(14px, 2vw, 24px);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 560px) { .xp-features { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .xp-features { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.xp-feature {
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid var(--brand-line);
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.03), transparent 60%), var(--bg-2);
  transition: border-color 0.4s var(--ease), transform 0.5s var(--ease);
}
.xp-feature:hover { border-color: var(--brand-soft); transform: translateY(-4px); }
.xp-feature__icon {
  width: 46px; height: 46px; margin-bottom: 22px;
  fill: none; stroke: var(--brand); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.xp-feature h3 { font-size: 1.15rem; font-weight: 700; color: var(--cream); }
.xp-feature h3:lang(en) { font-weight: 500; }
.xp-feature p { margin-top: 8px; color: var(--muted); font-size: 0.95rem; }

/* =========================================================================
   F — CLOSING CTA (reuses the homepage banner)
   ========================================================================= */
.xp-cta { min-height: 78vh; min-height: 78svh; }
.xp-cta .banner__quote { max-width: 20ch; }
.xp-cta .section-copy { max-width: 46ch; }
.xp-cta__buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 10px; }
@media (max-width: 479px) { .xp-cta__buttons .btn { width: 100%; } }

@media (prefers-reduced-motion: reduce) {
  .xp-zoom, .xp-feature { transition: none; }
  .xp-card:hover .xp-zoom { transform: none; }
  .xp-feature:hover { transform: none; }
  [data-xp-parallax] img { will-change: auto; }
}