/* Cards two per row; on hover the line under them and an arrow; a click opens the card in a small window in the middle
   of the page (a native <dialog>), the page dimmed and blurred; a click outside, the cross or Esc closes it. Needs ../base/base.css. */

/* ---------- the four answers for whoever approves the budget ---------- */
.dm-griglia{list-style:none;padding:0;margin-top:clamp(48px,6vw,80px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.dm{position:relative;display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:14px;padding:28px 30px 30px;border-radius:26px;background:var(--fondo-2);box-shadow:inset 0 0 0 1px var(--riga),inset 0 1px 0 oklch(96% .005 262/.05);cursor:pointer;transition:box-shadow .3s var(--e-ui),background-color .3s var(--e-ui)}
.dm-q{display:flex;align-items:center;gap:10px;font-size:calc(16 * var(--px));font-weight:600;color:var(--blu-t)}
.dm-q i{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;background:var(--blu-velo);font-style:normal;font-size:calc(13 * var(--px))}
.dm h3{padding-right:44px;font-size:var(--t-lead);font-weight:650;line-height:1.18;letter-spacing:-.026em;text-wrap:pretty}
.dm-desc{font-size:calc(17 * var(--px));line-height:1.5;color:var(--ink-2);text-wrap:pretty}
/* at rest only the question and the answer; on hover (on a phone, once in view) the line under it, the pictures in the
   words and the arrow; a click opens it in a small window in the middle, over the page dimmed and blurred */
.dm-desc,.dm-open{opacity:0;transition:opacity .35s var(--e-ui),transform .5s var(--e-molla)}
.dm-desc{transform:translateY(6px)}
.dm-open{position:absolute;top:22px;right:22px;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--piano);box-shadow:inset 0 0 0 1px var(--riga-2);color:var(--ink);transform:scale(.8)}
.dm-open svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s var(--e-molla)}
.dm:focus-within .dm-desc,.dm:focus-within .dm-open{opacity:1;transform:none}
.dm-more{min-width:0}
.dm-dialog{width:min(760px,100% - 24px);max-height:min(88vh,860px);margin:auto;padding:0;border:0;border-radius:26px;background:var(--fondo-2);color:var(--ink);box-shadow:inset 0 0 0 1px var(--riga-2),0 40px 120px -30px var(--ombra-forte);overflow:auto;overscroll-behavior:contain}
.dm-dialog::backdrop{background:oklch(18% .045 262/.42);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.dm-dialog[open]{animation:dm-in .45s var(--e-molla)}
.dm-dialog.wide{width:min(1180px,100% - 24px);max-height:min(92vh,900px)}
.dm-dialog[open]::backdrop{animation:dm-veil .3s var(--e-ui)}
@keyframes dm-in{from{opacity:0;transform:translateY(14px) scale(.96)}}
@keyframes dm-veil{from{opacity:0}}
.dm-box{position:relative;display:grid;gap:14px;padding:30px 32px 32px}
.dm-box h3{padding-right:48px;font-size:var(--t-lead);font-weight:650;line-height:1.18;letter-spacing:-.026em;text-wrap:pretty}
.dm-box .dm-more{margin-top:8px}
.dm-close{position:absolute;top:22px;right:22px;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--piano);box-shadow:inset 0 0 0 1px var(--riga-2);color:var(--ink)}
.dm-close svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
@media (hover:hover){.dm-close:hover{background:var(--piano-2)}}
:root:has(.dm-dialog[open]){overflow:hidden}
@media (hover:hover){.dm:hover .dm-desc,.dm:hover .dm-open{opacity:1;transform:none}.dm:hover{background:color-mix(in oklch,var(--fondo-2),var(--ink) 4%)}.dm-open:hover{background:var(--blu);box-shadow:none}}
@media (hover:none){.dm.vis .dm-desc,.dm.vis .dm-open{opacity:1;transform:none;transition-delay:.5s}}
.dm-more-t{font-size:calc(14 * var(--px));font-weight:600;color:var(--ink-3);margin-bottom:10px}
.dm-dept{list-style:none;padding:0;display:grid}
.dm-dept li{display:grid;grid-template-columns:120px minmax(60px,1fr) auto auto;align-items:center;gap:16px;padding:12px 0;font-size:calc(15 * var(--px));color:var(--ink-2)}
.dm-dept li+li{box-shadow:inset 0 1px 0 var(--riga)}
.dm-dept-n{color:var(--ink);font-weight:560}
.dm-dept-bar{height:6px;border-radius:6px;background:linear-gradient(90deg,var(--blu-t) calc(var(--v) * 100%),var(--riga-2) 0)}
.dm-dept b{color:var(--ink);font-weight:650}.dm-dept b.su{color:var(--ok)}
.dm-swap-h{display:grid;grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr);gap:14px;margin-bottom:6px;font-size:calc(14 * var(--px));font-weight:600;color:var(--ink-3)}
.dm-swap-h span+span{grid-column:3;color:var(--blu-t)}
.dm-swap ul{list-style:none;padding:0}
.dm-swap li{display:grid;grid-template-columns:minmax(0,1fr) 28px minmax(0,1fr);align-items:center;gap:14px;padding:14px 0;font-size:calc(16 * var(--px));line-height:1.35}
.dm-swap li+li{box-shadow:inset 0 1px 0 var(--riga)}
.dm-swap li:has(img){grid-template-columns:36px minmax(0,1fr) 28px minmax(0,1fr)}
.dm-swap:has(img) .dm-swap-h{padding-left:50px}
.dm-swap img{width:36px;height:36px;object-fit:contain;filter:grayscale(1);opacity:.7}
.dm-swap s{color:var(--ink-3);text-decoration-color:oklch(80% .14 75/.7);text-decoration-thickness:1.5px}
.dm-swap li i{width:28px;height:2px;background:var(--blu-t);position:relative}
.dm-swap li i::after{content:"";position:absolute;right:0;top:-4px;width:8px;height:8px;border-top:2px solid var(--blu-t);border-right:2px solid var(--blu-t);transform:rotate(45deg)}
.dm-swap li span{color:var(--ink);font-weight:560}
.dm-swap li .dm-prima{color:var(--ink-2);font-weight:400}   /* a "before" that stays (the course), not struck */

