/* TFL Door reusable article comparison, source diagrams adapted from Wolf Creek Materials Showcase concepts. */
.tfl-comparison{--tc-green:#35523B;--tc-outline:#d8e2d9;clear:both;margin:2.1rem 0 2.8rem;padding:22px;background:#f8f9fa;border:1px solid var(--tc-outline);border-radius:12px;color:#26352a;font-family:inherit}
.tfl-comparison *{box-sizing:border-box}
.tfl-comparison__heading{color:var(--tc-green);font-size:clamp(1.25rem,2.6vw,1.7rem);font-weight:700;line-height:1.25;margin:0 0 12px}
.tfl-comparison__before{background:#fff;border-left:4px solid var(--tc-green);border-radius:7px;padding:12px 16px;margin:0 0 18px;line-height:1.55;font-size:.96rem}
.tfl-comparison__before p{margin:0 0 8px}
.tfl-comparison__before p:last-child{margin:0}
.tfl-comparison__label{font-weight:700;color:var(--tc-green)}
.tfl-comparison__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:stretch}
.tfl-comparison__card{margin:0;min-width:0;padding:15px;background:#fff;border:1px solid var(--tc-outline);border-radius:10px;display:flex;flex-direction:column;gap:10px}
.tfl-comparison__card h3{color:var(--tc-green);font-size:clamp(.96rem,1.8vw,1.15rem);font-weight:700;line-height:1.25;margin:0}
.tfl-comparison__kind{display:block;color:#657268;font-size:.75rem;letter-spacing:.025em;text-transform:uppercase;font-weight:600}
.tfl-comparison__face{height:clamp(108px,20vw,178px);position:relative;overflow:hidden;border:1px solid #c9cfc8;background-color:#c5aa86;background-image:var(--tfl-face,linear-gradient(125deg,#a48458,#e0c8a0,#906a47));background-size:cover;background-position:center;border-radius:7px;box-shadow:inset 0 0 12px #0002}
.tfl-comparison__face:after{content:"";position:absolute;inset:8%;border:6px solid #ffffff29;box-shadow:0 0 0 1px #0002,inset 0 0 0 1px #0002;border-radius:2px;pointer-events:none}
.tfl-comparison__face[data-kind="inset"]:after{inset:18%;border:5px solid #f6f6f5;box-shadow:0 0 0 13px #5c655d,0 0 0 18px #eeeeea}
.tfl-comparison__face[data-kind="overlay"]:after{inset:9%;border:5px solid #f6f6f5;box-shadow:0 0 0 2px #1b2b2159}
.tfl-comparison__face[data-kind="knob"]:after{inset:42% auto auto 47%;width:22px;height:22px;border:0;border-radius:50%;background:linear-gradient(140deg,#f4f3ef,#a1a39e,#626d63);box-shadow:0 4px 8px #0005}
.tfl-comparison__face[data-kind="pull"]:after{inset:38% auto auto 45%;width:13px;height:57px;border:3px solid #abb5b1;border-radius:6px;background:linear-gradient(90deg,#c9d2cf,#55635d,#cad4ce);box-shadow:0 3px 8px #0004}
.tfl-comparison__face[data-kind="knob"],.tfl-comparison__face[data-kind="pull"],.tfl-comparison__face[data-kind="inset"],.tfl-comparison__face[data-kind="overlay"]{background-image:linear-gradient(120deg,#e7e9e4,#afb6ac)}
.tfl-comparison__face[data-kind="painted"],.tfl-comparison__face[data-kind="lacquer"],.tfl-comparison__face[data-kind="conversion"],.tfl-comparison__face[data-kind="polyester"]{background-image:linear-gradient(125deg,#6b806c,#d2dccb,#6a7c6e)}
.tfl-comparison__face[data-kind="acrylic"]{background-image:linear-gradient(112deg,#ebf1f0,#f8fcfa 38%,#91b0a3 40%,#f3f9f7 52%,#becfc7)}
.tfl-comparison__face[data-kind="thermofoil"],.tfl-comparison__face[data-kind="3dlaminate"],.tfl-comparison__face[data-kind="pvc"]{background-image:linear-gradient(120deg,#d7d9d3,#ffffff 36%,#a4aaa3)}
.tfl-comparison__face[data-kind="mdf"]{background-image:repeating-linear-gradient(20deg,#b39875 0 4px,#c1a984 4px 6px,#aa8c67 6px 8px)}
.tfl-comparison__face[data-kind="particleboard"]{background-image:repeating-linear-gradient(133deg,#b69c76 0 5px,#897c65 5px 7px,#d0bb93 7px 13px)}
.tfl-comparison__face[data-kind="plywood"]{background-image:repeating-linear-gradient(170deg,#d0ac77 0 8px,#996842 8px 10px,#caa072 10px 17px)}
.tfl-comparison__face[data-kind="whiteoak"],.tfl-comparison__face[data-kind="solidwood"],.tfl-comparison__face[data-kind="veneer"]{background-image:repeating-linear-gradient(95deg,#d2b284 0 17px,#b58e5f 17px 19px,#d7b888 19px 39px,#8f673f 39px 40px)}
.tfl-comparison__face[data-kind="redoak"]{background-image:repeating-linear-gradient(95deg,#d4a17f 0 17px,#a7755f 17px 19px,#dcad89 19px 39px,#966149 39px 40px)}
.tfl-comparison__illustrative{color:#68746d;font-size:.7rem;margin:-5px 0 0;font-style:italic}
.tfl-comparison__stack{display:flex;align-items:stretch;gap:3px;min-height:37px;overflow:hidden}
.tfl-comparison__stack span{display:flex;align-items:center;justify-content:center;text-align:center;padding:3px 5px;min-width:0;flex:1;border-radius:3px;background:#d7ddcf;border:1px solid #9aa998;font-size:.64rem;line-height:1.2;overflow-wrap:anywhere;transition:transform .22s ease}
.tfl-comparison__stack span:nth-child(2){flex:2;background:#c2ae91;border-color:#9b886c}
.tfl-comparison__stack span:last-child{background:#e3e8df}
.tfl-comparison__card:hover .tfl-comparison__stack span:nth-child(1),.tfl-comparison__card:focus-within .tfl-comparison__stack span:nth-child(1){transform:translateY(-4px)}
.tfl-comparison__card:hover .tfl-comparison__stack span:last-child,.tfl-comparison__card:focus-within .tfl-comparison__stack span:last-child{transform:translateY(4px)}
.tfl-comparison__detail{font-size:.84rem;line-height:1.5;color:#354239;margin:0}
.tfl-comparison__detail strong{color:var(--tc-green)}
.tfl-comparison__bottom{margin:13px 0 0;color:#56665a;font-size:.78rem;line-height:1.45}
.tfl-comparison a{color:#35523B;text-decoration:underline}
@media(max-width:600px){.tfl-comparison{padding:11px;margin:1.5rem 0}.tfl-comparison__grid{gap:7px}.tfl-comparison__card{padding:8px;gap:7px}.tfl-comparison__before{padding:10px}.tfl-comparison__face{height:110px}.tfl-comparison__stack span{font-size:.55rem;padding:2px}.tfl-comparison__detail{font-size:.73rem}.tfl-comparison__kind{font-size:.64rem}}
@media(prefers-reduced-motion:reduce){.tfl-comparison__stack span{transition:none!important}}