/* Sports coatings: scenarios, finished coatings and components, roll formats,
   EPDM codes and visualiser, norms; facts and formats on product pages. */
/* Scenarios */
.cat-scenarios{padding-top:0}
.scen-grid{display:grid;grid-template-columns:repeat(5,minmax(250px,1fr));gap:16px;overflow-x:auto;padding:4px 2px 18px;scroll-snap-type:x proximity;scrollbar-width:thin}
.scen-card{display:flex;flex-direction:column;background:white;border:1px solid var(--grey-d9);min-width:0;scroll-snap-align:start}
.scen-media{position:relative;margin:0;aspect-ratio:4/3;overflow:hidden;background:var(--grey-d8d8d6)}
.scen-media img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.scen-card:hover .scen-media img{transform:scale(1.04)}
.scen-num{position:absolute;left:16px;top:14px;font-size:.75rem;letter-spacing:.06em;color:white;text-shadow:0 1px 8px var(--black-a53)}
.scen-body{display:flex;flex-direction:column;flex:1;padding:22px}
.scen-body h3{font-size:1.35rem;letter-spacing:-.035em}
.scen-body>p:not(.scen-label){margin-top:10px;font-size:.9rem;line-height:1.55;color:var(--muted)}
.scen-label{display:block;margin-top:18px;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--grey-8a)}
.scen-products{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.scen-products a{display:inline-block;padding:6px 11px;border:1px solid var(--grey-d5);border-radius:100px;font-size:.8rem;transition:background .3s,color .3s,border-color .3s}
.scen-products a:hover{background:var(--ink);border-color:var(--ink);color:white}
.scen-project{margin-top:auto;padding-top:16px;display:grid;grid-template-columns:minmax(0,1fr) 18px;gap:2px 10px;align-items:end;font-size:.85rem;line-height:1.4}
.scen-project .scen-label{grid-column:1/-1;margin-top:18px;padding-top:14px;border-top:1px solid var(--grey-e3)}
.scen-project .arrow{transition:transform .3s var(--ease)}
.scen-project:hover .arrow{transform:translateX(4px)}
.scen-project:hover>span:nth-child(2){color:var(--red)}
/* Finished coatings and components */
.split-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.split-col{background:white;border:1px solid var(--grey-d9);padding:30px}
.split-col h3{font-size:clamp(1.4rem,2vw,1.9rem);letter-spacing:-.04em}
.split-col>p{margin-top:8px;color:var(--muted);font-size:.92rem}
.split-col--parts{background:var(--grey-f7f6f4)}
.split-list{list-style:none;margin:20px 0 0;padding:0}
.split-list a{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.2fr) 18px;gap:16px;align-items:center;padding:13px 0;border-top:1px solid var(--grey-e3);font-size:.92rem}
.split-name{font-weight:500}
.split-kind{color:var(--muted);font-size:.84rem;line-height:1.45}
.split-list a:hover .split-name{color:var(--red)}
.split-list .arrow{transition:transform .3s var(--ease)}
.split-list a:hover .arrow{transform:translateX(4px)}
.split-col .text-link{margin-top:18px}
/* Roll formats */
.cat-rolls{padding-top:0}
.rolls-grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:16px;align-items:start}
.rolls-side{background:white;border:1px solid var(--grey-d9);padding:26px}
.rolls-side .scen-label{margin:0 0 12px}
.roll-table-wrap{overflow-x:auto;background:white;border:1px solid var(--grey-d9)}
.roll-table{width:100%;border-collapse:collapse;font-size:.92rem;font-variant-numeric:tabular-nums}
.roll-table caption{text-align:left;padding:18px 22px 4px;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--grey-8a)}
.roll-table th,.roll-table td{padding:13px 22px;text-align:left;border-bottom:1px solid var(--grey-e3);white-space:nowrap}
.roll-table thead th{font-weight:500;font-size:.8rem;color:var(--muted)}
.roll-table tbody th{font-weight:600}
.roll-table tbody tr:last-child>*{border-bottom:0}
.roll-table tbody tr:hover{background:var(--grey-f7f6f4)}
.prod-formats{margin-top:20px}
.prod-formats .roll-table-wrap{margin-top:18px}
.prod-formats .roll-table caption{padding-left:22px}
.roll-note{margin-top:12px;font-size:.8rem;color:var(--muted)}
.prod-formats .text-link{margin-top:14px}
/* EPDM palette codes */
.swatches .swatch-name{display:block;margin-top:10px;font-size:.78rem;color:var(--grey-cf)}
.swatches .swatch-code{display:block;margin-top:3px;font-size:.7rem;letter-spacing:.02em;color:var(--grey-8f);font-variant-numeric:tabular-nums}
.cat-epdm p.swatch-note{max-width:640px;margin-top:22px;font-size:.85rem;color:var(--grey-a9)}
/* Visualiser */
.vis{margin-top:70px;border-top:1px solid var(--grey-3a);padding-top:26px}
.vis-head .eyebrow{color:var(--grey-a9)}
.vis-head h3{margin-top:6px;font-size:clamp(1.5rem,2.4vw,2.2rem);letter-spacing:-.04em}
.cat-epdm .vis-head p:not(.eyebrow){margin-top:12px}
.vis-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(24px,4vw,56px);align-items:center;margin-top:30px}
.vis-stage{margin:0;padding:clamp(10px,2vw,26px);background:radial-gradient(60% 60% at 50% 55%,var(--grey-2a),transparent 75%)}
.vis-svg{display:block;width:100%;height:auto}
.vis-side{fill:var(--grey-3a)}
.vis-side--dark{fill:var(--grey-26)}
.vis-zone{cursor:pointer;transition:filter .3s}
.vis-zone.is-active{filter:brightness(1.18) saturate(1.1)}
.vis-zone:hover{filter:brightness(1.1)}
.vis-label{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--grey-9a);margin:0 0 10px}
.cat-epdm p.vis-label{margin-top:0;color:var(--grey-9a)}
.vis-zones{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.vis-zone-btn{min-height:40px;padding:8px 15px;border:1px solid var(--grey-55);border-radius:100px;background:transparent;color:var(--grey-dd);font-size:.84rem;transition:background .3s,color .3s,border-color .3s}
.vis-zone-btn:hover{border-color:var(--grey-aa);color:white}
.vis-zone-btn[aria-pressed=true]{background:white;border-color:white;color:var(--ink)}
.vis-swatches{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:24px}
.vis-swatch{display:flex;flex-direction:column;align-items:flex-start;padding:0;background:none;color:var(--grey-cf);text-align:left;font-size:.74rem;line-height:1.35;min-width:0}
.vis-swatch img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:2px;outline:2px solid transparent;outline-offset:2px;transition:outline-color .25s,transform .4s var(--ease)}
.vis-swatch span{margin-top:6px;max-width:100%}
.vis-swatch .vis-swatch-code{margin-top:1px;color:var(--grey-8f);font-size:.68rem}
.vis-swatch:hover img{transform:translateY(-3px)}
.vis-swatch[aria-pressed=true] img{outline-color:white}
.vis-summary{margin:0 0 22px}
.vis-summary div{display:flex;justify-content:space-between;gap:16px;padding:10px 0;border-top:1px solid var(--grey-3a);font-size:.86rem}
.vis-summary dt{color:var(--grey-a9)}
.vis-summary dd{margin:0;display:flex;align-items:center;gap:8px;text-align:right;color:white}
.vis-dot{width:16px;height:16px;border-radius:50%;flex-shrink:0;object-fit:cover}
.vis-actions{display:flex;flex-wrap:wrap;align-items:center;gap:22px}
.vis-reset{color:var(--grey-dd);border-color:var(--grey-77)}
.vis-reset:hover{color:white}
.cat-epdm .vis-noscript{margin:0 0 18px;font-size:.85rem}
/* Norms */
.cat-norms{background:var(--grey-e8e8e6)}
.norm-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.norm-card{background:white;border:1px solid var(--grey-d9);padding:26px;min-width:0}
.norm-code{font-size:.75rem;letter-spacing:.04em;color:var(--action);font-weight:500;overflow-wrap:anywhere}
.norm-card h3{margin-top:14px;font-size:1.25rem;letter-spacing:-.03em}
.norm-card p:not(.norm-code){margin-top:10px;font-size:.9rem;line-height:1.55;color:var(--muted)}
.cat-norms .text-link{margin-top:26px}
/* Product facts with icons */
.sport-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:28px 0 0}
.sport-facts div{border-top:1px solid var(--grey-3a);padding-top:12px;min-width:0}
.sport-facts dt{display:flex;align-items:center;gap:8px;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--grey-9a);margin-bottom:8px}
.sport-facts dt svg{flex-shrink:0;color:var(--red);width:22px;height:22px}
.sport-facts dd{margin:0;font-size:1rem;line-height:1.35;color:white;overflow-wrap:anywhere}
@media(max-width:1150px){
.norm-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.rolls-grid,.vis-grid{grid-template-columns:minmax(0,1fr)}
.sport-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
.split-grid{grid-template-columns:minmax(0,1fr)}
.split-col{padding:22px}
.split-list a{grid-template-columns:minmax(0,1fr) 18px;gap:4px 12px}
.split-kind{grid-column:1;grid-row:2}
.split-list .arrow{grid-column:2;grid-row:1/3}
.vis{margin-top:48px}
.roll-table th,.roll-table td{padding:11px 14px}
.roll-table caption{padding:14px 14px 4px}
.norm-card{padding:22px}
}
@media(max-width:600px){
.norm-grid{grid-template-columns:minmax(0,1fr)}
.scen-grid{grid-template-columns:repeat(5,minmax(250px,82vw))}
}
/* Captions of the partner's EPDM objects */
.gallery-caption{position:absolute;left:0;right:0;bottom:0;padding:28px 14px 10px;background:linear-gradient(transparent,var(--black-a72));color:var(--grey-e6);font-size:.74rem;line-height:1.4;pointer-events:none}
.gallery-caption span{white-space:nowrap}
@media(max-width:600px){
.vis-summary div{flex-wrap:wrap;gap:4px 16px}
.vis-summary dd{text-align:left}
}
@supports (grid-template-rows:subgrid){
/* Rows stay level across scenario cards whatever the text length (Konstantin, 10.10.2026) */
.scen-grid{grid-template-rows:auto repeat(5,auto)}
.scen-card{display:grid;grid-row:span 6;grid-template-rows:subgrid;row-gap:0}
.scen-body{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:0;align-content:start}
.scen-body>.scen-label{margin-top:18px}
.scen-products{align-self:start}
.scen-project{margin-top:0;align-self:start}
.cat-epdm .swatches{grid-auto-rows:auto}
.cat-epdm .swatches li{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;align-content:start}
.vis-swatches{grid-auto-rows:auto;row-gap:0}
.vis-swatch{display:grid;grid-row:span 3;grid-template-rows:subgrid;align-content:start;margin-bottom:10px}
.norm-grid{grid-auto-rows:auto;row-gap:0}
.norm-card{display:grid;grid-row:span 3;grid-template-rows:subgrid;align-content:start;margin-bottom:16px}
}