@import url("./preventive-dentistry.css");

:where(.tmj-symptoms,.tmj-causes,.tmj-evaluation,.tmj-treatment,.tmj-relief,.tmj-journey,.tmj-faq) *{box-sizing:border-box}
:where(.tmj-symptoms,.tmj-causes,.tmj-evaluation,.tmj-treatment,.tmj-relief,.tmj-journey,.tmj-faq) :where(p,figure){margin:0}
:where(.tmj-symptoms,.tmj-causes,.tmj-evaluation,.tmj-treatment,.tmj-relief,.tmj-journey,.tmj-faq) .heading{margin:18px 0 0;color:var(--navy);font-family:var(--display);font-size:clamp(2.25rem,4.6vw,4.35rem);font-weight:400;letter-spacing:-.04em;line-height:1.05;text-wrap:balance}
:where(.tmj-symptoms,.tmj-causes,.tmj-evaluation,.tmj-treatment,.tmj-relief,.tmj-journey,.tmj-faq) .heading em{display:block;margin-top:12px;color:var(--gold-text);font-family:var(--script);font-size:clamp(2.8rem,5vw,4.375rem);font-weight:400;letter-spacing:0;line-height:1}
.tmj-header{max-width:1020px;margin-bottom:clamp(44px,6vw,82px)}
.tmj-header>p:not(.preventive-eyebrow),.tmj-causes__content>p:not(.preventive-eyebrow),.tmj-evaluation__content>p:not(.preventive-eyebrow),.tmj-relief__content>p:not(.preventive-eyebrow){color:#515a70;font-size:clamp(1.02rem,.98rem + .18vw,1.16rem);line-height:1.8}

.tmj-symptoms{background:#eef4f5}
.tmj-symptoms__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.tmj-symptoms__grid article{padding:clamp(30px,3.2vw,48px);border-top:4px solid var(--gold-light);background:var(--white);box-shadow:0 18px 44px rgba(19,36,63,.07);transition:transform .35s ease,box-shadow .35s ease}
.tmj-symptoms__grid article:hover{box-shadow:0 22px 48px rgba(19,36,63,.1);transform:translateY(-3px)}
.tmj-symptoms__grid article>span{display:block;margin-bottom:28px;color:var(--gold-text);font-family:var(--display);letter-spacing:.14em}
.tmj-symptoms__grid .heading{margin:0 0 14px;font-size:clamp(1.45rem,2vw,2rem);line-height:1.22}
.tmj-symptoms__grid p{color:#515a70;line-height:1.72}

.tmj-causes{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1fr);align-items:center;gap:clamp(48px,8vw,120px);padding:clamp(88px,9vw,150px) clamp(24px,7vw,132px);background:var(--navy-deep)}
.tmj-causes .heading,.tmj-causes__list .heading{color:var(--white)}
.tmj-causes .preventive-eyebrow,.tmj-causes .heading em{color:var(--gold-light)}
.tmj-causes__content>p:not(.preventive-eyebrow){margin-top:28px;color:rgba(255,255,255,.82)}
.tmj-causes__list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border:1px solid rgba(239,192,112,.38)}
.tmj-causes__list article{min-height:210px;padding:30px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.035)}
.tmj-causes__list .heading{margin:0 0 12px;font-size:clamp(1.28rem,1.7vw,1.7rem);line-height:1.25}
.tmj-causes__list p{color:rgba(255,255,255,.78);line-height:1.68}

