/* Introduktion och övning för fördelning. */
.honors .card.drive-card{aspect-ratio:auto;border:0;border-radius:0;overflow:visible;background:transparent}
.honors .card.drive-card img{display:block;width:100%;height:auto;object-fit:contain;transform:none}
/* Visa hela originalbilden med dess naturliga proportioner. */
.distribution-exercise .card.drive-card{aspect-ratio:auto;border:0;border-radius:0;overflow:visible;background:transparent}
.distribution-exercise .card img{display:block;width:100%;height:auto;object-fit:contain;transform:none}
.distribution-exercise .progress{width:100%;margin:16px 0 24px}
.distribution-workspace{max-width:1100px;margin-inline:auto}
.distribution-exercise .hand{grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;max-width:600px;align-items:start;margin:24px auto 32px}
.distribution-exercise .suit-row{text-align:center;border:1px solid #ffffff70;border-radius:12px;padding:14px 10px}
.distribution-exercise .suit-label{font-size:20px;white-space:nowrap}
.distribution-exercise .suit-symbol{color:#111;font-size:26px}
.distribution-exercise .suit-symbol.red{color:#d00000}
.distribution-exercise .cards{flex-direction:column;flex-wrap:nowrap;align-items:center;justify-content:flex-start;gap:0;isolation:isolate}
.distribution-exercise .card{width:80px}
/* Fast avstånd mellan överkanterna fungerar även för liggande originalbilder. */
.distribution-exercise .cards>.card:not(:last-child){height:60px;margin-bottom:0}
/* Placera även reservkortens valör och symbol i den synliga överdelen. */
.distribution-exercise .card .simple{flex-direction:row;align-items:flex-start;justify-content:center;gap:4px;padding-top:8px;font-size:24px}
.distribution-exercise .card .simple span{font-size:26px}
.distribution-exercise h1{font-size:clamp(26px,3vw,38px);line-height:1.2;text-align:left}
.distribution-exercise .answer-prompt{text-align:center;margin:20px 0 12px}
.distribution-exercise .answers{grid-template-columns:repeat(2,minmax(0,1fr));max-width:440px;margin-inline:auto;gap:12px}
.distribution-exercise .answer{justify-content:center;gap:10px;min-height:54px;padding:12px 10px;font-size:20px}
.distribution-exercise .feedback{max-width:680px;margin-inline:auto;font-size:18px}
.distribution-exercise .feedback:empty{padding:0}
.distribution-exercise #next{display:block;margin:12px auto 0}
.distribution-exercise #next[hidden]{display:none}
.distribution-exercise>.back{display:block;text-align:left;margin-top:48px;min-height:44px}
@media(max-width:700px){
 .distribution-exercise .hand{grid-template-columns:repeat(4,minmax(68px,1fr));gap:4px}
 .distribution-exercise .suit-row{padding:8px 0;border:0;border-radius:0}
 .distribution-exercise .suit-label{font-size:12px;white-space:normal}
 .distribution-exercise .suit-symbol{display:block;font-size:24px}
 .distribution-exercise .card{width:68px}
 .distribution-exercise .cards>.card:not(:last-child){height:51px;margin-bottom:0}
 .distribution-exercise .answer{font-size:18px;gap:8px}
}
main:has(> .distribution-intro){padding-top:22px;padding-bottom:30px}
.distribution-heading{border-bottom:1px solid #ffffff8c;padding-bottom:16px;margin-bottom:18px}
.distribution-heading .eyebrow{font-size:12px;letter-spacing:1.5px;margin:0 0 10px}
.distribution-heading h1{font-size:clamp(28px,7vw,40px);line-height:1.12;margin:0}
.distribution-panels{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;align-items:start}
.distribution-panel{min-width:0;border:3px solid #ffffffbd;border-radius:14px;padding:16px;background:transparent}
.distribution-video iframe{display:block;width:100%;aspect-ratio:16/9;border:0;border-radius:8px;background:#003f26}
.distribution-video .video-caption{font-size:14px;line-height:1.4;margin:10px 0 0}
.distribution-explanation h2{font-size:24px;margin:0 0 12px}
.distribution-explanation p{font-size:16px;line-height:1.5;margin:0 0 16px}
.distribution-examples,.distribution-types{margin:0;padding:0}
.distribution-examples>div{margin:0 0 12px}
.distribution-examples dt{font-size:20px;line-height:1.3;margin-bottom:3px}
.distribution-examples dd,.distribution-types dd{margin:0;font-size:16px;line-height:1.45}
.distribution-explanation h3{border-top:1px solid #ffffff8c;padding-top:14px;margin:16px 0 12px;font-size:19px}
.distribution-types>div{margin-bottom:10px}
.distribution-types>div:last-child{margin-bottom:0}
.distribution-types dt{font-size:16px;line-height:1.4;margin-bottom:2px}
.distribution-levels{margin-top:24px}
.distribution-levels h2{font-size:24px;margin:0 0 12px}
.distribution-levels .levels{gap:10px;margin:0 0 12px}
.distribution-levels .level{font-size:18px;min-width:44px;min-height:44px;padding:10px 14px}
.distribution-levels #level-description{font-size:16px;line-height:1.45;margin:0 0 16px}
.distribution-levels .primary{width:100%;min-height:52px;font-size:20px;padding:14px 20px}
.distribution-intro>.back{font-size:16px;min-height:44px;margin-top:14px;text-align:left}
@media(min-width:960px){
 main:has(> .distribution-intro){padding-top:40px;padding-bottom:48px}
 .distribution-heading{padding-bottom:22px;margin-bottom:26px}
 .distribution-heading .eyebrow{font-size:14px;margin-bottom:14px}
 .distribution-heading h1{font-size:48px}
 .distribution-panels{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px}
 .distribution-panel{padding:24px}
 .distribution-levels{margin-top:30px}
 .distribution-levels .primary{width:auto;min-width:250px}
}