/* ============================================================
   SANO | Trust Signals — CSS panel
   Pure CSS entrance, no JS.
   Font sizes live in the require_css block in the HTML panel,
   driven by the Styles tab fields. Do not duplicate them here.
   ============================================================ */

.sano-ts {
  container-type: inline-size;
  container-name: sano-ts;

  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --ease-out:  cubic-bezier(0.23, 1, 0.32, 1);
  --dur-reveal: 1000ms;
  --dur-hover: 280ms;
  --reveal-base: 440ms;
  --reveal-step: 60ms;

  --ts-font: inherit;
  --ts-title-color: #0B1B2B;
  --ts-subtitle-color: #5A6472;
  --ts-divider: rgba(11, 27, 43, .16);
  --ts-hover-scale: 1.06;

  font-family: var(--ts-font);
}

.sano-ts__inner {
  max-width: var(--ts-max, 1140px);
  margin-inline: auto;
}

.sano-ts__grid {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ts-gap, 32px);
}

.sano-ts__item {
  flex: 0 1 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  text-align: left;
  gap: calc(var(--ts-gap, 32px) * .45);
  min-width: 0;
  text-decoration: none;
}

.sano-ts__divider {
  flex: 0 0 1px;
  width: 1px;
  height: 44px;
  background: var(--ts-divider);
}

.sano-ts:not(.sano-ts--dividers) .sano-ts__divider { display: none; }

.sano-ts__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  height: var(--ts-icon, 48px);
}

.sano-ts__icon img {
  display: block;
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.sano-ts__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.sano-ts__title {
  display: block;
  color: var(--ts-title-color);
  font-weight: 700;
  line-height: 1.25;
  text-wrap: balance;
}

.sano-ts__subtitle {
  display: block;
  color: var(--ts-subtitle-color);
  line-height: 1.4;
  text-wrap: pretty;
}

/* ---- ENTRANCE ----------------------------------------------
   "backwards" holds the start frame during the delay but frees
   the element afterwards, so hover can take over. "both" would
   pin the transform forever.
------------------------------------------------------------ */
@keyframes sanoTsIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: none; }
}

.sano-ts__grid > * {
  animation: sanoTsIn var(--dur-reveal) var(--ease-soft) backwards;
}

.sano-ts__grid > *:nth-child(1) { animation-delay: var(--reveal-base); }
.sano-ts__grid > *:nth-child(2) { animation-delay: calc(var(--reveal-base) + var(--reveal-step)); }
.sano-ts__grid > *:nth-child(3) { animation-delay: calc(var(--reveal-base) + var(--reveal-step) * 2); }
.sano-ts__grid > *:nth-child(4) { animation-delay: calc(var(--reveal-base) + var(--reveal-step) * 3); }
.sano-ts__grid > *:nth-child(5) { animation-delay: calc(var(--reveal-base) + var(--reveal-step) * 4); }

/* ---- HOVER — gated so touch taps do not stick ---- */
@media (hover: hover) and (pointer: fine) {
  .sano-ts__item { transition: transform var(--dur-hover) var(--ease-out); }
  .sano-ts__item:hover { transform: scale(var(--ts-hover-scale, 1.06)); }
  a.sano-ts__item:hover .sano-ts__title { text-decoration: underline; }
}

a.sano-ts__item:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 6px;
  border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
  @keyframes sanoTsIn {
    from { opacity: 0; }
    to   { opacity: 1; }
  }
  .sano-ts__grid > * { animation-duration: 400ms; }
  .sano-ts__item:hover { transform: none; }
}

@supports not (container-type: inline-size) {
  @media (max-width: 1040px) {
    .sano-ts__item { flex: 1 1 0; flex-direction: column; text-align: center; justify-content: center; }
    .sano-ts__text { align-items: center; }
  }
  @media (max-width: 560px) {
    .sano-ts__grid { flex-wrap: wrap; }
    .sano-ts__item { flex: 0 0 100%; }
    .sano-ts__divider { display: none; }
  }
}