.tmj-evaluation{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);align-items:center;gap:clamp(50px,8vw,120px);background:var(--white)}
.tmj-media{min-height:570px;overflow:hidden;background:#e7ecee;box-shadow:0 24px 60px rgba(19,36,63,.11)}
.tmj-media img{display:block;width:100%;height:100%;min-height:570px;object-fit:cover}
.tmj-evaluation__content>p:not(.preventive-eyebrow){margin-top:26px}
.tmj-evaluation__content ol{display:grid;gap:0;margin:34px 0 0;padding:0;counter-reset:tmj-evaluation;list-style:none}
.tmj-evaluation__content li{display:grid;grid-template-columns:minmax(150px,.65fr) 1fr;gap:24px;padding:18px 0;border-top:1px solid rgba(32,41,85,.18);color:var(--navy);line-height:1.55}
.tmj-evaluation__content li span{color:#515a70}

.tmj-treatment{background:var(--ivory)}
.tmj-treatment__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.tmj-treatment__grid article{display:flex;flex-direction:column;padding:clamp(30px,3vw,44px);border:1px solid rgba(32,41,85,.12);background:var(--white);box-shadow:0 16px 40px rgba(19,36,63,.055);transition:border-color .3s ease,transform .3s ease}
.tmj-treatment__grid article:hover{border-color:rgba(203,156,77,.58);transform:translateY(-3px)}
.tmj-treatment__grid article>span{color:var(--gold-text);font-family:var(--display);letter-spacing:.14em}
.tmj-treatment__grid .heading{margin:26px 0 14px;font-size:clamp(1.4rem,1.8vw,1.9rem);line-height:1.22}
.tmj-treatment__grid p{color:#515a70;line-height:1.7}
.tmj-treatment__grid a{align-self:flex-start;margin-top:auto;padding-top:24px;color:var(--navy);font-size:.8rem;font-weight:700;letter-spacing:.08em;text-decoration:none;text-transform:uppercase}
.tmj-treatment__grid a:hover,.tmj-treatment__grid a:focus-visible{color:var(--gold-text)}

.tmj-relief{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);align-items:center;gap:clamp(48px,8vw,120px);padding:clamp(88px,9vw,150px) clamp(24px,7vw,132px);background:#e7f0f1}
.tmj-relief__content>p:not(.preventive-eyebrow){margin-top:26px}
.tmj-relief__panel{padding:clamp(30px,4vw,54px);border-left:4px solid var(--gold-light);background:var(--white);box-shadow:0 20px 50px rgba(19,36,63,.08)}
.tmj-relief__panel ul{display:grid;gap:14px;margin:0;padding-left:22px;color:#515a70;line-height:1.65}
.tmj-relief__panel>p{margin-top:26px;padding-top:24px;border-top:1px solid rgba(32,41,85,.16);color:var(--navy);line-height:1.7}

.tmj-journey{background:var(--white)}
.tmj-journey__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid rgba(32,41,85,.18);border-bottom:1px solid rgba(32,41,85,.18)}
.tmj-journey__grid article{padding:34px 30px;border-right:1px solid rgba(32,41,85,.18)}
.tmj-journey__grid article:last-child{border-right:0}
.tmj-journey__grid span{color:var(--gold-text);font-family:var(--display);letter-spacing:.14em}
.tmj-journey__grid .heading{margin:24px 0 12px;font-size:clamp(1.4rem,2vw,1.85rem)}
.tmj-journey__grid p{color:#515a70;line-height:1.68}

.tmj-faq{background:var(--ivory)}
.tmj-faq__list{display:grid;max-width:1060px;margin:auto;border-top:1px solid rgba(32,41,85,.2)}
.tmj-faq details{padding:0 4px;border-bottom:1px solid rgba(32,41,85,.2)}
.tmj-faq summary{padding:24px 48px 24px 0;color:var(--navy);font-family:var(--display);font-size:clamp(1.25rem,2vw,1.7rem);cursor:pointer}
.tmj-faq details p{padding:0 0 26px;color:#515a70;line-height:1.75}
.tmj-treatment__grid a:focus-visible,.tmj-faq summary:focus-visible{outline:3px solid var(--azure);outline-offset:4px}

@media(max-width:1050px){.tmj-treatment__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tmj-journey__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tmj-journey__grid article:nth-child(2){border-right:0}.tmj-journey__grid article:nth-child(-n+2){border-bottom:1px solid rgba(32,41,85,.18)}}
@media(max-width:900px){.tmj-causes,.tmj-evaluation,.tmj-relief{grid-template-columns:1fr;gap:48px}.tmj-media{order:-1}}
@media(max-width:680px){.tmj-causes,.tmj-relief{padding:76px 22px}:where(.tmj-symptoms,.tmj-causes,.tmj-evaluation,.tmj-treatment,.tmj-relief,.tmj-journey,.tmj-faq) .heading{font-size:clamp(2.55rem,12vw,4rem)}:where(.tmj-symptoms,.tmj-causes,.tmj-evaluation,.tmj-treatment,.tmj-relief,.tmj-journey,.tmj-faq) .heading em{font-size:clamp(2.65rem,13vw,4rem)}.tmj-symptoms__grid,.tmj-causes__list,.tmj-treatment__grid,.tmj-journey__grid{grid-template-columns:1fr}.tmj-causes__list article{min-height:0}.tmj-symptoms__grid .heading,.tmj-causes__list .heading,.tmj-treatment__grid .heading,.tmj-journey__grid .heading{font-size:clamp(1.4rem,7vw,2rem)}.tmj-evaluation__content li{grid-template-columns:1fr;gap:5px}.tmj-media,.tmj-media img{min-height:380px}.tmj-journey__grid article{border-right:0;border-bottom:1px solid rgba(32,41,85,.18)}.tmj-journey__grid article:last-child{border-bottom:0}}
@media(prefers-reduced-motion:reduce){.tmj-symptoms__grid article,.tmj-treatment__grid article{transition:none}}