/* ================================================================
   SUPRORA CARD — styles for the one card on the Repin landing that
   follows the Suprora design system. Loaded only inside the shadow root
   of <suprora-card>; nothing here reaches the rest of the page.
   Colours, type and motion come from tokens.css and bundle.css (both
   copied unchanged from the Suprora design system, except :root -> :host).
   ================================================================ */

:host{
  display:block;
  font-family:var(--font-sans);
  font-size:17px;
  line-height:1.6;
  letter-spacing:normal;
  color:var(--text);
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"ss01" on, "cv11" on;
}

/* the page's language switch: one language at a time */
:host([data-lang="en"]) [lang="it"],
:host([data-lang="it"]) [lang="en"]{ display:none !important; }

.sp-card{
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  padding:clamp(32px, 4.4vw, 64px) clamp(24px, 4.4vw, 64px) clamp(24px, 3vw, 32px);
}

.sp-copy{ display:flex; flex-direction:column; gap:24px; }

.sp-foot{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:16px 32px;
  margin-top:clamp(40px, 5vw, 72px);
  padding-top:24px;
  border-top:1px solid var(--hairline);
  color:var(--text-subtle);
  font-size:13.5px;
}
.sp-foot img{ height:20px; width:auto; }
.sp-pos i{ font-style:normal; color:var(--accent-ink); }

/* Suprora motion: blocks rise 28px and fade in over 1s as they enter */
.sp-rise{
  opacity:0;
  transform:translateY(28px);
  transition:opacity 1s var(--ease), transform 1s var(--ease);
}
.sp-rise.is-in{ opacity:1; transform:none; }

@media (max-width: 960px){
  .cta{ grid-template-columns:minmax(0, 1fr); gap:32px; }
  .cta .btn-row{ justify-content:flex-start; }
}

@media (prefers-reduced-motion: reduce){
  .sp-rise{ opacity:1; transform:none; transition:none; }
}