/* ==========================================================================
   תלבושת אחידה לבתי ספר ולקייטנות - service page (service-school-preview.html)

   Built from the site's information-page language: the paper ground, Karantina
   display headlines, sand hairlines, the brand blue for anything actionable and
   for numbering, the sand box from the shipping page, and its "הנפח 28" stamp.
   Every picture is a real one: the shop's own product photographs (white studio
   ground, multiplied onto a sand tile) and the home page's job photographs.
   Colours come from theme.css tokens only.
   ========================================================================== */
.school-layout{
  --tile:color-mix(in srgb,var(--color-sand-300) 15%,var(--paper-background));
  --box:color-mix(in srgb,var(--color-sand-300) 17%,var(--paper-background));
  --soft:var(--color-soft-foreground);
  max-width:1320px;width:100%;min-width:0;margin:0 auto;padding:22px 40px 72px;
}
.school-layout [dir="ltr"]{unicode-bidi:isolate}
.school-layout p a{color:var(--color-primary)}
.school-layout :is(a,summary):focus-visible{outline:2px solid var(--color-primary);outline-offset:4px}

/* ── Hero: the headline, the lead, and one uniform in one colour ────────── */
.school-hero{display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,1fr);gap:56px;align-items:center;padding:26px 0 58px}
.school-hero-text{min-width:0}
/* three lines on every screen; the middle one is the longest (5.71em wide) and
   the sizes below keep it inside its column from 320px up */
.school-hero h1{font:700 clamp(60px,7vw,102px)/.93 var(--f-display);margin:0 0 28px}
.school-lead{font-size:19px;line-height:1.7;max-width:560px;margin:0 0 12px}
.school-lead-more{font-size:15px;line-height:1.75;max-width:520px;margin:0 0 30px;color:var(--soft)}
.school-actions{display:flex;align-items:center;gap:14px 28px;flex-wrap:wrap}
.school-page .submit{margin:0;width:auto;min-height:52px;padding:15px 30px;font-size:16px;text-decoration:none}
.school-page a.submit,.school-page a.submit:hover{color:var(--color-primary-foreground)}
.school-text-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;color:var(--color-primary);font-size:15px;text-underline-offset:5px}
.school-text-link span{transition:transform var(--motion-lift) var(--ease-out)}
.school-text-link:hover span{transform:translateX(-4px)}
.school-tel{display:inline-block;min-height:44px;padding-block:11px;color:var(--color-primary);font-size:15px;line-height:22px;text-underline-offset:5px;white-space:nowrap}

/* one uniform, one colour: the winter layer large, the two shirts beside it.
   Two rows of 1fr with the large tile across both keep all three square. */
.school-hero-art{margin:0;min-width:0}
.school-set{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);grid-template-rows:1fr 1fr;gap:12px}
.school-set-tile{grid-column:1;display:block;min-width:0;aspect-ratio:1;overflow:hidden;border-radius:10px;background:var(--tile)}
.school-set-tile--main{grid-column:2;grid-row:1 / span 2;aspect-ratio:auto;border-radius:12px}
.school-set-tile img{display:block;width:100%;height:100%;padding:6%;object-fit:contain;mix-blend-mode:multiply}
.school-set-tile--main img{padding:5%}
.school-hero-art figcaption{font-size:12px;line-height:1.6;color:var(--soft);margin:12px 0 0}

/* ── Index + content ────────────────────────────────────────────────────── */
.school-grid{display:grid;grid-template-columns:190px minmax(0,1fr);gap:60px;align-items:start}
.school-nav{display:flex;flex-direction:column;align-items:start;gap:2px;position:sticky;top:100px;border-top:1px solid var(--color-rule);padding-top:14px}
.school-nav a{padding:10px 0;text-decoration:none;font-size:15px;transition:color var(--motion-feedback) var(--ease-out)}
.school-nav a:hover{color:var(--color-primary)}
.school-content{min-width:0}
.school-content>section{scroll-margin-top:105px;border-top:1px solid var(--color-rule);padding-top:34px}
.school-content>section+section{margin-top:68px}
.school-content h2{font:700 clamp(40px,3.5vw,50px)/1.04 var(--f-display);margin:0 0 14px}
.school-section-lead{font-size:17px;line-height:1.75;margin:0 0 30px;max-width:720px}
.school-note{font-size:15px;line-height:1.8;color:var(--color-muted-foreground);margin:22px 0 0;max-width:760px}

