/* =====================================================================
   Ritus Blog — CSS unificato per home / single / archive / search
   Applica il design system del custom-css-js Ritus.
   ===================================================================== */

:root{
  --red:#8b1a1a;
  --red-soft:rgba(139,26,26,.12);
  --red-light:#c45c5c;
  --carbone:#2c2c2c;
  --font:#7a7a7a;
  --grey:#888382;
  --avorio:#f0edea;
  --border-c:#E0D9D2;
  --green:#0b9d6f;
  --green-soft:#e2efe9;
  --yellow:#ffdc00;
  --shadow:0 1px 4px rgba(0,0,0,.06);
  --shadow-btn:0 4px 20px rgba(139,26,26,.3);
  --font-family:'Montserrat',system-ui,-apple-system,sans-serif;
}

/* ---------------------- Body scope ----------------------
   Regole scoped a .ritus-blog-wrap: non tocchiamo header/footer
   YOOtheme, solo il contenuto tra get_header() e get_footer(). */
.ritus-blog-wrap{
  background:var(--avorio);
  color:var(--font);
  font-family:var(--font-family);
  font-size:15px;font-weight:400;line-height:1.65;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
.ritus-blog-wrap .shell,
.ritus-blog-wrap .shell *{box-sizing:border-box}
/* Container: max-width allineato a .uk-container YOOtheme (960px),
   padding orizzontale UIkit-standard, padding verticale per staccare
   da header/footer del tema. */
.ritus-blog-wrap .shell{padding:40px 15px 80px}

.ritus-blog-wrap a{color:var(--carbone);text-decoration:none;cursor:pointer;transition:color .2s ease}
.ritus-blog-wrap a:hover{text-decoration:none;color:var(--red)}
.ritus-blog-wrap button{font:inherit;cursor:pointer;background:none;border:0;color:inherit}
.ritus-blog-wrap img{max-width:100%;display:block}

.ritus-blog-wrap h1,
.ritus-blog-wrap h2,
.ritus-blog-wrap h3,
.ritus-blog-wrap h4,
.ritus-blog-wrap h5,
.ritus-blog-wrap h6{
  color:var(--carbone);font-family:var(--font-family);margin:0;
}
.ritus-blog-wrap h1{font-size:50px;font-weight:800;line-height:1.12;letter-spacing:-.02em}
.ritus-blog-wrap h2{font-size:32px;font-weight:800;line-height:1.2;letter-spacing:-.01em}
.ritus-blog-wrap h3{font-size:20px;font-weight:800;line-height:1.3;letter-spacing:-.005em}
.ritus-blog-wrap h4{font-size:11px}
.ritus-blog-wrap p{font-size:18px;font-weight:400;color:var(--font);line-height:1.65;margin:0}

.ritus-blog-wrap hr{border:0;border-top:1px solid var(--border-c);margin:0}
.ritus-blog-wrap .blog-hr{border:0;border-bottom:2px solid var(--carbone)}

/* ---------------------- Bottoni ---------------------- */
.ritus-blog-wrap .btn-primary{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 25px;border-radius:10px;background:var(--red);color:#fff;
  font-size:15px;font-weight:700;letter-spacing:.02em;
  box-shadow:var(--shadow-btn);transition:all .2s ease;position:relative;border:0;
  text-decoration:none;
}
.ritus-blog-wrap .btn-primary:hover{color:#fff;filter:grayscale(.5);text-decoration:none}
.ritus-blog-wrap .btn-primary:active{top:2px}
.ritus-blog-wrap .btn-secondary{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:10px 25px;border-radius:10px;background:transparent;color:var(--red);
  border:1px solid var(--red);font-size:15px;font-weight:700;
  transition:all .2s ease;position:relative;text-decoration:none;
}
.ritus-blog-wrap .btn-secondary:hover{background:#fff;color:var(--red);text-decoration:none}
.ritus-blog-wrap .btn-secondary:active{top:2px}
.ritus-blog-wrap .btn-small{padding:8px 18px;font-size:13px;border-radius:8px;box-shadow:none}
.ritus-blog-wrap .btn-small.btn-primary{box-shadow:0 2px 10px rgba(139,26,26,.25)}

/* ---------------------- Layout shell ---------------------- */
.ritus-blog-wrap .shell{
  max-width:960px;margin:0 auto;
  display:grid;grid-template-columns:220px minmax(0,1fr);gap:0;align-items:start;
}
/* Single article: 2 colonne (nessuna sidebar sinistra, TOC destra 220px)
   Contenuto main più ampio per la lettura: ~740px, con padding interno
   32px → ~676px di contenuto puro, larghezza ottimale per readability. */
.ritus-blog-wrap.is-single-post .shell{grid-template-columns:minmax(0,1fr) 220px}

/* ---------------------- Sidebar ---------------------- */
.ritus-blog-wrap .side{
  border-right:1px solid var(--border-c);padding:0 16px;
  position:sticky;top:20px;max-height:calc(100vh - 40px);overflow-y:auto;
}
.ritus-blog-wrap .side h5{
  font-size:10.5px;color:var(--font);font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;
  margin:24px 0 10px;padding:0 8px;
}
.ritus-blog-wrap .side h5:first-child{margin-top:0}
.ritus-blog-wrap .side ul{list-style:none;margin:0;padding:0}
.ritus-blog-wrap .side li a{
  display:flex;justify-content:space-between;align-items:center;
  padding:8px 12px;font-size:13px;font-weight:500;color:var(--carbone);
  text-decoration:none;border-radius:8px;
  transition:all .15s ease;margin-bottom:1px;
}
.ritus-blog-wrap .side li a:hover{background:#fff;color:var(--red);text-decoration:none}
.ritus-blog-wrap .side li a.on{background:#fff;color:var(--red);font-weight:700;border:1px solid var(--border-c)}
.ritus-blog-wrap .side li a .n{color:var(--font);font-size:11px;font-variant-numeric:tabular-nums;font-weight:600}
.ritus-blog-wrap .side li a.on .n{color:var(--red)}
.ritus-blog-wrap .side li a .live{
  width:6px;height:6px;background:var(--green);border-radius:50%;
  margin-left:6px;flex-shrink:0;box-shadow:0 0 0 3px rgba(11,157,111,.15);
}

/* ---------------------- Main ---------------------- */
.ritus-blog-wrap .main{padding:0 32px;min-width:0;overflow-x:hidden}

.ritus-blog-wrap .crumbs{
  font-size:12px;color:var(--font);
  display:flex;gap:8px;align-items:center;margin-bottom:32px;font-weight:500;flex-wrap:wrap;
}
.ritus-blog-wrap .crumbs a{color:var(--font)}
.ritus-blog-wrap .crumbs a:hover{color:var(--red)}
.ritus-blog-wrap .crumbs .sep{color:var(--border-c)}
.ritus-blog-wrap .crumbs .cur{color:var(--carbone);font-weight:600}

/* ---------------------- Head block (home / archive / search) ---------------------- */
.ritus-blog-wrap .head-block{
  padding-bottom:40px;border-bottom:1px solid var(--border-c);margin-bottom:48px;
}
.ritus-blog-wrap .head-block h1{font-size:44px;line-height:1.08;font-weight:800;letter-spacing:-.02em}
.ritus-blog-wrap .head-block h1 em{font-style:normal;color:var(--red)}
.ritus-blog-wrap .head-block .lead{
  margin-top:20px;color:var(--font);font-size:18px;max-width:60ch;line-height:1.6;
}
.ritus-blog-wrap .head-block .meta{
  margin-top:24px;display:flex;gap:20px;flex-wrap:wrap;
  font-size:13px;color:var(--font);align-items:center;font-weight:500;
}
.ritus-blog-wrap .head-block .meta .dot{width:3px;height:3px;background:var(--border-c);border-radius:50%}
.ritus-blog-wrap .head-block .meta strong{color:var(--carbone);font-weight:700}

/* ---------------------- Hero search ---------------------- */
.ritus-blog-wrap .hero-search{
  margin-top:32px;position:relative;max-width:640px;
  display:block;
}
.ritus-blog-wrap .hero-search input{
  width:100%;padding:20px 24px 20px 56px;
  background:#fff;border:1px solid var(--border-c);border-radius:14px;
  font:inherit;font-size:16px;color:var(--carbone);outline:none;
  box-shadow:var(--shadow);transition:all .2s ease;
  font-family:var(--font-family);
}
.ritus-blog-wrap .hero-search input::placeholder{color:var(--font)}
.ritus-blog-wrap .hero-search input:focus{
  border-color:var(--red);
  box-shadow:0 0 0 4px rgba(139,26,26,.08),var(--shadow);
}
.ritus-blog-wrap .hero-search svg{
  position:absolute;left:22px;top:50%;transform:translateY(-50%);
  width:20px;height:20px;color:var(--red);
}
.ritus-blog-wrap .hero-search .k{
  position:absolute;right:16px;top:50%;transform:translateY(-50%);
  font-size:11px;color:var(--font);border:1px solid var(--border-c);
  background:var(--avorio);padding:4px 8px;border-radius:6px;
  letter-spacing:.06em;font-weight:600;font-family:ui-monospace,monospace;
}

/* ---------------------- Featured (home) ---------------------- */
/* minmax(0, ...) forza le colonne a rispettare le proporzioni anche se
   il contenuto (immagine featured grande, testo mini) richiederebbe più
   spazio. Senza questo, in casi limite come "solo 2 post totali" o
   featured image molto ampia, la seconda colonna può sforare fuori dal
   .main sfondando il container. */
.ritus-blog-wrap .feat{
  display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);
  gap:16px;margin-bottom:56px;
}
.ritus-blog-wrap .feat > *{min-width:0;max-width:100%}

.ritus-blog-wrap .last-article{
  background:#fff;padding:24px;border-radius:14px;border:1px solid var(--border-c);
  display:flex;flex-direction:column;text-decoration:none;transition:all .2s ease;cursor:pointer;
}
.ritus-blog-wrap .last-article:hover{border-color:var(--red);text-decoration:none}
.ritus-blog-wrap .last-article .custom-img{
  border-radius:10px;overflow:hidden;aspect-ratio:16/9;margin-bottom:20px;
  position:relative;background:linear-gradient(135deg,var(--avorio) 0%,#e6ddd3 100%);
}
.ritus-blog-wrap .last-article .custom-img:not([style*="background-image"])::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(60% 50% at 30% 40%, rgba(139,26,26,.08), transparent 60%),
    repeating-linear-gradient(0deg, rgba(44,44,44,.03) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, rgba(44,44,44,.03) 0 1px, transparent 1px 32px);
}
.ritus-blog-wrap .last-article .el-title{
  font-size:10.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--red);
  display:flex;align-items:center;gap:8px;margin-bottom:10px;
}
.ritus-blog-wrap .last-article .el-title svg{width:14px;height:14px;stroke:var(--red)}
.ritus-blog-wrap .last-article .el-meta{
  font-size:24px;font-weight:800;color:var(--carbone);
  line-height:1.2;letter-spacing:-.01em;margin-bottom:10px;text-transform:none;
}
.ritus-blog-wrap .last-article .el-content{color:var(--font);font-size:14px;line-height:1.6;margin-bottom:16px}
.ritus-blog-wrap .last-article .el-info{
  display:flex;gap:14px;font-size:12px;color:var(--font);font-weight:500;
  padding-top:14px;border-top:1px solid var(--border-c);
}
.ritus-blog-wrap .last-article .el-info strong{color:var(--carbone);font-weight:700}

.ritus-blog-wrap .feat-right{display:flex;flex-direction:column;gap:16px}
.ritus-blog-wrap .mini{
  display:flex;column-gap:16px;padding:20px;background:#fff;
  border:1px solid var(--border-c);border-radius:12px;
  text-decoration:none;color:inherit;transition:all .2s ease;cursor:pointer;
}
.ritus-blog-wrap .mini:hover{border-color:var(--red);text-decoration:none}
.ritus-blog-wrap .mini .tile{
  width:44px;height:44px;border-radius:10px;
  background:var(--avorio);color:var(--red);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  font-size:15px;font-weight:800;
}
.ritus-blog-wrap .mini .tile svg{width:20px;height:20px;stroke:var(--red)}
.ritus-blog-wrap .mini .body{flex:1;min-width:0}
.ritus-blog-wrap .mini .cat{
  font-size:10.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--red);margin-bottom:6px;
}
.ritus-blog-wrap .mini h4{
  font-size:16px;font-weight:800;color:var(--carbone);
  line-height:1.25;letter-spacing:-.005em;text-transform:none;
}
.ritus-blog-wrap .mini .info{margin-top:10px;font-size:11.5px;color:var(--font);font-weight:500}

/* ---------------------- Section header + rows ---------------------- */
.ritus-blog-wrap .sec-head{
  display:flex;justify-content:space-between;align-items:baseline;
  margin:56px 0 24px;padding-bottom:12px;
  border-bottom:2px solid var(--carbone);
}
.ritus-blog-wrap .sec-head h2{
  font-size:22px;font-weight:800;color:var(--carbone);
  letter-spacing:-.005em;text-transform:none;
}
.ritus-blog-wrap .sec-head h2 .cnt{color:var(--font);font-weight:500;margin-left:8px;font-size:16px}
.ritus-blog-wrap .sec-head .tools{
  display:flex;gap:12px;align-items:center;
  font-size:12px;color:var(--font);font-weight:500;
}
.ritus-blog-wrap .sec-head .tools select{
  border:1px solid var(--border-c);padding:6px 12px;
  font:inherit;font-size:12px;
  background:#fff;color:var(--carbone);font-weight:600;
  border-radius:8px;cursor:pointer;font-family:var(--font-family);
}
.ritus-blog-wrap .sec-head .tools select:focus{outline:none;border-color:var(--red)}

.ritus-blog-wrap .rows{display:flex;flex-direction:column;gap:12px}
.ritus-blog-wrap .row{
  display:flex;column-gap:20px;align-items:center;
  padding:22px 24px;background:#fff;
  border:1px solid var(--border-c);border-radius:12px;
  cursor:pointer;text-decoration:none;color:inherit;transition:all .2s ease;
}
.ritus-blog-wrap .row:hover{border-color:var(--red);text-decoration:none}
.ritus-blog-wrap .row .tile{
  width:44px;height:44px;border-radius:10px;
  background:var(--avorio);color:var(--red);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
  font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;
}
.ritus-blog-wrap .row .body{flex:1;min-width:0}
.ritus-blog-wrap .row .body .cat{
  font-size:10.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--red);margin-bottom:6px;
}
.ritus-blog-wrap .row .body h4{
  font-size:18px;font-weight:800;color:var(--carbone);
  line-height:1.3;letter-spacing:-.005em;text-transform:none;
}
.ritus-blog-wrap .row .m{
  font-size:13px;color:var(--font);font-weight:500;white-space:nowrap;flex-shrink:0;
}

.ritus-blog-wrap .load-more{margin-top:32px;text-align:center}
.ritus-blog-wrap .load-more .btn-secondary,
.ritus-blog-wrap .load-more span a{
  display:inline-flex;align-items:center;padding:8px 14px;font-size:13px;
  border-radius:8px;border:1px solid var(--border-c);color:var(--carbone);
  background:#fff;text-decoration:none;font-weight:600;
}
.ritus-blog-wrap .load-more .current{
  background:var(--red);color:#fff;border-color:var(--red);padding:8px 14px;border-radius:8px;
}

/* ============ SINGLE POST ============ */

/* Progress bar */
.ritus-blog-wrap .progress{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:9999;
  background:transparent;pointer-events:none;
}
.ritus-blog-wrap .progress-fill{
  height:100%;background:var(--red);width:0;
  transition:width .1s linear;box-shadow:0 0 8px rgba(139,26,26,.4);
}

/* Article head */
.ritus-blog-wrap .art-head{margin-bottom:32px}
.ritus-blog-wrap .art-kicker{
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--red);margin-bottom:20px;display:inline-flex;align-items:center;gap:10px;
}
.ritus-blog-wrap .art-kicker svg{width:14px;height:14px;stroke:var(--red)}
.ritus-blog-wrap .art-head h1{font-size:38px;line-height:1.1;font-weight:800;letter-spacing:-.02em;color:var(--carbone)}
.ritus-blog-wrap .art-head .lead{margin-top:20px;color:var(--carbone);font-size:16px;max-width:60ch;line-height:1.55;font-weight:400}

