@import url("fonts.css");

/* ------------------------------------------------------------------
   UNIONS — мережа професійних асоціацій України.
   Каркас: нерухома кольорова панель ліворуч (знак, теза, вибір фаху)
   і рухома колонка праворуч, яка перемальовується під обраний фах.
   ------------------------------------------------------------------ */

:root {
  --paper:   #FBFBF9;
  --paper-2: #F1F3F0;
  --ink:     #10201F;
  --ink-2:   #3A4645;
  --muted:   #6E7A78;
  --teal:    #0E4E57;
  --teal-d:  #0A3A41;
  --teal-l:  #2E8C99;
  --teal-w:  #E4EFEF;
  --rule:    #E1E4E0;
  --rule-2:  #C6CCC8;
  --sand:    #C98A3C;

  --slab: "Roboto Slab", Georgia, serif;
  --sans: "Manrope", system-ui, sans-serif;

  --panel: 400px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink-2);
  font-family: var(--sans); font-size: 17px; line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
p { margin: 0; }
a { color: var(--teal); text-underline-offset: .18em; }
:focus-visible { outline: 2px solid var(--teal-l); outline-offset: 2px; }
h1, h2, h3 { margin: 0; font-family: var(--slab); font-weight: 700; line-height: 1.2; color: var(--ink); }

.mark { aspect-ratio: 1; -webkit-mask: url(mark.svg) center/contain no-repeat; mask: url(mark.svg) center/contain no-repeat; }
.wordmark { aspect-ratio: 764/123; -webkit-mask: url(wordmark.svg) left/contain no-repeat; mask: url(wordmark.svg) left/contain no-repeat; }

/* ---------- каркас ---------- */

.shell { min-height: 100vh; }
@media (min-width: 940px) {
  .shell { display: grid; grid-template-columns: var(--panel) minmax(0, 1fr); }
}

/* ---------- панель ---------- */

