/* ============================================================
   SANO | Capabilities — CSS panel
   No padding on the section: it is set on the dnd section.
   ============================================================ */

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

  /* ---- MOTION TOKENS — shared across every Sano module ---- */
  --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-step: 120ms;

  /* ---- TYPOGRAPHY — replace "inherit" with the theme font ---- */
  --cap-font: inherit;

  /* ---- FALLBACKS ---- */
  --cap-bg: transparent;
  --cap-eyebrow: #F4511E;
  --cap-heading: #0B1B2B;
  --cap-card-bg: #F6F7F8;
  --cap-card-title: #0B1B2B;
  --cap-card-desc: #5A6472;
  --cap-card-link: #3B2FB5;
  --cap-hover-scale: 1.02;

  background: var(--cap-bg);
  padding: 0;
  font-family: var(--cap-font);
}

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

/* ---- HEADER ----------------------------------------------
   Body copy is a flat 16px and card titles a flat 18px, on
   every screen. cqi is measured against the whole section, not
   the card, so a clamp shrank them on narrow screens.
----------------------------------------------------------- */
.sano-cap__head {
  text-align: center;
  margin-bottom: clamp(32px, 5cqi, 56px);
}

.sano-cap__eyebrow {
  display: block;
  margin-bottom: 14px;
  color: var(--cap-eyebrow);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Heading size is printed by the require_css block in the HTML
   panel, driven by the Styles tab fields. The clamp below is
   only the fallback and must stay in step with those defaults. */
.sano-cap__heading {
  max-width: 760px;
  margin: 0 auto;
  color: var(--cap-heading);
  font-size: clamp(32px, 4.2cqi, 36px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.sano-cap__intro {
  max-width: 660px;
  margin: 16px auto 0;
  color: var(--cap-card-desc);
  font-size: 16px;
  line-height: 1.55;
  text-wrap: pretty;
}

/* ---- GRID ------------------------------------------------ */
.sano-cap__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--cap-gap, 20px);
  align-items: stretch;
}

/* ---- CARD ------------------------------------------------ */
.sano-cap__card {
  position: relative;              /* anchor for the stretched link */
  display: flex;
  flex-direction: column;
  height: 100%;
  min-width: 0;
  padding: 28px 26px 26px;
  border-radius: var(--cap-radius, 16px);
  background: var(--cap-card-bg);
  transition: transform var(--dur-hover) var(--ease-out);
}

.sano-cap__icon {
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  height: var(--cap-icon, 28px);
  margin-bottom: 26px;
}

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

.sano-cap__title {
  margin: 0 0 10px;
  color: var(--cap-card-title);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.35;
  text-wrap: balance;
}

.sano-cap__desc {
  margin: 0;
  color: var(--cap-card-desc);
  font-size: 16px;
  line-height: 1.55;
  text-wrap: pretty;
}

/* margin-top:auto pins every link to the bottom, so they line up
   across cards even when the descriptions differ in length */
.sano-cap__link {
  margin-top: auto;
  padding-top: 28px;
  color: var(--cap-card-link);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  transition: opacity .18s ease;
}

/* ---- STRETCHED LINK ---------------------------------------
   Makes the whole card clickable without nesting links, so the
   markup stays valid and screen readers announce one link.
----------------------------------------------------------- */
.sano-cap__card.is-clickable .sano-cap__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.sano-cap__card.is-clickable { cursor: pointer; }

.sano-cap__link:focus-visible {
  outline: 2px solid var(--cap-card-link);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---- SCROLL REVEAL ----------------------------------------
   The hidden state only applies once JS adds .is-ready, so the
   content can never disappear if the script fails to run.

   The selector list below MUST stay character-for-character
   identical to the one in the JS panel. Anything the CSS hides
   and the JS never tags stays invisible forever.

   No transition on the hidden state: applying .is-ready must
   hide instantly, not fade the content out first.
----------------------------------------------------------- */
.sano-cap.is-ready .sano-cap__eyebrow,
.sano-cap.is-ready .sano-cap__heading,
.sano-cap.is-ready .sano-cap__intro,
.sano-cap.is-ready .sano-cap__card {
  opacity: 0;
  transform: translateY(28px);
}

/* The delay lives here, on the state the element transitions
   INTO — that is what makes them arrive one after another.
   Putting it on the hidden state instead does nothing. */
.sano-cap.is-ready .sano-cap__eyebrow.is-visible,
.sano-cap.is-ready .sano-cap__heading.is-visible,
.sano-cap.is-ready .sano-cap__intro.is-visible,
.sano-cap.is-ready .sano-cap__card.is-visible {
  opacity: 1;
  transform: none;
  transition: opacity var(--dur-reveal) var(--ease-soft),
              transform var(--dur-reveal) var(--ease-soft);
  transition-delay: calc(var(--i, 0) * var(--reveal-step));
}

/* Entrance over: hand transform back to hover speed with no
   delay, or hovering out would run at reveal speed. */
.sano-cap.is-ready .sano-cap__card.is-settled {
  transition: transform var(--dur-hover) var(--ease-out);
  transition-delay: 0s;
}

/* One column: each card scrolls into view on its own, so a
   stagger would only add lag. */
@container sano-cap (max-width: 560px) {
  .sano-cap.is-ready .sano-cap__card.is-visible { transition-delay: 0s; }
}

/* ---- HOVER ------------------------------------------------
   Gated behind a real pointer. On touch, :hover fires on tap and
   stays stuck until you tap elsewhere.
   The second selector has to outweigh the reveal rule, which
   pins transform once a card has finished appearing.
----------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .sano-cap__card:hover,
  .sano-cap.is-ready .sano-cap__card.is-visible:hover {
    transform: scale(var(--cap-hover-scale, 1.02));
    transition: transform var(--dur-hover) var(--ease-out);
    transition-delay: 0s;
    z-index: 1;                    /* keeps it above its neighbour */
  }

  .sano-cap__link:hover { text-decoration: underline; opacity: .85; }
}

/* ---- REDUCED MOTION ---------------------------------------
   Zeroing the tokens is enough: every timing in this file is
   built from them, so nothing is left animating. */
@media (prefers-reduced-motion: reduce) {
  .sano-cap {
    --dur-reveal: 1ms;
    --dur-hover: 1ms;
    --reveal-step: 0ms;
  }

  .sano-cap.is-ready .sano-cap__eyebrow,
  .sano-cap.is-ready .sano-cap__heading,
  .sano-cap.is-ready .sano-cap__intro,
  .sano-cap.is-ready .sano-cap__card {
    opacity: 1;
    transform: none;
  }

  .sano-cap__card:hover,
  .sano-cap.is-ready .sano-cap__card.is-visible:hover { transform: none; }
}

/* ---- Fallback for browsers without container queries ------ */
@supports not (container-type: inline-size) {
  @media (max-width: 900px) {
    .sano-cap__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }
  @media (max-width: 560px) {
    .sano-cap__grid { grid-template-columns: 1fr; }
    .sano-cap.is-ready .sano-cap__card.is-visible { transition-delay: 0s; }
  }
}