/* f-banners: the 5 tall banner cards at the top of the homepage (inc/f-banners.php, assets/js/f-banners.js).
   Port of prototype-client/hero-f.css plus the .bnr / .bnr-row / .bnr-nav rules of hero-d.css it builds on.
   Scoped under .sgt-f .bnr: the cards are links, so the rules must outrank f-base.css's
   ".sgt-f :is(.f-main, .f-chrome) a / h1 / button" resets (specificity 0,2,1).
   On phones the active card is centred with both neighbours peeking (noon); desktop scrolls with arrows. */

.sgt-f .bnr { --fw: 380px; --fh: 460px; }

/* ---------- Row ---------- */
.sgt-f .bnr { padding-top: 16px; }
.sgt-f .bnr .bnr-wrap { position: relative; }
.sgt-f .bnr .bnr-row { display: grid; grid-auto-flow: column; grid-auto-columns: var(--fw); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--gutter); scrollbar-width: none; outline: 0; }
.sgt-f .bnr .bnr-row::-webkit-scrollbar { display: none; }
.sgt-f .bnr .bnr-nav { display: none; }

/* ---------- Cards ---------- */
.sgt-f .bnr .fcard { position: relative; isolation: isolate; scroll-snap-align: start; display: flex; flex-direction: column; align-items: flex-start; height: var(--fh); padding: 24px; border-radius: 22px; overflow: hidden; text-align: left; text-decoration: none !important; color: var(--ink); }
.sgt-f .bnr .fcard:focus-visible { outline-offset: -3px; }
.sgt-f .bnr .fc-tag { display: inline-block; padding: 6px 12px; border-radius: 8px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; transform: rotate(-2deg); }
.sgt-f .bnr .fc-eb { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .88); }
.sgt-f .bnr .fc-h { display: block; margin-top: 14px; font-size: 38px; line-height: 1; font-weight: 800; letter-spacing: -.03em; color: inherit; text-wrap: balance; }
.sgt-f .bnr .fc-h em { font-style: normal; }
.sgt-f .bnr .fc-sub { display: block; margin-top: 12px; font-size: 16px; line-height: 1.4; font-weight: 500; max-width: 30ch; }
.sgt-f .bnr .fc-go { margin-top: auto; display: inline-flex; align-items: center; gap: 6px; height: 46px; padding: 0 20px; border-radius: 999px; background: var(--ink); color: #fff; font-size: 15px; font-weight: 800; position: relative; z-index: 2; }
.sgt-f .bnr .fc-go .i { width: 18px; height: 18px; }
.sgt-f .bnr .fcard:hover .fc-go { filter: brightness(1.15); }

/* product art: one big hero product, two smaller behind */
.sgt-f .bnr .fc-art { position: relative; display: block; flex: 1; align-self: stretch; margin: 6px -10px 8px; min-height: 120px; }
.sgt-f .bnr .fc-art img { position: absolute; object-fit: contain; mix-blend-mode: multiply; max-width: none; }
.sgt-f .bnr .fc-art img:nth-child(1) { left: 0; bottom: 0; width: 64%; height: 100%; z-index: 2; }
.sgt-f .bnr .fc-art img:nth-child(2) { right: 0; top: 0; width: 46%; height: 62%; }
.sgt-f .bnr .fc-art img:nth-child(3) { right: 6%; bottom: 0; width: 40%; height: 52%; z-index: 1; }

/* 1 · company: real warehouse photo, H1, three numbers from the About page */
.sgt-f .bnr .fcard--co { color: #fff; justify-content: flex-end; background: var(--navy-d); }
.sgt-f .bnr .fcard--co .co-bg { position: absolute; inset: 0; z-index: -2; }
.sgt-f .bnr .fcard--co .co-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; }
/* desktop: more photos fade in over the first one (f-banners.js); no labels on them */
.sgt-f .bnr .fcard--co .co-cyc { position: absolute; inset: 0; z-index: -2; pointer-events: none; }
.sgt-f .bnr .fcard--co .co-cyc img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 40%; opacity: 0; transition: opacity 1.2s ease; }
.sgt-f .bnr .fcard--co .co-cyc img.on { opacity: 1; }
/* Arabic: the text is on the right, so mirror the photos (they have no writing) to keep the subject clear of it */
/*rtl:raw:
.sgt-f .bnr .fcard--co .co-cyc img { transform: scaleX(-1); }
*/
@media (max-width: 991px) { .sgt-f .bnr .fcard--co .co-cyc { display: none; } }
@media (prefers-reduced-motion: reduce) { .sgt-f .bnr .fcard--co .co-cyc img { transition: none; } }
.sgt-f .bnr .fcard--co::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(12, 38, 80, .95) 0%, rgba(12, 38, 80, .8) 45%, rgba(12, 38, 80, .2) 85%); }
.sgt-f .bnr .fcard--co .fc-h { font-size: 44px; max-width: 13ch; margin-top: 10px; }
.sgt-f .bnr .fc-stats { display: flex; gap: 22px; margin-top: 18px; }
.sgt-f .bnr .fc-stats span { display: grid; font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .85); line-height: 1.2; }
.sgt-f .bnr .fc-stats b { font-size: 30px; font-weight: 800; color: #fff; letter-spacing: -.02em; }
.sgt-f .bnr .fc-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.sgt-f .bnr .fcard--co .fc-go { margin-top: 0; text-decoration: none !important; }
.sgt-f .bnr .fc-go--red { background: var(--red); }
.sgt-f .bnr .fc-go--red:hover { background: var(--red-d); }
.sgt-f .bnr .fc-go--ghost { background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .65); }

