/* תנועה ים — clinic template page styles (on top of tokens.css + base.css) */

/* hero */
.hero{padding-block:clamp(2rem,1.2rem + 4vw,5rem) clamp(3rem,2rem + 4vw,6rem)}
.hero-grid{display:grid;gap:clamp(2rem,1rem + 4vw,4.5rem);align-items:center}
@media (min-width:900px){.hero-grid{grid-template-columns:1.1fr .9fr}}
.hero h1{margin-block-end:var(--s5);max-inline-size:14ch}
.hero h1 .soft{color:var(--pine);font-weight:300}
.hero .lead{margin-block-end:var(--s6)}
.ctas{display:flex;flex-wrap:wrap;gap:var(--s3)}
.trust{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s5);margin:var(--s6) 0 0;padding:var(--s5) 0 0;border-block-start:1px solid var(--line);list-style:none;font-size:.9375rem;color:var(--text-muted)}
.trust li{display:inline-flex;align-items:center;gap:var(--s2)}
.trust strong{color:var(--ink);font-weight:700}
.trust a{color:inherit;text-decoration-color:var(--stone)}
.stars{display:inline-flex;gap:1px;color:var(--clay)}
.stars svg{inline-size:15px;block-size:15px}
.clinician{display:flex;align-items:center;gap:var(--s3);margin-block-start:var(--s5)}
.avatar{inline-size:52px;block-size:52px;border-radius:50%;flex:none;display:grid;place-items:center;background:var(--sage-50);border:2px solid var(--linen);box-shadow:0 0 0 1px var(--stone);color:var(--pine);font-family:var(--font-display);font-size:1.25rem}
.clinician p{margin:0;font-size:.9375rem;line-height:1.45}
.clinician b{display:block;color:var(--ink)}

.hero-visual{position:relative;max-inline-size:30rem;inline-size:100%;justify-self:center}
.hero-visual .photo{aspect-ratio:4/3}
@media (min-width:600px){.hero-visual .photo{aspect-ratio:4/5}}
.visit-card{position:relative;margin:-3rem var(--s4) 0;background:var(--linen);border-radius:var(--r-md);box-shadow:var(--shadow-2);padding:var(--s5)}
@media (min-width:900px){.visit-card{position:absolute;inset-inline-end:-.5rem;inset-block-end:2rem;margin:0;inline-size:17.5rem}}
@media (min-width:1100px){.visit-card{inset-inline-end:-2.5rem}} /* -2.5rem below ~1100px pushed the card past the viewport edge (2–4px h-scroll at 900–1000px) */
.visit-card h2{font-family:var(--font-body);font-size:1rem;font-weight:700;margin-block-end:var(--s3);display:flex;align-items:center;gap:var(--s2)}
.visit-card h2::before{content:"";inline-size:8px;block-size:8px;border-radius:50%;background:var(--pine);box-shadow:0 0 0 4px var(--sage-50)}
.visit-card dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:var(--s2) var(--s4);font-size:.9375rem;line-height:1.45}
.visit-card dt{color:var(--text-muted)}
.visit-card dd{margin:0;font-weight:600}

/* treatments */
.cards{display:grid;gap:var(--s5)}
@media (min-width:640px){.cards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.cards{grid-template-columns:repeat(4,1fr)}}
.t-card{display:flex;flex-direction:column;background:var(--linen);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-1);transition:box-shadow var(--dur-2) var(--ease),transform var(--dur-2) var(--ease)}
.t-card:hover{box-shadow:var(--shadow-2);transform:translateY(-2px)}
.t-card .photo{border-radius:0;aspect-ratio:4/3}
.t-card .body{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s5);flex:1}
.t-card p{color:var(--text-muted);font-size:1rem;line-height:1.6}
.t-card .meta{display:flex;gap:var(--s3);font-size:var(--fs-sm);color:var(--text-muted);margin-block-start:auto;padding-block-start:var(--s3);border-block-start:1px solid var(--line)}
.t-card .meta b{color:var(--ink)}
.t-card .link-arrow{margin-block-start:var(--s1)}
.note-line{margin-block-start:var(--s6);font-size:var(--fs-sm);color:var(--text-muted)}

