/* Мастер Кровли — portfolio additions on top of Мастер Кровли design system */

/* real photos inside .ph placeholders */
.ph > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.ph > .ph__inner { z-index: 0; }
.ph > .ph__label, .ex-card__tags { z-index: 3; }
.work__img, .ex-card__img { background: var(--ink-2); }

/* explorer: filter panel collapse */
.fpanel { border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); padding: 1.1rem 1.3rem; margin-top: 1.4rem; }
.fpanel__head { display: flex; align-items: center; gap: 0.7rem; cursor: pointer; user-select: none; font-weight: 600; }
.fpanel__head .chev { color: var(--copper); transition: transform 0.3s var(--ease); font-size: 0.8rem; }
.fpanel.collapsed .fpanel__body { display: none; }
.fpanel.collapsed .fpanel__head .chev { transform: rotate(-90deg); }
.fpanel__hint { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--stone-400); margin-left: auto; }
.fpanel__body { margin-top: 1rem; }
.fbar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--line); font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-soft); }
.fbar b { color: var(--copper); }
.fbar .rst, .fbar .mode { cursor: pointer; }
.fbar .rst:hover, .fbar .mode:hover { color: var(--copper); }
.fbar .mode { margin-left: auto; }
.tag .tc { opacity: 0.55; font-size: 0.85em; }

/* case page gallery (masonry) */
.pf-gal { columns: 3; column-gap: 1.1rem; margin-top: clamp(2rem,4vw,3rem); }
.pf-gal figure { margin: 0 0 1.1rem; break-inside: avoid; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line-soft); background: var(--surface); cursor: zoom-in; transition: border-color 0.3s var(--ease); }
.pf-gal figure:hover { border-color: var(--copper); }
.pf-gal img { width: 100%; display: block; }
.pf-gal figcaption { padding: 0.7rem 0.85rem 0.9rem; font-size: 0.86rem; color: var(--text-soft); }
.pf-gal .cap-cat { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.1em; text-transform: uppercase; color: var(--copper); display: block; margin-bottom: 0.25rem; }
@media (max-width: 860px){ .pf-gal { columns: 2; } }
@media (max-width: 540px){ .pf-gal { columns: 1; } }

/* case meta tags row */
.case-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.3rem; }
.case-tags a { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.08em; text-transform: uppercase; padding: 0.45em 0.9em; border-radius: 100px; border: 1px solid rgba(244,239,230,0.25); color: rgba(244,239,230,0.85); transition: all 0.25s var(--ease); }
.case-tags a:hover { border-color: var(--copper-lite); color: var(--copper-lite); }

/* direction cards on home hub */
.dirs { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.25rem; }
.dir { position: relative; overflow: hidden; border-radius: var(--r-md); min-height: 360px; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(1.5rem,3vw,2.2rem); color: var(--paper); border: 1px solid rgba(244,239,230,0.14); }
.dir::after { content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(15,12,9,0.15), rgba(15,12,9,0.8)); z-index:1; }
.dir > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; transition: transform 1s var(--ease); }
.dir:hover > img { transform: scale(1.05); }
.dir__in { position: relative; z-index: 2; }
.dir__idx { font-family: var(--mono); font-size: var(--t-micro); letter-spacing: 0.14em; color: var(--copper-lite); }
.dir__title { font-family: var(--display); font-weight: 500; font-size: clamp(1.6rem,2.6vw,2.2rem); line-height: 1.05; margin-top: 0.5rem; }
.dir__desc { color: rgba(244,239,230,0.82); font-size: 0.94rem; margin-top: 0.6rem; max-width: 34ch; }
.dir__more { margin-top: 1rem; font-weight: 600; color: var(--copper-lite); display: inline-flex; gap: 0.4em; }
@media (max-width: 860px){ .dirs { grid-template-columns: 1fr; } .dir { min-height: 280px; } }