/* 2 · speed: the red card */
.sgt-f .bnr .fcard--fast { background: var(--red-d); color: #fff; }
.sgt-f .bnr .fcard--fast .fc-tag { background: #fff; color: var(--red-d); }
.sgt-f .bnr .fcard--fast .fc-h em { color: #ffe08a; }
.sgt-f .bnr .fc-paper { display: block; align-self: stretch; margin: 18px 0 14px; padding: 12px 16px; border-radius: 14px; background: #fff; color: var(--ink); font-size: 15px; line-height: 1.85; box-shadow: 0 10px 22px rgba(60, 0, 10, .22); }
.sgt-f .bnr .fc-paper span { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px dashed var(--line); }
.sgt-f .bnr .fc-paper span:last-child { border-bottom: 0; }
.sgt-f .bnr .fc-paper b { color: var(--red-d); font-variant-numeric: tabular-nums; }
.sgt-f .bnr .fcard--fast .fc-go { background: #fff; color: var(--red-d); }

/* 3 · brands */
.sgt-f .bnr .fcard--brands { background: #ffe9a3; }
.sgt-f .bnr .fcard--brands .fc-h em { color: var(--red-d); }
.sgt-f .bnr .fc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.sgt-f .bnr .fchip { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border-radius: 999px; background: #fff; font-size: 14px; font-weight: 800; color: var(--ink); box-shadow: 0 1px 0 rgba(16, 22, 40, .08); }

/* 4 · lifting (featured category) */
.sgt-f .bnr .fcard--lift { background: #dbe6f6; }
.sgt-f .bnr .fcard--lift .fc-tag { background: var(--navy); }

/* 5 · sourcing */
.sgt-f .bnr .fcard--source { background: var(--navy); color: #fff; }
.sgt-f .bnr .fcard--source .fc-tag { background: #fff; color: var(--navy); }
.sgt-f .bnr .fcard--source .fc-h em { color: #ffe08a; }
.sgt-f .bnr .fc-find { display: grid; gap: 8px; align-self: stretch; margin: 20px 0 14px; }
.sgt-f .bnr .fc-find > span { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 14px; border-radius: 12px; background: #fff; color: var(--ink); font-size: 15px; font-weight: 700; }
.sgt-f .bnr .fc-find .i { width: 20px; height: 20px; color: var(--navy); }
.sgt-f .bnr .fc-find .r { margin-left: 18px; }
.sgt-f .bnr .fc-find .r .i { color: var(--ok); }
.sgt-f .bnr .fcard--source .fc-go { background: #fff; color: var(--navy); }

/* staff-only "to confirm" outline (sgt_f_tbc_wrap) around a whole tag / chip row: keep it in the column flow */
.sgt-f .bnr .fcard > .tbc-mark { display: block; }

/* ---------- Dots + pause ---------- */
.sgt-f .bnr .bnr-ctl { display: flex; align-items: center; justify-content: center; gap: 6px; padding-top: 10px; }
.sgt-f .bnr .bnr-dots { display: flex; }
.sgt-f .bnr .bnr-dots button { width: 26px; height: 44px; display: grid; place-items: center; }
.sgt-f .bnr .bnr-dots span { width: 8px; height: 8px; border-radius: 99px; background: #c5cad6; transition: width var(--ease), background var(--ease); }
.sgt-f .bnr .bnr-dots button[aria-current="true"] span { width: 22px; background: var(--red-d); }
/* .marq-btn (f-base.css) loses its border/background to the button reset there, so they are restated here */
.sgt-f .bnr .bnr-ctl .marq-btn { margin-left: 6px; border: 1px solid var(--line); background: #fff; }
.sgt-f .bnr .bnr-ctl .marq-btn:hover { border-color: var(--navy); }

/* ---------- Desktop: company card two wide, arrows ---------- */
@media (min-width: 992px) {
  .sgt-f .bnr { padding-top: 24px; }
  .sgt-f .bnr .fcard--co { grid-column: span 2; padding: 36px; }
  .sgt-f .bnr .bnr-nav { display: grid; place-items: center; position: absolute; top: 50%; translate: 0 -50%; width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--ink); box-shadow: 0 4px 14px rgba(16, 22, 40, .18); z-index: 3; }
  .sgt-f .bnr .bnr-nav[data-dir="-1"] { left: calc(var(--gutter) - 22px); }
  .sgt-f .bnr .bnr-nav[data-dir="1"] { right: calc(var(--gutter) - 22px); }
  .sgt-f .bnr .bnr-nav:disabled { opacity: 0; pointer-events: none; }
  .sgt-f .bnr .bnr-nav:hover { color: var(--red-d); }
}
/* wide screens (row ≥ 1408 px): cards grow so the company card + 2 cards fill the row exactly, none cut off */
.sgt-f .bnr .bnr-wrap { container-type: inline-size; }
@container (min-width: 1408px) {
  .sgt-f .bnr .bnr-row { grid-auto-columns: min((100% - 3 * 16px) / 4, 470px); }
}

/* ---------- Phones: the active card centred, neighbours peeking on both sides (noon) ---------- */
@media (max-width: 991px) {
  .sgt-f .bnr { --fw: 80vw; --fh: 340px; } /* short: the category bubbles show below the banner on a phone */
  .sgt-f .bnr { padding-top: 12px; }
  .sgt-f .bnr .bnr-wrap { padding-left: 0; padding-right: 0; }
  .sgt-f .bnr .bnr-row { grid-auto-columns: var(--fw); gap: 10px; padding: 0 calc((100% - var(--fw)) / 2); scroll-padding: 0; }
  .sgt-f .bnr .fcard { scroll-snap-align: center; padding: 20px; }
  .sgt-f .bnr .fc-h { font-size: 34px; }
  .sgt-f .bnr .fcard--co { justify-content: flex-end; }
  .sgt-f .bnr .fcard--co::before { background: linear-gradient(0deg, rgba(12, 38, 80, .96) 0%, rgba(12, 38, 80, .75) 50%, rgba(12, 38, 80, .1) 100%); }
  .sgt-f .bnr .fcard--co .fc-h { font-size: 32px; }
  .sgt-f .bnr .fc-stats { gap: 16px; }
  .sgt-f .bnr .fc-stats b { font-size: 26px; }
  .sgt-f .bnr .fc-go--ghost { display: none; }
  /* compact cards so everything fits the shorter height */
  .sgt-f .bnr .fcard { padding: 18px; border-radius: 18px; }
  .sgt-f .bnr .fc-tag { font-size: 12px; padding: 5px 10px; }
  .sgt-f .bnr .fc-h { font-size: 28px; margin-top: 10px; }
  .sgt-f .bnr .fcard--co .fc-h { font-size: 28px; }
  .sgt-f .bnr .fc-sub { font-size: 15px; margin-top: 8px; }
  .sgt-f .bnr .fc-stats { margin-top: 12px; }
  .sgt-f .bnr .fc-stats b { font-size: 22px; }
  .sgt-f .bnr .fc-stats span { font-size: 13px; }
  .sgt-f .bnr .fc-acts { margin-top: 14px; }
  .sgt-f .bnr .fc-go { height: 44px; font-size: 14px; padding: 0 16px; }
  .sgt-f .bnr .fc-paper { margin: 12px 0 10px; padding: 8px 12px; font-size: 14px; line-height: 1.7; }
  .sgt-f .bnr .fc-paper span:nth-child(n+4) { display: none; }
  .sgt-f .bnr .fc-chips { margin-top: 10px; }
  .sgt-f .bnr .fchip { height: 28px; font-size: 13px; padding: 0 10px; }
  .sgt-f .bnr .fc-art { min-height: 60px; margin: 6px -6px 6px; }
  .sgt-f .bnr .fc-find { margin: 12px 0 10px; gap: 6px; }
  .sgt-f .bnr .fc-find > span { height: 40px; font-size: 14px; }
}
@media (max-width: 360px) { .sgt-f .bnr .fc-h, .sgt-f .bnr .fcard--co .fc-h { font-size: 26px; } }

@media (prefers-reduced-motion: reduce) {
  .sgt-f .bnr .bnr-row { scroll-behavior: auto; }
  .sgt-f .bnr .bnr-ctl .marq-btn { display: none; }
}