/**
 * Painting technologies — the technology page (single-technologija.php) and
 * the technology list (page-technologies.php).
 *
 * Taken from dazymas-technologija.html and dazymas-2.html; the cards (.dz-card)
 * are shared, the "other technologies" row shrinks them. Colours, .wrap,
 * .btn, .crumbs and .sec-head come from main.css.
 */

/* ---------- top: photos, facts, price ---------- */
.tc-top{display:grid; grid-template-columns:1.05fr 1fr; gap:36px; align-items:start; padding:6px 0 34px}
.tc-media{min-width:0}
.tc-media #tcBig{display:block; width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:14px; background:var(--soft)}
.tc-thumbs{display:flex; gap:10px; margin-top:10px; overflow-x:auto}
.tc-thumbs button{flex:0 0 92px; width:92px; height:70px; padding:0; border:1.5px solid var(--line); border-radius:9px; overflow:hidden; background:#fff; cursor:pointer}
.tc-thumbs button.on{border-color:var(--brand)}
.tc-thumbs img{width:100%; height:100%; object-fit:cover}
.tc-info{min-width:0}
.tc-info h1{font-size:clamp(26px,3.2vw,38px)}
.tc-info .lead{color:#3d4136; margin:12px 0 0; font-size:15px; max-width:52ch}
.tc-info .lead p{margin:0 0 8px}
.tc-info .lead p:last-child{margin-bottom:0}
.tc-facts{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:20px 0 0}
.tc-facts div{background:var(--soft); border-radius:10px; padding:12px 14px}
.tc-facts > div > span{display:block; font-size:12px; color:var(--mut); text-transform:uppercase; letter-spacing:.05em}
.tc-facts b{font-family:"Anybody",sans-serif; font-size:17px}
.tc-price{display:flex; gap:26px; flex-wrap:wrap; margin:20px 0 0; padding:16px 0 0; border-top:1px solid var(--line)}
.tc-price div{display:flex; flex-direction:column; gap:2px}
.tc-price span{font-size:12.5px; color:var(--mut)}
.tc-price b{font-family:"Anybody",sans-serif; font-weight:700; font-size:22px}
.tc-price .hint{flex:0 0 100%; margin:4px 0 0; font-size:12.5px; color:var(--mut)}
.tc-cta{display:flex; gap:12px; flex-wrap:wrap; margin-top:20px}
.tc-cta .btn .arr, .tc-go .arr{width:17px; height:17px; flex:0 0 17px; transition:transform .2s}
.tc-cta .btn:hover .arr, .tc-go:hover .arr{transform:translateX(3px)}

/* ---------- layers + how it works ---------- */
.tc-cols{display:grid; grid-template-columns:1fr 1fr; gap:34px; padding:10px 0 0}
.tc-sec{padding:16px 0 26px}
.tc-sec h2{font-size:clamp(20px,2.2vw,26px); margin-bottom:14px}
.tc-layers{list-style:none; margin:0; padding:0; counter-reset:l}
.tc-layers li{counter-increment:l; display:grid; grid-template-columns:28px 1fr; gap:2px 12px; padding:11px 0; border-top:1px solid var(--line)}
.tc-layers li::before{content:counter(l); grid-row:1 / span 2; font-family:"Anybody",sans-serif; font-weight:700; color:var(--brand-d)}
.tc-layers b{grid-column:2; font-size:15px}
.tc-layers span{grid-column:2; font-size:14px; color:var(--mut)}
.tc-steps{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.tc-steps li{display:flex; gap:13px; align-items:center; min-height:30px}
.tc-steps b{flex:0 0 30px; height:30px; border-radius:7px; background:var(--brand); color:#fff;
            font-family:"Anybody",sans-serif; display:flex; align-items:center; justify-content:center; font-size:15px}
.tc-steps li > span{font-size:14px; color:#3d4136; line-height:1.45}
.tc-go{display:inline-flex; align-items:center; gap:6px; margin-top:4px; font-weight:600; color:var(--brand-d);
       text-decoration:underline; text-underline-offset:3px}
.tc-go .arr{width:15px; height:15px; flex:0 0 15px}
.callout{display:flex; gap:12px; align-items:flex-start; background:var(--soft); border-radius:12px; padding:15px 17px; margin:16px 0 0}
.callout svg{width:19px; height:19px; flex:0 0 19px; color:var(--brand-d); margin-top:2px}
.callout p{margin:0; font-size:13.5px; color:#3d4136; line-height:1.5}

/* ---------- colour palette ---------- */
.tc-pal .sec-head{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:6px}
.fsearch{display:flex; align-items:center; gap:7px; border:1px solid var(--line); border-radius:8px; padding:7px 9px; margin:4px 0 10px}
.fsearch svg{width:15px; height:15px; color:var(--mut); flex:0 0 15px}
.fsearch input{border:none; outline:none; font:inherit; font-size:14px; width:100%; background:none}
.tc-pal .fsearch{margin:0; min-width:220px}
.tc-pal .hint{font-size:12.5px; color:var(--mut); margin:0 0 14px}
.tc-cols-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:12px}
.tc-cols-grid .sw{position:relative; cursor:pointer; text-align:center}
.tc-cols-grid .sw input{position:absolute; opacity:0; width:0; height:0}
.tc-cols-grid .sw span{display:block; aspect-ratio:1/1; border-radius:10px; background-size:cover; background-position:center;
                       box-shadow:0 0 0 1px var(--line) inset; transition:.15s}
.tc-cols-grid .sw b{display:block; margin-top:6px; font-size:12px; font-weight:500; color:var(--mut)}
.tc-cols-grid .sw:hover span{box-shadow:0 0 0 2px var(--ink) inset}
.tc-cols-grid .sw input:checked + span{box-shadow:0 0 0 3px var(--brand) inset}
.tc-cols-grid .sw input:focus-visible + span{outline:2px solid var(--brand-d); outline-offset:2px}
.tc-cols-grid .sw[hidden]{display:none}
.tc-none{font-size:14px; color:var(--mut); margin:4px 0 0}

/* ---------- technology cards: the list sizes from dazymas-2.html ---------- */
.dz-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:16px}
.dz-card{position:relative; display:block; aspect-ratio:1/1; border-radius:14px; overflow:hidden; background:var(--soft)}
.dz-card img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s ease}
.dz-card:hover img{transform:scale(1.04)}
.dz-card[hidden]{display:none}
/* the use tag explains why a name repeats: one card per use */
.dz-card .tag{position:absolute; top:12px; left:12px; z-index:2; background:rgba(255,255,255,.94); color:var(--ink);
              font-size:11.5px; font-weight:600; letter-spacing:.02em; padding:4px 9px; border-radius:6px}
/* darkening at the bottom keeps the white text readable on any photo */
.dz-card .ov{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:flex-end; gap:7px;
             padding:18px; color:#fff;
             background:linear-gradient(180deg, rgba(20,24,14,0) 38%, rgba(20,24,14,.55) 72%, rgba(20,24,14,.82) 100%)}
.dz-card .nm{font-family:"Anybody",sans-serif; font-weight:600; font-size:clamp(17px,1.5vw,20px); line-height:1.15}
/* care left, price right, on one line in every card */
.dz-card .meta{display:flex; align-items:baseline; justify-content:space-between; gap:4px 14px; flex-wrap:wrap; font-size:13.5px; color:rgba(255,255,255,.88)}
.dz-card .meta .price{font-weight:600; color:#fff; white-space:nowrap}
.dz-card .cols{display:flex; align-items:center; gap:6px; margin-top:2px; min-height:20px}
.dz-card .cols i{width:20px; height:20px; border-radius:50%; background-size:cover; background-position:center;
                 box-shadow:0 0 0 1.5px rgba(255,255,255,.85)}
.dz-card .cols b{font-size:12.5px; font-weight:600; color:rgba(255,255,255,.9)}
.dz-card .cols .one{font-size:12.5px; color:rgba(255,255,255,.85); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* "other technologies": four in a row, half the size of the list cards */
.dz-grid.tc-other{grid-template-columns:repeat(4,1fr); gap:12px}
.dz-grid.tc-other .dz-card{aspect-ratio:1/1; border-radius:10px}
.dz-grid.tc-other .dz-card .ov{padding:12px 13px; gap:4px}
.dz-grid.tc-other .dz-card .nm{font-size:15px}
.dz-grid.tc-other .dz-card .meta{font-size:11.5px; gap:4px 10px; justify-content:flex-start}
.dz-grid.tc-other .dz-card .tag{top:9px; left:9px; font-size:10.5px; padding:3px 7px}
.dz-grid.tc-other .dz-card .cols{min-height:16px}
.dz-grid.tc-other .dz-card .cols i{width:16px; height:16px}
.dz-grid.tc-other .dz-card .cols b, .dz-grid.tc-other .dz-card .cols .one{font-size:11px}

@media(max-width:1000px){
  .tc-top{grid-template-columns:1fr; gap:22px}
  .tc-cols{grid-template-columns:1fr; gap:6px}
}
@media(max-width:900px){
  .dz-grid.tc-other{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:1100px){
  .dz-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:720px){
  .dz-grid{grid-template-columns:1fr; gap:14px}
  .dz-card{aspect-ratio:3/2}
}
@media(max-width:560px){
  .tc-facts{grid-template-columns:1fr}
  .tc-cols-grid{grid-template-columns:repeat(auto-fill,minmax(74px,1fr)); gap:10px}
  /* two small cards in a row cannot fit a long (Russian) name in a square:
     the card grows with its text instead, and the tag keeps its own strip */
  .dz-grid.tc-other .dz-card{aspect-ratio:auto; min-height:190px}
  .dz-grid.tc-other .dz-card .ov{position:relative; inset:auto; min-height:190px; padding-top:38px}
  .tc-pal .sec-head{flex-wrap:wrap}
  .tc-pal .fsearch{min-width:0; flex:1 1 100%}
}

/* ---------- technology list: page-technologies.php ---------- */
.page-head .lead{margin-top:10px; font-size:15px; color:var(--mut)}
.page-head .lead p{margin:0}
.dz-layout{display:grid; grid-template-columns:210px 1fr; gap:28px; align-items:start; padding:6px 0 56px}
.dz-toolbar{display:flex; align-items:center; gap:14px; margin-bottom:14px}
.dz-toolbar .shown{font-size:14px; color:var(--mut)}
.dz-toolbar .shown b{color:var(--ink)}
.dz-empty{padding:30px 0; color:var(--mut)}

/* Filter column — the same look as the category filters (category.css), only
   the rules this page uses, so the whole catalogue sheet is not loaded here. */
.filters{position:sticky; top:96px; background:transparent; overflow:hidden}
.filters .fhead{display:flex; align-items:center; justify-content:space-between; padding:0 0 12px; border-bottom:1px solid var(--line)}
.filters .fhead b{font-family:"Anybody",sans-serif; font-size:15px}
.filters .clear{font-size:12.5px; color:var(--mut); background:none; border:none; cursor:pointer; text-decoration:underline}
.filters .clear:hover{color:var(--ink)}
.fclose{display:none; background:none; border:none; cursor:pointer; padding:4px; margin-left:10px; color:var(--mut); vertical-align:middle}
.fclose svg{width:20px; height:20px}
.fclose:hover{color:var(--ink)}
.fapply{display:none}
.fmask{position:fixed; inset:0; background:rgba(15,20,10,.45); opacity:0; visibility:hidden; transition:.2s; z-index:190}
.fmask.on{opacity:1; visibility:visible}
.fgroup{border-bottom:1px solid var(--line)}
.fgroup:last-child{border-bottom:none}
.fgroup>summary{list-style:none; cursor:pointer; padding:12px 0; font-weight:600; font-size:14px;
                display:flex; align-items:center; justify-content:space-between}
.fgroup>summary::-webkit-details-marker{display:none}
.fgroup>summary::after{content:""; width:8px; height:8px; flex:0 0 8px; margin-right:4px;
                       border-right:1.6px solid var(--mut); border-bottom:1.6px solid var(--mut);
                       transform:rotate(45deg) translateY(-2px); transition:transform .2s}
.fgroup[open]>summary::after{transform:rotate(-135deg) translateY(-2px)}
.fbody{padding:2px 0 13px}
.fopt{display:flex; align-items:center; gap:9px; padding:6px 0; font-size:14px; cursor:pointer}
.fopt input{width:17px; height:17px; accent-color:var(--brand); flex:0 0 17px; margin:0}
.fopt .n{margin-left:auto; font-size:12.5px; color:var(--mut)}
/* an option that would leave nothing: dimmed, not hidden, so the column keeps its height */
.fopt.off{opacity:.45}
.fbtn{display:none; align-items:center; gap:9px; font-family:"General Sans",sans-serif; font-size:14px; font-weight:600; color:var(--ink);
      background:#fff; border:1.5px solid var(--line); border-radius:8px; padding:11px 18px; cursor:pointer; transition:.15s}
.fbtn:hover{border-color:var(--brand); color:var(--brand-d)}
.fbtn svg{width:18px; height:18px}

@media(max-width:1100px){
  .dz-layout{grid-template-columns:1fr}
  .filters{position:fixed; inset:0 auto 0 0; width:min(360px,92vw); z-index:200; background:#fff;
           transform:translateX(-100%); transition:.25s; overflow-y:auto; padding:0 18px 82px}
  .filters .fhead{position:sticky; top:0; background:#fff; z-index:2; padding:14px 0}
  .fclose{display:inline-block}
  .fapply{display:block; position:fixed; left:0; width:min(360px,92vw); bottom:0; padding:12px 16px;
          background:#fff; border-top:1px solid var(--line)}
  .fapply .btn{width:100%; justify-content:center}
  .filters.open{transform:none}
  .fbtn{display:inline-flex}
  .fgroup>summary{padding:16px 0; font-size:16px}
  .fopt{padding:10px 0; font-size:16px}
  .fopt input{width:20px; height:20px; flex:0 0 20px}
}