/* ==========================================================================
   NBCC – Marketing review fixes (October 2026)
   --------------------------------------------------------------------------
   Page sections are Elementor HTML widgets with their own inline <style>.
   These rules use one extra element in the selector ("body …") so they win
   over the widget CSS regardless of load order, without !important where
   avoidable. Each block names the review point it closes.
   To retire a rule later, move it into the widget's own CSS and delete it here.
   ========================================================================== */

/* --- About · point 2 – "OUR" overlapping "Mission" / "Values" (all sizes) --- */
body .nbcc-mission-title,
body .nbcc-values-title {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  line-height: 1;
  margin-bottom: 36px;
}
body .mission-our,
body .values-our {
  position: static;
  display: block;
  transform: none;
  margin: 0;
  line-height: 1;
}

/* --- About · point 3 / 17 – the 1988 year never covers or is covered --- */
body .nbcc-history-left {
  display: flex;
  flex-direction: column;
  padding-bottom: 28px;
}
body .nbcc-history-year {
  position: static;
  margin-top: auto;
  padding-top: 18px;
  line-height: .85;
}

/* --- About · "GROWTH AND BEYOND" reads in the right order on phones --- */
@media (max-width: 900px) {
  body .nbcc-growth-title { display: inline-flex; flex-direction: column; align-items: center; }
  body .nbcc-growth-title h1 { display: contents; }
  body .nbcc-growth-title h1 > span:first-child { order: 1; }
  body .nbcc-growth-title .nbcc-and { order: 2; margin: 6px 0 10px; }
  body .nbcc-growth-title .nbcc-title-line { order: 3; }
}

/* --- About · values cards – words never split mid-word ("COLLABORATI-ON") --- */
body .nbcc-value-card h3,
body .nbcc-value-card h4,
body .nbcc-value-card p {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
}

/* --- About · policy download link centred in English and Arabic ---
   The full-width strip is centred by its (centred) parent with flexbox, which works the
   same in both reading directions. The previous margin-left:calc(50% - 50vw) technique is
   ignored by browsers in right-to-left pages and pushed the Arabic link off-screen. */
body .elementor-widget-container:has(> .catalogue-download-section) {
  display: flex;
  justify-content: center;
}
body .catalogue-download-section {
  flex: 0 0 auto;
  position: relative;
  left: auto;
  right: auto;
  width: 100vw;
  max-width: 100vw;
  margin-left: 0 !important;
  margin-right: 0 !important;
  transform: none;
  box-sizing: border-box;
}
body .catalogue-download-inner {
  gap: 24px;
  flex-wrap: wrap;
  justify-content: center;
  margin-left: auto;
  margin-right: auto;
}

/* --- About (Arabic) · point 4 – same image proportions as English (no zoom) ---
   The image fills its column with background-size:cover, so a taller column zooms it.
   The Arabic column was ~40% taller (18px text + 200px reserved for the year), so the
   Arabic text, year and spacing now follow the English block exactly. */
body .nbcc-history-grid-ar { grid-template-columns: 52% 48%; }
body .nbcc-history-content-ar {
  display: flex;
  flex-direction: column;
  padding-bottom: 28px;
}
body .nbcc-history-text-ar p { font-size: 15.5px; line-height: 1.5; margin-bottom: 14px; }
body .nbcc-history-year-ar {
  position: static;
  font-size: 210px;
  margin-top: auto;
  padding-top: 18px;
  line-height: .85;
}

/* --- Home · point 16 – campaign grid: product images sit on their boxes, no overlap (phones) --- */
@media (max-width: 767px) {
  body .nbcc-campaign-grid .nbcc-campaign-row { row-gap: 22px; }
  body .nbcc-campaign-grid .nbcc-campaign-top-box { margin-top: 28px; }
  body .nbcc-campaign-grid .nbcc-campaign-top-box__bag {
    left: 50%;
    top: -22px;
    width: auto;
    height: 150px;
    max-width: 60%;
    transform: translateX(-50%);
    clip-path: none;
  }
  body .nbcc-campaign-grid .nbcc-campaign-top-box__chip {
    right: -6px;
    top: -26px;
    width: 92px;
    height: auto;
  }
  body .nbcc-campaign-grid .nbcc-campaign-stack { margin-top: 18px; }
  /* GoFit pack: same placement as on desktop – centred at 56% of the card, rising
     slightly above it – at a size that leaves the background photo visible (review round 2). */
  body .nbcc-campaign-grid .nbcc-campaign-stack__product {
    top: -16px;
    bottom: auto;
    left: 56%;
    right: auto;
    width: 42%;
    min-width: 0;
    height: auto;
    transform: translateX(-50%);
  }
  body .nbcc-campaign-grid .nbcc-campaign-stack__product-image { width: 100%; height: auto; max-width: 100%; }
}

