/* Generato da LM CSS Helper — https://dev.lulamerlo.it/css-helper */
:root{
	--lm-transition-speed: 0.25s;

	/* Tipografia */
	--lm-font-display: 'Kanit', sans-serif;
	--lm-font-heading: 'Kanit', sans-serif;
	--lm-font-subheading: 'Martel Sans', sans-serif;
	--lm-font-button-primary: 'Kanit', sans-serif;
	--lm-font-body: 'Martel Sans', sans-serif;
	--lm-fw-regular: 400;
	--lm-fw-medium: 600;
	--lm-fw-bold: 700;
	--lm-lh-tight: 1.2;
	--lm-lh-normal: 1.5;
	--lm-lh-loose: 1.8;
	--lm-font-xxs: 8px;
	--lm-font-xs: 12px;
	--lm-font-sm: 14px;
	--lm-font-md: 17px;
	--lm-font-lg: 24px;
	--lm-font-xl: 48px;
	--lm-font-xxl: 64px;
	--lm-letter-spacing-wide: 0.06em;

	/* Spaziatura */
	--lm-space-xxs: 4px;
	--lm-space-xs: 8px;
	--lm-space-sm: 12px;
	--lm-space-md: 20px;
	--lm-space-lg: 32px;
	--lm-space-xl: 48px;
	--lm-space-xxl: 80px;

	/* Raggi */
	--lm-r-xxs: 2px;
	--lm-r-xs: 4px;
	--lm-r-sm: 8px;
	--lm-r-md: 12px;
	--lm-r-lg: 16px;
	--lm-r-xl: 24px;
	--lm-r-xxl: 36px;
	--lm-r-round: 999px;

	/* Ombre / layout / effetti */
	--lm-shadow-sm: 0 1px 2px rgba(10,6,32,.08);
	--lm-shadow-md: 0 4px 12px rgba(10,6,32,.12);
	--lm-shadow-lg: 0 12px 32px rgba(10,6,32,.18);
	--lm-container: 1200px;
	--lm-max-width-content: 65ch;
	--lm-aspect-card: 4/3;
	--lm-icon-sm: 16px;
	--lm-icon-md: 20px;
	--lm-icon-lg: 28px;
	--lm-backdrop-blur: 8px;
	--lm-gradient-overlay: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 100%);
	--lm-easing-standard: cubic-bezier(.4,0,.2,1);
	--lm-z-dropdown: 100;
	--lm-z-modal: 1000;
	--lm-z-toast: 2000;
	--lm-text-on-light: #0A0620;
	--lm-text-on-dark: #FFFFFF;

	/* Semantici (fissi) */
	--lm-success: #1ECFAA;
	--lm-warning: #EAA020;
	--lm-danger: #F05070;
	--lm-info: #366AE2;
	--lm-outline-error: #F05070;

	/* Tema chiaro (default) */
	--lm-primary: #5A20D0;
	--lm-secondary: #2252D8;
	--lm-tertiary: #0A8A70;
	--lm-bg-base: #F8F4FF;
	--lm-success-bg: #E9FAF7;
	--lm-danger-bg: #FEEEF1;
	--lm-bg-surface: #FFFFFF;
	--lm-text-primary: #0A0620;
	--lm-text-secondary: #3E2E68;
	--lm-text-secondary-hover: #2A1F47;
	--lm-border: #E0D0FF;
	--lm-selection: #9A8EBE;
	--lm-primary-hover: #4818B8;
	--lm-secondary-hover: #1A3EA3;
	--lm-tertiary-hover: #065142;
	--lm-accent: #B07200;
	--lm-accent-hover: #8C5C00;
	--lm-over-primary: #FFFFFF;
	--lm-over-secondary: #FFFFFF;
	--lm-over-tertiary: #FFFFFF;
	--lm-over-accent: #FFFFFF;
	--lm-bg-elevated: #EEE6FF;
	--lm-bg-elevated-2: #E4D8FF;
	--lm-bg-overlay: rgba(33,12,75,0.5);
	--lm-bg-blur: rgba(255,255,255,0.75);
	--lm-bg-gradient-soft: linear-gradient(17deg, #F3E2FB 0%, #EDE4FC 56%, #E9E9FD 100%);
	--lm-cta-surface-neutral: #EEE6FF;
	--lm-cta-surface-light: #FAF8FF;
	--lm-cta-surface-dark: #CFB8FF;
	--lm-text-muted: #7868A8;
	--lm-text-disabled: #9889E9;
	--lm-link-visited: #542CA5;
	--lm-border-2: #C8B8F0;
	--lm-divider: #ECE2FF;
	--lm-focus-ring: #5A20D0;
	--lm-input-bg: #FFFFFF;
	--lm-input-border-focus: #5A20D0;
	--lm-placeholder: #A090CC;
	--lm-tooltip-bg: #0A0620;
	--lm-tooltip-text: #FFFFFF;
	--lm-skeleton: #E4D8FF;
	--lm-badge-neutral: #E4D8FF;
	--lm-code-bg: #F7F3FF;
	--lm-gradient: linear-gradient(17deg, #b512ce 0%, #672edb 56%, #366ae2 100%);
	--lm-gradient-r: linear-gradient(197deg, #b512ce 0%, #672edb 56%, #366ae2 100%);
	--lm-gradient-h: linear-gradient(90deg, #b512ce 0%, #672edb 56%, #366ae2 100%);
}
html.dark-mode, html[data-theme="dark"]{
	--lm-primary: #8B48F0;
	--lm-secondary: #4A70EE;
	--lm-tertiary: #1ECFAA;
	--lm-bg-base: #08061C;
	--lm-success-bg: #113242;
	--lm-danger-bg: #3B1936;
	--lm-bg-surface: #0E0B28;
	--lm-text-primary: #EEE8FF;
	--lm-text-secondary: #9E96C8;
	--lm-text-secondary-hover: #C1BCDC;
	--lm-border: #382A6F;
	--lm-selection: #3C3554;
	--lm-primary-hover: #A870FF;
	--lm-secondary-hover: #7995F2;
	--lm-tertiary-hover: #3DE3C0;
	--lm-accent: #EAA020;
	--lm-accent-hover: #F5BC40;
	--lm-over-primary: #FFFFFF;
	--lm-over-secondary: #FFFFFF;
	--lm-over-tertiary: #031C18;
	--lm-over-accent: #08061C;
	--lm-bg-elevated: #181540;
	--lm-bg-elevated-2: #221D52;
	--lm-bg-overlay: rgba(0,0,0,0.55);
	--lm-bg-blur: rgba(14,11,40,0.75);
	--lm-bg-gradient-soft: linear-gradient(17deg, #16072A 0%, #10092B 56%, #0C0E2C 100%);
	--lm-cta-surface-neutral: #181540;
	--lm-cta-surface-light: #201C55;
	--lm-cta-surface-dark: #0B0A1D;
	--lm-text-muted: #9A8EBE;
	--lm-text-disabled: #2A00A1;
	--lm-link-visited: #A577EA;
	--lm-border-2: #3A2E68;
	--lm-divider: #201846;
	--lm-focus-ring: #8B48F0;
	--lm-input-bg: #110E2F;
	--lm-input-border-focus: #8B48F0;
	--lm-placeholder: #6A5E93;
	--lm-tooltip-bg: #EEE8FF;
	--lm-tooltip-text: #0A0620;
	--lm-skeleton: #221D52;
	--lm-badge-neutral: #221D52;
	--lm-code-bg: #131034;
	--lm-gradient: linear-gradient(17deg, #CC29E6 0%, #8149F2 56%, #5283F7 100%);
	--lm-gradient-r: linear-gradient(197deg, #CC29E6 0%, #8149F2 56%, #5283F7 100%);
	--lm-gradient-h: linear-gradient(90deg, #CC29E6 0%, #8149F2 56%, #5283F7 100%);
}

/* ===== CSS personalizzato ===== */
/* ---------- Data ---------- */

.tlp-wrap .tlp-when {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--tlp-date-w);
  box-sizing: border-box;
  margin: 0;
  text-align: right;
  font-size: var(--lm-font-sm);
  font-weight: var(--lm-fw-medium);
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  color: var(--lm-text-secondary);
  font-variant-numeric: tabular-nums;
}

/* Desktop: inizio e fine su due righe, senza trattino */
.tlp-wrap .tlp-when-start,
.tlp-wrap .tlp-when-end {
  display: block;
}

.tlp-wrap .tlp-when-sep {
  display: none;
}

/* ---------- Contenuto ---------- */


.tlp-wrap .tlp-item h3 {
  margin: var(--lm-space-xs) 0 var(--lm-space-xxs) 0;
  font-size: var(--lm-font-lg);
  line-height: var(--lm-lh-tight);
  color: var(--lm-text-primary);
}
 
.tlp-wrap .tlp-cat {
  display: inline-block;
  margin: 0 0.4rem 0.2rem 0;
  padding: var(--lm-space-xxs) var(--lm-space-xs);
  border: 1px solid var(--lm-bg-elevated-2);
  border-radius: var(--lm-r-xs);
  background: var(--lm-bg-elevated);
  color: var(--lm-text-secondary);
  font-size: 0.875rem;
  font-weight: var(--lm-fw-bold);
  line-height: var(--lm-lh-tight);
  letter-spacing: 0;
  text-transform: none;
}
 
.tlp-wrap .tlp-meta {
  margin: 0;
  font-size: var(--lm-font-xs);
  color: var(--lm-text-muted);
}
 
.tlp-wrap .tlp-item p {
  margin: 0 0 var(--lm-space-xxs);
  max-width: 62ch;
  font-size: var(--lm-font-sm);
  line-height: var(--lm-lh-normal);
}

.tlp-wrap .tlp-photo {
  float: right;
  width: 7rem;
  height: 7rem;
  margin: 0 0 1rem 1.5rem;
  border-radius: var(--lm-r-md);
  object-fit: cover;
}


/* ---------- Azioni ---------- */

.tlp-wrap .tlp-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: left;
  gap: var(--lm-space-xxs) var(--lm-space-xs);
  margin-top: var(--lm-space-sm);
}

.tlp-wrap .tlp-more {
  display: inline-block;
  padding: var(--lm-space-xs) var(--lm-space-sm);
  border: 1px solid var(--lm-primary);
  border-radius: var(--lm-r-round);
  background: var(--lm-cta-surface-neutral);
  color: var(--lm-primary);
  font-size: var(--lm-font-sm);
  font-weight: var(--lm-fw-bold);
  line-height: var(--lm-lh-normal);
  text-decoration: none;
  transition: background 0.15s;
}

.tlp-wrap .tlp-more:hover {
  background: var(--lm-gradient-r);
  color: var(--lm-text-on-dark);
}

.tlp-wrap .tlp-copy {
  padding: var(--lm-space-xxs) 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--lm-font-xs);
  color: var(--lm-selection);
  cursor: pointer;
  text-decoration: underline;
}

.tlp-wrap .tlp-copy:hover {
  color: var(--lm-input-border-focus);
}

.tlp-wrap {
  --tlp-accent: red;
  --tlp-accent-ink: #fff;
  --tlp-accent-soft: #e6dcfc;
  --tlp-text: #17102b;
  --tlp-muted: #6c6584;
  --tlp-line-w: 4px;
  --tlp-dot: 1.5rem;
  --tlp-date-w: 11rem;
  --tlp-gap: 3.5rem;
	
	
--tlp-scroll-offset: 150px;

  max-width: 64rem;
  margin-inline: auto;
  font-size: 1.0625rem;
  color: var(--tlp-text);
}

/* ---------- Filtri ---------- */

.tlp-wrap .tlp-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--lm-space-xs);
	border-radius: var(--lm-r-md);
	padding: var(--lm-space-sm);
	border: 1px solid var(--lm-border-2);
}

.tlp-wrap .tlp-filter {
  padding: var(--lm-space-xxs) var(--lm-space-xs);
  border: 1px solid var(--lm-border);
  border-radius: var(--lm-r-sm);
  background: transparent;
  font-size: var(--lm-font-xs);
  cursor: pointer;
  user-select: none;
	line-height:1;
	padding: var(--lm-space-xxs) var(--lm-space-xs);
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.tlp-wrap .tlp-filter:hover {
  border-color: var(--lm-input-border-focus);
}

.tlp-wrap .tlp-filter.active {
  background: var(--lm-gradient);
  border-color: var(--lm-primary);
  color: var(--lm-text-on-dark);
}

.tlp-wrap .tlp-filter:focus-visible {
  outline: 3px solid var(--tlp-accent);
  outline-offset: 2px;
}

/* ---------- Timeline ---------- */

.tlp-wrap .tlp-timeline {
  position: relative;
  border: 0;
  padding: 0;
	scroll-margin-top:var(--tlp-scroll-offset);
}




/* Linea verticale continua */
.tlp-wrap .tlp-timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--tlp-date-w) + (var(--tlp-gap) / 2) - (var(--tlp-line-w) / 2));
  width: var(--tlp-line-w);
  border-radius: var(--lm-r-round);
  background: var(--lm-primary);
}

