/* V03-E rails (owner, 9 Nov 2026): the R028 phone rails (About "From quarry to client", Sustainability "Core commitments") as clean
   snap lists with the shared scroll hint (/r049/scrollhint.*), and the Sustainability cards shortened behind "Read more".
   Markup hooks from tools/publishing/visibility/rails_v03.mjs; behaviour /r049/rails.js.

   Phones (<= 767 px, where the R028 rail exists): the rail runs edge to edge (it bleeds into the page gutter on both sides) and the
   gutter becomes its inline padding and scroll padding, so at rest every card starts exactly on the page gutter, the next card peeks
   in from the screen edge, the first and the last card are reachable and align with the gutter, and no swipe stops between cards.
   --psg-rail-gutter is measured by rails.js from the section's padding (24 px without JavaScript). */
@media (max-width: 767px) {
  [data-r28~="rail"][data-psg-rail] {
    box-sizing: border-box !important; width: calc(100% + 2 * var(--psg-rail-gutter, 24px)) !important; max-width: none !important;
    margin-inline: calc(-1 * var(--psg-rail-gutter, 24px)) !important; padding-inline: var(--psg-rail-gutter, 24px) !important;
    scroll-padding-inline: var(--psg-rail-gutter, 24px) !important; justify-content: flex-start !important;
    scroll-snap-type: x mandatory !important; overscroll-behavior-x: contain;
  }
  [data-r28~="rail"][data-psg-rail] > .e-con { scroll-snap-align: start !important; scroll-snap-stop: always !important; }
}

/* ---- Read more (every width) ---- */
/* clamped only once rails.js has wired the buttons ([data-psg-more-ready] on the rail): without JavaScript the full text shows */
[data-psg-more-ready] [data-psg-more]:not(.is-open) [data-psg-more-text] p {
  display: -webkit-box !important; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden !important; margin-bottom: 0 !important;
}
[data-psg-more-ready] [data-psg-more]:not(.is-open) [data-psg-more-extra] { display: none !important; }
[data-psg-more-ready] [data-psg-more]:not(.is-open) [data-psg-more-head] { border-bottom-color: transparent !important; }
/* equal cards at rest: every card as tall as the tallest, the buttons on one line; once a card is open the others keep their size */
[data-psg-more-ready]:not([data-psg-open]) { align-items: stretch !important; }
[data-psg-more-ready] [data-psg-more] { display: flex !important; flex-direction: column !important; }
[data-psg-more-ready] [data-psg-more] > [data-psg-more-head] { flex: 1 1 auto !important; align-items: stretch !important; }
[data-psg-more-ready] [data-psg-more-head] > .e-con { display: flex !important; flex-direction: column !important; }
button.psg-rm {
  -webkit-appearance: none; appearance: none; align-self: flex-start; display: inline-block; margin: auto 0 0 !important; padding: 14px 0 4px !important;
  min-height: 44px; 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; text-decoration-thickness: 1px;
} /* the look of V03-A's history "Read more" and the R028 .psg-more (the theme styles every <button> as a bronze pill) */
button.psg-rm:hover { color: #e0c79f !important; }
button.psg-rm:focus { outline: none; }
button.psg-rm:focus-visible { outline: 2px solid #c4a57a !important; outline-offset: 2px; border-radius: 4px !important; }
button.psg-rm[hidden] { display: none !important; }
[dir="rtl"] button.psg-rm { font-family: inherit !important; font-size: 15px !important; }