/* ============================================================
   Arabic RTL stylesheet for bjcnova site
   - Loads after style.css on all Arabic pages
   - Provides: Arabic-friendly font stack, RTL flow, and
     adjustments for the news section so titles can show
     more than a single-line truncated "..." snippet.
   ============================================================ */

html[lang="ar"],
html[dir="rtl"] {
  direction: rtl;
  text-align: right;
}

body {
  font-family: "Tajawal", "Cairo", "Noto Sans Arabic",
               "Segoe UI Arabic", "Microsoft YaHei",
               "PingFang SC", Arial, sans-serif;
  font-weight: 400;
  letter-spacing: 0;
}

/* ---------- Global RTL micro-fixes ---------- */
.nav ul,
.breadcrumb,
.pagination,
.product-tabs,
.footer-nav,
.contact,
.copyright {
  text-align: right;
}

.section-title img { transform: scaleX(-1); }
.back-top { left: 4%; right: auto; }
.banner-intro-copy h1 { flex-direction: row-reverse; }

/* ---------- News section (home page) ---------- */
/* On the original English site, the news-feature card uses a
   single-line ellipsis for the title. For Arabic, the same
   approach is too aggressive: a long Arabic title collapses
   into just "…" and the date appears alone. We expand the
   feature card to two lines on desktop, then use a 2-line
   clamp on small screens. */

.news-feature > span {
  height: auto !important;
  min-height: 58px;
  padding: 10px 22px !important;
  flex-direction: row-reverse;
  align-items: center;
  gap: 14px;
}
.news-feature > span b {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 500;
  line-height: 1.45;
  font-size: 15px;
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  text-align: right;
}
.news-feature > span time {
  flex: 0 0 auto;
  font-size: 13px;
  white-space: nowrap;
  opacity: .9;
  direction: ltr;
  unicode-bidi: isolate;
}

/* News list (right column on home) */
/* In RTL the natural mirror puts the feature image on the right; the
   user has asked to push the image to the visual LEFT, so we reverse
   the order with `direction: ltr` on the grid container and flip the
   inner blocks back to RTL for text flow. */
.news-layout { direction: ltr; }
.news-layout > * { direction: rtl; text-align: right; }
.news-list { direction: rtl; }
.news-feature { direction: ltr; }
.news-feature > span { direction: rtl; }

.news-item {
  grid-template-columns: 13px minmax(0, 1fr) 78px;
  text-align: right;
}
.news-item span { min-width: 0; }
.news-item b {
  white-space: normal !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 15px;
  line-height: 1.45;
  color: #333;
  font-weight: 500;
  text-align: right;
}
.news-item em {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 4px;
  color: #888;
  font-size: 13px;
  line-height: 1.55;
  text-align: right;
}
.news-item time {
  white-space: nowrap;
  direction: ltr;
  unicode-bidi: isolate;
  font-size: 13px;
  color: #9a9a9a;
  text-align: left;
}

/* ---------- News list page (news.html) ---------- */
.news-row {
  text-align: right;
  grid-template-columns: 76px minmax(0, 1fr) 34px;
}
/* Lead card: image moves to visual LEFT, text on the RIGHT. We use
   `direction: ltr` on the card and flip children back to rtl so
   Arabic copy still flows right-to-left. */
.news-lead-card {
  direction: ltr;
  grid-template-columns: minmax(0, 1fr) minmax(0, 560px) !important;
}
.news-lead-card > * { direction: rtl; text-align: right; }
.news-lead-card > a { order: 0; }
.news-lead-card > div { order: 1; }
.news-lead-card h3 { white-space: normal; }
.news-row .copy {
  text-align: right;
  min-width: 0;
}
.news-row .copy b {
  white-space: normal !important;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 18px;
  line-height: 1.5;
  color: #243746;
}
.news-row .copy em {
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 14px;
  line-height: 1.6;
  margin-top: 6px;
  color: #7e8b94;
}
.news-row .date time,
.news-row .date b,
.news-row .date em { direction: ltr; }
.news-row i { transform: scaleX(-1); }
.news-row .date { text-align: center; }

