/* =====================================================================================================
   pages/public.css · shared bits of the Витрина pages (home, catalog, course, parents, author, help).
   Phone first; tokens only (tetrad.css :root). No inline styles anywhere (CSP).
   ===================================================================================================== */

/* breadcrumbs sit right under the header */
nav > .crumbs{margin:10px 0 2px}
.crumbs a{min-width:44px}
.crumbs [aria-current="page"]{color:var(--ink-2)}

/* status plaques: «Курс ваш», trial used elsewhere, «Скоро» */
.plaque{display:grid;gap:12px;margin:14px 0 0;padding:14px 16px;background:var(--sheet);border-left:4px solid var(--blue);
  border-radius:0 10px 10px 0;box-shadow:var(--sh-1)}
.plaque-t{display:flex;align-items:flex-start;gap:10px;margin:0;font-size:16px;line-height:1.45;color:var(--ink)}
.plaque-t .ico{flex:none;color:var(--blue)}
.plaque-own{border-left-color:var(--ok);background:var(--ok-soft)}
.plaque-own .plaque-t .ico{color:var(--ok)}
.plaque-trial{border-left-color:var(--pen)}
.plaque-trial .plaque-t .ico{color:var(--pen)}
.plaque .btn{justify-self:start}

/* ticked lists: a red pen tick instead of a bullet */
.ticks{list-style:none;margin:0 0 16px;padding:0;display:grid;gap:10px}
.ticks li{position:relative;padding-left:34px;line-height:1.5}
.ticks li::before{content:"";position:absolute;left:0;top:2px;width:24px;height:22px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 32'%3E%3Cpath d='M4 17c3.4 2.8 6 5.6 8.4 9.4C17 15.6 22.6 8 30.4 2.6' fill='none' stroke='%23d6402c' stroke-width='3.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/contain}
.ticks b{color:var(--ink)}

/* narrow text pages: /roditelyam, /avtor, /pomosh */
.pg{padding-top:4px;padding-bottom:16px}
.pg h1{margin-top:4px}
.pg-toc{margin:6px calc(-1 * var(--gut)) 8px;padding-top:4px}
.pg-sec{padding:26px 0 6px;border-top:1.5px dashed var(--line-2);margin-top:22px}
.pg-sec h2{font-size:clamp(21px,1.6vw + 15px,28px)}
.pg-steps{list-style:none;margin:0 0 16px;padding:0;counter-reset:pg;display:grid;gap:12px}
.pg-steps li{position:relative;counter-increment:pg;padding-left:40px;line-height:1.5}
.pg-steps li::before{content:counter(pg);position:absolute;left:2px;top:-4px;font:700 28px/1 var(--f-hand);color:var(--pen-ink)}
.pg-end{display:grid;justify-items:start;gap:6px;margin-top:30px;padding-top:22px;border-top:1.5px dashed var(--line-2)}
.pg-end p{margin:0}
.pg-prog{margin:6px 0 10px;background:var(--sheet);border-radius:4px;box-shadow:var(--sh-1);padding:0 14px}
.pg-prog .acc{border-bottom:0}
.pg-prog .acc-body{padding:0 0 12px}
.pg-tbl td{vertical-align:middle;padding:6px 8px}
.pg-tbl td a{display:inline-flex;align-items:center;min-height:44px;font-weight:600}
.pg-book{display:block;padding-bottom:4px;font-size:16px;line-height:1.35;color:var(--pencil)}
.pg-author{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;align-items:center;margin:8px 0 6px}
.pg-author .author-photo{margin:0}
.pg-author h1{margin:0 0 6px;font-size:clamp(26px,4vw + 12px,48px)}
.pg-author-ch{margin:0;font-size:16px;color:var(--ink-2)}

/* the author's photo as a pinned polaroid */
.author-photo{position:relative;margin:0;padding:6px 6px 10px;background:var(--sheet);box-shadow:var(--sh-2);transform:rotate(-2deg);max-width:320px}
.author-photo img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;background:var(--paper-lo)}
.author-photo::before{content:"";position:absolute;left:50%;top:-10px;width:70px;height:22px;margin-left:-35px;background:var(--marker-soft);
  transform:rotate(3deg);box-shadow:0 1px 2px rgba(28,42,74,.12)}

@media (max-width:599px){
  .pg-author .author-photo{padding:4px 4px 6px}
  .pg-author .author-photo::before{width:44px;height:14px;margin-left:-22px;top:-7px}
}
@media (min-width:600px){
  .pg-author{grid-template-columns:200px minmax(0,1fr);gap:28px}
  .plaque{grid-template-columns:minmax(0,1fr) auto;align-items:center}
}
@media (min-width:1024px){
  .pg-toc{margin-left:0;margin-right:0}
}