/* ============================================================
   SANO | Privacy & Security — CSS panel
   ============================================================ */

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

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

  /* ---- FALLBACKS ---- */
  --pv-eyebrow: #F4511E;
  --pv-heading: #0B1B2B;
  --pv-body: #5A6472;
  --pv-check: #22A45D;
  --pv-link: #3B2FB5;              /* the shared Sano link blue */
  --pv-hover-scale: 1.04;

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

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

/* ---- MEDIA ------------------------------------------------ */
.sano-pv__media {
  grid-area: media;
  position: relative;              /* anchor for the floating badge */
  display: flex;                   /* lets the frame fill the row */
  min-width: 0;
}

/* The frame clips the zoom so the image never spills out */
.sano-pv__frame {
  flex: 1 1 auto;
  height: 100%;
  overflow: hidden;
  border-radius: var(--pv-radius, 16px);
}

.sano-pv__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;               /* crops instead of squashing */
  transition: transform 500ms var(--ease-soft);
}

/* Sits outside the frame, so it never zooms with the photo */
.sano-pv__badge {
  position: absolute;
  left: 50%;
  bottom: var(--pv-badge-inset, 20px);
  transform: translateX(-50%);
  width: var(--pv-badge-width, 72%);
  height: auto;
  pointer-events: none;
}

/* ---- CONTENT ----------------------------------------------
   Body copy is a flat 16px on every screen. cqi is measured
   against the whole section, so a clamp shrank it on mobile.
----------------------------------------------------------- */
.sano-pv__content {
  grid-area: content;
  min-width: 0;
  align-self: center;
}

.sano-pv__eyebrow {
  display: block;
  margin-bottom: 14px;
  color: var(--pv-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-pv__heading {
  margin: 0;
  color: var(--pv-heading);
  font-size: clamp(32px, 4cqi, 36px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.sano-pv__intro {
  margin: 16px 0 0;
  color: var(--pv-body);
  font-size: 16px;
  line-height: 1.6;
  text-wrap: pretty;
}

/* ---- CHECK LIST ------------------------------------------- */
.sano-pv__list {
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sano-pv__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  color: var(--pv-body);
  font-size: 16px;
  line-height: 1.45;
}

.sano-pv__tick {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  color: var(--pv-check);
}

/* ---- LOGO STRIP ------------------------------------------- */
.sano-pv__logos {
  display: block;
  width: 100%;
  max-width: var(--pv-logos-width, 400px);
  height: auto;
  margin: 32px 0 0;
}

/* ---- LINK -------------------------------------------------- */
.sano-pv__link {
  display: inline-block;
  margin-top: 28px;
  color: var(--pv-link);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: underline;
  text-underline-offset: 4px;
  transition: opacity .18s ease;
}

.sano-pv__link:focus-visible {
  outline: 2px solid var(--pv-eyebrow);
  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.

   The check list reveals as one block, not tick by tick — six
   more steps would stretch the cascade past a second.
----------------------------------------------------------- */
.sano-pv.is-ready .sano-pv__media,
.sano-pv.is-ready .sano-pv__eyebrow,
.sano-pv.is-ready .sano-pv__heading,
.sano-pv.is-ready .sano-pv__intro,
.sano-pv.is-ready .sano-pv__list,
.sano-pv.is-ready .sano-pv__logos,
.sano-pv.is-ready .sano-pv__link {
  opacity: 0;
  transform: translateY(24px);
}

/* The delay lives here, on the state the element transitions
   INTO — that is what makes them arrive one after another. */
.sano-pv.is-ready .sano-pv__media.is-visible,
.sano-pv.is-ready .sano-pv__eyebrow.is-visible,
.sano-pv.is-ready .sano-pv__heading.is-visible,
.sano-pv.is-ready .sano-pv__intro.is-visible,
.sano-pv.is-ready .sano-pv__list.is-visible,
.sano-pv.is-ready .sano-pv__logos.is-visible,
.sano-pv.is-ready .sano-pv__link.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));
}

/* ---- HOVER ------------------------------------------------
   Gated behind a real pointer. On touch, :hover fires on tap and
   leaves the photo zoomed until you tap elsewhere.
   The zoom is on the image, not on the media wrapper, so it
   never collides with the reveal transform above.
----------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .sano-pv__media:hover .sano-pv__img {
    transform: scale(var(--pv-hover-scale, 1.04));
  }

  .sano-pv__link:hover { opacity: .7; }
}

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

  .sano-pv__img { transition: none; }
  .sano-pv__media:hover .sano-pv__img { transform: none; }

  .sano-pv.is-ready .sano-pv__media,
  .sano-pv.is-ready .sano-pv__eyebrow,
  .sano-pv.is-ready .sano-pv__heading,
  .sano-pv.is-ready .sano-pv__intro,
  .sano-pv.is-ready .sano-pv__list,
  .sano-pv.is-ready .sano-pv__logos,
  .sano-pv.is-ready .sano-pv__link {
    opacity: 1;
    transform: none;
  }
}

/* ---- Fallback for browsers without container queries ------ */
@supports not (container-type: inline-size) {
  @media (max-width: 900px) {
    .sano-pv__grid {
      grid-template-columns: 1fr;
      grid-template-areas: "content" "media";
      gap: 36px;
      align-items: start;
    }
    .sano-pv__frame { height: auto; }
    .sano-pv__img { height: auto; }
  }
}