/* «Разобраться дальше» and «Изучить на практике» under a page of «Материалы»: cards in the style of the
   materials catalogue — picture on top, light Montserrat title, a short purpose, quiet reading time */
.reading-route{margin:56px 0 0;padding-top:32px;border-top:1px solid #E4DED3;container-type:inline-size}
.reading-route+.reading-route{margin-top:48px}
.reading-route>h2{margin:0 0 24px;font:300 clamp(26px,2.4vw,34px)/1.25 var(--font-heading,'Montserrat',sans-serif);letter-spacing:-.02em;color:#1E4D41}
.reading-route .reading-route__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:0;padding:0;list-style:none}
.reading-route .reading-route__grid>li{margin:0;padding:0;min-width:0;display:flex}
.reading-route .reading-route__grid>li::before{content:none}
.reading-route .reading-route__card{display:flex;flex-direction:column;width:100%;box-sizing:border-box;overflow:hidden;border:1px solid #E4DED3;border-radius:24px;background:#FBF9F5;color:#1E4D41;text-decoration:none;overflow-wrap:break-word;transition:transform .45s cubic-bezier(.2,.7,.2,1),box-shadow .45s cubic-bezier(.2,.7,.2,1),border-color .3s ease}
.reading-route .reading-route__image{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;background:#E8EDE6}
.reading-route .reading-route__text{display:flex;flex:1;flex-direction:column;padding:20px 22px 22px}
.reading-route .reading-route__card h3{margin:0 0 10px;font:300 21px/1.3 var(--font-heading,'Montserrat',sans-serif);letter-spacing:-.01em;color:inherit;text-wrap:balance}
.reading-route .reading-route__card p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:0 0 18px;font-size:14px;line-height:1.55;color:#626B65}
.reading-route .reading-route__footer{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:auto}
.reading-route .reading-route__action{font-size:14px;font-weight:500;white-space:nowrap}
.reading-route .reading-route__meta{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:2px 10px;font-size:12px;line-height:1.4;color:#8A928C;text-align:right}
.reading-route .reading-route__card:focus-visible{outline:3px solid #1E4D41;outline-offset:4px}
@media(hover:hover){.reading-route .reading-route__card:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(20,30,25,.10);border-color:#DCD5C8}}
@media(prefers-reduced-motion:reduce){.reading-route .reading-route__card{transition:none}.reading-route .reading-route__card:hover{transform:none}}
/* columns follow the block's own width: three in a wide page, two in the narrow material card;
   a single card keeps the size of one column instead of stretching over the row */
@container (max-width:720px){.reading-route .reading-route__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){
 .reading-route{margin-top:40px;padding-top:24px}
 .reading-route .reading-route__grid{grid-template-columns:1fr;gap:12px}
 .reading-route .reading-route__card{display:flex;flex-direction:column;border-radius:var(--radius)}
 .reading-route .reading-route__image{height:auto;aspect-ratio:16/10;min-height:0}
 .reading-route .reading-route__text{padding:14px 16px}
 .reading-route .reading-route__card h3{font-size:18px;margin-bottom:6px}
 .reading-route .reading-route__card p{-webkit-line-clamp:2;margin-bottom:10px;font-size:13px}
}

/* «Специалисты по теме» and «Нужна поддержка?»: every page of «Материалы» ends with the way to an appointment */
.local-article-specialists{margin-top:56px;padding-top:32px;border-top:1px solid #E4DED3}
.local-article-specialists>h2,.material-booking h2{margin:0 0 24px;font:300 clamp(26px,2.4vw,34px)/1.25 var(--font-heading,'Montserrat',sans-serif);letter-spacing:-.02em;color:#1E4D41}
.local-article-specialists__grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.local-article-specialists__card{display:flex;flex-direction:column;min-width:0;color:#1E4D41;text-decoration:none}
.local-article-specialists__card img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;border-radius:24px;background:#E8EDE6}
.local-article-specialists__card>span{display:flex;flex:1;flex-direction:column;gap:8px;padding-top:16px}
.local-article-specialists__card strong{font:300 21px/1.3 var(--font-heading,'Montserrat',sans-serif);overflow-wrap:break-word}
.local-article-specialists__card small{font-size:14px;line-height:1.5;color:#626B65}
.local-article-specialists__card em{margin-top:auto;padding-top:6px;font-style:normal;font-size:14px}
.local-article-specialists__all{display:block;width:fit-content;margin:24px 0 0 auto;color:#1E4D41;font-weight:500;text-decoration:none}
@media(hover:hover){:is(.local-article-specialists__card,.local-article-specialists__all):hover strong,.local-article-specialists__all:hover{text-decoration:underline;text-underline-offset:4px}}
.local-article-next.material-booking{width:100%;max-width:none;margin-top:56px;padding:32px;border-radius:24px;background:#E8EDE6;box-sizing:border-box}
.material-booking h2{margin-bottom:12px}
.material-booking>p:last-child{display:flex;align-items:center;flex-wrap:wrap;gap:16px;margin:20px 0 0}
.material-booking .button{margin:0}
.material-booking .button--coral{background:#C75B3F;border-color:#C75B3F;color:#fff}
.material-booking .button--coral:hover{background:#AD4D35;border-color:#AD4D35;color:#fff}
@media(max-width:1100px){.local-article-specialists__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){
 .local-article-specialists{margin-top:40px;padding-top:24px}
 .local-article-specialists__grid{grid-template-columns:1fr;gap:16px}
 .local-article-specialists__card{display:grid;grid-template-columns:104px minmax(0,1fr);align-items:center;gap:14px}
 .local-article-specialists__card img{border-radius:16px}
 .local-article-specialists__card>span{padding-top:0;gap:4px}
 .local-article-specialists__card strong{font-size:18px}
 .local-article-specialists__card em{margin-top:0;padding-top:0;font-size:13px}
 .material-booking{margin-top:40px;padding:24px}
 .material-booking>p:last-child{flex-direction:column;align-items:stretch}
 .material-booking .button{text-align:center}
}

/* The theme sizes every h2/h3 through these variables (typography-standard.css, !important); inside the
   blocks under a material they follow the material's own subheadings and the narrow cards */
:is(.reading-route,.local-article-specialists,.material-booking){--type-section-title:clamp(26px,2.4vw,34px);--type-card-title:21px}
@media(max-width:640px){.reading-route{--type-card-title:18px}}

/* Narrow reading cards keep the approved image above a full-width text area.
   Finite important-layer typography beats the generic main h3 rule. */
@layer design-system {
@media(max-width:640px){
 html body main .reading-route .reading-route__card h3{font-size:var(--text-lead-size)!important;line-height:var(--text-lead-line)!important;font-weight:var(--font-weight-heading)!important;overflow-wrap:break-word;text-wrap:pretty}
}
 html body main .reading-route .reading-route__meta{color:var(--color-text-secondary)!important}
}