/* ---------- News detail page ---------- */
.article-head h1,
.article-cover,
.news-article p { text-align: right; }
.article-head div { direction: ltr; unicode-bidi: isolate; }
.news-article blockquote {
  border-left: 0;
  border-right: 5px solid #0aa6e8;
  text-align: right;
}
.latest-news time { direction: ltr; unicode-bidi: isolate; }

/* ---------- Banner / product tabs RTL ---------- */
/* Original English site uses grid `1fr 520px` with the copy on the
   left and the image on the right. In RTL we want the image to move
   to the visual left, so we let the grid inherit its native RTL
   column order: HTML order is `copy + img`, and `direction: rtl`
   mirrors it to `img (visual left) + copy (visual right)`. The copy
   column then becomes the wide 1fr track, giving long Arabic
   paragraphs enough room. */
/* The English site uses fixed heights for the banner container
   (height: 715px) and the copy column (height: 410px). Arabic
   copy is roughly 30% longer per paragraph and the mission quote
   is twice as long, so the fixed 410px copy height overflows the
   panel and bleeds into the image column / next section.

   Fix: drop every fixed height inside the banner so the panel
   sizes to its longest child. The image column keeps a sensible
   min-height so the building photo still fills the panel, and
   the copy column grows naturally to fit the Arabic text. */
.banner.banner-intro {
  height: auto !important;
  min-height: 715px;
  padding: 84px 0 40px !important;
}
.banner-intro-panel {
  grid-template-columns: minmax(0, 1fr) 520px !important;
  direction: rtl;
  align-items: stretch;
}
.banner-intro-copy {
  padding: 36px 32px 32px 24px !important;
  direction: rtl;
  text-align: right;
  height: auto !important;
  min-height: 410px;
  overflow: visible;
}
.banner-intro-copy h1 {
  flex-direction: row-reverse;
  text-align: right;
  margin-bottom: 22px !important;
}
.banner-intro-copy p {
  line-height: 1.95 !important;
  margin-bottom: 20px !important;
  word-break: break-word;
  overflow-wrap: anywhere;
  text-align: right;
}
.banner-intro-copy strong { display: inline-block; margin-bottom: 6px; }
.banner-intro-img {
  direction: ltr;
  height: 100% !important;
  min-height: 410px;
  max-height: none;
  object-fit: cover;
  align-self: stretch;
}

.product-tabs { direction: rtl; }
.product-list { direction: rtl; text-align: right; }

/* ---------- Footer (desktop ≥901px) ----------
   The 3-column layout only applies on desktop. On mobile (≤900px)
   the original style.css already switches to 1fr single column;
   we must NOT override that with !important. */
@media (min-width: 901px) {
  .footer-inner {
    grid-template-columns: 380px 1fr 160px !important;
    direction: rtl;
    text-align: right;
  }
  .footer-inner > div:first-child { min-width: 0; }
  .footer-nav { min-width: 0; direction: rtl; }
  .footer-nav a { min-width: 0; word-break: break-word; text-align: right; }
  .qr { flex-shrink: 0; }
  .contact { margin: 16px 55px 0 0 !important; min-width: 0; direction: rtl; text-align: right; }
  .contact p { word-break: break-word; }
  .copyright { direction: rtl; }
}

/* ---------- Hero arrows in news.css ---------- */
.news-hero-card { right: 4%; left: auto; }
.news-row i:after {
  left: auto;
  right: 11px;
  transform: rotate(225deg);
}

/* ---------- Section icons that are arrows / bullets ---------- */
.news-item i { margin-left: 0; margin-right: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 1280px) {
  .news-feature > span b { font-size: 14px; }
  .news-row .copy b { font-size: 17px; }
}

