/* =========================================================
   OUR JOURNEY page (en/our-journey.html, ar/our-journey.html)
   Recreated from retal.com.sa/en/our-journey/ (Elementor page 19)
   and retal.com.sa/our-journey/ (page 27479).
   Page-specific only — header/footer/news carousel come from style.css
   ========================================================= */

.journey-page main { overflow: hidden; }
/* Elementor sections here are boxed at 1140px with zero column padding */
.journey-page section[class*="jr-"] > .container { padding: 0; }
.jr-accent { color: #85553A; }

/* label (Elementor icon-list "text_icon") */
.journey-page .section-label { font-size: 15px; line-height: 24px; margin-bottom: 20px; gap: 6px; color: #000; }
.journey-page .section-label i { font-size: 14px; color: #000; }
.journey-page .section-label--white, .journey-page .section-label--white i { color: #fff; }

.jr-title { font-family: "Lucky Beauty new", "Lucky Beauty", serif; font-size: 30px; font-weight: 600; line-height: 45px; color: #2C2C2C; margin-top: -10px; }
.jr-title--spaced { letter-spacing: 2px; }
.jr-title--white { color: #fff; }
.jr-text { font-family: var(--font-body); font-size: 15px; font-weight: 400; line-height: 1.5; color: #2C2C2C; margin-top: 20px; display: flow-root; } /* flow-root keeps the paragraphs' bottom margin inside, as in the Elementor widget */
.jr-text p, .jr-accordion__content p { margin: 0 0 .9rem; }

/* ---------------- 1. INTRO ---------------- */
.jr-intro { margin: 70px 0 50px; }
.jr-intro__title { width: 55%; max-width: 55%; }
/* the photo is a mobile-only widget on WordPress (elementor-hidden-* on every other device) */
.jr-intro__img { display: none; text-align: end; }
.jr-intro__img img { display: inline-block; max-width: 800px; width: 100%; }
.jr-intro__text { width: 70%; max-width: 70%; }

/* ---------------- 2. COUNTERS ---------------- */
.jr-counters { padding: 50px 0 100px; }
.jr-counters__grid { display: flex; align-items: flex-start; }
.jr-counters__left, .jr-counters__right { flex: 0 0 50%; max-width: 50%; padding: 0; }
.jr-counters__row { display: flex; }
.jr-counters__row + .jr-counters__row { margin-top: 30px; }
.jr-counter { flex: 0 0 28.909%; max-width: 28.909%; }
.jr-counter + .jr-counter { flex-basis: 71.091%; max-width: 71.091%; }
/* Elementor counter: number on its own line, title block centred under it */
.jr-counter__inner { display: flex; flex-direction: column; align-items: flex-start; } /* title flush under the number, not centred */
.jr-counter__number { align-self: stretch; font-family: "Lucky Beauty", serif; font-size: 30px; font-weight: 600; line-height: 45px; color: #2C2C2C; display: flex; direction: ltr; justify-content: flex-start; white-space: pre; }
.jr-counter__title { font-family: var(--font-body); font-size: 17px; font-weight: 400; line-height: 20px; color: #2C2C2C; }
.jr-counters__right { text-align: end; }
.jr-counters__right img { display: inline-block; max-width: 800px; width: 100%; }

/* ---------------- 3. CREATING COMPELLING DESTINATIONS (dark) ---------------- */
.jr-destinations { background: #2C2C2C; padding: 100px 0; }
.jr-destinations__grid { display: flex; align-items: flex-start; }
.jr-destinations__body, .jr-destinations__img { flex: 0 0 50%; max-width: 50%; padding: 0; }
.jr-destinations__body { padding-top: 20px; }
.jr-destinations__title { margin: 20px 0 0; }
.jr-destinations__text { width: 75%; max-width: 75%; color: #fff; font-size: 17px; margin-top: 10px; }
.jr-destinations__block + .jr-destinations__block { margin-top: 20px; }
.jr-destinations__img { text-align: end; }
.jr-destinations__img img { max-width: 100%; display: inline-block; }

/* ---------------- 4. VISION ---------------- */
.jr-vision { padding: 100px 0; }
.jr-vision__title { width: 50%; max-width: 50%; }
.jr-vision__text { width: 60%; max-width: 60%; }

/* ---------------- 5. PARALLAX IMAGE ---------------- */
.jr-parallax { min-height: 100vh; background-image: url("/api/media/file/068A5141-HDR-Edit-Edit.jpg"); background-position: center center; background-repeat: no-repeat; background-size: cover; }
@media (min-width: 1401px) { .jr-parallax { background-attachment: fixed; } }

/* ---------------- 6. VALUES accordion (dark) ---------------- */
.jr-values { background: #2C2C2C; padding: 100px 0; }
.jr-values__col { width: 60%; max-width: 60%; }
.jr-values__title { margin: 0 0 50px; }
.jr-accordion { text-align: left; }
.jr-accordion__item { border: 1px solid #686868; }
.jr-accordion__item + .jr-accordion__item { border-top: 0; }
.jr-accordion__title {
	display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: start; cursor: pointer;
	background: transparent; border: 0; padding: 15px;
	font-family: "Lucky Beauty new", "Lucky Beauty", serif; font-size: 20px; font-weight: 600; line-height: 45px; color: #888888;
	transition: color .3s;
}
.jr-accordion__title i { font-size: 15px; margin-top: 13px; }
.jr-accordion__title .icon-opened { display: none; }
.jr-accordion__item.is-active .jr-accordion__title { color: #fff; }
.jr-accordion__item.is-active .icon-closed { display: none; }
.jr-accordion__item.is-active .icon-opened { display: inline; }
.jr-accordion__content { display: none; border-top: 1px solid #686868; padding: 15px; font-family: var(--font-body); font-size: 17px; line-height: 1.5; color: #fff; }
.jr-accordion__item.is-active .jr-accordion__content { display: block; }

/* ---------------- 7. MISSION (light grey) ---------------- */
.jr-mission { background: #F2F2F2; padding: 100px 0 50px; }
.jr-mission__grid { display: flex; align-items: flex-start; }
.jr-mission__body, .jr-mission__img { flex: 0 0 50%; max-width: 50%; padding: 0; }
.jr-mission__body { align-self: center; }
.jr-mission__title { width: 73%; max-width: 73%; }
.jr-mission__img { text-align: end; }
.jr-mission__img img { width: 80%; display: inline-block; }

/* ---------------- 8. GUIDING PRINCIPLES ---------------- */
.jr-principles-intro { padding: 100px 0; }
.jr-principles-intro__title { width: 50%; max-width: 50%; }
.jr-principles-intro__text { width: 60%; max-width: 60%; }
.jr-principles { margin: 50px 0 100px; }
.jr-principles__grid { display: flex; }
.jr-principles__col { flex: 0 0 50%; max-width: 50%; padding: 0; }
.jr-principles__col--left { padding-right: 5px; }
.jr-principles__col--right { padding-left: 5px; }
.principle-card { margin-bottom: 20px; }
.principle-card + .principle-card { margin-top: 40px; }
.principle-card__img { min-height: 350px; background-size: cover; background-position: center; background-repeat: no-repeat; }
.principle-card__body { padding: 20px 0 0; }
.principle-card__title { font-family: "Lucky Beauty new", "Lucky Beauty", serif; font-size: 25px; font-weight: 600; line-height: 45px; color: #2C2C2C; margin: 0 0 5px; }
.principle-card__text { font-family: var(--font-body); font-size: 15px; line-height: 1.5; color: #7A7A7A; }

/* ---------------- 9. WHY RETAL (dark) ---------------- */
.jr-why { background: #2C2C2C; padding: 100px 0; }
/* wide enough that "economy." stays on the last line of the four, as on WordPress */
.jr-why__title { width: 50%; max-width: 50%; margin-top: 0; }
.jr-why__grid { margin-top: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: 0; }
.why-box { margin-top: 50px; text-align: start; }
/* the six icons: one height (their aspect ratios differ). The files are solid white copies
   (assets/img/our-journey/why-*.svg, see src/seed/patch-journey-icons.ts) */
.why-box figure { margin: 0 0 14px; height: 40px; }
.why-box figure img { display: block; height: 100%; width: auto; max-width: 100%; transition-duration: .3s; }
/* image-box title: kit text typography (17px, 13px below 1200px), white */
.why-box h3 { font-family: var(--font-body); font-size: 17px; font-weight: 400; line-height: 45px; color: #fff; margin: 0 0 -10px; }
.why-box p { font-family: var(--font-body); font-size: 17px; line-height: 1.5; color: #fff; margin: 0; }

/* ---------------- 10. NEWS (reuses .news-section from style.css) ---------------- */
.journey-page .news-section { padding: 100px 0 50px; }
.journey-page .news-section .container { padding: 0; }
.journey-page .news-section .news-title { margin-bottom: 20px; }
.journey-page .news-section .section-label { color: #2C2C2C; }
.journey-page .news-section .section-label i { color: #2C2C2C; }
.journey-page .news-title { font-family: "Lucky Beauty new", "Lucky Beauty", serif; font-size: 30px; line-height: 45px; }
.journey-page .btn-news { font-family: var(--font-body); font-weight: 500; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1400px) {
	.jr-intro { margin: 0; }
	.jr-principles { margin-top: 0; }
	.jr-destinations__title { font-size: 25px; line-height: 35px; }
	.journey-page .news-section .container { padding: 0 20px; }
}
@media (max-width: 1200px) {
	.jr-intro { padding: 50px 20px 0; }
	.jr-intro__title { width: 80%; max-width: 80%; }
	.jr-intro__text { width: 100%; max-width: 100%; font-size: 13px; }
	.jr-counters { margin-top: 30px; padding: 0 20px 50px; }
	.jr-counter, .jr-counter + .jr-counter { flex-basis: 40%; max-width: 40%; }
	.jr-counter__title { font-size: 13px; }
	.jr-destinations { padding: 50px 20px; }
	.jr-destinations__text { font-size: 15px; }
	.jr-destinations__img img { width: 100%; }
	.jr-vision { padding: 50px 20px; }
	.jr-vision__title, .jr-principles-intro__title { width: 100%; max-width: 100%; }
	.jr-vision__text, .jr-principles-intro__text { width: 100%; max-width: 100%; font-size: 13px; }
	.jr-parallax { min-height: 400px; }
	.jr-values { padding: 50px 20px; }
	.jr-values__col { width: 70%; max-width: 70%; }
	.jr-accordion__content { font-size: 13px; }
	.jr-mission { margin-top: 30px; padding: 0 20px 50px; }
	.jr-mission__title { width: 80%; max-width: 80%; }
	.jr-text { font-size: 13px; }
	.jr-principles-intro { padding: 50px 20px; }
	.jr-principles { padding: 0 20px; }
	.principle-card__text { font-size: 13px; }
	.jr-why { padding: 50px 20px; }
	.jr-why__title { width: 60%; max-width: 60%; }
	.jr-why__grid { grid-template-columns: repeat(3, 1fr); }
	.why-box h3, .why-box p { font-size: 13px; }
	.journey-page .news-section { padding: 50px 20px 80px; }
}
@media (max-width: 1024px) {
	.jr-title, .jr-counter__number, .jr-destinations__title { font-size: 25px; line-height: 38px; }
}
@media (max-width: 880px) {
	.jr-mission { margin-top: 50px; }
	.jr-why__title { width: 70%; max-width: 70%; }
}
@media (max-width: 767px) {
	.jr-br-desktop { display: none; }
	.jr-intro__img { display: block; margin-top: 20px; }
	.jr-intro__img img { max-width: 100%; }
	.jr-intro__title { width: 100%; max-width: 100%; font-size: 20px; line-height: 32px; letter-spacing: .7px; }
	.jr-intro__text { font-size: 15px; }
	.jr-counters { padding: 0 20px 50px; }
	.jr-counters__grid { flex-direction: column; }
	.jr-counters__left { flex-basis: auto; width: 100%; max-width: 100%; }
	.jr-counters__right { display: none; }
	.jr-counter, .jr-counter + .jr-counter { flex-basis: 50%; max-width: 50%; }
	.jr-counter__inner { width: 80%; }
	.jr-counters__row + .jr-counters__row { margin: 20px 0 30px; }
	.jr-destinations__grid { flex-direction: column; align-items: stretch; }
	.jr-destinations__body, .jr-destinations__img { flex-basis: 100%; max-width: 100%; }
	.jr-destinations__title { font-size: 25px; }
	.jr-destinations__text { width: 100%; max-width: 100%; }
	.jr-destinations__img { margin-top: 30px; }
	.jr-title { font-size: 20px; line-height: 32px; }
	.jr-values__col { width: 100%; max-width: 100%; }
	.jr-values__title { font-size: 25px; line-height: 32px; }
	.jr-accordion__title { font-size: 20px; padding: 12px 15px; }
	.jr-accordion__content { font-size: 15px; padding: 7px 15px; }
	.jr-mission { margin-top: 0; padding: 30px 20px 50px; }
	.jr-mission__grid { flex-direction: column; }
	.jr-mission__body, .jr-mission__img { flex-basis: 100%; max-width: 100%; padding: 0; }
	.jr-mission__title { width: 100%; max-width: 100%; }
	.jr-mission__img { margin-top: 30px; }
	.jr-mission__img img { width: 100%; }
	.jr-mission .jr-text { font-size: 15px; }
	.jr-principles-intro { padding: 30px 20px; }
	.jr-principles { margin-bottom: 0; }
	.jr-principles__grid { flex-direction: column; }
	.jr-principles__col { flex-basis: 100%; max-width: 100%; padding: 0; }
	.jr-principles__col--left { margin-bottom: 30px; }
	.principle-card { margin-bottom: 10px; }
	.principle-card + .principle-card { margin-top: 19px; }
	.principle-card__title { font-size: 25px; }
	.jr-why { margin-top: 40px; padding: 50px 20px; }
	.jr-why__title { width: 100%; max-width: 100%; font-size: 20px; line-height: 1.3em; }
	.jr-why__grid { grid-template-columns: repeat(3, 1fr); }
	.why-box figure { margin-bottom: 21px; }
	.journey-page .news-section { padding: 20px 20px 20px; }
	.journey-page .news-title { font-size: 20px; line-height: 30px; }
	.journey-page .news-section .container { padding: 0 20px; }
}
@media (max-width: 480px) {
	.jr-counter__number { font-size: 22px; }
	.principle-card__img { min-height: 260px; }
}

/* =========================================================
   RTL (ar/our-journey.html)
   ========================================================= */
.rtl.journey-page .jr-title, .rtl.journey-page .jr-destinations__title, .rtl.journey-page .jr-accordion__title,
.rtl.journey-page .principle-card__title, .rtl.journey-page .jr-values__title, .rtl.journey-page .news-title {
	font-family: "29LTZaridDisplayVF", sans-serif; font-weight: 700; letter-spacing: 0;
}
.rtl.journey-page .section-label, .rtl.journey-page .jr-text, .rtl.journey-page .jr-destinations__text, .rtl.journey-page .jr-accordion__content,
.rtl.journey-page .principle-card__text, .rtl.journey-page .jr-counter__title, .rtl.journey-page .why-box p, .rtl.journey-page .btn-news { font-family: "29LTAzer-Light", sans-serif; }
.rtl.journey-page .section-label { text-transform: none; }
.rtl.journey-page .jr-intro__title { width: 66%; max-width: 66%; }
.rtl.journey-page .jr-intro__text { width: 50%; max-width: 50%; font-size: 17px; }
.rtl.journey-page .jr-counter__number { font-family: "Lucky Beauty new", "Lucky Beauty", serif; direction: rtl; justify-content: flex-start; gap: 8px; }
.rtl.journey-page .jr-counter__inner { align-items: flex-start; } /* title flush under the number, not centred */
.rtl.journey-page .jr-counter__title { text-align: right !important; }
.rtl.journey-page .jr-counters__row { margin-top: 30px; }
.rtl.journey-page .jr-counter { flex-basis: 40%; max-width: 40%; }
.rtl.journey-page .jr-counter + .jr-counter { flex-basis: 60%; max-width: 60%; }
.rtl.journey-page .jr-destinations__title { font-size: 30px; line-height: 45px; }
.rtl.journey-page .jr-accordion { text-align: right; }
.rtl.journey-page .jr-accordion__title { font-size: 20px; flex-direction: row-reverse; justify-content: space-between; } /* icon on the far side */
.rtl.journey-page .jr-accordion__content { font-size: 17px; }
/* the Arabic text widgets hold bare text (no paragraphs) on WordPress */
.rtl.journey-page .jr-text p, .rtl.journey-page .jr-accordion__content p { margin-bottom: 0; }
.rtl.journey-page .jr-principles__col--left { padding-right: 1px; padding-left: 6px; }
.rtl.journey-page .jr-principles__col--right { padding-left: 1px; padding-right: 5px; }
.rtl.journey-page .principle-card__title { font-size: 25px; }
.rtl.journey-page .why-box h3 { font-family: "29LTAzer-Light", sans-serif; font-size: 17px; font-weight: 400; line-height: 45px; color: #fff; margin-bottom: -10px; }
.rtl.journey-page .why-box p { font-size: 17px; }
.rtl.journey-page .news-section .news-title { font-size: 27px; }
@media (max-width: 1200px) {
	.rtl.journey-page .jr-intro__title { width: 80%; max-width: 80%; }
	.rtl.journey-page .jr-intro__text { width: 100%; max-width: 100%; font-size: 13px; }
	.rtl.journey-page .jr-counter__number { font-size: 25px; }
	.rtl.journey-page .jr-counter, .rtl.journey-page .jr-counter + .jr-counter { flex-basis: 40%; max-width: 40%; }
	.rtl.journey-page .jr-accordion__content { font-size: 13px; }
	.rtl.journey-page .jr-values__col { width: 100%; max-width: 100%; }
	.rtl.journey-page .why-box h3 { font-size: 13px; }
	.rtl.journey-page .why-box p { font-size: 13px; }
}
@media (max-width: 767px) {
	.rtl.journey-page .jr-intro { padding-top: 100px; }
	.rtl.journey-page .jr-intro__title { width: 100%; max-width: 100%; }
	.rtl.journey-page .jr-counter__inner { width: 100%; }
	.rtl.journey-page .jr-counter__number { line-height: 45px; }
	.rtl.journey-page .jr-destinations__title, .rtl.journey-page .jr-values__title { font-size: 20px; }
	.rtl.journey-page .jr-intro__text { font-size: 15px; }
	.rtl.journey-page .jr-counter, .rtl.journey-page .jr-counter + .jr-counter { flex-basis: 50%; max-width: 50%; }
	.rtl.journey-page .jr-accordion__title { font-size: 25px; }
	.rtl.journey-page .principle-card__title { font-size: 20px; }
	.rtl.journey-page .why-box h3 { font-size: 20px; }
	.rtl.journey-page .why-box p { font-size: 15px; }
	.rtl.journey-page .jr-principles__col { padding: 0; }
	.rtl.journey-page .news-section .news-title { font-size: 20px; line-height: 32px; }
}