/* first visit: the one dark band */
.steps{display:grid;gap:var(--s6);counter-reset:step;list-style:none;margin:0;padding:0}
@media (min-width:720px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.steps{grid-template-columns:repeat(4,1fr);gap:var(--s5)}}
.steps li{counter-increment:step;padding-block-start:var(--s5);border-block-start:1px solid color-mix(in oklab,var(--text-on-dark) 22%,transparent)}
.steps li::before{content:"0" counter(step);display:block;font-family:var(--font-display);font-weight:300;font-size:3.25rem;line-height:1;color:#E9B79E;margin-block-end:var(--s4)}
.steps h3{color:var(--text-on-dark);margin-block-end:var(--s2)}
.steps p{color:var(--text-on-dark-muted);font-size:1rem}

/* about */
.about{display:grid;gap:clamp(2rem,1rem + 4vw,5rem);align-items:center}
@media (min-width:900px){.about{grid-template-columns:.8fr 1.2fr}}
.about .photo{max-inline-size:26rem;inline-size:100%}
.quote{font-family:var(--font-display);font-weight:300;font-size:clamp(1.375rem,1.2rem + .8vw,1.75rem);line-height:1.45;color:var(--ink);margin:0 0 var(--s6);padding-inline-start:var(--s5);border-inline-start:2px solid var(--sage)}
.creds{list-style:none;margin:0 0 var(--s5);padding:0;display:grid;gap:var(--s3)}
.creds li{display:flex;gap:var(--s3);align-items:baseline}
.creds li::before{content:"";flex:none;inline-size:6px;block-size:6px;border-radius:50%;background:var(--sage);transform:translateY(-3px)}
.chips{display:flex;flex-wrap:wrap;gap:var(--s2);list-style:none;margin:0;padding:0}
.chips li{background:var(--sage-50);color:var(--pine-900);font-size:var(--fs-sm);font-weight:600;padding:var(--s1) var(--s3);border-radius:var(--r-pill)}
.gallery{display:grid;gap:var(--s4);margin-block-start:clamp(3rem,2rem + 3vw,5rem);grid-template-columns:1fr 1fr}
.gallery .photo:first-child{grid-column:1/-1;aspect-ratio:16/9}
.gallery .photo{aspect-ratio:4/3;border-radius:var(--r-md)}
@media (min-width:900px){.gallery{grid-template-columns:2fr 1fr 1fr}.gallery .photo:first-child{grid-column:auto;aspect-ratio:auto}}

/* prices */
.price-wrap{display:grid;gap:clamp(2rem,1rem + 3vw,4rem)}
@media (min-width:960px){.price-wrap{grid-template-columns:1.25fr 1fr;align-items:start}}
.price-list{list-style:none;margin:0;padding:0;border-block-start:1px solid var(--line)}
.price-list li{display:flex;align-items:baseline;gap:var(--s3);padding:var(--s5) 0;border-block-end:1px solid var(--line)}
.price-list .name{font-weight:600;font-size:1.125rem}
.price-list .name small{display:block;font-weight:400;color:var(--text-muted);font-size:var(--fs-sm)}
.price-list .dots{flex:1;border-block-end:1px dotted color-mix(in oklab,var(--ink) 25%,transparent);transform:translateY(-6px);min-inline-size:1rem}
.price-list .amount{font-family:var(--font-display);font-size:1.75rem;font-weight:400;color:var(--pine-900)}
.policy{display:grid;gap:var(--s4)}
.policy article{background:var(--linen);border-radius:var(--r-md);padding:var(--s5)}
.policy h3{margin-block-end:var(--s2);font-size:1.125rem}
.policy p{color:var(--text-muted);font-size:1rem}

/* google rating */
.rating{display:grid;gap:var(--s5);align-items:center;background:var(--linen);border-radius:var(--r-lg);padding:clamp(1.5rem,1rem + 3vw,3.5rem);box-shadow:var(--shadow-1)}
@media (min-width:860px){.rating{grid-template-columns:auto 1fr auto;gap:var(--s7)}}
.score{font-family:var(--font-display);font-weight:300;font-size:clamp(4rem,3rem + 4vw,6rem);line-height:1;color:var(--pine-900)}
.rating .stars svg{inline-size:20px;block-size:20px}
.rating h2{font-size:clamp(1.5rem,1.3rem + 1vw,2rem);margin-block-end:var(--s2)}

/* visit */
.visit{display:grid;gap:clamp(2rem,1rem + 3vw,4rem)}
@media (min-width:960px){.visit{grid-template-columns:1fr 1fr}}
.hours{inline-size:100%;border-collapse:collapse;font-size:1.0625rem;margin-block-end:var(--s6)}
.hours th,.hours td{text-align:start;padding:var(--s3) var(--s3);border-block-end:1px solid var(--line)}
.hours th{font-weight:600}
.hours td{color:var(--text-muted)}
.hours tr.is-today{background:var(--sage-50)}
.hours tr.is-today th::after{content:"היום";margin-inline-start:var(--s2);font-size:.75rem;font-weight:700;color:#fff;background:var(--pine);padding:1px var(--s2);border-radius:var(--r-pill);vertical-align:middle}
.info{list-style:none;margin:0;padding:0;display:grid;gap:var(--s5)}
.info li{display:flex;gap:var(--s4)}
.info .ico-wrap{flex:none;inline-size:44px;block-size:44px;border-radius:50%;display:grid;place-items:center;background:var(--sand);color:var(--pine)}
.info .ico-wrap svg{inline-size:20px;block-size:20px}
.info h3{font-size:1.0625rem;margin-block-end:var(--s1)}
.info p{color:var(--text-muted);font-size:1rem;margin:0}
.map{aspect-ratio:4/3;border-radius:var(--r-lg)}
.map .pin{position:absolute;inset-inline-start:50%;inset-block-start:44%;transform:translate(50%,-50%);inline-size:44px;block-size:44px;border-radius:50% 50% 50% 0;rotate:-45deg;background:var(--clay);box-shadow:var(--shadow-2)}
.map .pin::after{content:"";position:absolute;inset:14px;border-radius:50%;background:var(--linen)}
.map-lines{position:absolute;inset:0;background:
  linear-gradient(28deg,transparent 47%,color-mix(in oklab,var(--linen) 90%,transparent) 47% 50%,transparent 50%),
  linear-gradient(-62deg,transparent 58%,color-mix(in oklab,var(--linen) 90%,transparent) 58% 60%,transparent 60%),
  linear-gradient(95deg,transparent 30%,color-mix(in oklab,var(--linen) 70%,transparent) 30% 31%,transparent 31%),
  linear-gradient(0deg,color-mix(in oklab,var(--sage) 30%,transparent) 0 18%,transparent 18%)}

/* closing CTA */
.closing{background:var(--sand);border-radius:var(--r-lg);padding:clamp(2rem,1rem + 5vw,5rem);text-align:center;position:relative;overflow:hidden}
.closing::before{content:"";position:absolute;inset:auto -10% -60% -10%;block-size:120%;background:radial-gradient(closest-side,color-mix(in oklab,var(--sage) 30%,transparent),transparent);pointer-events:none}
.closing > *{position:relative}
.closing h2{margin-block-end:var(--s4)}
.closing .lead{margin:0 auto var(--s6)}
.closing .ctas{justify-content:center}
.avatar svg{inline-size:24px;block-size:24px}
@media (max-width:599px){
  .hero-visual .photo{border-radius:var(--r-lg)}
  .hero-visual .photo .cap{inset-block-end:auto;inset-block-start:var(--s4)}
}