@media (max-width: 900px) {
  .news-feature { aspect-ratio: 16/10; }
  .news-feature > span {
    padding: 9px 14px !important;
    min-height: 48px;
  }
  .news-feature > span b { font-size: 13px; line-height: 1.4; }
  .news-item { grid-template-columns: 11px minmax(0, 1fr) 72px; gap: 10px; }
  .news-item b { font-size: 13px; }
  .news-item em { font-size: 12px; }
  .news-item time { font-size: 12px; }
  .news-row { grid-template-columns: 62px minmax(0, 1fr); }
  .news-row .copy b { font-size: 15px; }
  .news-row i { display: none; }
}

@media (max-width: 600px) {
  .news-feature { aspect-ratio: 16/9; }
  .news-feature > span {
    min-height: 44px;
    padding: 8px 12px !important;
  }
  .news-feature > span b { font-size: 12px; line-height: 1.4; }
  .news-item { grid-template-columns: 10px minmax(0, 1fr) 64px; }
  .news-item b { font-size: 12px; }
  .news-item em { font-size: 11px; }
  .news-item time { font-size: 11px; }
  .news-row .copy b { font-size: 14px; }
}

@media (max-width: 480px) {
  /* The feature card stays horizontal on very small screens so the
     date stays in one row with the title (just like desktop). */
  .news-feature > span { flex-direction: row-reverse; gap: 8px; }
  .news-feature > span time { font-size: 11px; }
}

/* ============================================================
   Product visual blocks (image + blue caption)
   --------------------------------------------------------
   On the original English site these blocks use
   `position: absolute; right: 0` to float the blue caption
   over the right half of the product image.  In the Arabic
   mirror the same absolute offset still pins the caption to
   the visual right, while `display:flex; justify-content:flex-start`
   in RTL also pulls the image to the visual right — so the
   two end up completely overlapping.

   Fix: force the visual row to a clean two-column grid
   (image left, caption right) with `direction: ltr`, and let
   each child retain its own RTL text flow.  Below 900px the
   mobile media query already stacks the two, so we just make
   sure the absolute positioning does not come back. */

.product-visual,
.station-product-visual,
.fuel-visual,
.dc-product {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 410px;
  align-items: center;
  direction: ltr;
  height: auto;
  min-height: 470px;
}
.station-product-visual { min-height: 510px; }
.fuel-visual { min-height: 480px; }
.dc-product { min-height: 0; align-items: stretch; grid-template-columns: minmax(0, 1fr) minmax(0, 460px); gap: 24px; }

.product-visual > img,
.station-product-visual > img,
.fuel-visual > img,
.dc-product > div > img {
  width: 100% !important;
  height: auto;
  max-height: 470px;
  object-fit: contain;
  display: block;
}
.station-product-visual > img { max-height: 510px; }
.fuel-visual > img { max-height: 480px; }
.dc-product > div > img { max-height: 440px; }

.product-caption,
.station-product-visual > div,
.fuel-caption {
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  transform: none !important;
  width: 100% !important;
  height: auto;
  direction: rtl;
  text-align: right;
}

/* modular-data-center: each row has 2 cells (image div + copy div).
   Force order so image sits at visual left, copy at visual right.
   `.dc-product.reverse` swaps the order in the English site, so we
   also swap it back to LTR direction order. */
.dc-product > div { direction: ltr; }
.dc-product > .product-copy { direction: rtl; }
.dc-product > div:first-child { order: 0; }
.dc-product > .product-copy { order: 1; }
.dc-product.reverse > div:first-child { order: 1; }
.dc-product.reverse > .product-copy { order: 0; }

