/* Экскурсии: рецептурные бланки, снятые с аптечной наколки.
   Программа - бланк: сверху отверстие от наколки, печатная рамка, условия - строки бланка на линейках, тип программы - оттиск штампа,
   кнопка записи - отрывной корешок за перфорацией. Свёрнутые программы висят пачкой на наколке, «Показать еще» снимает их
   (js/excursions.js). Без скриптов и при prefers-reduced-motion всё стоит на месте и видно целиком. Общие файлы не тронуты. */
.pg-excursions{--rx-rule:rgba(74,47,20,.4);--rx-hole:21px;--rx-paper:linear-gradient(176deg,#f1e4c2 0%,#e8d8b0 58%,#dfcfa2 100%);--stamp:#3a3489}
.pg-excursions .sec-progs{padding-bottom:clamp(30px,5vw,64px)}
.pg-excursions .progs{gap:28px 24px}

/* ---------- бланк ---------- */
.pg-excursions .prog{position:relative;isolation:isolate;gap:0;padding:0;background:none;box-shadow:none}
.pg-excursions .prog::before{content:"";position:absolute;z-index:-1;left:5px;right:5px;top:8px;bottom:0;box-shadow:0 12px 22px 2px rgba(0,0,0,.55)}      /* тень листа: лежит под бланком и корешком */
.prog-sheet{position:relative;flex:1 1 auto;display:flex;flex-direction:column;gap:14px;min-width:0;padding:54px 24px 28px;color:var(--ink);
  background:
    radial-gradient(circle at 50% 100%,rgba(22,17,11,.92) 1.3px,transparent 1.9px) 4px 100%/9px 3px repeat-x,
    radial-gradient(ellipse 46% 26% at 3% 99%,rgba(74,50,22,.13),transparent 62%),
    radial-gradient(ellipse 34% 20% at 98% 1%,rgba(74,50,22,.1),transparent 62%),
    var(--rx-paper);
  /* отверстие от наколки и два полукруглых выреза у линии отрыва - настоящие, сквозь них виден фон */
  -webkit-mask:radial-gradient(circle at 50% var(--rx-hole),transparent 4.4px,#000 5.2px),radial-gradient(circle at 0 100%,transparent 6px,#000 6.8px),radial-gradient(circle at 100% 100%,transparent 6px,#000 6.8px);
  -webkit-mask-composite:source-in;
  mask:radial-gradient(circle at 50% var(--rx-hole),transparent 4.4px,#000 5.2px),radial-gradient(circle at 0 100%,transparent 6px,#000 6.8px),radial-gradient(circle at 100% 100%,transparent 6px,#000 6.8px);
  mask-composite:intersect}
.prog-sheet::before{content:"";position:absolute;left:50%;top:0;width:1px;height:calc(var(--rx-hole) - 4px);background:rgba(40,26,8,.34);transform:rotate(7deg);transform-origin:50% 100%}      /* надрыв от острия до края листа */
.prog-sheet::after{content:"";position:absolute;left:10px;right:10px;top:38px;bottom:14px;border:1px solid rgba(74,47,20,.52);outline:1px solid rgba(74,47,20,.24);outline-offset:-5px;pointer-events:none}      /* печатная рамка бланка */
.prog[data-kind=blokada] .prog-sheet{--rx-paper:linear-gradient(176deg,#e9dcbc 0%,#dccda4 58%,#d2c297 100%)}
.prog[data-kind=blokada] .prog-sheet::after{border-width:2px;outline-offset:-6px}

.pg-excursions h3.prog-h{font-size:clamp(1.56rem,5.4vw,1.92rem);line-height:1.1}
.pg-excursions .prog .orn{margin:-2px 0 0}
.pg-excursions .prog .orn svg{width:150px}
.pg-excursions .prog-txt{font-size:1.04rem;line-height:1.56;color:#1c1206}

/* возраст школьной программы - вписан в бланк от руки, на линейке */
.pg-excursions .prog-age{margin-top:-4px;padding-bottom:5px;border-bottom:1px solid var(--rx-rule);font-family:var(--serif);font-style:italic;font-weight:500;font-size:1.34rem;line-height:1.2;color:#232a55}

/* картинка программы: вклеена в бланк, в своих цветах */
.pg-excursions .prog-ph{margin:0}
.pg-excursions .prog-ph img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border:0;outline:1px solid rgba(40,26,8,.55);box-shadow:0 2px 5px rgba(40,26,8,.4)}

/* тип программы - оттиск штампа: двойная рамка, неровная краска, поставлен от руки чуть косо */
.pg-excursions h4.prog-h{position:relative;align-self:flex-start;width:max-content;max-width:min(100%,15.4em);margin:6px 0 2px 3px;padding:8px 14px 7px;border:2px solid currentColor;text-align:center;
  font-family:'Playfair Display','Old Standard TT',Georgia,serif;font-weight:900;font-size:.88rem;letter-spacing:.1em;line-height:1.3;color:var(--stamp);
  transform:rotate(var(--st-r,-2.4deg));transform-origin:12% 50%;mix-blend-mode:multiply;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='120'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -2.1 2.05'/%3E%3C/filter%3E%3Crect width='260' height='120' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/260px 120px;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='120'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 -2.1 2.05'/%3E%3C/filter%3E%3Crect width='260' height='120' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/260px 120px}
.pg-excursions h4.prog-h::after{content:"";position:absolute;inset:2px;border:1px solid currentColor;pointer-events:none}
.prog[data-kind=interaktiv]{--stamp:#3a3489}
.prog[data-kind=rassledovanie]{--stamp:#8a2318}
.prog[data-kind=igra]{--stamp:#1d5a3c}
.prog[data-kind=ekskursiya]{--stamp:#26406f}
.pg-excursions .prog:nth-child(3n+2){--st-r:1.7deg}
.pg-excursions .prog:nth-child(3n){--st-r:-1.1deg}
.pg-excursions h4.prog-h.st-wait{opacity:0}      /* ждёт удара штемпеля: класс ставит только скрипт и только бланкам ниже экрана */

/* условия - строки бланка: печатная подпись и вписанное значение, каждая на своей линейке */
.pg-excursions .tbl{font-size:1.02rem;line-height:1.42}
.pg-excursions .tbl tr{border-top:1px solid var(--rx-rule)}
.pg-excursions .tbl tr:last-child{border-bottom:1px solid var(--rx-rule)}
.pg-excursions .tbl td{border:0;padding:9px 0 8px;vertical-align:top}
.pg-excursions .tbl tr:last-child td{border:0}
.pg-excursions .tbl .k{width:39%;padding-right:16px;font-style:italic;font-size:.95rem;line-height:1.36;color:#5a3d18}
.pg-excursions .tbl .v{color:#160d04}
@container (max-width:430px){
  .pg-excursions .tbl tr{display:block}
  .pg-excursions .tbl td{display:block;width:auto}
  .pg-excursions .tbl .k{width:auto;padding:8px 0 0;font-size:.95rem}
  .pg-excursions .tbl .v{padding:2px 0 9px}
}

/* ---------- отрывной корешок с кнопкой записи ---------- */
.pg-excursions .prog-act{position:relative;margin:0;padding:20px 24px 22px;transform-origin:0 0;transition:transform .42s cubic-bezier(.2,.7,.2,1);
  background:radial-gradient(circle at 50% 0,rgba(22,17,11,.92) 1.3px,transparent 1.9px) 4px 0/9px 3px repeat-x,linear-gradient(178deg,#eadbb4,#dfcea0);
  -webkit-mask:radial-gradient(circle at 0 0,transparent 6px,#000 6.8px),radial-gradient(circle at 100% 0,transparent 6px,#000 6.8px);
  -webkit-mask-composite:source-in;
  mask:radial-gradient(circle at 0 0,transparent 6px,#000 6.8px),radial-gradient(circle at 100% 0,transparent 6px,#000 6.8px);
  mask-composite:intersect}
.pg-excursions .prog-act .btn{display:block;padding:15px 12px;text-align:center;white-space:normal;letter-spacing:.13em}
@media (hover:hover){
  .pg-excursions .prog-act:hover{transform:rotate(1.25deg) translateY(1px)}      /* корешок надорван по перфорации */
}
.pg-excursions .prog-act:active{transform:rotate(2.1deg) translateY(3px)}

/* ---------- наколка с пачкой оставшихся бланков и «Показать еще» ---------- */
.pg-excursions .sec-progs[data-sec=karty]{overflow-x:hidden;overflow-x:clip}      /* бланк в полёте повёрнут и на телефоне выходит за край экрана - страница от этого не должна становиться шире */
.pg-excursions .sec-progs[data-sec=karty]>.wrap{display:flex;flex-direction:column}
.pg-excursions .sec-progs[data-sec=karty]>.wrap>.progs{order:1}
.pg-excursions .more-zone{order:2;display:flex;flex-direction:column;align-items:center;margin-top:34px}
.pg-excursions .more{order:3;margin-top:28px}
.pg-excursions .more.open+.more-zone{order:4}
.pg-excursions .more-act{margin-top:10px}
html:not(.js) .pg-excursions .more-zone{display:none}
.nakolka{position:relative;width:250px;height:190px}
.nakolka::before{content:"";position:absolute;left:50%;top:0;width:46px;height:46px;margin-left:-23px;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#f7dc9a 0%,#d9a548 34%,#8f6220 78%,#5c3d10 100%);box-shadow:0 0 0 1px #3a260a,inset 0 0 0 4px rgba(92,61,16,.35),0 5px 10px rgba(0,0,0,.6)}      /* латунная розетка наколки */
.nakolka i{position:absolute;left:50%;top:9px;width:118px;height:158px;margin-left:-59px;transform-origin:50% 14px;transform:translateY(var(--drop,0px)) rotate(var(--a,0deg));
  background:
    linear-gradient(rgba(74,47,20,.55),rgba(74,47,20,.55)) 50% 44px/58% 2px no-repeat,
    repeating-linear-gradient(to bottom,rgba(74,47,20,.26) 0 1px,transparent 1px 9px) 50% 58px/72% 64px no-repeat,
    linear-gradient(rgba(42,26,8,.8),rgba(42,26,8,.8)) 50% 136px/72% 11px no-repeat,
    var(--rx-paper);
  box-shadow:0 0 0 1px rgba(74,47,20,.2),0 7px 12px rgba(0,0,0,.5)}
.nakolka i:nth-child(1){--a:-15deg}
.nakolka i:nth-child(2){--a:11deg}
.nakolka i:nth-child(3){--a:-7deg}
.nakolka i:nth-child(4){--a:5deg}
.nakolka i:nth-child(5){--a:-1.5deg}
.nakolka b{position:absolute;left:50%;top:14px;width:18px;height:18px;margin-left:-9px;border-radius:50%;
  background:radial-gradient(circle at 36% 30%,#fff0c4 0%,#f0be62 28%,#a87626 66%,#5f4012 100%);box-shadow:0 0 0 1px #3a260a,0 3px 5px rgba(0,0,0,.6),3px 7px 5px rgba(0,0,0,.28)}      /* острие, на котором висит пачка */
.pg-excursions .more.open+.more-zone .nakolka{height:52px}
.pg-excursions .more.open+.more-zone .nakolka i{visibility:hidden}

@media (min-width:700px){
  /* на листах одного ряда свободное место под текстом - пустые линейки бланка; корешки стоят на одной линии */
  .pg-excursions .prog-txt{flex:1 1 auto;display:flex;flex-direction:column}
  .pg-excursions .prog-txt::after{content:"";flex:1 1 0;min-height:0;background:linear-gradient(var(--rx-rule),var(--rx-rule)) 0 calc(100% - 19px)/100% 1px no-repeat,repeating-linear-gradient(to top,transparent 0 31px,var(--rx-rule) 31px 32px) 0 calc(100% - 19px)/100% calc(100% - 19px) no-repeat}
}
@media (min-width:900px){
  .pg-excursions .prog{padding:0}
  .prog-sheet{padding:58px 30px 30px}
  .prog-sheet::after{left:12px;right:12px;top:40px;bottom:16px}
  .pg-excursions .prog-act{padding:22px 30px 24px}
  .pg-excursions .progs-2{gap:30px}
  .pg-excursions .progs-2 .prog-sheet{padding:62px 44px 34px}
  .pg-excursions .progs-2 .prog-act{padding:22px 44px 26px}
  .pg-excursions .progs-2 .prog-act .btn{max-width:360px}
}
@media not all{
  .pg-excursions .prog-act,.pg-excursions .prog-act:hover,.pg-excursions .prog-act:active{transform:none}
}