/* Sezione "prima / dopo" di /struttura-e-spazi/ (CRML_Public_Riqualifica).
   Selettori html body: devono vincere sugli stili globali di Kubio. */
html body .crml-rq{box-sizing:border-box;clear:both;width:100%;max-width:1120px;margin:48px auto 40px;padding:32px 28px 24px;background:#fff;border:1px solid #f3d3e2;border-top:6px solid #be185d;border-radius:18px;color:#0f172a;font-family:Inter,'Segoe UI',system-ui,sans-serif;text-align:left;text-transform:none;letter-spacing:normal}
html body .crml-rq *{box-sizing:border-box}
html body .crml-rq .crml-rq-kicker{margin:0 0 8px;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#be185d;line-height:1.4}
html body .crml-rq .crml-rq-title{margin:0 0 16px;padding:0;font-family:Sora,Inter,'Segoe UI',sans-serif;font-size:clamp(26px,4.2vw,42px);font-weight:800;line-height:1.12;letter-spacing:-.01em;color:#0f172a;text-transform:none}
html body .crml-rq .crml-rq-title span{color:#be185d}
html body .crml-rq .crml-rq-intro{margin:0 0 12px;max-width:820px;font-size:clamp(16px,1.6vw,18px);line-height:1.6;color:#1e293b}
html body .crml-rq .crml-rq-car{margin-top:24px}
html body .crml-rq .crml-rq-track{position:relative;display:flex;align-items:flex-start;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;border-radius:14px;transition:height .25s ease}
html body .crml-rq .crml-rq-track::-webkit-scrollbar{display:none}
html body .crml-rq .crml-rq-track:focus-visible{outline:3px solid #f59e0b;outline-offset:3px}
html body .crml-rq .crml-rq-slide{flex:0 0 100%;min-width:0;margin:0;padding:0;scroll-snap-align:start;scroll-snap-stop:always}
html body .crml-rq .crml-rq-slide figcaption{margin:12px 2px 0;padding:0;font-size:16px;line-height:1.45;font-weight:500;color:#0f172a;text-align:left}

/* foto: larghezza proporzionale al rapporto --r, cosi le righe hanno la stessa altezza senza ritagli */
html body .crml-rq .crml-rq-ph{position:relative;flex:var(--r,1.33) 1 0%;min-width:0;border-radius:12px;overflow:hidden;background:#f1f5f9}
html body .crml-rq .crml-rq-ph img{display:block;width:100%;height:auto;max-width:none;margin:0;padding:0;border:0;border-radius:0;box-shadow:none}
html body .crml-rq .crml-rq-tag{position:absolute;left:10px;top:10px;z-index:1;padding:6px 12px;border-radius:999px;background:#0f172a;color:#fff;font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;line-height:1.2}
html body .crml-rq .crml-rq-tag--dopo{background:#be185d}

html body .crml-rq .crml-rq-pair,
html body .crml-rq .crml-rq-duo{display:flex;gap:10px}
html body .crml-rq .crml-rq-mosaic{display:grid;grid-template-columns:1fr 1fr;gap:10px}
html body .crml-rq .crml-rq-oggi{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}

html body .crml-rq .crml-rq-nav{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:16px}
html body .crml-rq .crml-rq-arrow{display:none;width:48px;height:48px;min-width:48px;padding:0;border:0;border-radius:50%;background:#be185d;color:#fff;font-size:22px;line-height:1;cursor:pointer}
html body .crml-rq .is-js .crml-rq-arrow{display:inline-flex;align-items:center;justify-content:center}
html body .crml-rq .crml-rq-arrow:disabled{background:#e2e8f0;color:#94a3b8;cursor:default}
html body .crml-rq .crml-rq-arrow:focus-visible,
html body .crml-rq .crml-rq-dot:focus-visible{outline:3px solid #f59e0b;outline-offset:2px}
html body .crml-rq .crml-rq-dots{display:none;align-items:center;gap:2px}
html body .crml-rq .is-js .crml-rq-dots{display:flex}
/* bottone 28px con pallino 10px al centro: area di tocco comoda */
html body .crml-rq .crml-rq-dot{position:relative;width:28px;height:28px;min-width:0;padding:0;border:0;background:transparent;cursor:pointer}
html body .crml-rq .crml-rq-dot::before{content:'';position:absolute;left:9px;top:9px;width:10px;height:10px;border-radius:50%;background:#f3c4d8}
html body .crml-rq .crml-rq-dot.is-on::before{background:#be185d;transform:scale(1.3)}
html body .crml-rq .crml-rq-note{margin:14px 0 0;font-size:13px;color:#64748b;text-align:center;line-height:1.4}

/* tablet in verticale e telefoni: prima sopra, dopo sotto */
@media (max-width:720px){
  html body .crml-rq{margin:32px auto 28px;padding:22px 14px 18px;border-radius:14px}
  html body .crml-rq .crml-rq-pair{flex-direction:column}
  html body .crml-rq .crml-rq-pair .crml-rq-ph{flex:none;width:100%}
  html body .crml-rq .crml-rq-mosaic{grid-template-columns:1fr}
  html body .crml-rq .crml-rq-oggi{grid-template-columns:1fr 1fr}
  html body .crml-rq .crml-rq-oggi .crml-rq-ph:first-child{grid-column:1 / -1}
  html body .crml-rq .crml-rq-slide figcaption{font-size:15px}
  html body .crml-rq .crml-rq-tag{font-size:12px;padding:5px 10px}
}
@media (prefers-reduced-motion:reduce){
  html body .crml-rq .crml-rq-track{transition:none;scroll-behavior:auto}
}