/* mobile / tablet — single column, no absolute overlap */
@media (max-width: 900px) {
  .banner.banner-intro {
    min-height: 0 !important;
    padding: 64px 0 20px !important;
    height: auto !important;
  }
  /* Mobile: panel wraps both copy and image in a single blue block
     so the picture is visually attached to the text panel (no gap)
     and never overlaps the text. The original grid layout would
     leave the image as a separate strip and make it look like the
     text "overflows" into the photo. */
  .banner-intro-panel {
    display: block !important;
    width: 90% !important;
    direction: rtl;
    overflow: hidden;
    background: linear-gradient(180deg, rgba(0,120,201,.78), rgba(0,169,223,.55));
  }
  .banner-intro-copy {
    min-height: 0 !important;
    height: auto !important;
    padding: 22px 20px 18px !important;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
  }
  .banner-intro-copy h1 {
    justify-content: flex-end;
    font-size: 22px !important;
    margin-bottom: 12px !important;
    gap: 10px !important;
  }
  .banner-intro-copy h1:before,
  .banner-intro-copy h1:after {
    width: 36px !important;
    height: 14px !important;
  }
  .banner-intro-copy p {
    line-height: 1.75 !important;
    margin-bottom: 12px !important;
    font-size: 13px !important;
  }
  .banner-intro-copy strong { font-size: 14px !important; }
  /* Image becomes a "footer band" inside the same blue panel.
     Aspect-ratio 16/9 caused the city photo to be horribly stretched
     on portrait phones, so we cap the height instead and let cover
     crop the centre. */
  .banner-intro-img {
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    height: 200px !important;
    max-height: 200px !important;
    aspect-ratio: auto !important;
    object-fit: cover;
    object-position: center;
    margin: 6px 0 0 !important;
    border-radius: 0;
  }

  .product-visual,
  .station-product-visual,
  .fuel-visual {
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: 0;
    height: auto;
  }
  .product-visual > img,
  .station-product-visual > img,
  .fuel-visual > img {
    width: 100% !important;
    height: 240px;
    max-height: 240px;
  }
  .product-caption,
  .station-product-visual > div,
  .fuel-caption {
    width: 100% !important;
    padding: 14px 16px;
  }
  .product-caption h2 { font-size: 21px; }
  .product-caption p { margin-top: 10px; font-size: 13px; line-height: 1.7; }
  .station-product-visual > div { bottom: auto !important; }
  .station-product-visual strong { font-size: 22px; }
  .station-product-visual h2 { font-size: 19px; }
  .fuel-caption h2 { font-size: 21px; }
  .fuel-caption p { margin-top: 11px; font-size: 13px; line-height: 1.7; }

  .dc-product { grid-template-columns: minmax(0, 1fr) !important; }
  .dc-product > div:first-child,
  .dc-product > .product-copy,
  .dc-product.reverse > div:first-child,
  .dc-product.reverse > .product-copy { order: 0; }
  .dc-product > div > img { max-height: 300px; }

  /* ---------- Sub-page hero (banner with single text) ---------- */
  .banner { padding: 70px 0 18px !important; }
  .banner h1 { font-size: 22px !important; }
  .banner h1:before, .banner h1:after { width: 36px !important; height: 14px !important; }
  .banner .breadcrumb { font-size: 12px; }

  /* ---------- Sub-page section titles ---------- */
  .section-title { font-size: 24px !important; margin-bottom: 22px !important; }
  .section-title img { width: 42px !important; }

  /* ---------- Intro text section (about-us) ---------- */
  .intro-text { font-size: 13px !important; line-height: 1.85 !important; }
  .intro-text p { margin: 0 0 12px !important; }

  /* ---------- News list / detail ---------- */
  .news-row .copy b { font-size: 14px !important; }
  .news-row .copy em { font-size: 12px !important; }
  .news-row { gap: 12px !important; padding: 14px 0 !important; }
  .news-lead-card { gap: 16px !important; }
  .news-lead-card h3 { font-size: 18px !important; line-height: 1.5 !important; }
  .article-head h1 { font-size: 22px !important; line-height: 1.4 !important; }
  .news-article p { font-size: 14px !important; line-height: 1.85 !important; }
  .news-article blockquote { padding: 10px 14px !important; font-size: 14px !important; }

  /* ---------- Products section (homepage tab area) ---------- */
  .products-bar h2 { font-size: 22px !important; }
  .product-tab { padding: 10px 6px !important; font-size: 12px !important; }
  .product-tab b { font-size: 12px !important; }
  .product-list article h3 { font-size: 16px !important; }
  .product-list article p { font-size: 13px !important; line-height: 1.7 !important; }

  /* ---------- Feature items (homepage) ---------- */
  .feature-item { font-size: 14px !important; gap: 12px !important; padding: 10px !important; }
  .feature-item img { width: 38px !important; height: 40px !important; }

  /* ---------- Footer (mobile: single column, centered) ----------
     Original style.css already sets grid-template-columns:1fr,
     centered text, borders, etc. We only add RTL direction and
     right-align the nav links (Arabic reads right-to-left). */
  .footer-inner {
    padding: 24px 0 !important;
    direction: rtl !important;
    text-align: center !important;
  }
  .footer-inner > div:first-child {
    text-align: center !important;
    padding-bottom: 22px;
    border-bottom: 1px solid rgba(255,255,255,.2);
  }
  .footer-logo { display: block; margin: 0 auto !important; }
  .contact {
    display: inline-grid !important;
    gap: 8px;
    margin: 18px auto 0 !important;
    text-align: center !important;
    font-size: 13px !important;
    line-height: 1.55;
  }
  .contact p { margin: 0 !important; }
  .footer-nav {
    width: 100%;
    direction: rtl !important;
    text-align: right !important;
  }
  .footer-nav a {
    font-size: 13px !important;
    padding: 11px 8px !important;
    text-align: right !important;
    min-width: 0;
    word-break: break-word;
  }
  .qr { margin: 0 auto !important; }
  .copyright {
    direction: rtl !important;
    text-align: center !important;
    font-size: 12px !important;
    flex-direction: row-reverse;
  }
}

