/* 2026-10-05: Adapt 21st.dev drawer/card patterns to the existing static site.
   Native dialog and scroll snap preserve keyboard support without a React migration. */
dialog{background:#fffdfb;border:1px solid var(--line);padding:42px;box-shadow:0 24px 90px #30282735}
dialog h2{padding-right:30px;line-height:1.15;margin-bottom:14px}
dialog .close{width:44px;height:44px;top:14px;right:14px;display:grid;place-items:center}
dialog #dialog-content>p:first-child{color:#746967;margin-bottom:24px}
dialog .booking-option{padding:20px;border-radius:18px;gap:16px;min-height:96px;transition:border-color .2s,background .2s,transform .2s}
dialog .booking-option strong{font-family:'DM Serif Text',Georgia,serif;font-size:27px;font-weight:400;color:var(--wine);line-height:1.2;margin-bottom:6px}
dialog .booking-option small{font-size:13px;line-height:1.5;color:#746967}
dialog .booking-option>span:last-child{font-size:13px;color:var(--wine);display:flex;gap:8px;align-items:center}
dialog .booking-option:focus-visible{outline:2px solid var(--wine);outline-offset:3px}
body:has(dialog[open]){overflow:hidden}
#branch-grid .branch-card{background:white;transition:border-color .25s,box-shadow .25s,transform .25s}
#branch-grid .branch-card:focus-within{border-color:var(--wine)}
@media(hover:hover){
 dialog .booking-option:hover{background:#f8f1ee;border-color:var(--wine);transform:translateX(3px)}
 #branch-grid .branch-card:hover{border-color:#b79780;box-shadow:0 12px 28px #58504f12}
}
@media(max-width:720px){
 dialog{position:fixed;inset:auto 0 0;margin:0;width:100%;max-width:none;max-height:calc(100dvh - 24px);border-radius:28px 28px 0 0;padding:36px 22px max(24px,env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain}
 dialog::before{content:'';position:absolute;top:10px;left:calc(50% - 20px);width:40px;height:4px;border-radius:4px;background:#dbd4ce}
 dialog[open]{animation:booking-arrive .28s cubic-bezier(.22,1,.36,1)}
 dialog h2{font-size:30px;margin-top:16px}
 dialog .close{top:19px;right:14px}
 dialog .booking-option{padding:18px 16px;min-height:96px}
 dialog .booking-option>span:first-child{min-width:0}
}
@keyframes booking-arrive{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){
 dialog[open]{animation:none}
 dialog .booking-option,#branch-grid .branch-card{transition:none}
}

.specialist-directory .specialist-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.specialist-directory .specialist-card{position:relative;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto 1fr auto;gap:0;padding:28px;border-radius:24px;background:#fffdfb;overflow:hidden;transition:border-color .2s,box-shadow .2s,transform .2s}
.specialist-directory .specialist-card::before{content:'';position:absolute;top:0;right:0;width:145px;height:145px;background:url('assets/smile-arcs.svg') right top / 250px no-repeat;opacity:.7;pointer-events:none}
.specialist-directory .specialist-card .specialist-avatar,.specialist-directory .specialist-card:nth-child(2n) .specialist-avatar{grid-column:1;grid-row:1;width:72px;height:80px;margin-bottom:28px;border:1px solid #8e4c4c20;border-radius:28px 28px 20px 20px;background:#f2e6e3;color:var(--wine);font-size:26px}
.specialist-directory .specialist-card h2{grid-column:1;grid-row:2;font-size:27px;line-height:1.18;margin-bottom:14px;overflow-wrap:break-word}
.specialist-directory .specialist-card p{grid-column:1;font-size:14px;line-height:1.6;margin-bottom:8px}
.specialist-directory .specialist-card p:first-of-type{font-weight:500}
.specialist-directory .specialist-card .text-link{grid-column:1;grid-row:5;display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:58px;font-size:14px;font-weight:500;margin-top:20px;padding-top:18px}
.specialist-directory .specialist-card .text-link .material-symbols-rounded{display:grid;place-items:center;flex-shrink:0;width:38px;height:38px;border-radius:50%;background:#8e4c4c0d;transition:background .2s,color .2s,transform .2s}
.specialist-directory .specialist-card:focus-visible{outline:2px solid var(--wine);outline-offset:4px;border-color:var(--wine)}
@media(hover:hover){
 .specialist-directory .specialist-card:hover{transform:translateY(-4px);border-color:var(--taupe);box-shadow:0 16px 30px #58504f10}
 .specialist-directory .specialist-card:hover .text-link .material-symbols-rounded{background:var(--wine);color:white;transform:rotate(-8deg)}
}
@media(max-width:1000px){.specialist-directory .specialist-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){
 .specialist-directory .specialist-grid{grid-template-columns:1fr;gap:16px}
 .specialist-directory .specialist-card{grid-template-columns:64px minmax(0,1fr);grid-template-rows:auto auto auto auto;gap:0 18px;padding:24px}
 .specialist-directory .specialist-card .specialist-avatar,.specialist-directory .specialist-card:nth-child(2n) .specialist-avatar{grid-column:1;grid-row:1 / span 3;width:64px;height:74px;font-size:24px;margin:0}
 .specialist-directory .specialist-card h2{grid-column:2;grid-row:1;font-size:25px;margin-bottom:10px}
 .specialist-directory .specialist-card p{grid-column:2}
 .specialist-directory .specialist-card .text-link{grid-column:1 / -1;grid-row:4;margin-top:14px}
}
@media(max-width:360px){
 .specialist-directory .specialist-card{padding:20px;grid-template-columns:48px minmax(0,1fr);column-gap:14px}
 .specialist-directory .specialist-card .specialist-avatar,.specialist-directory .specialist-card:nth-child(2n) .specialist-avatar{width:48px;height:58px;font-size:20px}
 .specialist-directory .specialist-card h2{font-size:23px}
}
@media(prefers-reduced-motion:reduce){
 .specialist-directory .specialist-card,.specialist-directory .specialist-card .text-link .material-symbols-rounded{transition:none}
 .specialist-directory .specialist-card:hover,.specialist-directory .specialist-card:hover .text-link .material-symbols-rounded{transform:none}
}