/* V03-A Home "Our history" (owner, 9 Nov 2026): four history cards as a carousel, text shortened behind "Read more".
   Markup from tools/publishing/visibility/history_v03.mjs: .psg-hx > .psg-hx-stage > [data-psg-hx-track] (the Elementor rail
   73096e30, four .e-con cards) + .psg-hx-ctl (dots, "1 of 4"). Behaviour: /r049/history.js.
   K5 (owner, 10 Nov 2026, desktop review): no scroll pinning any more. At every width the track is a native horizontal snap list
   (one card per rest), moved by the shared arrow (/r049/scrollhint.*: one small white chevron, [data-psg-scroller]), by swipe,
   trackpad or keyboard. The photo labels no longer sit on the photos: one row of small tags above each card title (.psg-hx-tags).
     >= 1025 px: cards 84 % of the row, snapped to the start edge, the next card peeking; dots + "2 of 4" under the row (with JS);
     <= 1024 px: edge to edge, one whole centred card per rest; no dots or counter (the arrow is the cue).
   Card bodies are clamped to three lines with a real "Read more" button at every width; without JavaScript (no html.psg-js) the
   full text shows, no button, no arrow, no progress row, and the row still scrolls natively. The site's own look is kept: dark
   cards, Syne/Inter, bronze #c4a57a. */

/* the wrapper is a flex item of the section column: never wider than the column (the card row's min-content must not widen it) */
.psg-hx, .psg-hx-stage { box-sizing: border-box; min-width: 0; max-width: 100%; }
.psg-hx { align-self: stretch; width: 100%; }

