/* Лист 02, Архитектура и материалы (arhitektura.html). Подключается после base.css.
   Экран 1 фасад с выносками, экран 2 ползунок времени суток, экран 3 планшет образцов с лупой. */

/* ---------- экран 1: фасад с выносками ---------- */
.fasad.plate{padding-top:0}
.fasad__pin{position:relative;background:var(--bg)}
.fasad__photo{position:relative;height:max(380px,calc(100vh - var(--hdr) - 270px));height:max(380px,calc(100svh - var(--hdr) - 270px));overflow:hidden;background:#E3E6E4}
.fasad__photo img{width:100%;height:100%;object-fit:cover;object-position:62% 42%}
.fasad__ld{opacity:0;transition:opacity .6s var(--ease-out)}
.fasad__ld.is-on{opacity:1}
.fasad__ld.is-out{display:none}
/* подпись выноски на фото: тёмный текст на светлой подложке, читается на любом участке кадра */
.fasad .leader__t{display:flex;align-items:baseline;gap:8px;background:var(--surface);padding:4px 8px 4px 6px;border-bottom-color:var(--ink);box-shadow:0 10px 28px rgba(26,28,30,.14)}
.fasad .leader__t i,.fasad__list i{font:italic 600 11px/1 var(--ff-t);color:var(--bronze-ink);border:1px solid var(--bronze);padding:2px 4px;font-style:italic}
.fasad__list{display:none}
.fasad__plate{padding-top:clamp(28px,3vw,40px);padding-bottom:24px}
/* табличка как у виллы: заголовок, абзац и штамп в один ряд */
.fasad__plate .plate__title{grid-column:1/7;font-size:clamp(3.2rem,5.3vw,5.2rem)}
.fasad__plate .plate__lead{grid-column:7/10;grid-row:1;align-self:end;font-size:1.05rem}
.fasad__plate .stamp{grid-column:10/13;grid-row:1}

/* ---------- экран 2: ползунок времени суток ---------- */
.tl__frame{position:relative;aspect-ratio:16/9;overflow:hidden;background:#D9D4CA}
.tl__frame picture{position:absolute;inset:0}
.tl__img{width:100%;height:100%;object-fit:cover}
#tlDen,#tlVecher{opacity:0}
.tl__bar{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-top:28px}
.tl__time{font:400 clamp(2.6rem,3.8vw,3.6rem)/1 var(--ff-d);font-variant-numeric:tabular-nums;min-width:4ch}
.tl__sun{font-size:14px;text-align:right}
.tl__foot{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px 40px;align-items:baseline;margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.tl__moment{display:flex;gap:18px;align-items:baseline;max-width:70ch;color:var(--ink-2);min-height:3.2em}
.tl__moment b{font:italic 500 13px/1 var(--ff-t);color:var(--bronze-ink);flex:none}
.tl__date{text-align:right}

/* ---------- экран 3: планшет образцов ---------- */
.board-grid{align-items:start}
.board{grid-column:1/9;position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:auto auto;gap:var(--gap);padding:clamp(18px,2vw,28px);background:var(--sand);border:1px solid var(--line)}
.smp{position:relative;display:block;padding:0;border:0;background:#CFC8BB;overflow:hidden;cursor:none;text-align:left;outline-offset:3px}
.smp picture,.smp img{display:block;width:100%;height:100%}
.smp img{object-fit:cover;transition:transform .5s var(--ease-out)}
.smp--travertin{grid-column:1/3;grid-row:1/3;aspect-ratio:4/5}
.smp--steklo{grid-column:3/4;grid-row:1/2;aspect-ratio:1/1.55}
.smp--bronza{grid-column:4/5;grid-row:1/2;aspect-ratio:1/1;align-self:start}
.smp--granit{grid-column:3/5;grid-row:2/3;align-self:stretch;min-height:140px}
.smp__tag{position:absolute;left:10px;bottom:10px;display:flex;align-items:baseline;gap:8px;padding:5px 9px 5px 6px;background:var(--surface);font:500 13px/1.1 var(--ff-t);color:var(--ink);pointer-events:none}
.smp__tag i{font:italic 600 11px/1 var(--ff-t);color:var(--bronze-ink);border:1px solid var(--bronze);padding:2px 4px}
.smp::after{content:"";position:absolute;inset:0;border:1px solid transparent;pointer-events:none;transition:border-color .25s}
.smp.is-on::after{border-color:var(--ink)}
.smp.is-on .smp__tag{background:var(--ink);color:var(--bg)}
.smp.is-on .smp__tag i{color:var(--bg);border-color:var(--bg)}
/* лупа: выносной элемент чертежа, круг Ø200, рамка и внутреннее кольцо, ярлык ×3 на краю под 45° */
.loupe{position:absolute;left:0;top:0;width:200px;height:200px;margin:-100px 0 0 -100px;border-radius:50%;border:1px solid var(--ink);box-shadow:inset 0 0 0 5px var(--surface),inset 0 0 0 6px var(--line-2);background-color:var(--surface);background-repeat:no-repeat;pointer-events:none;opacity:0;transform:scale(.6);transition:opacity .25s var(--ease-out),transform .35s var(--ease-out);will-change:left,top;z-index:3}
.loupe.is-on{opacity:1;transform:none}
.loupe__lbl{position:absolute;left:calc(50% + 70.7px);top:calc(50% + 70.7px);transform:translate(-50%,-50%);padding:3px 6px;background:var(--surface);border:1px solid var(--ink);font:italic 600 12px/1 var(--ff-t);color:var(--ink)}
.pass{grid-column:9/13;position:sticky;top:calc(var(--hdr) + 32px);display:grid;gap:22px;align-content:start}
.pass__tbl{border-top:1px solid var(--ink-2)}
.pass__tbl>div{display:grid;grid-template-columns:118px 1fr;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)}
.pass__tbl dt{font:600 11px/1.5 var(--ff-t);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.pass__tbl dd{color:var(--ink)}
.pass.is-swap .pass__name,.pass.is-swap .pass__tbl dd,.pass.is-swap .pass__line{opacity:0}
.pass__name,.pass__tbl dd,.pass__line{transition:opacity .2s}

@media (max-width:980px){
  .fasad__plate .plate__title,.fasad__plate .plate__lead,.fasad__plate .stamp{grid-column:1/-1;grid-row:auto}
  .board,.pass{grid-column:1/-1}
  .pass{position:static;margin-top:32px}
}
@media (max-width:760px){
  .fasad__photo{height:auto;aspect-ratio:4/5}
  .fasad__photo img{object-position:70% 50%}
  /* на телефоне на фото только номера, подписи списком под фото */
  .fasad .leader__t{font-size:0;gap:0;padding:3px 4px;box-shadow:none}
  .fasad .leader__t i{font-size:12px}
  .fasad .leader{--len:26px!important}
  .fasad .leader--l::after{transform:rotate(-45deg)}
  .fasad .leader--l .leader__t{left:var(--len);right:auto}
  .fasad__list{display:grid;gap:8px;padding-top:18px;font-size:15px;color:var(--ink-2)}
  .fasad__list li{display:flex;gap:10px;align-items:baseline}
  .tl__bar{flex-direction:column;align-items:flex-start;gap:8px}
  .tl__sun{text-align:left}
  .tl__frame{aspect-ratio:4/5}
  .tl__foot{grid-template-columns:1fr}
  .tl__date{text-align:left}
  .tl__moment{flex-direction:column;gap:6px}
  /* образцы лентой с прилипанием, 80 % ширины */
  .board{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:14px;margin-inline:calc(var(--gut) * -1);border-inline:0;scrollbar-width:none;overscroll-behavior-x:contain}
  .board::-webkit-scrollbar{display:none}
  .smp{flex:0 0 80%;aspect-ratio:4/5!important;scroll-snap-align:center;cursor:pointer}
  .smp--granit{min-height:0}
  .loupe{width:160px;height:160px;margin:-80px 0 0 -80px}
  .loupe__lbl{left:calc(50% + 56.6px);top:calc(50% + 56.6px)}
  .pass__tbl>div{grid-template-columns:104px 1fr}
}
@media (hover:none){ .smp{cursor:pointer} }