/* ── What the uniform includes: five items, numbered like a kit list ────── */
.school-kit{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:38px 22px}
.school-item{position:relative;grid-column:span 2;display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;align-items:baseline;align-content:start;min-width:0}
.school-item--wide{grid-column:span 3}
.school-tile{grid-column:1 / -1;display:block;aspect-ratio:1;margin-bottom:16px;overflow:hidden;border-radius:10px;background:var(--tile)}
.school-tile img{display:block;width:100%;height:100%;padding:5%;object-fit:contain;mix-blend-mode:multiply;transition:transform var(--motion-glow) var(--ease-out)}
/* the two warm layers get a wider tile, shown in two of their colours */
.school-tile--pair{display:flex;align-items:center;justify-content:center;aspect-ratio:1.535}
.school-tile--pair img{flex:none;width:52%;height:auto;padding:0;margin-inline:-3%}
.school-item:hover .school-tile img{transform:scale(1.035)}
.school-item-num{font:400 19px/1.2 'Anton SC',sans-serif;color:var(--color-primary);direction:ltr}
.school-item h3{font-size:19px;line-height:1.4;font-weight:400;margin:0}
.school-item h3 a{color:var(--color-primary);text-underline-offset:5px}
/* the whole card is the link, the name is its label */
.school-item h3 a::after{content:'';position:absolute;inset:0;border-radius:10px}
.school-item>p{grid-column:2;font-size:14px;line-height:1.65;color:var(--soft);margin:5px 0 0}

/* the three shop categories behind the list, on the same three columns as the shirts */
.school-more{margin-top:40px;padding-top:26px;border-top:1px solid var(--color-rule)}
.school-more p{font-size:16px;line-height:1.85;margin:0 0 22px;max-width:720px}
.school-cats{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 22px}
.school-cat{display:flex;align-items:center;gap:16px;min-width:0;text-decoration:none}
.school-thumb{flex:none;display:block;width:72px;aspect-ratio:1;overflow:hidden;border-radius:8px;background:var(--tile)}
.school-thumb img{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply;transition:transform var(--motion-glow) var(--ease-out)}
.school-cat-name{font-size:17px;line-height:1.4;color:var(--color-primary);text-decoration:underline;text-underline-offset:5px}
.school-cat-arrow{color:var(--color-primary);transition:transform var(--motion-lift) var(--ease-out)}
.school-cat:hover .school-thumb img{transform:scale(1.07)}
.school-cat:hover .school-cat-arrow{transform:translateX(-4px)}

/* ── The emblem: three methods as three rows ────────────────────────────── */
.school-methods{list-style:none;margin:0;padding:0;border-top:1px solid var(--color-rule)}
.school-method{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr) 196px;grid-template-rows:auto auto;column-gap:36px;align-items:center;padding:20px 0;border-bottom:1px solid var(--color-rule)}
.school-method-tag{grid-column:1;grid-row:1;font-size:13px;color:var(--soft);margin:0 0 6px}
.school-method-name{grid-column:1;grid-row:2}
.school-method h3{font:700 46px/1 var(--f-display);margin:0}
.school-method-en{font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--soft);margin:6px 0 0;text-align:right;text-align:match-parent}
.school-method-desc{grid-column:2;grid-row:1 / -1;font-size:17px;line-height:1.7;margin:0;max-width:400px}
.school-method-art{grid-column:3;grid-row:1 / -1;position:relative;margin:0;aspect-ratio:3/2;overflow:hidden;border-radius:8px;background:var(--tile)}
.school-method-art img{display:block}
/* the home page's own job photographs, cropped in close */
.school-sheet{position:absolute;left:50%;top:13%;width:72%;aspect-ratio:1216/1846;transform:translateX(-50%) rotate(-6deg)}
.school-sheet-film{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 2px 3px var(--film-shadow-near)) drop-shadow(0 8px 10px var(--film-shadow-far))}
.school-sheet-art{position:absolute;left:50%;top:6%;width:74%;height:auto;transform:translateX(-50%)}
/* shirt and print are one box, so the four separations stay registered on the
   garment at any size (numbers from screen-hero.js) */