/* ---- Read more (all widths) ---- */
html.psg-js .psg-hx [data-psg-hx-text]:not(.is-open) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.psg-hx button.psg-hx-more { appearance: none; -webkit-appearance: none; display: inline-block; margin: 8px 0 0 !important; padding: 6px 0 !important; min-height: 32px; border: 0 !important; border-radius: 0 !important;
  background: none !important; box-shadow: none !important; color: #c4a57a !important; font: 600 14px/20px Inter, sans-serif !important; text-transform: none !important; letter-spacing: 0 !important;
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } /* same as the R028 .psg-more (the theme styles every <button> as a bronze pill) */
.psg-hx button.psg-hx-more:hover { color: #e0c79f !important; }
.psg-hx button.psg-hx-more:focus-visible { outline: 2px solid #c4a57a; outline-offset: 2px; border-radius: 4px; }
html.psg-js .psg-hx button.psg-hx-more { display: inline-block !important; } /* an earlier site rule hides button.psg-more from 768 px up */
html:not(.psg-js) .psg-hx .psg-hx-more, html.psg-js .psg-hx button.psg-hx-more[hidden] { display: none !important; }

/* ---- card tags (all widths) ----
   K5 (owner, 10 Nov 2026: "the pills are on the photo"): the labels that floated over each photo ("Sustainability", "Material
   Innovation"…) now sit in one quiet row above the card title, inside the card: small hairline pills, bronze icon, muted text.
   The row follows the page direction (Arabic starts on the right). */
.psg-hx ul.psg-hx-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px !important; padding: 0 !important; list-style: none !important; }
.psg-hx .psg-hx-tag { display: inline-flex; align-items: center; gap: 7px; margin: 0 !important; padding: 5px 12px 5px 10px; border: 1px solid rgba(196, 165, 122, .34);
  border-radius: 999px; background: rgba(196, 165, 122, .06); color: #d6cbb9; font: 500 12px/16px Inter, sans-serif; letter-spacing: .02em; white-space: nowrap; }
.psg-hx .psg-hx-tag::before, .psg-hx .psg-hx-tag::marker { content: none; }
.psg-hx .psg-hx-tag-i { display: inline-grid; place-items: center; inline-size: 12px; block-size: 12px; color: #c4a57a; fill: currentColor; flex: none; }
.psg-hx .psg-hx-tag-i svg { display: block; inline-size: 12px !important; block-size: 12px !important; fill: currentColor; }
[dir="rtl"] .psg-hx .psg-hx-tag, html[lang="ar"] .psg-hx .psg-hx-tag { padding: 5px 10px 5px 12px; font-size: 13px; letter-spacing: 0; }

/* ---- card text alignment (all widths) ----
   Elementor's own widget settings set the four card texts to text-align:end (the original zig-zag layout), so in English the title,
   text and Read more sat flush RIGHT, even where the text is to the right of its photo (R1 F-08). Every card reads from its start
   edge: left in English, Greek and French, right in Arabic. */
.psg-hx [data-psg-hx-track] :is(.elementor-image-box-wrapper, .elementor-image-box-content, .elementor-image-box-title, .elementor-image-box-description) { text-align: start !important; }

/* ---- progress row ---- */
.psg-hx-ctl { display: none; align-items: center; justify-content: center; gap: 14px; margin: 18px 0 0; }
.psg-hx-dots { display: flex; gap: 8px; align-items: center; }
.psg-hx-dots i { display: block; inline-size: 7px; block-size: 7px; border-radius: 50%; background: rgba(255, 255, 255, .22); transition: background .3s, inline-size .3s; }
.psg-hx-dots i.is-on { inline-size: 20px; border-radius: 4px; background: #c4a57a; }
.psg-hx-count { font: 500 13px/18px Inter, sans-serif; color: #a7a7a7; font-variant-numeric: tabular-nums; min-inline-size: 4.5em; }

/* ---- phone and tablet: swipe ----
   The list runs edge to edge (it cancels the section's 24 px gutter) with equal side padding, every card is exactly the padded width and
   snaps to the centre: each resting position shows one whole card with the same slice of its neighbours, the last card included.
   All four cards are the same size (the row stretches them to the tallest), the photo sits at the bottom of each card in one 4:3 frame. */
@media (max-width: 1024px) {
  .psg-hx { --hx-side: 36px; } /* no dots or counter here: the shared scroll hint (data-psg-scroller, /r049/scrollhint.*) is the cue */
  .psg-hx [data-psg-hx-track] { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; gap: 14px !important; align-items: stretch !important; justify-content: flex-start !important;
    box-sizing: border-box; width: calc(100% + 48px) !important; max-width: none !important; margin-inline: -24px !important; padding: 0 var(--hx-side) 4px !important;
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .psg-hx [data-psg-hx-track]::-webkit-scrollbar { display: none; }
  .psg-hx [data-psg-hx-track] > .e-con { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; min-width: 0; scroll-snap-align: center; scroll-snap-stop: always;
    --min-height: 0px !important; min-height: 0 !important; height: auto !important; --justify-content: flex-start !important; justify-content: flex-start !important; }
  .psg-hx [data-psg-hx-track] > .e-con > .e-con:has([data-psg-hx-photo]) { margin-top: auto !important; }
  .psg-hx [data-psg-hx-track] > .e-con, .psg-hx [data-psg-hx-track] > .e-con .e-con:not([data-psg-hx-photo]) { --gap: 20px !important; --row-gap: 20px !important; row-gap: 20px !important; }
  .psg-hx [data-psg-hx-track] .e-con:has(> .elementor-widget-counter) { flex-direction: row !important; flex-wrap: nowrap !important; --gap: 32px !important; gap: 32px !important; } /* the two figures side by side */
  .psg-hx [data-psg-hx-photo] { --min-height: 0px !important; min-height: 0 !important; height: auto !important; aspect-ratio: 4 / 3; width: 100% !important; max-width: 100% !important; flex: 0 0 auto !important; }
}
@media (min-width: 768px) and (max-width: 1024px) { .psg-hx { --hx-side: 17%; } }
@media (max-width: 1024px) and (prefers-reduced-motion: reduce) { .psg-hx [data-psg-hx-track] { scroll-behavior: auto; } }

/* ---- desktop: a normal horizontal carousel (K5) ----
   No pinning, no scroll-linked motion: the row scrolls sideways inside its own column (no page overflow), snaps to one card per rest
   and is moved by the shared arrow (scrollhint.js: exactly one card per click, smooth; instant with reduced motion). Every card is
   84 % of the row, so the next one peeks in on the forward side; at the end the last card rests on the far edge. The rules apply
   without JavaScript too (the row then scrolls natively). */
@media (min-width: 1025px) {
  .psg-hx [data-psg-hx-track] { display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important; --flex-wrap: nowrap; gap: 32px !important;
    justify-content: flex-start !important; align-items: stretch !important; box-sizing: border-box; width: 100% !important; max-width: 100% !important;
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; padding-bottom: 4px !important; }
  .psg-hx [data-psg-hx-track]::-webkit-scrollbar { display: none; }
  .psg-hx [data-psg-hx-track] > .e-con { flex: 0 0 84% !important; width: 84% !important; max-width: 84% !important; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }
  /* one photo height for all four cards */
  .psg-hx [data-psg-hx-photo] { --min-height: 330px !important; min-height: 330px !important; height: 330px !important; }
  html.psg-js .psg-hx .psg-hx-ctl { display: flex; margin-top: 24px; }
  /* the peeking neighbour recedes, so the card at rest leads and the arrow over the neighbour's edge reads cleanly (history.js
     marks the card at rest .is-current) */
  html.psg-js .psg-hx [data-psg-hx-track] > .e-con > * { transition: opacity .35s ease; }
  html.psg-js .psg-hx [data-psg-hx-track] > .e-con:not(.is-current) > * { opacity: .4; }
}
@media (min-width: 1025px) and (prefers-reduced-motion: reduce) {
  .psg-hx [data-psg-hx-track] { scroll-behavior: auto; }
  html.psg-js .psg-hx [data-psg-hx-track] > .e-con > * { transition: none; }
}