/* ============================================================
   SANO | Feature Split — CSS panel
   ============================================================ */

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

  /* ---- 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 ---- */
  --feat-font: inherit;

  /* ---- FALLBACKS ---- */
  --feat-title-color: #0B1B2B;
  --feat-body-color: #5A6472;
  --feat-line: rgba(11, 27, 43, .12);
  --feat-image-zoom: 1.04;

  padding: 0;
  font-family: var(--feat-font);
}

/* stretch is what makes the diagram match the text column height */
.sano-feat__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto 1fr;
  column-gap: var(--feat-gap, 64px);
  row-gap: 12px;
  align-items: stretch;
  max-width: var(--feat-max, 1140px);
  margin-inline: auto;
}

/* ---- MEDIA ------------------------------------------------ */
.sano-feat__media {
  grid-area: media;
  align-self: stretch;
  min-width: 0;
  overflow: hidden;                /* clips the zoom */
  border-radius: var(--feat-radius, 16px);
}

.sano-feat__media img {
  display: block;
  width: 100%;
  height: 100%;
  /* Swap to "contain" if the diagram gets cropped too tightly */
  object-fit: cover;
  object-position: center;
  transition: transform 450ms var(--ease-soft);
}

/* ---- TEXT -------------------------------------------------
   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.
   Body copy is a flat 16px everywhere: hierarchy rests on
   weight and colour, not on scale.
----------------------------------------------------------- */
.sano-feat__heading {
  grid-area: heading;
  margin: 0;
  color: var(--feat-title-color);
  font-size: clamp(32px, 4.2cqi, 36px);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.sano-feat__intro {
  grid-area: intro;
  margin: 0;
  color: var(--feat-body-color);
  font-size: 16px;
  line-height: 1.55;
  text-wrap: pretty;
}

/* ---- FEATURE LIST ----------------------------------------- */
.sano-feat__features {
  grid-area: features;
  margin-top: 20px;
}

.sano-feat__item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding-block: 20px;
}

/* Divider only between items, never above the first */
.sano-feat__item + .sano-feat__item {
  border-top: 1px solid var(--feat-line);
}

.sano-feat__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--feat-icon, 32px);
  height: var(--feat-icon, 32px);
  margin-top: 2px;
  transition: transform var(--dur-hover) var(--ease-out);
}

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

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

.sano-feat__ititle {
  display: block;
  color: var(--feat-title-color);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
}

.sano-feat__idesc {
  display: block;
  color: var(--feat-body-color);
  font-size: 16px;
  line-height: 1.5;
  text-wrap: pretty;
}

/* ---- SCROLL REVEAL ----------------------------------------
   The hidden state only applies once JS adds .is-ready, so the
   content can never disappear if the script fails to run.
----------------------------------------------------------- */
.sano-feat.is-ready .sano-feat__heading,
.sano-feat.is-ready .sano-feat__intro,
.sano-feat.is-ready .sano-feat__media,
.sano-feat.is-ready .sano-feat__item {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--dur-reveal) var(--ease-soft),
              transform var(--dur-reveal) var(--ease-soft);
}

.sano-feat.is-ready .is-visible {
  opacity: 1;
  transform: none;
  transition-delay: calc(var(--i, 0) * var(--reveal-step));
}

/* ---- HOVER -------------------------------------------------
   Gated behind a real pointer. On touch, :hover fires on tap and
   stays stuck until you tap elsewhere.
   The item selectors are specific enough to outweigh the reveal
   rule, which pins transform once an item has appeared.
----------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .sano-feat__media:hover img {
    transform: scale(var(--feat-image-zoom, 1.04));
  }

  .sano-feat__item {
    transition: transform var(--dur-hover) var(--ease-out);
  }

  .sano-feat__item:hover,
  .sano-feat.is-ready .sano-feat__item.is-visible:hover {
    transform: translateX(5px);
    transition: transform var(--dur-hover) var(--ease-out);
    transition-delay: 0s;
  }

  .sano-feat__item:hover .sano-feat__icon {
    transform: scale(1.1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sano-feat.is-ready .sano-feat__heading,
  .sano-feat.is-ready .sano-feat__intro,
  .sano-feat.is-ready .sano-feat__media,
  .sano-feat.is-ready .sano-feat__item {
    transform: none;
    transition: opacity 400ms ease;
  }
  .sano-feat__media img,
  .sano-feat__icon { transition: none; }
  .sano-feat__media:hover img,
  .sano-feat__item:hover,
  .sano-feat__item:hover .sano-feat__icon { transform: none; }
}

@supports not (container-type: inline-size) {
  @media (max-width: 900px) {
    .sano-feat__grid {
      grid-template-columns: 1fr;
      grid-template-rows: auto;
      grid-template-areas: "heading" "intro" "media" "features";
      gap: 22px;
    }
    .sano-feat__media { align-self: start; }
    .sano-feat__media img { height: auto; }
    .sano-feat__features { margin-top: 0; }
  }
}