/* CERT TILES (10/11/2026, Fabio: "coerenti ma più belli, più fini, più corretti").
   One component for the quick certifications (the legacy TrueFlows) and the conversation certifications,
   used by the home (Certify block, compact rows) and by the library (cards). Loaded by index.html and library.html.
   Finer than before: white surface, 1px border.subtle, small soft icon tile, no corner decoration, no lift.
   Hover (gradual, 500 ms in / 350 ms out): the border turns blue, the icon tile fills blue, a small arrow appears.
   Radius from the design system: 16 for the library cards, 8 for the home rows (button size); never 12. */

.ct { position: relative; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 12px 10px 10px;
  border: 1px solid var(--ts-border-default, #e2e8ee); border-radius: 8px; background: var(--ts-surface-raised, #fff);
  color: var(--ts-text-primary); text-decoration: none;
  transition: border-color .35s cubic-bezier(.45, 0, .55, 1), background-color .35s cubic-bezier(.45, 0, .55, 1); }
.ct:hover { border-color: rgba(0, 122, 254, 0.45); background: #fbfdff; color: var(--ts-text-primary); text-decoration: none;
  transition-duration: .5s; transition-timing-function: cubic-bezier(.4, 0, .2, 1); }
.ct:active { background: rgba(0, 122, 254, 0.06); transition-duration: .1s; }
.ct:focus-visible { outline: 2px solid var(--ts-focus-ring, #0068d9); outline-offset: 2px; }
.ct[hidden] { display: none; }

.ct-ic { display: grid; place-items: center; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 8px;
  background: rgba(0, 122, 254, 0.08); color: #007afe;
  transition: background-color .35s cubic-bezier(.45, 0, .55, 1), color .35s cubic-bezier(.45, 0, .55, 1); }
.ct-ic .hv3-ic { width: 20px; height: 20px; }
.ct:hover .ct-ic { background: #007afe; color: #fff; transition-duration: .5s; transition-timing-function: cubic-bezier(.4, 0, .2, 1); }

.ct-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ct-name { font: 600 14px/20px "DM Sans", sans-serif; color: var(--ts-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ct-desc { font: 400 13px/18px "DM Sans", sans-serif; color: var(--ts-text-secondary); }
.ct-via { display: inline-flex; align-items: center; gap: 4px; font: 500 12px/16px "DM Sans", sans-serif; color: var(--ts-text-muted, #6b7280); }
.ct-via svg { width: 12px; height: 12px; }

.ct-go { flex: 0 0 auto; width: 16px; height: 16px; background: #0068d9; opacity: 0; transform: translateX(-4px);
  -webkit-mask: url(assets/icons/arrow-right.svg) center / contain no-repeat; mask: url(assets/icons/arrow-right.svg) center / contain no-repeat;
  transition: opacity .35s cubic-bezier(.45, 0, .55, 1), transform .35s cubic-bezier(.45, 0, .55, 1); }
.ct:hover .ct-go { opacity: 1; transform: none; transition-duration: .5s; transition-timing-function: cubic-bezier(.4, 0, .2, 1); }

/* card variant (library): icon on top, name, one line, the channel at the bottom */
.ct.is-card { flex-direction: column; align-items: stretch; gap: 12px; padding: 16px; border-radius: 16px; }
.ct.is-card .ct-top { display: flex; align-items: center; justify-content: space-between; }
.ct.is-card .ct-body { gap: 4px; }
.ct.is-card .ct-name { font-size: 15px; line-height: 22px; white-space: normal; }
.ct.is-card .ct-via { margin-top: auto; }

/* wide variant (conversations in the library): icon beside the text */
.ct.is-wide { padding: 14px 16px 14px 14px; border-radius: 16px; gap: 14px; }
.ct.is-wide .ct-ic { width: 40px; height: 40px; }

/* group label inside a block (home) */
.ct-group { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.ct-label { font: 500 12px/16px "DM Sans", sans-serif; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ts-text-secondary); }

@media (hover: none) { .ct-go { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ct, .ct-ic, .ct-go { transition: none; } }

.i-meetings { --m: url(assets/icons/video-frame.svg); }
.i-screen { --m: url(assets/icons/screen-record.svg); }
.i-audio { --m: url(assets/icons/audio.svg); }
.i-email { --m: url(assets/icons/email.svg); }
.ct.is-card .ct-top { align-self: stretch; }

/* icons without background (Fabio, 10/11): the icon alone in blue; on hover it turns to the action blue */
.ct-ic, .ct.is-wide .ct-ic { width: 24px; height: 24px; border-radius: 0; background: none; }
.ct-ic .hv3-ic, .ct.is-wide .ct-ic .hv3-ic { width: 24px; height: 24px; }
.ct:hover .ct-ic { background: none; color: #0068d9; }
.ct { padding-left: 14px; }
.ct.is-card .ct-ic { width: 28px; height: 28px; }
.ct.is-card .ct-ic .hv3-ic { width: 28px; height: 28px; }

/* ===== Library cards, less text and more refined (Fabio, 10/11: "troppo testo, ui troppo grezza") =====
   Quick certifications: icon and name only, on a white card that fades to a very light blue at the bottom;
   the arrow sits top right and slides in on hover. Conversations: name and one short line. */
.ct.is-card { min-height: 112px; justify-content: space-between; padding: 18px 18px 16px;
  background: linear-gradient(180deg, var(--ts-surface-raised, #fff) 0%, #f8fbff 100%); }
.ct.is-card:hover { background: linear-gradient(180deg, #fff 0%, #f1f7ff 100%); }
.ct.is-card .ct-name { font: 600 15px/20px "DM Sans", sans-serif; letter-spacing: -0.005em; }
.ct.is-card .ct-ic, .ct.is-card .ct-ic .hv3-ic { width: 26px; height: 26px; }
.ct.is-wide { background: linear-gradient(180deg, var(--ts-surface-raised, #fff) 0%, #f8fbff 100%); }
.ct.is-wide:hover { background: linear-gradient(180deg, #fff 0%, #f1f7ff 100%); }
.ct.is-wide .ct-name { font-size: 15px; }
.ct.is-wide .ct-desc { font-size: 13px; color: var(--ts-text-muted, #6b7280); }
.ct.is-card { min-height: 104px; }
.ct.is-card .ct-body { margin-top: auto; }
.ct.is-card .ct-body { flex: 0 0 auto; }
/* same size for every library card, also when a name takes two lines (Fabio, 10/11: "pareggia") */
.ct.is-card { min-height: 112px; }