/* Vacancies page (/vacancies/) */

.vac-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(48px, 7vw, 112px); align-items: start; }
.vac-h { font-size: var(--h2-inner); line-height: 1.1; }

/* no openings: a small stone tablet, like the one by the door (css/firm.css; its stone: styles.css) */
.vac-empty { margin-top: 28px; display: grid; gap: 22px; justify-items: start; }
.vac-empty > p { max-width: 34em; color: var(--text); }
.vac-plate {
  position: relative; display: inline-flex; align-items: center; gap: 18px;
  padding: 18px 26px 18px 18px; border-radius: 1px;
  background:
    radial-gradient(120% 140% at 8% -10%, rgba(255, 253, 246, .5), rgba(255, 253, 246, 0) 60%),
    linear-gradient(170deg, rgba(92, 78, 58, 0) 40%, rgba(92, 78, 58, .12) 100%),
    var(--tablet-grain) 0 0 / 180px 180px,
    var(--tablet-stone);
  box-shadow: 0 0 0 .5px rgba(96, 78, 52, .28), 1px 2px 2px rgba(64, 50, 30, .28), 4px 9px 16px -8px rgba(64, 50, 30, .34);
}
.vac-plate::before { /* the chamfer */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  border: 4px solid;
  border-color: rgba(255, 253, 247, .62) rgba(88, 74, 54, .15) rgba(88, 74, 54, .3) rgba(255, 253, 247, .38);
}
.vac-plate::after { /* the cut margin line */
  content: ""; position: absolute; inset: 8px; pointer-events: none;
  border: 1px solid rgba(88, 74, 54, .36);
  box-shadow: inset 1px 1px 0 rgba(255, 253, 247, .7), 1px 1px 0 rgba(255, 253, 247, .7);
}
/* the monogram, cut and painted navy (the stone shows through the S) */
.vac-plate-mark { width: 46px; height: auto; color: var(--navy); filter: drop-shadow(.5px .9px 0 var(--tablet-lip)); }
.vac-plate-text {
  font: 500 1rem/1.25 var(--serif); letter-spacing: .16em; text-transform: uppercase;
  color: var(--navy); /* painted in the cut, as today's name by the door (7.8:1) */
  text-shadow: .035em .06em 0 var(--tablet-lip);
}

/* openings, when there are some */
.vac-list { list-style: none; margin-top: 28px; display: grid; gap: 20px; }
.vac-lang-note { margin-top: 14px; font-size: .95rem; color: var(--muted); }
.vac-lang-note + .vac-list { margin-top: 20px; }
.vac-job { padding: 30px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
.vac-job-meta { font: 600 .72rem/1.4 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.vac-job h3 { margin-top: 10px; font-size: 1.6rem; line-height: 1.15; }
.vac-job-summary { margin-top: 10px; }
.vac-job-body { margin-top: 12px; }
.vac-job .btn { margin-top: 22px; }

/* open application */
.vac-apply {
  margin-top: clamp(40px, 6vw, 64px); padding: clamp(28px, 4vw, 44px);
  border-radius: var(--radius); color: var(--navy-200);
  background:
    radial-gradient(520px 260px at 100% 0%, rgba(70, 82, 138, .45), transparent 65%),
    var(--navy-900);
}
.vac-apply-h { color: #fff; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); line-height: 1.1; }
.vac-apply > p { margin-top: 14px; max-width: 36em; }
.vac-apply-actions { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; }
.vac-apply .btn { max-width: 100%; }
.vac-apply-note { font-size: .9rem; color: var(--navy-300); }
.vac-apply-note a { color: #fff; text-underline-offset: 3px; }
/* the address under the button: close to it (beats `.vac-apply > p`), and a 44px target of its own */
.vac-apply .vac-apply-email { margin-top: 6px; overflow-wrap: anywhere; }
.vac-apply-email a { display: inline-flex; align-items: center; min-height: 44px; }

/* working with us */
/* sticky only on screens tall enough for the whole list below the header: it needs up to
   about 920px (Maltese and Italian at 960px wide; about 945px with a Windows scrollbar) */
@media (min-width: 960px) and (min-height: 960px) {
  .vac-side { position: sticky; top: calc(var(--header-h) + 40px); }
}
.vac-points { list-style: none; margin-top: 28px; border-top: 1px solid var(--line); counter-reset: vac; }
.vac-points li { position: relative; padding: 22px 0 22px 44px; border-bottom: 1px solid var(--line); counter-increment: vac; }
.vac-points li::before {
  content: counter(vac, decimal-leading-zero); position: absolute; left: 0; top: 25px;
  font: 600 .75rem/1 var(--sans); letter-spacing: .1em; color: var(--orange-ink); font-variant-numeric: tabular-nums;
}
.vac-points h3 { font-size: 1.3rem; line-height: 1.2; }
.vac-points p { margin-top: 6px; font-size: .95rem; }

@media (max-width: 959px) {
  .vac-grid { grid-template-columns: 1fr; }
}
.vac-job .btn { max-width: 100%; }
@media (max-width: 480px) {
  /* phones: the buttons fill the width, with a little less padding, so their labels keep to one line */
  .vac-apply .btn, .vac-job .btn { width: 100%; font-size: .9rem; padding-inline: 12px; gap: 8px; }
  .vac-job { padding: 26px 22px; }
  .vac-plate { gap: 14px; padding: 16px 20px 16px 16px; }
  .vac-plate-mark { width: 42px; } /* the Italian tablet still fits a 320px screen */
  .vac-plate-text { font-size: .9rem; }
}
@media (forced-colors: active) {
  /* the chamfer would be drawn as a thick frame, and the grain is a picture forced colours keep */
  .vac-plate::before { display: none; }
  .vac-plate { border: 1px solid CanvasText; background-image: none; }
  .vac-plate-mark { color: CanvasText; filter: none; } /* navy would all but vanish on a dark Canvas */
}
@media print {
  /* backgrounds are not printed: the tablet prints as an outline, as the ones on the home page do */
  .vac-plate { box-shadow: none; outline: 1px solid #999; }
  .vac-plate::before { display: none; }
  .vac-plate-mark { filter: none; }
  .vac-plate-text { text-shadow: none; }
  .vac-apply { color: #000; background: none; border: 1px solid #000; }
  .vac-apply-h, .vac-apply-note a { color: #000; }
  .vac-side { position: static; }
}