/* =====================================================================
   Shoptimised Awards & Accolades
   Everything is scoped to .sa-root so it can't clash with theme styles.
   ===================================================================== */
.sa-root {
  /* Brand tokens */
  --sa-navy: #081836;
  --sa-navy-elevated: #0D2350;
  --sa-blue: #005983;
  --sa-teal: #29B688;
  --sa-sky: #57C8E3;
  --sa-mist: #F4F7FB;
  --sa-white: #FFFFFF;
  --sa-cloud: #E9EFF6;
  --sa-border: #D6DEE8;
  --sa-ink: #0F1F3D;
  --sa-slate: #5C6B82;

  /* Shape + rhythm */
  --sa-radius-card: 16px;
  --sa-radius-modal: 24px;
  --sa-radius-btn: 10px;
  --sa-gap: 24px;
  --sa-n: 5;                 /* awards visible at once */
  --sa-ease: cubic-bezier(.2, .7, .2, 1);

  --sa-font-head: "Baloo 2", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sa-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  font-family: var(--sa-font-body);
  color: var(--sa-ink);
  -webkit-font-smoothing: antialiased;
}
.sa-root *, .sa-root *::before, .sa-root *::after { box-sizing: border-box; }

/* ---------- Section ---------- */
.sa-section { background: var(--sa-mist); padding: 0; }
.sa-container { max-width: none; margin: 0; padding: 0; }


/* ---------- Thin line slider (under the carousel) ---------- */
.sa-line {
  position: relative; width: 100%; height: 2px; margin-top: 32px;
  cursor: pointer; touch-action: none;
}
.sa-line[hidden] { display: none; }
.sa-line::before { content: ""; position: absolute; inset: -12px 0; }           /* larger hit area */
.sa-line::after {                                                                /* 1px rail */
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px;
  transform: translateY(-50%); background: var(--sa-border);
}
.sa-line__thumb {
  position: absolute; z-index: 1; top: 0; left: 0; height: 2px; min-width: 32px;
  border-radius: 2px; background: var(--sa-teal);
  cursor: grab; will-change: transform;
}
.sa-line.is-dragging .sa-line__thumb { cursor: grabbing; }

/* ---------- Arrow buttons (modal) ---------- */
.sa-arrow {
  appearance: none; width: 48px; height: 48px; padding: 0;
  display: grid; place-items: center; border-radius: 50%;
  background: var(--sa-white); color: var(--sa-navy);
  border: 1px solid var(--sa-border); cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;
}
.sa-arrow svg { width: 20px; height: 20px; }
.sa-arrow:hover:not(:disabled) { background: var(--sa-navy); border-color: var(--sa-navy); color: var(--sa-white); }
.sa-arrow:disabled { opacity: .35; cursor: default; }
.sa-arrow:focus-visible,
.sa-card:focus-visible,
.sa-btn:focus-visible,
.sa-modal__close:focus-visible { outline: 3px solid var(--sa-teal); outline-offset: 3px; }

/* ---------- Carousel ---------- */
.sa-track {
  list-style: none; margin: -8px -4px -16px; padding: 8px 4px 16px;
  display: flex; gap: var(--sa-gap);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: 4px;
  scroll-behavior: smooth; scrollbar-width: none;
  position: relative;
  -webkit-overflow-scrolling: touch;
}
.sa-track::-webkit-scrollbar { display: none; }
.sa-item {
  /* grow to fill the row when there are few awards; keep size and scroll when many
     (flex-shrink 0 so cards never cram — they overflow into a horizontal scroll) */
  flex: 1 0 calc((100% - (var(--sa-n) - 1) * var(--sa-gap)) / var(--sa-n));
  scroll-snap-align: start; display: flex;
}