/* Meta bar */
.ritus-blog-wrap .art-meta{
  margin-top:28px;padding:16px 0;
  display:flex;gap:24px;flex-wrap:wrap;align-items:center;
  font-size:13px;color:var(--font);font-weight:500;
  border-top:1px solid var(--border-c);border-bottom:1px solid var(--border-c);
}
.ritus-blog-wrap .art-meta .avatar,
.ritus-blog-wrap .head-block .meta .avatar{
  width:32px;height:32px;border-radius:50%;
  background:var(--red);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:800;flex-shrink:0;
}
.ritus-blog-wrap .art-meta .who,
.ritus-blog-wrap .head-block .meta .who{display:flex;align-items:center;gap:10px}
.ritus-blog-wrap .art-meta .who strong,
.ritus-blog-wrap .head-block .meta .who strong{color:var(--red);font-weight:700;font-size:14px}
.ritus-blog-wrap .art-meta .who span{display:block;font-size:11px;color:var(--font)}
.ritus-blog-wrap .art-meta .info{display:flex;align-items:center;gap:8px;color:var(--font)}
.ritus-blog-wrap .art-meta .info svg{width:14px;height:14px;stroke:var(--font)}
.ritus-blog-wrap .art-meta .info strong{color:var(--carbone);font-weight:700}
.ritus-blog-wrap .art-meta .info .live{
  width:6px;height:6px;background:var(--green);border-radius:50%;
  box-shadow:0 0 0 3px rgba(11,157,111,.15);
}
.ritus-blog-wrap .art-meta .spacer{margin-left:auto;display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.ritus-blog-wrap .art-meta .share-label{
  font-size:10.5px;color:var(--font);font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;
}
.ritus-blog-wrap .art-meta .share-icons{display:flex;gap:8px}
.ritus-blog-wrap .art-meta .icon-btn{
  width:36px;height:36px;border-radius:8px;
  background:#fff;border:1px solid var(--border-c);color:var(--font);
  display:flex;align-items:center;justify-content:center;transition:all .15s ease;
  text-decoration:none;padding:0;
}
.ritus-blog-wrap .art-meta .icon-btn:hover{border-color:var(--red);color:var(--red)}
.ritus-blog-wrap .art-meta .icon-btn svg{width:15px;height:15px;stroke:currentColor}

/* Cover */
.ritus-blog-wrap .art-cover{
  margin:36px 0;border-radius:14px;overflow:hidden;aspect-ratio:16/8;
  background:linear-gradient(135deg,var(--avorio) 0%,#e6ddd3 100%);
  position:relative;border:1px solid var(--border-c);
}
.ritus-blog-wrap .art-cover:not([style*="background-image"])::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(50% 40% at 25% 35%, rgba(139,26,26,.1), transparent 60%),
    radial-gradient(40% 40% at 80% 70%, rgba(44,44,44,.06), transparent 60%),
    repeating-linear-gradient(0deg, rgba(44,44,44,.04) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(90deg, rgba(44,44,44,.04) 0 1px, transparent 1px 32px);
}

/* Article body typography */
.ritus-blog-wrap .art-body{max-width:100%}
.ritus-blog-wrap .art-body > p{margin-top:20px;color:var(--carbone);font-size:16px;line-height:1.65}
.ritus-blog-wrap .art-body > p:first-child{
  margin-top:0;font-size:16px;color:var(--carbone);font-weight:500;line-height:1.6;
}
.ritus-blog-wrap .art-body > h2{
  margin-top:48px;padding-top:18px;
  font-size:26px;font-weight:800;color:var(--carbone);letter-spacing:-.01em;line-height:1.25;
  border-top:2px solid var(--carbone);
}
.ritus-blog-wrap .art-body > h3{
  margin-top:40px;font-size:20px;font-weight:800;color:var(--carbone);letter-spacing:-.005em;
}
.ritus-blog-wrap .art-body a{
  color:var(--red);border-bottom:1px solid rgba(139,26,26,.3);transition:border-color .15s;
  text-decoration:none;font-weight:700;
}
.ritus-blog-wrap .art-body a:hover{border-bottom-color:var(--red);}
.ritus-blog-wrap .art-body strong{color:var(--carbone);font-weight:700}
.ritus-blog-wrap .art-body em{font-style:italic}
.ritus-blog-wrap .art-body code{
  font-family:ui-monospace,monospace;font-size:14px;
  background:var(--avorio);color:var(--carbone);
  padding:2px 6px;border-radius:4px;border:1px solid var(--border-c);
}

/* Bullet list */
.ritus-blog-wrap .art-body ul{list-style:none;margin-top:20px;padding-left:0}
.ritus-blog-wrap .art-body ul li{
  position:relative;padding-left:28px;margin-top:12px;
  font-size:16px;line-height:1.55;color:var(--carbone);
}
.ritus-blog-wrap .art-body ul li::before{
  content:"";position:absolute;left:0;top:11px;width:12px;height:12px;background:var(--red);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2 L22 12 L12 22 L2 12 Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 2 L22 12 L12 22 L2 12 Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.ritus-blog-wrap .art-body ul li strong{color:var(--carbone);font-weight:700}

/* Numbered steps (ol) */
.ritus-blog-wrap .art-body ol{list-style:none;counter-reset:step;margin-top:24px;padding-left:0;display:flex;flex-direction:column;gap:20px}
.ritus-blog-wrap .art-body ol li{
  counter-increment:step;padding:20px 24px 20px 68px;background:#fff;
  border:1px solid var(--border-c);border-radius:12px;
  position:relative;font-size:16px;line-height:1.6;color:var(--font);
}
.ritus-blog-wrap .art-body ol li::before{
  content:counter(step);position:absolute;left:20px;top:20px;
  width:32px;height:32px;border-radius:8px;
  background:var(--red-soft);color:var(--red);
  display:flex;align-items:center;justify-content:center;
  font-size:14px;font-weight:800;
}
.ritus-blog-wrap .art-body ol li strong{display:block;color:var(--carbone);font-weight:800;margin-bottom:6px;font-size:16px}

/* Callout */
.ritus-blog-wrap .art-body .callout,
.ritus-blog-wrap .callout{
  margin-top:32px;padding:20px 24px;
  background:#fff;border:1px solid var(--border-c);border-left:3px solid var(--red);border-radius:10px;
  display:flex;gap:16px;align-items:flex-start;
}
.ritus-blog-wrap .callout .ico{
  width:36px;height:36px;border-radius:10px;
  background:var(--red-soft);color:var(--red);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.ritus-blog-wrap .callout .ico svg{width:18px;height:18px;stroke:var(--red)}
.ritus-blog-wrap .callout .body{flex:1}
.ritus-blog-wrap .callout .title{font-size:14px;font-weight:800;color:var(--carbone);letter-spacing:-.005em;margin-bottom:4px}
.ritus-blog-wrap .callout p{font-size:15px;line-height:1.6;color:var(--font);margin-top:0}
.ritus-blog-wrap .callout.warn{border-left-color:var(--yellow)}
.ritus-blog-wrap .callout.warn .ico{background:rgba(255,220,0,.2);color:#8a6d00}
.ritus-blog-wrap .callout.warn .ico svg{stroke:#8a6d00}
.ritus-blog-wrap .callout.ok{border-left-color:var(--green)}
.ritus-blog-wrap .callout.ok .ico{background:var(--green-soft);color:var(--green)}
.ritus-blog-wrap .callout.ok .ico svg{stroke:var(--green)}

/* Blockquote */
.ritus-blog-wrap .art-body blockquote{
  margin-top:36px;padding:0 0 0 28px;border-left:3px solid var(--red);
  font-size:24px;font-weight:500;color:var(--carbone);font-style:italic;
  line-height:1.35;letter-spacing:-.005em;
}
.ritus-blog-wrap .art-body blockquote cite{
  display:block;margin-top:12px;font-size:13px;color:var(--font);
  font-style:normal;font-weight:600;letter-spacing:.02em;
}
.ritus-blog-wrap .art-body blockquote cite::before{content:"— "}

/* Table */
.ritus-blog-wrap .art-body table{
  margin-top:32px;width:100%;border-collapse:collapse;font-size:14px;
  background:#fff;border:1px solid var(--border-c);border-radius:10px;overflow:hidden;
}
.ritus-blog-wrap .art-body table th{
  padding:14px 16px;text-align:left;background:var(--avorio);color:var(--carbone);
  font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  border-bottom:1px solid var(--border-c);
}
.ritus-blog-wrap .art-body table td{
  padding:14px 16px;color:var(--font);
  border-bottom:1px solid var(--border-c);vertical-align:top;
}
.ritus-blog-wrap .art-body table tr:last-child td{border-bottom:0}
.ritus-blog-wrap .art-body table td strong{color:var(--carbone);font-weight:700}

/* CTA inline */
.ritus-blog-wrap .art-body .cta-inline,
.ritus-blog-wrap .cta-inline{
  margin-top:40px;padding:24px 28px;background:var(--carbone);color:#fff;
  border-radius:14px;display:flex;gap:20px;align-items:center;justify-content:space-between;
}
.ritus-blog-wrap .cta-inline .txt h4{font-size:17px;font-weight:800;color:#fff;letter-spacing:-.005em;text-transform:none;margin-bottom:4px}
.ritus-blog-wrap .cta-inline .txt p{font-size:14px;color:rgba(255,255,255,.65);margin:0}
.ritus-blog-wrap .cta-inline .btn-primary{flex-shrink:0;background:#fff;color:var(--carbone);box-shadow:none}
.ritus-blog-wrap .cta-inline .btn-primary:hover{background:var(--avorio);color:var(--red);filter:none}


/* Related */
.ritus-blog-wrap .related{margin-top:80px}
.ritus-blog-wrap .related-head{
  display:flex;justify-content:space-between;align-items:baseline;
  padding-bottom:12px;border-bottom:2px solid var(--carbone);margin-bottom:24px;
}
.ritus-blog-wrap .related-head h2{font-size:22px;font-weight:800;color:var(--carbone);letter-spacing:-.005em}
.ritus-blog-wrap .related-head a{font-size:13px;color:var(--font);font-weight:600}
.ritus-blog-wrap .related-head a:hover{color:var(--red)}
.ritus-blog-wrap .related-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ritus-blog-wrap .rel-card{
  display:flex;flex-direction:column;gap:14px;
  padding:20px;background:#fff;border:1px solid var(--border-c);border-radius:12px;
  text-decoration:none;color:inherit;transition:all .2s ease;cursor:pointer;
}
.ritus-blog-wrap .rel-card:hover{border-color:var(--red);text-decoration:none}
.ritus-blog-wrap .rel-card .tile{
  width:44px;height:44px;border-radius:10px;
  background:var(--avorio);color:var(--red);
  display:flex;align-items:center;justify-content:center;
}
.ritus-blog-wrap .rel-card .tile svg{width:20px;height:20px;stroke:var(--red)}
.ritus-blog-wrap .rel-card .cat{
  font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--red);
}
.ritus-blog-wrap .rel-card h4{
  font-size:16px;font-weight:800;color:var(--carbone);line-height:1.3;
  letter-spacing:-.005em;text-transform:none;
}
.ritus-blog-wrap .rel-card .m{font-size:12px;color:var(--font);font-weight:500;margin-top:auto}

/* TOC (right column, only on single) */
.ritus-blog-wrap .toc{
  padding:0 0 0 24px;border-left:1px solid var(--border-c);
  position:sticky;top:20px;max-height:calc(100vh - 40px);overflow-y:auto;
}
.ritus-blog-wrap .toc h6{
  font-size:10.5px;color:var(--font);font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;margin-bottom:14px;
}
.ritus-blog-wrap .toc ul{
  list-style:none;display:flex;flex-direction:column;gap:6px;
  border-left:1px solid var(--border-c);padding-left:14px;margin:0;
}
.ritus-blog-wrap .toc li{color:var(--font);cursor:pointer;line-height:1.4;font-size:12.5px;font-weight:500;padding:2px 0}
.ritus-blog-wrap .toc li a{color:inherit;display:block;padding:2px 0;text-decoration:none}
.ritus-blog-wrap .toc li a:hover{color:var(--red)}
.ritus-blog-wrap .toc li.on{color:var(--red);font-weight:700;position:relative}
.ritus-blog-wrap .toc li.on::before{
  content:"";position:absolute;left:-15px;
  width:2px;height:16px;background:var(--red);border-radius:2px;top:5px;
}
.ritus-blog-wrap .toc .art-info{
  margin-top:32px;padding:16px;background:#fff;border:1px solid var(--border-c);border-radius:12px;
}
.ritus-blog-wrap .toc .art-info h6{font-size:10.5px;margin-bottom:10px}
.ritus-blog-wrap .toc .art-info ul{border:0;padding:0;gap:8px}
.ritus-blog-wrap .toc .art-info li{font-size:12px;color:var(--font);display:flex;column-gap: 10px;padding:0}
.ritus-blog-wrap .toc .art-info li strong{color:var(--carbone);font-weight:700}

/* ---------------------- Reading time icon ---------------------- */
.ritus-blog-wrap .read-time{
  display:inline-flex;align-items:center;gap:6px;
}
.ritus-blog-wrap .read-time svg{
  width:14px;height:14px;stroke:currentColor;flex-shrink:0;
}

/* ---------------------- Reveal ----------------------
   Fallback SEO/no-JS: di default il contenuto è visibile.
   L'animazione si attiva solo se il JS ha aggiunto .ritus-js-ready
   sull'<html>. Così Googlebot, crawler senza JS o utenti con JS bloccato
   vedono sempre il contenuto — la penalizzazione da "hidden content" è
   evitata.
*/
html.ritus-js-ready .ritus-blog-wrap .reveal{
  opacity:0;transform:translateX(-40px);
  transition:opacity .7s cubic-bezier(.25,.46,.45,.94),
             transform .7s cubic-bezier(.25,.46,.45,.94);
  transition-delay:var(--reveal-delay,0ms);will-change:opacity,transform;
}
html.ritus-js-ready .ritus-blog-wrap .reveal.in{opacity:1;transform:translateX(0)}
@media (prefers-reduced-motion:reduce){
  html.ritus-js-ready .ritus-blog-wrap .reveal{opacity:1;transform:none;transition:none}
}

/* Stagger interno ai gruppi */
.ritus-blog-wrap .feat-right .mini:nth-child(1){--reveal-delay:50ms}
.ritus-blog-wrap .feat-right .mini:nth-child(2){--reveal-delay:100ms}
.ritus-blog-wrap .feat-right .mini:nth-child(3){--reveal-delay:150ms}
.ritus-blog-wrap .rows .row:nth-child(1){--reveal-delay:0ms}
.ritus-blog-wrap .rows .row:nth-child(2){--reveal-delay:50ms}
.ritus-blog-wrap .rows .row:nth-child(3){--reveal-delay:100ms}
.ritus-blog-wrap .rows .row:nth-child(4){--reveal-delay:150ms}
.ritus-blog-wrap .rows .row:nth-child(5){--reveal-delay:200ms}
.ritus-blog-wrap .rows .row:nth-child(6){--reveal-delay:250ms}
.ritus-blog-wrap .rows .row:nth-child(7){--reveal-delay:300ms}
.ritus-blog-wrap .rows .row:nth-child(8){--reveal-delay:350ms}
.ritus-blog-wrap .rows .row:nth-child(9){--reveal-delay:400ms}
.ritus-blog-wrap .related-grid .rel-card:nth-child(1){--reveal-delay:0ms}
.ritus-blog-wrap .related-grid .rel-card:nth-child(2){--reveal-delay:50ms}
.ritus-blog-wrap .related-grid .rel-card:nth-child(3){--reveal-delay:100ms}
.ritus-blog-wrap .related-grid .rel-card:nth-child(4){--reveal-delay:150ms}

/* ---------------------- Responsive ----------------------
   Due sole regole:
   - >= 960px: desktop (grid multi-colonna, container 960)
   - <  960px: mobile (single column, container max 500, sidebar nascosta,
                       TOC del single riposizionata sotto la cover)
*/
@media (max-width:959px){

  /* Container mobile: max 500px come da convenzione sito */
  .ritus-blog-wrap .shell,
  .ritus-blog-wrap.is-single-post .shell{
    max-width:500px;
    grid-template-columns:minmax(0,1fr);
    padding:24px 15px 60px;
  }

  /* Sidebar sinistra nascosta ovunque */
  .ritus-blog-wrap .side{display:none}

  /* Main a piena larghezza, no padding orizzontale extra (il padding lo dà .shell) */
  .ritus-blog-wrap .main,
  .ritus-blog-wrap.is-single-post .main{padding:0}

  /* Single post: la TOC (link H2 + info articolo) scende tra cover e body
     invece di essere colonna a lato. display:contents "scioglie" il main
     come box, i suoi figli diventano grid item del .shell; poi
     grid-template-areas riordina la TOC subito dopo la cover. */
  .ritus-blog-wrap.is-single-post .shell{
    grid-template-areas:
      "head"
      "cover"
      "toc"
      "body"
      "related";
  }
  .ritus-blog-wrap.is-single-post .main{display:contents}
  .ritus-blog-wrap.is-single-post .art-head{grid-area:head}
  .ritus-blog-wrap.is-single-post .art-cover{grid-area:cover}
  .ritus-blog-wrap.is-single-post .art-body{grid-area:body}
  .ritus-blog-wrap.is-single-post .related{grid-area:related}
  .ritus-blog-wrap.is-single-post .toc{
    grid-area:toc;
    display:block;
    position:static;
    padding:24px 0;
    border-left:none;
    border-top:1px solid var(--border-c);
    border-bottom:1px solid var(--border-c);
    max-height:none;
    overflow:visible;
    margin:32px 0;
  }

  /* Su mobile nascondo il box "Info articolo" (categoria/tag/lettura):
     la categoria è già nel kicker, il tempo di lettura è già in meta bar. */
  .ritus-blog-wrap.is-single-post .toc .art-info{display:none}
  /* Nasconde la TOC laterale su archive/home/search */
  .ritus-blog-wrap:not(.is-single-post) .toc{display:none}

  /* Tipografia ridotta */
  .ritus-blog-wrap .head-block h1,
  .ritus-blog-wrap .art-head h1{font-size:32px}
  .ritus-blog-wrap .head-block .lead,
  .ritus-blog-wrap .art-head .lead{font-size:16px}
  .ritus-blog-wrap .art-body > h2{font-size:24px}

  /* Featured e related in single column */
  .ritus-blog-wrap .feat{grid-template-columns:1fr}
  .ritus-blog-wrap .related-grid{grid-template-columns:1fr}

  /* CTA inline verticale */
  .ritus-blog-wrap .cta-inline{flex-direction:column;align-items:flex-start;gap:16px}

  /* Righe articolo compatte */
  .ritus-blog-wrap .row{padding:16px;flex-wrap:wrap}
  .ritus-blog-wrap .row .m{margin-left:auto}

  /* Hero search ridotto */
  .ritus-blog-wrap .hero-search input{padding:16px 20px 16px 48px;font-size:15px}
  .ritus-blog-wrap .hero-search svg{left:18px}
  .ritus-blog-wrap .hero-search .k{display:none}

  /* Meta articolo mobile: verticale */
  .ritus-blog-wrap .art-meta{gap:12px}
  .ritus-blog-wrap .art-meta .who{flex:1 0 45%}
  .ritus-blog-wrap .art-meta .spacer{margin-left:0;width:100%;align-items:flex-end}

  /* Related head verticale */
  .ritus-blog-wrap .related-head{flex-direction:column}
  .ritus-blog-wrap .related-head a{margin-top:10px}
}