/* --- Home · point 16 – "Join Us" person in the same position as on desktop (round 2) ---
   Desktop: title on the left, the person on the right starting at the top of the section
   and overlapping the white and green parts. The artwork is a 16:9 transparent canvas
   with the person in its right ~38 %, so the canvas is anchored top-right and sized so
   the person fills about 60 % of the phone width; the text starts below the person. */
@media (max-width: 767px) {
  body .nbcc-join-us-section { position: relative; overflow: hidden; }
  body .nbcc-join-us-section .nbcc-join-us-title-wrap { max-width: 50%; z-index: 3; }
  /* Arabic: the title sits on the left on desktop too (person on the right). */
  body .nbcc-join-us-section[dir="rtl"] .nbcc-join-us-title-wrap { left: 24px; right: auto; transform: translateY(-50%); }
  body .nbcc-join-us-section .nbcc-join-us-person {
    top: 0;
    right: 0;
    left: auto;
    bottom: auto;
    width: auto;
    height: 350px;
    transform: none;
    z-index: 2;
    pointer-events: none;
  }
  body .nbcc-join-us-section .nbcc-join-us-person img {
    width: auto;
    height: 100%;
    max-width: none;
  }
  body .nbcc-join-us-section .nbcc-join-us-bottom {
    padding: 160px 24px 36px;
  }
  body .nbcc-join-us-section .nbcc-join-us-content { position: relative; z-index: 3; }
}

/* --- Al Batal · white space under the "About" text on phones & tablets (round 2) ---
   170px were reserved at the bottom for a red strip and a chips image that are no longer
   in the section; the space is only kept when that artwork is present. */
@media (max-width: 1024px) {
  body .albatal-about-section:not(:has(.albatal-chip, .albatal-red-strip)) { padding-bottom: 36px; }
}

/* --- Ringo · phones (round 2) ---------------------------------------------- */
@media (max-width: 768px) {
  /* "About": the biscuit artwork gets its own space under the text instead of sitting on it. */
  body .ringo-about-section { min-height: 0; padding-bottom: 0; }
  body .ringo-about-section .ringo-about-inner { min-height: 0; padding-bottom: 210px; }
  body .ringo-about-section .ringo-product { width: 200px; right: -24px; bottom: 0; }
  body .ringo-about-section .ringo-line { left: 14%; right: auto; bottom: 34px; }

  /* Campaign video: enlarged to almost the full width of the phone. */
  body .ringo-video-campaign { --video-width: 88%; --video-top: 50%; }
}

/* "Our Recipes" separated from "Our Products" (every brand that uses the recipes slider). */
body section[data-nbccr-theme] { margin-top: 48px; }
@media (max-width: 768px) {
  body section[data-nbccr-theme] { margin-top: 32px; }
}

/* ==========================================================================
   About us · phones & tablets (review round 3)
   One reading order for English and Arabic: text → 1988 → photo, each at full
   width, with readable type and consistent spacing between sections.
   ========================================================================== */
@media (max-width: 1024px) {
  /* --- Our History: text, then the year, then the photo --- */
  body .nbcc-history-grid,
  body .nbcc-history-grid-ar {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    min-height: 0;
    background: #c8a434;
  }
  body .nbcc-history-left,
  body .nbcc-history-content-ar {
    display: flex;
    flex-direction: column;
    padding: 34px 22px 26px;
    min-height: 0;
  }
  body .nbcc-history-text,
  body .nbcc-history-text-ar { padding: 0; max-width: 680px; }
  body .nbcc-history-text p,
  body .nbcc-history-text-ar p {
    font-size: 15px;
    line-height: 1.7;
    margin: 0 0 14px;
  }
  body .nbcc-history-year,
  body .nbcc-history-year-ar {
    position: static;
    align-self: stretch;
    margin: 10px 0 0;
    padding: 0;
    font-size: clamp(84px, 26vw, 150px);
    line-height: .82;
    letter-spacing: -3px;
    transform: none;
  }
  body .nbcc-history-image,
  body .nbcc-history-image-ar {
    width: 100%;
    min-height: 0;
    height: auto;
    aspect-ratio: 2418 / 1536;   /* the photo's own proportions: shown whole, never zoomed */
    background-size: cover;
    background-position: center;
    border: 0;
  }
}

