/* ═══════════════════════════════════════════════════════════
   MY TATTOO — «Тату-газета» · сторінка майстра (pages/master)
   Доповнює css/gazette.css
   ═══════════════════════════════════════════════════════════ */

/* ── шапка: фото-«газетний знімок» + значки ── */
.mst-hero-img{margin:0;border:1px solid var(--rule)}
.mst-hero-img img{aspect-ratio:3/2;object-position:center top}
.mst-badges{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px;padding:0}
.mst-badges li{font-family:var(--f-cond);text-transform:uppercase;letter-spacing:.1em;font-size:12px;line-height:1.2;
  padding:5px 10px;border:1px solid var(--ink);background:var(--paper-2) var(--grain)}
.mst-badges li:first-child{border:3px double var(--red);color:var(--red);transform:rotate(-2deg)}

/* ── про майстра ── */
.mst-polaroid{margin:0;max-width:440px;justify-self:center;width:100%}
.mst-polaroid img{width:100%;aspect-ratio:4/5;object-fit:cover}
.mst-copy p{margin:0 0 14px;color:#d9cdb2}
.mst-copy b{color:var(--paper)}
.mst-copy .kicker{color:#c9707e;margin-bottom:10px}
.mst-quote{margin:22px 0;padding:14px 20px;border-top:4px double rgba(235,225,201,.5);border-bottom:1px solid rgba(235,225,201,.3);
  font-family:var(--f-mast);font-style:italic;font-size:clamp(20px,2.2vw,26px);line-height:1.35;color:var(--paper)}

/* ── стилі: 6 рубрик ── */
.mst-styles{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rule);border-left:1px solid var(--rule)}
.mst-style{padding:22px 22px 24px;border-right:1px solid var(--rule);border-bottom:1px solid var(--rule);transition:background .25s var(--ease)}
.mst-style:hover{background:var(--paper-2)}
.mst-style-no{display:block;font-family:var(--f-mast);font-size:40px;line-height:1;color:var(--red)}
.mst-style .h-cond{font-size:24px;margin:8px 0 8px}
.mst-style p{margin:0;font-size:15px;color:var(--ink-2)}

/* ── сертифікати: документи в рамці ── */
.mst-docs{display:grid;grid-template-columns:1fr 1fr;gap:32px;max-width:980px;margin:0 auto}
.mst-doc{display:flex;flex-direction:column;text-decoration:none;color:var(--ink);background:var(--paper) var(--grain);
  padding:14px;border:1px solid var(--rule);box-shadow:6px 6px 0 var(--ink);transition:transform .2s,box-shadow .2s}
.mst-doc:nth-child(odd){transform:rotate(-.8deg)}
.mst-doc:nth-child(even){transform:rotate(.8deg)}
.mst-doc:hover,.mst-doc:focus-visible{transform:translate(-2px,-2px);box-shadow:9px 9px 0 var(--ink)}
.mst-doc-frame{display:block;border:6px double var(--ink);padding:8px;background:var(--paper-2)}
.mst-doc-frame img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center top;filter:sepia(.3) contrast(1.05)}
.mst-doc-cap{display:block;text-align:center;padding:12px 4px 2px}
.mst-doc-cap b{display:block;font-family:var(--f-cond);text-transform:uppercase;letter-spacing:.08em;font-size:18px;line-height:1.2}
.mst-doc-cap small{display:block;color:var(--muted);font-size:14px;margin-top:4px}
.mst-doc-cap em{display:inline-block;margin-top:8px;font-style:normal;font-family:var(--f-cond);text-transform:uppercase;letter-spacing:.14em;font-size:12px;color:var(--red)}
.stagger-item.mst-doc.visible:nth-child(odd){transform:rotate(-.8deg)}
.stagger-item.mst-doc.visible:nth-child(even){transform:rotate(.8deg)}
.stagger-item.mst-doc.visible:hover{transform:translate(-2px,-2px)}

/* ── процес: 4 кроки ── */
.steps--4{grid-template-columns:repeat(4,1fr)}
.steps--4 .step{padding:6px 20px}
.steps--4 .step:first-child{padding-left:0}
.steps--4 .step:last-child{padding-right:0}
.steps--4 .step-no{font-size:54px}
.steps--4 .step .h-cond{font-size:23px}

/* ── роботи: мозаїка (перша марка — 2×2) ── */
.mst-works .stamp:first-child{grid-column:span 2;grid-row:span 2}
.mst-works .stamp:first-child{display:flex;flex-direction:column}
.mst-works .stamp:first-child img{aspect-ratio:auto;flex:1 1 0;min-height:0;height:auto}
@media (max-width:980px){
  .mst-works .stamp:first-child{grid-row:auto}
  .mst-works .stamp:first-child img{flex:none;aspect-ratio:16/10}
}

/* ── адаптив ── */
@media (max-width:980px){
  .mst-styles{grid-template-columns:1fr 1fr}
  .steps--4{grid-template-columns:1fr 1fr}
  .steps--4 .step,.steps--4 .step:first-child,.steps--4 .step:last-child{padding:18px 16px;border-right:0;border-bottom:1px solid var(--rule)}
  .steps--4 .step:nth-child(odd){border-right:1px solid var(--rule);padding-left:0}
  .steps--4 .step:nth-last-child(-n+2){border-bottom:0}
}
@media (max-width:700px){
  .mst-badges li{font-size:11px;padding:4px 8px}
  .mst-polaroid{max-width:320px}
  .mst-quote{padding:12px 4px}
  .mst-styles{grid-template-columns:1fr}
  .mst-style{padding:18px 16px}
  .mst-docs{grid-template-columns:1fr;gap:26px}
  .mst-doc{padding:10px;box-shadow:4px 4px 0 var(--ink)}
  .mst-doc-frame{border-width:4px;padding:5px}
  .steps--4{grid-template-columns:1fr}
  .steps--4 .step,.steps--4 .step:first-child,.steps--4 .step:last-child,.steps--4 .step:nth-child(odd){padding:18px 0;border-right:0;border-bottom:1px solid var(--rule)}
  .steps--4 .step:last-child{border-bottom:0}
  .mst-works{gap:14px}
  .mst-works .stamp{--r:4px}
  .mst-works .stamp span{font-size:12px}
  .cta-box .front-actions .btn{flex:1 1 auto}
}
@media (max-width:400px){
  .page-head .front-facts--2 b{font-size:22px}
}