/* Секции, списки, переключатели и печать. Цвета берутся из переменных,
   которые задаёт layout.css. */

/* --- секции --------------------------------------------------------------- */

.section + .section { margin-top: var(--space-m); }

.section__title {
  margin: 0 0 .6rem;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--heading-fg);
}

.section__title::after {
  content: "";
  display: block;
  width: 2.2rem;
  height: 2px;
  margin-top: .45rem;
  background: var(--rule);
}

/* --- списки --------------------------------------------------------------- */

.bullets {
  margin: 0;
  padding: 0;
  list-style: none;
}

.bullets li {
  position: relative;
  padding-left: 1.1rem;
  margin-bottom: .35rem;
}

.bullets li::before {
  content: "";
  position: absolute;
  left: .15rem;
  top: .62em;
  width: .32rem;
  height: .32rem;
  border-radius: 50%;
  background: var(--rule);
}

.pairs {
  margin: 0;
  padding: 0;
  list-style: none;
}

.pairs li {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: .3rem;
}

.pairs strong { font-weight: 600; }
.pairs span { color: var(--muted-fg); }

/* --- запись опыта / образования ------------------------------------------- */

.entry + .entry { margin-top: var(--space-s); }

.entry__role {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.01em;
}

.entry__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem .6rem;
  margin: .1rem 0 .35rem;
  font-size: .92rem;
  color: var(--muted-fg);
}

/* Разделителя между местом работы и периодом нет намеренно: при переносе
   строки он бы оставался висеть в начале строки. */
.entry__period { font-style: italic; }

/* --- ссылки внутри текста --------------------------------------------------- */

.link {
  color: var(--link-fg);
  text-decoration: underline;
  text-underline-offset: .18em;
}

/* Метка ставится только у ссылок на приложенный PDF. */
.file-tag {
  margin-left: .4rem;
  padding: .02rem .3rem;
  border: 1px solid var(--rule);
  border-radius: 4px;
  font-size: .66rem;
  letter-spacing: .08em;
  vertical-align: .1em;
  color: var(--muted-fg);
}

/* --- сертификаты ----------------------------------------------------------- */

.subhead {
  margin: var(--space-s) 0 .55rem;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-fg);
}

.certs {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cert + .cert {
  margin-top: .5rem;
  padding-top: .5rem;
  border-top: 1px solid color-mix(in oklab, var(--rule) 28%, transparent);
}

.cert__head { text-wrap: pretty; }

.cert__name { font-weight: 600; }

.cert__note {
  display: block;
  margin-top: .1rem;
  font-size: .85rem;
  color: var(--muted-fg);
}

/* --- блок «Klar for jobb i Norge» ------------------------------------------- */

/* Флаг Норвегии перед заголовком: он собран из четырёх линейных градиентов
   в пропорциях 22:16, цвета флага от темы не зависят. Двойной класс в
   селекторе нужен, чтобы перебить акцентный ромбик из layout.css. */
.section.section--norway .section__title::before {
  content: "";
  display: inline-block;
  flex: none;
  width: 1.5em;
  height: 1.09em;
  margin-right: .45em;
  vertical-align: -.15em;
  border-radius: 2px;
  transform: none;
  background-color: #ba0c2f;
  background-image:
    linear-gradient(90deg, transparent 36.4%, #00205b 36.4% 45.5%, transparent 45.5%),
    linear-gradient(180deg, transparent 43.75%, #00205b 43.75% 56.25%, transparent 56.25%),
    linear-gradient(90deg, transparent 27.3%, #fff 27.3% 54.5%, transparent 54.5%),
    linear-gradient(180deg, transparent 37.5%, #fff 37.5% 62.5%, transparent 62.5%);
}

.norway__lead {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.5;
  text-wrap: pretty;
}

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: .45rem;
  margin: .85rem 0 0;
  padding: 0;
  list-style: none;
}

/* Подпись стоит над значением, а не слева: значения разной длины, и в строку
   они ломались бы по-разному в каждой колонке. */
.fact {
  display: grid;
  gap: .1rem;
  padding: .45rem .7rem;
  border: 1px solid color-mix(in oklab, var(--rule) 28%, transparent);
  border-radius: 12px;
  background: color-mix(in oklab, var(--rule) 6%, transparent);
  font-size: .92rem;
}

.fact__label {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted-fg);
}

.fact__value { font-weight: 500; }

/* --- завершающая строка ----------------------------------------------------- */

.closing {
  max-width: 44rem;
  margin: clamp(1.8rem, 4.5vw, 3.2rem) auto 0;
  color: var(--closing-fg);
  font-size: clamp(1.02rem, 2.2vw, 1.18rem);
  font-weight: 600;
  line-height: 1.55;
  text-align: center;
  text-wrap: balance;
}

/* --- контакты ------------------------------------------------------------- */

.contact {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .95rem;
}

.contact__item {
  display: flex;
  align-items: baseline;
  gap: .55rem;
  margin-bottom: .35rem;
  overflow-wrap: anywhere;
}

.contact__label {
  flex: 0 0 1.1rem;
  color: var(--rule);
  font-size: .85rem;
  text-align: center;
}

.contact__value { color: inherit; }
a.contact__value { color: var(--link-fg); }

/* --- фото ----------------------------------------------------------------- */

.photo {
  position: relative;
  overflow: hidden;
  background: var(--photo-bg);
}

.photo__img,
.photo__initials {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo__initials {
  display: grid;
  place-items: center;
  font-size: 2.6rem;
  font-weight: 600;
  letter-spacing: .05em;
  color: var(--muted-fg);
}

/* --- кнопки и переключатели ------------------------------------------------ */

.button {
  display: inline-block;
  padding: .5rem 1rem;
  border-radius: 999px;
  background: var(--accent-solid);
  color: var(--accent-contrast);
  font-size: .9rem;
  font-weight: 600;
  text-decoration: none;
}

.button:hover { filter: brightness(1.08); }

.actions { margin-top: .8rem; }

.lang-switch {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 10;
  display: flex;
  gap: .25rem;
  padding: .25rem;
  border-radius: 999px;
  background: var(--switch-bg);
  box-shadow: 0 6px 20px -8px rgba(10, 10, 30, .5);
}

.lang-switch button {
  min-width: 2.6rem;
  padding: .35rem .6rem;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--switch-fg);
  font: inherit;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .06em;
  cursor: pointer;
}

.lang-switch button.is-active {
  background: var(--accent-solid);
  color: var(--accent-contrast);
}

/* --- печать --------------------------------------------------------------- */

@media print {
  @page { size: A4; margin: 12mm; }

  body { background: #fff; }

  .lang-switch,
  .actions { display: none !important; }

  .entry,
  .section { break-inside: avoid; }

  /* Девять сертификатов целиком на страницу не влезают — пусть список
     разрывается между записями, но не внутри одной. */
  .section--education { break-inside: auto; }
  .cert { break-inside: avoid; }

  /* Флаг нарисован фоном, а фоны по умолчанию не печатаются — иначе перед
     заголовком осталась бы пустая рамка. */
  .section.section--norway .section__title::before {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}