@media (max-width: 767px) {
  /* --- Values: two cards per row instead of five full-width cards --- */
  body .nbcc-values-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  body .nbcc-value-card {
    min-height: 0;
    padding: 18px 14px 18px;
    gap: 14px;
    justify-content: flex-start;
  }
  body .nbcc-value-card > * { margin-top: 0; margin-bottom: 0; }
  body .nbcc-value-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
  body .nbcc-value-card h3,
  body .nbcc-value-card h4 { font-size: 15px; letter-spacing: .2px; line-height: 1.25; }

  /* --- Consistent vertical rhythm between the About sections --- */
  body .nbcc-mission-section,
  body .nbcc-mission-section-ar { padding-top: 44px; padding-bottom: 8px; margin-bottom: 0; }
  body .nbcc-values-section { padding-top: 28px; padding-bottom: 40px; margin-top: 0; }
  body .nbcc-mission-section > div,
  body .nbcc-mission-section-ar > div,
  body .nbcc-values-section > div { padding-top: 0; padding-bottom: 0; }
  body .nbcc-mission-section [class*="mission-box"],
  body .nbcc-mission-section-ar [class*="mission-box"] { min-height: 0; padding: 24px 20px; }
  body .nbcc-mission-title,
  body .nbcc-values-title { margin-bottom: 24px; }
}

@media (max-width: 900px) {
  /* --- Our Vision: the 16:9 video shown whole, the Vision text under it (not over it) --- */
  body .nbcc-vision-video-section,
  body .nbcc-vision-video-section-ar {
    height: auto;
    display: flex;
    flex-direction: column;
  }
  body .nbcc-vision-video,
  body .nbcc-vision-video-ar {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
  }
  body .nbcc-vision-overlay,
  body .nbcc-vision-overlay-ar { bottom: auto; aspect-ratio: 16 / 9; height: auto; }
  body .nbcc-vision-box,
  body .nbcc-vision-box-ar {
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    width: 100%;
    min-height: 0;
    padding: 30px 22px 34px;
  }
  body .nbcc-vision-box h2,
  body .nbcc-vision-box-ar h2 { font-size: clamp(34px, 10vw, 46px); }
  body .nbcc-vision-box p,
  body .nbcc-vision-box-ar p { font-size: 16px; line-height: 1.5; max-width: none; }
  body .nbcc-vision-box p br,
  body .nbcc-vision-box-ar p br { display: none; }   /* desktop line breaks read oddly on a phone */
}

/* NBCC – Elementor HTML Widget Section Spacing */

body.elementor-page .elementor-widget-html {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

body.elementor-page .elementor-widget-html > .elementor-widget-container {
  margin-block-start: 0 !important;
  margin-block-end: 0 !important;
}

body.elementor-page .elementor-widget-wrap > .elementor-widget-html:last-child {
  margin-bottom: 0 !important;
}

/* =====================================================================
   NBCC – About us · header video on phones (English 126 + Arabic 2547)
   Same result as Ringo: the video fills its section edge to edge,
   no white space above or below. Phones only (max-width: 767px).
   ===================================================================== */
@media (max-width: 767px) {

  /* 1) The section holding the video: no leftover mobile spacing */
  .elementor-126 .e-con:has(.nbcc-mbp-banner),
  .elementor-2547 .e-con:has(.nbcc-mbp-banner) {
    --margin-top: 0px !important;
    --margin-bottom: 0px !important;
    --padding-top: 0px !important;
    --padding-bottom: 0px !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* 2) The section right after the video starts directly under it */
  .elementor-126 .e-con:has(.nbcc-mbp-banner) + .e-con,
  .elementor-2547 .e-con:has(.nbcc-mbp-banner) + .e-con {
    --margin-top: 0px !important;
    margin-top: 0 !important;
  }

  /* 3) The video: 16:9 like Ringo, filling the frame (removes the side black bars) */
  .elementor-126 .nbcc-mbp-banner,
  .elementor-2547 .nbcc-mbp-banner {
    --nbcc-mbp-ratio: 16 / 9 !important;
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  .elementor-126 .nbcc-mbp-banner video,
  .elementor-2547 .nbcc-mbp-banner video,
  .elementor-126 .nbcc-mbp-banner img,
  .elementor-2547 .nbcc-mbp-banner img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
}