.dm .inline-pic{font-size:1.2em;vertical-align:-.2em;width:0;overflow:visible;opacity:0;transform:scale(.3);transition:width .55s var(--e-molla),margin .55s var(--e-molla),opacity .25s var(--e-ui),transform .6s var(--e-molla)}
@media (hover:hover){.dm:hover .inline-pic{width:var(--w);margin-right:.22em;opacity:1;transform:none}}
@media (hover:none){.dm.vis .inline-pic{width:var(--w);margin-right:.22em;opacity:1;transform:none;transition-delay:.7s}}
.dm:focus-within .inline-pic{width:var(--w);margin-right:.22em;opacity:1;transform:none}

@media (max-width:760px){
  .dm-griglia{grid-template-columns:minmax(0,1fr)}
  .dm-box{padding:24px 22px 26px}
  .dm{padding:22px 22px 24px;border-radius:22px}
  .dm-dept li{grid-template-columns:minmax(0,1fr) auto;gap:4px 12px}
  .dm-dept-bar{grid-column:1/-1;grid-row:2}
  .dm-dept li>span:last-child{grid-column:2;grid-row:1}
  .dm-dept li>span:nth-child(3){grid-column:1/-1;grid-row:3;font-size:calc(14 * var(--px))}
  .dm-swap li,.dm-swap li:has(img){grid-template-columns:minmax(0,1fr);gap:4px}
  .dm-swap li img,.dm-swap li i,.dm-swap-h{display:none}
}