/* LightSite school.css – theme.skin "school" (2026-10, docs/reports/school13-demo.md): the school information stand.
   Loaded only when the site chooses the skin (layout: body class ls-skin--school + this file). Tokens only, plus the
   three board colours derived from them: board 1 = accent_2 (yellow, dark ink), board 2 = accent (blue), board 3 = a
   green mixed from accent and a fixed leaf hue. Flat planes, no outlines; sheets are white with a label strip; a round
   pin marks what is new. 1 ground and type · 2 header · 3 first screen · 4 boards · 5 sheets (announcements, documents)
   6 cards, stats, team · 7 page heads, anchors · 8 rich text, tables, FAQ rows · 9 gallery, blog · 10 bands, footer
   11 phones · 12 motion */

body.ls-skin--school{
  --sch-y:var(--ls-accent-2,#F2B705);--sch-b:var(--ls-accent);--sch-g:color-mix(in oklab,#1E7B57 88%,var(--ls-accent));
  --sch-ink:var(--ls-text);--sch-sheet:#fff;--sch-red:#D8402B;--sch-r:18px;
  --sch-plane-shadow:0 1px 0 color-mix(in srgb,var(--ls-text) 6%,#0000);
  background:var(--ls-bg)}

/* 1. Type: display headings in the heading face, tight; section heads always start at the left edge of the board */
.ls-skin--school .ls-title{font-weight:700;letter-spacing:-.018em;text-wrap:balance}
.ls-skin--school .ls-head .ls-title{font-size:clamp(1.7rem,1.15rem + 1.9vw,2.7rem);line-height:1.1}
.ls-skin--school .ls-head--center{margin-inline:0;text-align:left}
.ls-skin--school .ls-head--center .ls-eyebrow::after{display:none}
.ls-skin--school .ls-head{margin-bottom:clamp(24px,2.6vw,40px)}
.ls-skin--school .ls-eyebrow{display:inline-flex;align-items:center;gap:8px;padding:6px 12px 6px 10px;border-radius:999px;background:var(--sch-y);
  color:#14213F;font:600 .78rem/1.2 var(--ls-font-body);letter-spacing:.02em;text-transform:none}
.ls-skin--school .ls-eyebrow::before{content:"";width:8px;height:8px;border-radius:50%;background:#14213F;flex:none}
.ls-skin--school .ls-subtitle{max-width:62ch}
.ls-skin--school .ls-hl{color:var(--sch-b);text-decoration:none}

/* 2. Header: white strip, the round "13" mark, the name in the heading face */
.ls-skin--school .ls-header{background:#fff;box-shadow:0 1px 0 color-mix(in srgb,var(--ls-text) 9%,#0000)}
.ls-skin--school .ls-logo__name{font-family:var(--ls-font-head);font-weight:700;font-size:.92rem;line-height:1.15;letter-spacing:-.01em;max-width:11.5em;text-wrap:balance}
@media (max-width:420px){.ls-skin--school .ls-header .ls-logo__name{font-size:.84rem;max-width:10.5em}.ls-skin--school .ls-header .ls-logo__tagline{display:none}}
.ls-skin--school .ls-logo__tagline{max-width:190px;font-size:.72rem;line-height:1.25}
.ls-skin--school .ls-logo__img{width:46px;height:46px}
@media (min-width:1200px){.ls-skin--school .ls-header .ls-logo__tagline{display:none}}

/* 3. First screen: huge name, the photo pinned on a flat yellow plane (no frame, no shadow) */
/* the school's official name in full: three lines on desktop ("Мукачівська / ЗОШ І–ІІІ ст. / №13"), the number set large in blue */
.ls-skin--school .ls-block--hero.ls-v--split .ls-hero__title{font-size:clamp(2.1rem,.8rem + 3.3vw,4.3rem);line-height:1;letter-spacing:-.035em;max-width:9.5em;text-wrap:balance}
.ls-skin--school .ls-block--hero.ls-v--split.ls-hero--h-large .ls-hero__title .ls-hl{display:block;font-size:1.75em;line-height:.9;letter-spacing:-.045em;margin-top:.04em}
.ls-skin--school .ls-block--hero.ls-hero--h-large{min-height:0;padding-block:clamp(28px,4vw,64px) clamp(20px,3vw,40px)}
.ls-skin--school .ls-block--hero .ls-hero__subtitle{font-size:clamp(1.02rem,.95rem + .35vw,1.25rem);max-width:34em}
.ls-skin--school .ls-block--hero .ls-hero__media{position:relative;isolation:isolate}
.ls-skin--school .ls-block--hero .ls-hero__media::before,.ls-skin--school .ls-block--hero .ls-hero__media::after{display:none}
.ls-skin--school .ls-block--hero.ls-v--split .ls-hero__media picture{position:relative;display:block}
.ls-skin--school .ls-block--hero.ls-v--split .ls-hero__media picture::before{content:"";position:absolute;inset:auto -18px -18px 18%;height:62%;z-index:-1;
  border-radius:var(--sch-r);background:var(--sch-y)}
.ls-skin--school .ls-block--hero.ls-v--split .ls-hero__media picture::after{content:"";position:absolute;top:-9px;left:50%;width:18px;height:18px;margin-left:-9px;
  border-radius:50%;background:var(--sch-red);box-shadow:inset -3px -3px 0 color-mix(in srgb,#000 22%,#0000),0 4px 6px -2px color-mix(in srgb,#000 35%,#0000)}
.ls-skin--school .ls-block--hero .ls-hero__img{border-radius:var(--sch-r);box-shadow:none;border:0}
.ls-skin--school .ls-block--hero.ls-v--split .ls-hero__media img{aspect-ratio:16/10;object-fit:cover;width:100%}

/* 4. Boards: the audience sections as flat colour planes – Батькам (yellow), Учням (blue), Прозорість (green) */
.ls-skin--school .ls-block--cards.ls-v--links .ls-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,20px)}
.ls-skin--school .ls-v--links .ls-card{--_card:var(--sch-b);--_fg:#fff;position:relative;min-height:clamp(220px,19vw,300px);border:0;border-radius:var(--sch-r);
  background:var(--_card);color:var(--_fg);box-shadow:none;overflow:hidden;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.ls-skin--school .ls-v--links .ls-card:nth-child(3n+1){--_card:var(--sch-y);--_fg:#14213F}
.ls-skin--school .ls-v--links .ls-card:nth-child(3n+3){--_card:var(--sch-g)}
.ls-skin--school .ls-v--links .ls-card__body{display:flex;flex-direction:column;gap:18px;height:100%;padding:clamp(22px,2.2vw,34px)}
.ls-skin--school .ls-v--links .ls-card__icon{width:58px;height:58px;border-radius:50%;background:#fff;color:#14213F;display:grid;place-items:center;flex:none}
.ls-skin--school .ls-v--links .ls-card__icon .ls-icon{width:26px;height:26px}
.ls-skin--school .ls-v--links .ls-card__title{margin:0;font:700 clamp(1.6rem,1.1rem + 1.5vw,2.4rem)/1.05 var(--ls-font-head);letter-spacing:-.03em;color:var(--_fg)}
.ls-skin--school .ls-v--links .ls-card__link{color:inherit;text-decoration:none}
.ls-skin--school .ls-v--links .ls-card__link::after{content:"";position:absolute;inset:0;z-index:1}
.ls-skin--school .ls-v--links .ls-card__text{margin-top:10px;color:color-mix(in srgb,var(--_fg) 88%,#0000);font-size:.98rem;line-height:1.75;}
.ls-skin--school .ls-v--links .ls-card__main{display:flex;flex-direction:column;flex:1}
.ls-skin--school .ls-v--links .ls-card::after{content:"→";position:absolute;right:clamp(20px,2vw,30px);bottom:clamp(16px,1.8vw,26px);font:700 1.6rem/1 var(--ls-font-head);
  color:var(--_fg);transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.ls-skin--school .ls-v--links .ls-card:focus-within{outline:3px solid var(--ls-text);outline-offset:3px}
@media (hover:hover){
  .ls-skin--school .ls-v--links .ls-card:hover{transform:translateY(-4px) rotate(-.6deg)}
  .ls-skin--school .ls-v--links .ls-card:nth-child(2):hover{transform:translateY(-4px) rotate(.5deg)}
  .ls-skin--school .ls-v--links .ls-card:hover::after{transform:translateX(6px)}
}

/* 5. Sheets: announcements and document registers – white sheets with a label strip (date · type · size) on the board */
.ls-skin--school .ls-news{display:grid;gap:10px;border:0}
.ls-skin--school .ls-news__item{border:0;border-radius:14px;background:var(--sch-sheet);box-shadow:var(--sch-plane-shadow);overflow:hidden}
.ls-skin--school .ls-bg--default .ls-news__item{background:var(--sch-sheet)}
.ls-skin--school .ls-news__link{grid-template-columns:150px 128px minmax(0,1fr) 40px;padding:20px 22px;gap:18px;border-radius:14px}
.ls-skin--school .ls-news__link:not(:has(.ls-news__date)){grid-template-columns:128px minmax(0,1fr) 40px}
.ls-skin--school .ls-news__link:not(:has(.ls-news__date)) .ls-news__tag{grid-column:1}
.ls-skin--school .ls-news__link:not(:has(.ls-news__date)) .ls-news__text{grid-column:2}
.ls-skin--school .ls-news__link:not(:has(.ls-news__date)) .ls-news__arrow{grid-column:3}
.ls-skin--school a.ls-news__link:hover{background:color-mix(in srgb,var(--sch-y) 16%,#fff)}
.ls-skin--school .ls-news__date{font:600 .86rem/1.35 var(--ls-font-body);letter-spacing:0;color:var(--ls-muted)}
.ls-skin--school .ls-news__tag{justify-self:start;padding:6px 10px;border-radius:8px;background:color-mix(in srgb,var(--sch-b) 12%,#fff);color:var(--sch-b);
  font:700 .72rem/1.2 var(--ls-font-body);letter-spacing:.04em;white-space:nowrap}
.ls-skin--school .ls-news__tag--accent{position:relative;background:var(--sch-red);color:#fff}
.ls-skin--school .ls-news__text{font-weight:600;line-height:1.45}
.ls-skin--school .ls-news__arrow{color:var(--sch-b)}
.ls-skin--school .ls-block--news .ls-head .ls-title{font-size:clamp(1.45rem,1.1rem + 1.2vw,2.1rem)}

/* 6. Cards, stats, team */
.ls-skin--school .ls-block--cards:not(.ls-v--links) .ls-card{border:0;border-radius:var(--sch-r);background:var(--sch-sheet);box-shadow:var(--sch-plane-shadow)}
.ls-skin--school .ls-bg--light .ls-block--cards .ls-card,.ls-skin--school .ls-bg--light .ls-card{background:#fff}
.ls-skin--school .ls-card__title{font-family:var(--ls-font-head);font-weight:700;letter-spacing:-.015em}
.ls-skin--school .ls-v--image .ls-card__media img{border-radius:0}
.ls-skin--school .ls-v--compact .ls-card__icon,.ls-skin--school .ls-v--icon .ls-card__icon{border-radius:50%;background:color-mix(in srgb,var(--sch-y) 70%,#fff);color:#14213F;border:0}
.ls-skin--school .ls-v--number .ls-card__num{color:var(--sch-b)}
.ls-skin--school .ls-stats--ruled .ls-stat__value{font:700 clamp(2.2rem,1.4rem + 2.4vw,3.6rem)/1 var(--ls-font-head);letter-spacing:-.04em;color:var(--sch-b)}
.ls-skin--school .ls-stats--ruled .ls-stat__value::after{content:"";display:block;width:44px;height:6px;margin-top:14px;border-radius:3px;background:var(--sch-y)}
.ls-skin--school .ls-stats--ruled .ls-stat__label{font-size:.95rem;color:var(--ls-text)}
.ls-skin--school .ls-member{border:0;border-radius:var(--sch-r);background:#fff;box-shadow:var(--sch-plane-shadow)}
.ls-skin--school .ls-member__name{font-family:var(--ls-font-head);font-weight:700;letter-spacing:-.01em}

/* 7. Page heads: the board label chip, a large title; anchors as tabs on the stand */
.ls-skin--school .ls-block--hero.ls-v--simple{padding-block:clamp(28px,4vw,60px) clamp(8px,1.5vw,20px)}
.ls-skin--school .ls-block--hero.ls-v--simple .ls-hero__title,.ls-skin--school .ls-block--hero.ls-v--split:not(.ls-hero--h-large) .ls-hero__title{
  font-size:clamp(2rem,1.2rem + 3vw,4rem);line-height:1.02;letter-spacing:-.035em;max-width:20ch}
.ls-skin--school .ls-block--anchors{background:var(--ls-bg)}
.ls-skin--school .ls-anchors a,.ls-skin--school .ls-anchors__link{border-radius:999px;font-weight:600}

/* 8. Rich text, tables, FAQ rows */
.ls-skin--school .ls-richtext{font-size:1.04rem;line-height:1.72}
.ls-skin--school .ls-richtext a{color:var(--sch-b);text-decoration-thickness:1px;text-underline-offset:3px;overflow-wrap:anywhere}
.ls-skin--school .ls-richtext table{width:100%;border-collapse:separate;border-spacing:0;border-radius:14px;overflow:hidden;background:#fff;font-size:.94rem;box-shadow:var(--sch-plane-shadow)}
.ls-skin--school .ls-richtext :is(th,td){padding:11px 14px;border:0;border-bottom:1px solid color-mix(in srgb,var(--ls-text) 8%,#0000);text-align:left;vertical-align:top}
.ls-skin--school .ls-richtext th{background:var(--sch-b);color:#fff;font-weight:700}
.ls-skin--school .ls-richtext tr:nth-child(even) td{background:color-mix(in srgb,var(--ls-bg) 60%,#fff)}
.ls-skin--school .ls-faq__item{border:0;border-radius:14px;background:#fff;margin-bottom:10px;box-shadow:var(--sch-plane-shadow)}
.ls-skin--school .ls-faq__q,.ls-skin--school .ls-faq__question{font-weight:700}

/* 9. Gallery, blog */
.ls-skin--school .ls-gallery{gap:10px}
.ls-skin--school .ls-gallery__item,.ls-skin--school .ls-gallery__item img{border-radius:12px}
.ls-skin--school .ls-block--gallery .ls-subtitle{max-width:72ch}
.ls-skin--school .ls-post-card,.ls-skin--school .ls-blog-card{border:0;border-radius:var(--sch-r);background:#fff;box-shadow:var(--sch-plane-shadow);overflow:hidden}

/* 10. Bands, footer */
.ls-skin--school .ls-block--cta.ls-bg--dark{background:var(--sch-b)}
.ls-skin--school .ls-block--cta.ls-bg--dark .ls-bg__layer,.ls-skin--school .ls-block--cta .ls-cta__deco{display:none}
.ls-skin--school .ls-block--cta .ls-btn--primary{background:var(--sch-y);border-color:var(--sch-y);color:#14213F}
.ls-skin--school .ls-footer{background:#14285C}
.ls-skin--school .ls-btn{font-weight:700}
.ls-skin--school .ls-btn--primary{box-shadow:none}

/* 11. Phones and tablets */
@media (max-width:959px){
  .ls-skin--school .ls-block--cards.ls-v--links .ls-tiles{grid-template-columns:1fr}
  .ls-skin--school .ls-v--links .ls-card{min-height:0}
  .ls-skin--school .ls-v--links .ls-card__body{flex-direction:row;align-items:flex-start;padding:20px 52px 20px 20px}
  .ls-skin--school .ls-v--links .ls-card__icon{width:48px;height:48px}
  .ls-skin--school .ls-block--hero.ls-v--split .ls-hero__media{margin-top:12px;margin-right:18px}
}
@media (max-width:767px){
  .ls-skin--school .ls-news__link,.ls-skin--school .ls-news__link:not(:has(.ls-news__date)){grid-template-columns:auto minmax(0,1fr);gap:8px 12px;padding:16px}
  .ls-skin--school .ls-news__link:not(:has(.ls-news__date)) .ls-news__tag{grid-column:1}
  .ls-skin--school .ls-news__link:not(:has(.ls-news__date)) .ls-news__text{grid-column:1 / -1}
  .ls-skin--school .ls-richtext table{display:block;overflow-x:auto;font-size:.88rem}
}

/* 12. Motion: boards lift like pinned sheets; nothing moves for reduced motion or with animations off */
@media (prefers-reduced-motion:reduce){.ls-skin--school .ls-v--links .ls-card,.ls-skin--school .ls-v--links .ls-card::after{transition:none;transform:none!important}}
.ls-skin--school.ls-anim--off .ls-v--links .ls-card{transition:none;transform:none!important}

/* 13. Header fit: the full menu stays visible from 1200 px – tighter links, the phone as an icon below 1600 px */
body.ls-skin--school .ls-header .ls-nav__link{font-family:var(--ls-font-body);font-weight:600;letter-spacing:0}
@media (min-width:1200px){body.ls-skin--school .ls-header .ls-nav__link{padding-inline:10px;font-size:.97rem}}
@media (min-width:1200px){.ls-skin--school .ls-header__phone span{display:none}}

/* 14. Flat planes everywhere: no outlines or soft shadows on person cards, contact tables, map, photos; dark bands flat */
.ls-skin--school .ls-media--rounded img{box-shadow:none;border-radius:var(--sch-r)}
.ls-skin--school .ls-person{border:0;background:#fff;box-shadow:var(--sch-plane-shadow)}
.ls-skin--school .ls-access__dl{border:0;background:#fff;box-shadow:var(--sch-plane-shadow)}
.ls-skin--school .ls-access__row dt{color:var(--sch-b)}
.ls-skin--school .ls-map{border:0}
.ls-skin--school .ls-bg--dark,.ls-skin--school .ls-bg--dark:has(+ .ls-bg--dark),.ls-skin--school .ls-bg--dark + .ls-bg--dark{background:var(--ls-primary)}
.ls-skin--school .ls-block--cta.ls-bg--dark{background:var(--sch-b)}

/* 15. Anchors row: air between the sticky tabs and the first register under them */
.ls-skin--school .ls-block--anchors + .ls-block{padding-top:clamp(28px,3vw,44px)!important}

/* 16. Person cards: text inside the sheet; imported news repeat their opening lines as the lead – the body already has them */
.ls-skin--school .ls-member__body{padding:16px 18px 20px}
.ls-skin--school .ls-member__photo img{border-radius:var(--sch-r) var(--sch-r) 0 0}
.ls-skin--school .ls-post-head__lead{display:none}

/* 17. Dropdowns: a white sheet with a clear edge (the page ground is the same blue-grey), reading face, a quick fade */
body.ls-skin--school .ls-header :is(.ls-nav__sublink,.ls-nav__subhead){font-family:var(--ls-font-body);font-weight:600;font-size:.98rem;letter-spacing:0}
@media (min-width:1200px){
  body.ls-skin--school:not(.ls-nav-compact) .ls-nav__sub{background:#fff;border-radius:16px;
    box-shadow:0 0 0 1px color-mix(in srgb,var(--ls-text) 10%,#0000),0 24px 48px -20px color-mix(in srgb,var(--ls-primary) 45%,#0000);
    transition:opacity .12s,visibility .12s;transform:none}
  body.ls-skin--school:not(.ls-nav-compact) .ls-nav__sublink:hover{background:color-mix(in srgb,var(--sch-y) 22%,#fff)}
}

/* 18. Board sublinks: every line is its own link above the card's stretched link; the hovered line lights up */
.ls-skin--school .ls-card__sublinks{position:relative;z-index:2;display:grid;gap:2px;margin:10px 0 0 -10px;padding:0;list-style:none}
.ls-skin--school .ls-card__sublink{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:40px;padding:6px 10px;border-radius:10px;
  color:color-mix(in srgb,var(--_fg) 92%,#0000);font-size:1rem;font-weight:500;text-decoration:none;transition:background-color .15s,color .15s}
.ls-skin--school .ls-card__sublink::after{content:"→";font-weight:700;opacity:0;transform:translateX(-6px);transition:opacity .15s,transform .2s cubic-bezier(.2,.7,.2,1)}
.ls-skin--school .ls-card__sublink:is(:hover,:focus-visible){background:color-mix(in srgb,#fff 22%,#0000);color:var(--_fg)}
.ls-skin--school .ls-v--links .ls-card:nth-child(3n+1) .ls-card__sublink:is(:hover,:focus-visible){background:color-mix(in srgb,#fff 45%,#0000)}
.ls-skin--school .ls-card__sublink:is(:hover,:focus-visible)::after{opacity:1;transform:none}
.ls-skin--school .ls-card__sublink:focus-visible{outline:2px solid var(--_fg);outline-offset:1px}
.ls-skin--school .ls-v--links .ls-card:has(.ls-card__sublinks){padding-bottom:0}
.ls-skin--school .ls-v--links .ls-card:has(.ls-card__sublink:hover){transform:none}
.ls-skin--school .ls-v--links .ls-card__link:hover{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:6px}
@media (prefers-reduced-motion:reduce){.ls-skin--school .ls-card__sublink,.ls-skin--school .ls-card__sublink::after{transition:none}}
/* the icon disc stays white on a hovered board (plus.css tints it with the accent, which vanishes on the blue board) */
.ls-skin--school .ls-v--links .ls-card:is(:hover,:focus-within) .ls-card__icon{background:#fff;color:#14213F}

/* 19. Header with the full official name: the menu keeps one line (a caret never wraps under its label); when it does
   not fit, theme.js switches to the burger instead of squeezing the menu */
@media (min-width:1200px){
  body.ls-skin--school .ls-header .ls-nav__link{padding-inline:7px}
  body.ls-skin--school .ls-header .ls-nav{flex-shrink:0}
  body.ls-skin--school .ls-nav__item{white-space:nowrap}
}

/* 20. Portrait beside text (director): never taller than the screen – width from the viewport height, 440 px at most */
.ls-skin--school .ls-block--image_text .ls-media--portrait{width:min(100%,440px,calc((100svh - 190px) * .8));margin-inline:auto}
@media (max-width:959px){.ls-skin--school .ls-block--image_text .ls-media--portrait{width:min(100%,360px)}}

/* 21. Scale (owner 2026-10-22: "everything 15–20 % smaller"): the root size scales every rem-based font, button and
   gap; section paddings, the header and the px-sized parts of this skin are cut by the same ~18 % */
html:has(> body.ls-skin--school){font-size:87.5%;--ls-pad:clamp(50px,32px + 4vw,90px);--ls-header-h:64px}
@media (max-width:959px){html:has(> body.ls-skin--school){font-size:93.75%}}
.ls-skin--school .ls-sp--compact{--ls-pad:clamp(28px,19px + 2vw,46px)}
.ls-skin--school .ls-sp--large{--ls-pad:clamp(70px,45px + 5.6vw,128px)}
.ls-skin--school .ls-logo__img{width:40px;height:40px}
.ls-skin--school .ls-header .ls-btn{min-height:40px}
.ls-skin--school .ls-v--links .ls-card{min-height:clamp(180px,15.5vw,246px)}
.ls-skin--school .ls-v--links .ls-card__body{gap:14px;padding:clamp(18px,1.8vw,28px)}
.ls-skin--school .ls-v--links .ls-card__icon{width:48px;height:48px}
.ls-skin--school .ls-v--links .ls-card__icon .ls-icon{width:22px;height:22px}
.ls-skin--school .ls-card__sublink{min-height:34px;padding:5px 9px}
@media (min-width:768px){
  .ls-skin--school .ls-news__link{grid-template-columns:130px 112px minmax(0,1fr) 36px;padding:16px 18px;gap:15px}
  .ls-skin--school .ls-news__link:not(:has(.ls-news__date)){grid-template-columns:112px minmax(0,1fr) 36px}
}
.ls-skin--school .ls-block--hero.ls-v--split .ls-hero__media picture::before{inset:auto -14px -14px 18%}
.ls-skin--school .ls-block--image_text .ls-media--portrait{width:min(100%,380px,calc((100svh - 170px) * .8))}
@media (min-width:960px){.ls-skin--school .ls-block--image_text.ls-v--image-left .ls-media--portrait{margin-inline:0 auto}.ls-skin--school .ls-block--image_text.ls-v--image-right .ls-media--portrait{margin-inline:auto 0}}