.tlp-wrap .tlp-item {
  position: relative;
  display: flow-root;
  margin: 0;
  padding: 0 0 7vh calc(var(--tlp-date-w) + var(--tlp-gap));
  border: 0;
  border-left: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
	scroll-margin-top: var(--tlp-scroll-offset);
}

.tlp-wrap .tlp-item:last-child {
  padding-bottom: 0;
}

.tlp-wrap .tlp-item[hidden] {
  display: none;
}

/* Pallino bianco sulla linea */
.tlp-wrap .tlp-item::before {
  content: "";
  position: absolute;
  top: 0.15rem;
  left: calc(var(--tlp-date-w) + (var(--tlp-gap) / 2) - (var(--tlp-dot) / 2));
  width: var(--tlp-dot);
  height: var(--tlp-dot);
  box-sizing: border-box;
  border: var(--tlp-line-w) solid var(--lm-primary);
  border-radius: var(--lm-r-round);
  background: var(--lm-bg-base);
  z-index: 1;
}







/* ---------- Mobile / tablet stretto ---------- */

@media (max-width: 700px) {
  .tlp-wrap {
    --tlp-gap: 0px;
    --tlp-dot: 1.25rem;
	  --tlp-scroll-offset: 250px;
    font-size: 1rem;
  }

  .tlp-wrap .tlp-timeline::before {
    left: calc(var(--tlp-dot) / 2 - (var(--tlp-line-w) / 2));
  }
	
	.tlp-wrap .tlp-timeline {
		scroll-margin-top:var(--tlp-scroll-offset);
	}

  .tlp-wrap .tlp-item {
    padding-left: calc(var(--tlp-dot) + 1.25rem);
    padding-bottom: 5vh;
	  scroll-margin-top:var(--tlp-scroll-offset);
  }

  .tlp-wrap .tlp-item::before {
    left: 0;
  }

  .tlp-wrap .tlp-when {
    position: static;
    width: auto;
    text-align: left;
    margin-bottom: 0.4rem;
  }
	
	  .tlp-wrap .tlp-when-start,
  .tlp-wrap .tlp-when-end,
  .tlp-wrap .tlp-when-sep {
    display: inline;
  }

  .tlp-wrap .tlp-item h3 {
    margin-top: 0.25rem;
  }

  .tlp-wrap .tlp-photo {
    width: 5rem;
    height: 5rem;
    margin-left: 1rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tlp-wrap .tlp-filter,
  .tlp-wrap .tlp-more {
    transition: none;
  }
}