.school-tee{position:absolute;left:50%;top:50%;width:132%;aspect-ratio:1536/1024;transform:translate(-50%,-47%)}
.school-tee-shirt{position:absolute;inset:0;width:100%;height:100%}
.school-tee-ink{position:absolute;left:30.19%;top:21.07%;width:39.62%;aspect-ratio:1}
.school-tee-ink img{position:absolute;inset:0;width:100%;height:100%}
.school-cap{position:absolute;left:50%;top:50%;width:80%;height:auto;transform:translate(-50%,-50%)}

/* ── How to order: two steps, then how it reaches you ───────────────────── */
.school-steps{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 44px;counter-reset:step}
.school-steps>li{counter-increment:step;display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:start;min-width:0}
.school-steps>li::before{content:"0" counter(step);font:400 40px/1.05 'Anton SC',sans-serif;color:var(--color-primary)}
.school-steps p{font-size:17px;line-height:1.7;margin:0;max-width:400px}
.school-steps .school-text-link{margin-top:4px}
/* step three is the shipping page's sand box, with its address stamp */
.school-steps>.school-delivery{grid-column:1 / -1;grid-template-columns:auto minmax(0,1fr) 140px;gap:20px 28px;align-items:center;padding:30px 34px;border-radius:12px;background:var(--box)}
.school-steps>.school-delivery::before{align-self:start;margin-top:4px}
.school-way{display:grid;grid-template-columns:26px minmax(0,1fr);gap:16px;align-items:start}
.school-way+.school-way{margin-top:18px}
.school-steps .school-way p{font-size:16px;line-height:1.75;max-width:620px}
.school-icon{display:block;width:26px;height:26px;margin-top:1px;background:var(--color-primary);-webkit-mask:var(--school-icon) center/contain no-repeat;mask:var(--school-icon) center/contain no-repeat}
.school-icon--truck{--school-icon:url('assets/icons/lucide/truck.svg')}
.school-icon--store{--school-icon:url('assets/icons/lucide/store.svg')}
.school-steps .school-phone{font-size:15px;margin:20px 0 0;padding-inline-start:42px;color:var(--color-muted-foreground)}
.school-address-art{display:flex;flex-direction:column;align-items:center;justify-content:center;border:2px solid var(--color-primary);border-radius:7px;padding:16px 10px;color:var(--color-primary);transform:rotate(-4deg)}
.school-address-art span{font-size:20px}
.school-address-art strong{font:400 84px/1.15 'Anton SC',sans-serif}
.school-address-art small{font-size:15px}

/* ── Tips: three, side by side ──────────────────────────────────────────── */
.school-tip-list{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px 36px}
.school-tip-list li{position:relative;min-width:0;padding-top:20px;border-top:1px solid var(--color-rule)}
.school-tip-list li::before{content:'';position:absolute;top:-1px;inset-inline-start:0;width:34px;border-top:2px solid var(--color-primary)}
.school-tip-list h3{font-size:21px;line-height:1.3;font-weight:400;margin:0 0 10px}
.school-tip-list p{font-size:15px;line-height:1.75;color:var(--soft);margin:0}

/* ── Questions ──────────────────────────────────────────────────────────── */
.school-content .school-faq h2{margin-bottom:20px}
.school-faq details{padding:0;border-bottom:1px solid var(--color-rule)}
.school-faq details:first-of-type{border-top:1px solid var(--color-rule)}
.school-faq summary{display:flex;align-items:center;justify-content:space-between;gap:20px;cursor:pointer;list-style:none;padding:20px 0;font-size:17px}
.school-faq summary::after{content:'+';color:var(--color-primary);font-size:25px;line-height:1}
.school-faq details[open] summary::after{content:'−'}
.school-faq summary::-webkit-details-marker{display:none}
.school-faq details p{margin:0 0 22px;font-size:15px;line-height:1.8;max-width:640px;color:var(--color-muted-foreground)}