/* ---------- Card ---------- */
.sa-card {
  appearance: none; width: 100%; margin: 0; font: inherit; color: inherit;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  background: none; border: 0;
  border-radius: var(--sa-radius-card); padding: 12px 0;
  cursor: pointer;
}
.sa-card__logo img,
.sa-card__logo svg { transition: opacity .25s ease; }
.sa-card__logo {
  height: 176px; width: 100%; padding: 16px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .55);
  border-radius: var(--sa-radius-card);
  box-shadow: 0 2px 12px rgba(8, 24, 54, .02);
  transition: background-color .3s ease, box-shadow .3s ease;
}
.sa-card:hover .sa-card__logo,
.sa-card:focus-visible .sa-card__logo {
  background: rgba(255, 255, 255, .85);
  box-shadow: 0 4px 18px rgba(8, 24, 54, .04);
}
.sa-card__logo img,
.sa-card__logo svg { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.sa-card__logo svg { height: 100%; }
.sa-card__cta {
  margin-top: 20px;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; border-radius: var(--sa-radius-btn);
  background: var(--sa-navy); color: var(--sa-white);
  font: 600 .875rem/1 var(--sa-font-body);
  opacity: 0; transform: translateY(8px);
  transition: opacity .3s ease, transform .35s var(--sa-ease);
}
.sa-card:hover .sa-card__cta,
.sa-card:focus-visible .sa-card__cta { opacity: 1; transform: none; }

/* Touch devices: no hover, so the CTA is always visible */
@media (hover: none) {
  .sa-card__cta { opacity: 1; transform: none; }
}

/* ---------- Modal ---------- */
.sa-modal {
  position: fixed; inset: 0; z-index: 100000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.sa-modal[hidden] { display: none; }
.sa-modal__backdrop {
  position: absolute; inset: 0; background: rgba(8, 24, 54, .62);
  opacity: 0; transition: opacity .25s ease;
}
.sa-modal__dialog {
  position: relative; width: min(980px, 100%);
  max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px);
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--sa-white); border-radius: var(--sa-radius-modal);
  box-shadow: 0 24px 64px rgba(8, 24, 54, .22);
  opacity: 0; transform: translateY(14px);
  transition: opacity .3s ease, transform .35s var(--sa-ease);
}
.sa-modal__dialog:focus { outline: none; }
.sa-modal.is-open .sa-modal__backdrop { opacity: 1; }
.sa-modal.is-open .sa-modal__dialog { opacity: 1; transform: none; }

.sa-modal__close {
  appearance: none; position: absolute; top: 16px; right: 16px; z-index: 2;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: var(--sa-cloud); color: var(--sa-navy);
  transition: background-color .2s ease, color .2s ease;
}
.sa-modal__close svg { width: 18px; height: 18px; }
.sa-modal__close:hover { background: var(--sa-navy); color: var(--sa-white); }

.sa-modal__body {
  display: grid; grid-template-columns: 220px 1fr; gap: 40px;
  padding: 48px 48px 40px; align-items: start;
}
.sa-modal__media {
  background: var(--sa-mist); border-radius: var(--sa-radius-card);
  aspect-ratio: 1 / 1; padding: 24px;
  display: flex; align-items: center; justify-content: center;
}
.sa-modal__media img,
.sa-modal__media svg { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.sa-modal__media svg { width: 100%; }
.sa-modal__content { display: flex; flex-direction: column; justify-content: flex-start; padding-right: 24px; }
.sa-modal__title {
  font-family: var(--sa-font-head); font-weight: 700;
  font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); line-height: 1.15;
  color: var(--sa-navy); margin: 0;
}
.sa-modal__desc { margin-top: 20px; font-size: 1rem; line-height: 1.7; color: var(--sa-slate); max-width: 60ch; }
.sa-modal__desc p { margin: 0 0 1em; }
.sa-modal__desc p:last-child { margin-bottom: 0; }

.sa-btn {
  align-self: flex-start; margin-top: 28px;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px; border-radius: var(--sa-radius-btn);
  background: var(--sa-navy); color: var(--sa-white); text-decoration: none;
  font: 600 1.0625rem/1 var(--sa-font-head);
  transition: background-color .2s ease;
}
.sa-btn:hover { background: var(--sa-navy-elevated); color: var(--sa-white); }
.sa-btn svg { width: 16px; height: 16px; }
.sa-btn[hidden] { display: none; }

.sa-fade { transition: opacity .18s ease; }
.sa-modal.is-switching .sa-fade { opacity: 0; }

.sa-modal__nav {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 48px; border-top: 1px solid var(--sa-border);
}
.sa-modal__count { font-size: .875rem; font-weight: 500; color: var(--sa-slate); }

/* ---------- Breakpoints ----------
   --sa-n = how many cards are visible before the row scrolls. With 4 awards:
   desktop/tablet show them all; phones show ~2, then ~1.3 (peek) and scroll. */
@media (max-width: 1199px) { .sa-root { --sa-n: 4; } }
@media (max-width: 767px) {
  .sa-root { --sa-n: 2; --sa-gap: 10px; }
  .sa-card { padding: 8px 0; }
  .sa-card__logo { height: 140px; padding: 18px; }
  .sa-card__cta { margin-top: 16px; }

  .sa-modal { padding: 12px; align-items: flex-end; }
  .sa-modal__dialog { max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); border-radius: 20px; }
  .sa-modal__body { grid-template-columns: 1fr; gap: 24px; padding: 20px 20px 24px; }
  .sa-modal__media { aspect-ratio: 16 / 10; padding: 28px; }
  .sa-modal__content { padding-right: 0; }
  .sa-modal__nav { padding: 12px 20px; }
  .sa-modal__close { top: 28px; right: 28px; background: var(--sa-white); }
}
@media (max-width: 479px) { .sa-root { --sa-n: 1.3; } }

@media (prefers-reduced-motion: reduce) {
  .sa-root *, .sa-root *::before, .sa-root *::after { transition-duration: .01ms !important; }
  .sa-track { scroll-behavior: auto; }
}