/* lightbox */
.lb { position: fixed; inset: 0; background: rgba(15,12,9,0.96); display: none; align-items: center; justify-content: center; z-index: 200; }
.lb.on { display: flex; }
.lb img { max-width: 94vw; max-height: 86vh; border-radius: var(--r-sm); }
.lb .cap { position: absolute; bottom: 1.3rem; left: 0; right: 0; text-align: center; color: rgba(244,239,230,0.85); font-size: 0.9rem; padding: 0 2rem; }
.lb .x { position: absolute; top: 1.1rem; right: 1.5rem; font-size: 2.2rem; color: var(--paper); cursor: pointer; line-height: 1; }
.lb .ar { position: absolute; top: 50%; transform: translateY(-50%); font-size: 2.6rem; color: var(--paper); cursor: pointer; user-select: none; padding: 0 1.1rem; opacity: 0.7; }
.lb .ar:hover { opacity: 1; }
.lb .pv { left: 0.3rem; } .lb .nx { right: 0.3rem; }

/* simple contact form (static) */
.cform { display: grid; gap: 1.3rem; max-width: 460px; }
.cform .btn { justify-content: center; }
.req-note { font-size: 0.8rem; color: var(--text-soft); }
.req-note a { color: var(--copper); }

/* back link on case pages */
.backlink { display:inline-flex; align-items:center; gap:0.55em; font-weight:600; font-size:0.95rem; color:var(--paper); border:1px solid rgba(244,239,230,0.28); border-radius:100px; padding:0.6em 1.2em; margin-bottom:1.4rem; transition:all .25s var(--ease); }
.backlink:hover { color:#fff; border-color:var(--copper-lite); background:rgba(244,239,230,0.08); }
.backlink .arr { color:var(--copper-lite); font-size:1.1em; transition:transform .3s var(--ease); }
.backlink:hover .arr { transform:translateX(-4px); }

/* ============================================================
   MOBILE — адаптив
   ============================================================ */
html, body { overflow-x: hidden; }
img, .ph, .ex-card, .work, .dir { max-width: 100%; }

@media (max-width: 940px) {
  /* кнопка «Заявка» уезжала за экран и прятала гамбургер — убираем из шапки,
     заявка доступна через мобильное меню */
  .site-header .header-right .btn--primary { display: none; }
  .header-right { gap: 0.8rem; }
}
.mobile-nav .btn--primary { align-self: flex-start; margin-top: 1.3rem; font-size: 1rem; }

@media (max-width: 760px) {
  .cta-grid { grid-template-columns: 1fr !important; gap: 1.6rem !important; }
  .case-tags { gap: 0.4rem; }
  .pf-gal { column-gap: 0.7rem; }
}
@media (max-width: 560px) {
  .brand__name { font-size: 1.2rem; }
  .page-hero__title { font-size: clamp(1.9rem, 8.5vw, 2.6rem); }
  .explorer__title { font-size: clamp(2rem, 9vw, 2.8rem); }
  .fpanel { padding: 0.9rem 1rem; }
  .filter-label { width: 100%; margin-bottom: 0.2rem; }
}

@media (max-width: 760px) {
  .wrap, .wrap--wide { max-width: 100%; }
  .explorer__head { flex-direction: column; align-items: stretch; gap: 1rem; }
  .search { max-width: 100%; }
  .filter-track { width: 100%; }
  .tag { font-size: 0.82rem; padding: 0.5em 0.85em; }
  .eyebrow { flex-wrap: wrap; row-gap: 0.25rem; }
  .label, .eyebrow.label { letter-spacing: 0.1em; }
  .menu-toggle { display: block; }
  .fpanel__hint { display: none; }
}

@media (max-width: 760px) {
  .wrap, .wrap--wide { padding-inline: 1rem; }
  .tag { font-size: 0.78rem; padding: 0.42em 0.72em; gap: 0.4em; }
  .fpanel { padding: 0.9rem; }
  .filter-track { gap: 0.4rem; }
  .ex-card__title { font-size: 1.25rem; }
}

/* ---- Безопасная форма заявки ---- */
.hp-field { position: absolute !important; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { margin-top: 0.6rem; font-size: 0.95rem; min-height: 1.2em; }
.form-status[data-state="ok"] { color: var(--copper); }
.form-status[data-state="err"] { color: #c0392b; }
/* CTA-блок статьи блога */
.post-cta { background: var(--ink, #1A1611); color: var(--paper, #F4EFE6); border-radius: 18px; padding: clamp(1.5rem, 4vw, 2.5rem); position: relative; overflow: hidden; }
.post-cta .cform { max-width: 520px; }
.post-cta .input, .post-cta .textarea { background: rgba(255,255,255,0.06); color: var(--paper, #F4EFE6); }

/* ---- Блог ---- */
.blog-body { max-width: 768px; margin: 0 auto; }
.blog-body p { font-size: 1.06rem; line-height: 1.72; }
.blog-body h2 { font-size: clamp(1.5rem, 3vw, 2rem); }
.blog-toc { background: var(--paper-warm, #efe9dd); border-radius: 14px; padding: 1rem 1.2rem; margin-bottom: 1.5rem; }
.blog-toc__t { font-weight: 600; margin-bottom: .4rem; }
.blog-toc ol { margin: 0; padding-left: 1.2rem; }
.blog-toc li { margin: .25rem 0; }
.blog-toc a { color: var(--copper, #a55b32); text-decoration: none; }
.blog-toc a:hover { text-decoration: underline; }
.blog-list { padding-left: 1.2rem; }
.blog-list li { margin: .4rem 0; line-height: 1.6; }
.blog-note { border-left: 3px solid var(--copper, #a55b32); background: var(--paper-warm, #efe9dd); padding: .9rem 1.1rem; border-radius: 0 10px 10px 0; font-size: .98rem; }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ptable { width: 100%; border-collapse: collapse; font-size: 1rem; }
.ptable th, .ptable td { text-align: left; padding: .65rem .85rem; border-bottom: 1px solid rgba(0,0,0,.1); }
.ptable th { background: var(--paper-warm, #efe9dd); font-weight: 600; }
.band-soft { background: var(--paper-warm, #efe9dd); border-radius: 18px; padding: clamp(1.5rem, 4vw, 2.5rem); }
.rel-links { display: flex; flex-wrap: wrap; gap: .8rem; }
.rel-link { display: inline-flex; align-items: center; gap: .4rem; background: var(--paper-warm, #efe9dd); padding: .6rem 1rem; border-radius: 999px; font-size: .95rem; text-decoration: none; color: var(--ink, #1A1611); }
.rel-link:hover { background: #e6dccb; }

/* ---- Калькулятор кровли ---- */
.calc { max-width: 760px; margin: 0 auto; background: var(--paper-warm, #efe9dd); border-radius: 18px; padding: clamp(1.3rem, 4vw, 2.2rem); }
.calc__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.calc__field { display: flex; flex-direction: column; gap: .35rem; }
.calc__field label { font-size: .9rem; font-weight: 600; }
.calc select.input, .calc input.input { width: 100%; }
.calc__mode { display: flex; flex-wrap: wrap; gap: 1rem 1.4rem; margin: .4rem 0 1rem; }
.calc__mode label, .calc__opts label { display: inline-flex; align-items: center; gap: .45rem; font-size: .96rem; cursor: pointer; }
.calc__opts { display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; align-items: center; margin-bottom: 1.2rem; }
.calc__optslabel { font-weight: 600; font-size: .9rem; }
.calc__err { color: #c0392b; min-height: 1.1em; margin: 0 0 .6rem; font-size: .95rem; }
.calc__result { margin-top: 1.4rem; padding-top: 1.3rem; border-top: 1px solid rgba(0,0,0,.12); }
.calc__rlabel { font-size: .95rem; color: var(--ink-soft, #6b6255); }
.calc__sum { font-size: clamp(1.8rem, 5vw, 2.6rem); font-weight: 700; color: var(--copper, #a55b32); margin: .2rem 0 .5rem; line-height: 1.1; }
.calc__hint { font-size: .95rem; line-height: 1.55; margin-bottom: 1.1rem; max-width: 56ch; }
@media (max-width: 560px) { .calc__grid { grid-template-columns: 1fr; } }

/* fix: hidden должен побеждать display:grid */
.calc [hidden] { display: none !important; }