/* ── The request: the sand box ──────────────────────────────────────────── */
.school-content>.school-cta{border-top:0;padding-top:0}
.school-cta-box{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:48px;align-items:end;padding:44px 46px;border-radius:12px;background:var(--box)}
.school-content .school-cta-box h2{font-size:clamp(52px,5.2vw,76px);line-height:.96;margin:0}
.school-cta-copy p{font-size:17px;line-height:1.8;margin:0 0 24px;max-width:460px}

/* ── Narrower desktop ───────────────────────────────────────────────────── */
@media(max-width:1100px){
  .school-hero{gap:36px}
  .school-grid{grid-template-columns:160px minmax(0,1fr);gap:40px}
  .school-method{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr) 160px;column-gap:26px}
  .school-method h3{font-size:40px}
  .school-steps>.school-delivery{grid-template-columns:auto minmax(0,1fr) 120px}
  .school-address-art strong{font-size:70px}
  .school-cta-box{gap:34px;padding:36px}
}

/* ── Tablet ─────────────────────────────────────────────────────────────── */
@media(max-width:900px){
  .school-layout{padding-inline:28px}
  .school-hero{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:28px}
  .school-hero h1{font-size:clamp(60px,7.6vw,68px)}
  .school-lead{font-size:17px}
  .school-grid{grid-template-columns:150px minmax(0,1fr);gap:30px}
  .school-kit{gap:30px 16px}
  .school-item h3{font-size:17px}
  .school-cats{gap:12px 16px}
  .school-cat{gap:12px}
  .school-thumb{width:56px}
  .school-cat-name{font-size:15px}
  .school-method{grid-template-columns:minmax(0,1fr) 150px;grid-template-rows:auto auto auto;column-gap:22px}
  .school-method-desc{grid-column:1;grid-row:3;margin-top:10px}
  .school-method-art{grid-column:2}
  .school-steps{gap:28px 30px}
  .school-steps>.school-delivery{grid-template-columns:auto minmax(0,1fr);padding:26px}
  .school-address-art{display:none}
  .school-tip-list{gap:26px 24px}
  .school-cta-box{grid-template-columns:minmax(0,1fr);gap:20px;align-items:start}
}