.panel {
  background: var(--teal); color: #DCE9E9;
  padding: clamp(22px, 3vw, 40px) clamp(20px, 3vw, 40px) clamp(24px, 3vw, 36px);
  display: flex; flex-direction: column; gap: clamp(18px, 2.4vw, 30px);
}
@media (min-width: 940px) {
  .panel { position: sticky; top: 0; height: 100vh; overflow-y: auto; }
}
.panel__brand { display: flex; align-items: center; gap: .8rem; }
.panel__brand .mark { width: 30px; background: #FBFBF9; }
.panel__brand .wordmark { width: 122px; background: #FBFBF9; }
.panel__thesis { font-family: var(--slab); font-weight: 500; font-size: clamp(1.12rem, 1.6vw, 1.34rem); line-height: 1.34; color: #FFFFFF; }
.panel__thesis b { font-weight: 700; color: #FFD9A6; }

.pick { display: grid; gap: 2px; }
.pick__label { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: #8FB4B8; margin-bottom: .4rem; }
.pick button {
  appearance: none; cursor: pointer; text-align: left; font: inherit; width: 100%;
  background: none; border: 0; border-top: 1px solid rgba(255,255,255,.14);
  color: #C7DCDC; padding: .62em 0 .62em .1em; display: grid;
  grid-template-columns: 1.6em 1fr; gap: .5em; align-items: baseline;
}
.pick button:last-child { border-bottom: 1px solid rgba(255,255,255,.14); }
.pick button i { font-style: normal; font-size: .74rem; color: #6F9AA0; }
.pick button:hover { color: #FFFFFF; }
.pick button[aria-pressed="true"] { color: #FFFFFF; font-weight: 600; }
.pick button[aria-pressed="true"] i { color: var(--sand); }

.panel__foot { margin-top: auto; font-size: .8rem; color: #8FB4B8; line-height: 1.5; display: grid; gap: .5rem; }
.panel__foot a { color: #C7DCDC; text-decoration: none; letter-spacing: .08em; }

/* ---------- колонка ---------- */

.col { padding: clamp(26px, 4vw, 62px) clamp(20px, 4vw, 64px) clamp(40px, 6vw, 90px); max-width: 78ch; }

.trade__eyebrow { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.trade h1 { margin-top: .5rem; font-size: clamp(1.7rem, 4vw, 2.6rem); max-width: 20ch; }
.trade__intro { margin-top: 1rem; font-size: clamp(1.02rem, .5vw + .92rem, 1.16rem); max-width: 58ch; }

.pairs { margin-top: clamp(24px, 3.4vw, 40px); display: grid; gap: 0; }
.pair { display: grid; gap: .3rem 1.2rem; padding: clamp(15px, 2vw, 20px) 0; border-top: 1px solid var(--rule); }
@media (min-width: 720px) { .pair { grid-template-columns: 13ch 1fr; align-items: baseline; } }
.pair:last-child { border-bottom: 1px solid var(--rule); }
.pair b { font-family: var(--slab); font-weight: 500; font-size: .96rem; color: var(--muted); }
.pair ul { margin: 0; padding-left: 1.1em; display: grid; gap: .3rem; }
.pair li::marker { color: var(--rule-2); }
.pair--net { background: var(--teal-w); border-top-color: var(--teal-w); }
@media (min-width: 720px) { .pair--net { padding-inline: clamp(12px, 1.6vw, 18px); margin-inline: calc(clamp(12px, 1.6vw, 18px) * -1); } }
.pair--net b { color: var(--teal); }
.pair--net li::marker { color: var(--teal-l); }

/* ---------- постійні розділи ---------- */

.rest { margin-top: clamp(40px, 6vw, 80px); }
.sec { padding-top: clamp(30px, 4vw, 52px); }
.sec + .sec { margin-top: clamp(8px, 1.2vw, 16px); }
.sec > h2 { border-top: 2px solid var(--ink); padding-top: .9rem; font-size: clamp(1.3rem, 2.8vw, 1.8rem); }
.sec > p { margin-top: .9rem; max-width: 62ch; }
.sec > p + p { margin-top: .8em; }

.vs { margin-top: clamp(18px, 2.4vw, 26px); display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
@media (min-width: 700px) { .vs { grid-template-columns: 1fr 1fr; } }
.vs div { background: var(--paper); padding: clamp(16px, 2.2vw, 24px); display: grid; gap: .45rem; align-content: start; }
.vs b { font-family: var(--slab); font-weight: 700; color: var(--ink); }
.vs span { color: var(--ink-2); font-size: .97rem; }
.vs div:last-child { background: var(--paper-2); }

.floors { margin-top: clamp(18px, 2.4vw, 26px); display: grid; }
.floor { display: grid; gap: .3rem .9rem; padding: clamp(14px, 1.8vw, 20px) 0; border-top: 1px solid var(--rule); }
@media (min-width: 700px) { .floor { grid-template-columns: 13ch 1fr; align-items: baseline; } }
.floor:last-child { border-bottom: 1px solid var(--rule); }
.floor b { font-family: var(--slab); font-weight: 500; color: var(--ink); }

.state { margin-top: clamp(18px, 2.4vw, 26px); width: 100%; border-collapse: collapse; }
.state th, .state td { text-align: left; padding: .6em 0; border-bottom: 1px solid var(--rule); vertical-align: baseline; font-weight: 400; }
.state th { color: var(--ink); width: 64%; }
.state td { color: var(--muted); font-size: .92rem; }
.state td.y { color: var(--teal); }
.state thead th, .state thead td { font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); border-bottom-color: var(--rule-2); }

.legal { margin-top: clamp(34px, 5vw, 60px); border-top: 1px solid var(--rule); padding-top: 1.2rem; color: var(--muted); font-size: .82rem; max-width: 76ch; }
.legal p + p { margin-top: .3em; }