@media (max-width: 520px) {
  /* ---------- Banner even more compact ---------- */
  .banner.banner-intro { padding: 56px 0 14px !important; }
  .banner-intro-panel { width: 94% !important; }
  .banner-intro-copy { padding: 18px 16px 16px !important; }
  .banner-intro-copy h1 { font-size: 19px !important; gap: 8px !important; margin-bottom: 10px !important; }
  .banner-intro-copy h1:before,
  .banner-intro-copy h1:after { width: 28px !important; height: 12px !important; }
  .banner-intro-copy p { font-size: 12px !important; line-height: 1.65 !important; margin-bottom: 10px !important; }
  .banner-intro-copy strong { font-size: 13px !important; }
  .banner-intro-img { height: 160px !important; max-height: 160px !important; }

  /* ---------- Sub-page hero ---------- */
  .banner { padding: 60px 0 14px !important; }
  .banner h1 { font-size: 19px !important; }
  .banner h1:before, .banner h1:after { width: 28px !important; height: 12px !important; }

  .product-visual > img,
  .station-product-visual > img,
  .fuel-visual > img { height: 200px; max-height: 200px; }
  .product-caption h2,
  .fuel-caption h2 { font-size: 19px; }
  .product-caption p,
  .fuel-caption p { font-size: 12px; line-height: 1.65; }
  .station-product-visual > img { height: 220px; max-height: 220px; }
  .dc-product > div > img { max-height: 220px; }

  .section-title { font-size: 21px !important; }
  .feature-item { font-size: 12px !important; }
  .feature-item img { width: 32px !important; height: 34px !important; }
  .product-tab b { font-size: 11px !important; }
  .product-list article h3 { font-size: 15px !important; }
  .product-list article p { font-size: 12px !important; }
  .news-row .copy b { font-size: 13px !important; }
  .article-head h1 { font-size: 19px !important; }
  .intro-text { font-size: 12px !important; }
}