/* ── Small tablet and phone: one column, the index becomes a row of links ─ */
@media(max-width:760px){
  .school-layout{padding-block:14px 48px}
  .school-hero{display:block;padding:20px 0 28px}
  .school-hero h1{font-size:clamp(48px,15.6vw,84px);line-height:.95;margin-bottom:20px}
  .school-lead{font-size:16px;line-height:1.7;margin-bottom:10px}
  .school-lead-more{font-size:14px;line-height:1.7;margin-bottom:22px}
  .school-actions{gap:8px 20px}
  .school-page .submit{min-height:48px;padding:13px 24px;font-size:15px}
  .school-hero-art{margin-top:26px;max-width:560px}
  .school-hero-art figcaption{margin-top:10px}

  .school-grid{display:block}
  .school-nav{position:static;flex-direction:row;flex-wrap:wrap;gap:0 20px;padding:8px 0 10px}
  .school-nav a{display:inline-flex;align-items:center;min-height:44px;padding:0;font-size:13px;text-decoration:underline}
  .school-nav .motion-spy{display:none}
  .school-content>section{scroll-margin-top:84px;padding-top:24px}
  .school-content>section+section{margin-top:48px}
  .school-content h2{font-size:40px;margin-bottom:12px}
  .school-section-lead{font-size:15px;line-height:1.7;margin-bottom:22px}
  .school-note{font-size:14px;margin-top:18px}

  .school-more{margin-top:30px;padding-top:20px}
  .school-more p{font-size:15px;line-height:1.8;margin-bottom:8px}
  .school-cats{grid-template-columns:minmax(0,1fr);gap:0}
  .school-cats li+li{border-top:1px solid var(--color-rule)}
  .school-cat{gap:16px;padding:10px 0}
  .school-thumb{width:60px}
  .school-cat-name{font-size:16px}
  .school-cat-arrow{margin-inline-start:auto}

  .school-method{grid-template-columns:minmax(0,1fr) 124px;column-gap:16px;padding:18px 0}
  .school-method-tag{align-self:end;font-size:12px;margin-bottom:4px}
  .school-method-name{align-self:start}
  .school-method h3{font-size:38px}
  .school-method-en{font-size:10.5px;margin-top:4px}
  .school-method-desc{grid-column:1 / -1;font-size:15px;line-height:1.65;margin-top:14px;max-width:none}
  .school-method-art{grid-row:1 / span 2}

  .school-steps{grid-template-columns:minmax(0,1fr);gap:0;margin-top:4px;border-top:1px solid var(--color-rule)}
  .school-steps>li{grid-template-columns:42px minmax(0,1fr);gap:12px;padding:16px 0;border-bottom:1px solid var(--color-rule)}
  .school-steps>li::before{font-size:30px}
  .school-steps p{font-size:15px;max-width:none}
  .school-steps>.school-delivery{grid-template-columns:minmax(0,1fr);gap:14px;margin-top:20px;padding:22px 20px 24px;border-bottom:0}
  .school-way{grid-template-columns:22px minmax(0,1fr);gap:12px}
  .school-way+.school-way{margin-top:14px}
  .school-icon{width:22px;height:22px}
  .school-steps .school-way p{font-size:15px;line-height:1.7}
  .school-steps .school-phone{font-size:14px;margin-top:16px;padding-inline-start:34px}

  .school-tip-list{grid-template-columns:minmax(0,1fr);gap:22px;margin-top:6px}
  .school-tip-list li{padding-top:16px}
  .school-tip-list h3{font-size:19px;margin-bottom:6px}
  .school-tip-list p{font-size:14px}

  .school-faq summary{font-size:16px;padding:18px 0}
  .school-faq details p{font-size:14px}

  .school-cta-box{padding:28px 26px 30px;gap:14px}
  .school-content .school-cta-box h2{font-size:52px}
  .school-cta-copy p{font-size:15px;margin-bottom:18px}
}

/* ── Phone ──────────────────────────────────────────────────────────────── */
@media(max-width:600px){
  .school-layout{padding-inline:16px}
  .school-hero-art{max-width:none}
  .school-set{gap:8px}

  /* four square tiles two by two, then the zip hoodie across the full width.
     The sweatshirt joins the squares in one colour (its second photo is lazy
     and hidden, so a phone never downloads it) */
  .school-kit{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 12px}
  .school-item,.school-item--wide{grid-column:span 1}
  .school-item:last-child{grid-column:1 / -1}
  .school-tile{margin-bottom:12px;border-radius:8px}
  .school-tile--pair{aspect-ratio:1.5}
  .school-tile--pair img{width:54%}
  .school-item:nth-child(4) .school-tile--pair{display:block;aspect-ratio:1}
  .school-item:nth-child(4) .school-tile--pair img{width:100%;height:100%;padding:5%;margin:0}
  .school-item:nth-child(4) .school-tile--pair img+img{display:none}
  .school-item{column-gap:9px}
  .school-item-num{font-size:16px}
  .school-item h3{font-size:16px}
  .school-item>p{font-size:13px;margin-top:3px}

  .school-cta-box{padding:26px 20px 28px}
}

@media(prefers-reduced-motion:reduce){
  .school-tile img,.school-thumb img,.school-text-link span,.school-cat-arrow,.school-nav a{transition:none}
  .school-item:hover .school-tile img,.school-cat:hover .school-thumb img,.school-cat:hover .school-cat-arrow,.school-text-link:hover span{transform:none}
}

/* English keeps the composition with a readable Latin type scale. */
html[lang^="en"] .school-hero h1{font-size:clamp(44px,5vw,74px);line-height:1.06}
html[lang^="en"] .school-content h2{line-height:1.1}
html[lang^="en"] .school-text-link [aria-hidden="true"]{display:inline-block;transform:scaleX(-1)}
html[lang^="en"] .school-method-en{text-align:left}