/* ==========================================================================
   Foundryline — components
   --------------------------------------------------------------------------
   Kept separate from motion.css on purpose.

   motion.css was rewritten from scratch to improve the animations, and in the
   process it silently lost four blocks that had been added to it earlier: the
   `.tight-pad` section modifier, the `.sample` case-study cards, the
   `.lang-current` state for the language menu, and the `.lang-nudge` bar.
   Nothing failed - the pages just rendered with no styling for those parts,
   which is the same silent-collapse bug the class checker was written to
   catch, arriving from a different direction.

   So: motion belongs in motion.css, components live here. Rewriting one can
   no longer delete the other.
   ========================================================================== */

/* --------------------------------------------------------------------------
   .tight-pad — a section with less vertical space than the default
   --------------------------------------------------------------------------
   Used on eleven pages. It had no rule at all for a long time, so those
   sections had the same padding as everything else and the pages read as one
   long even wall.
   -------------------------------------------------------------------------- */
.tight-pad {
  padding-block: clamp(38px, 5.5vw, 62px);
}

/* --------------------------------------------------------------------------
   .sample — the six case-study cards on /work and /bg/raboti
   --------------------------------------------------------------------------
   These laid out only because their parent is `.grid three`; the parts had no
   styling of their own, so every card was an unstyled grey block.
   -------------------------------------------------------------------------- */
.sample {
  display: flex;
  flex-direction: column;
  background: var(--paper-3);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  transition: transform 0.28s cubic-bezier(0.16, 0.84, 0.28, 1),
              border-color 0.28s var(--ease-out),
              box-shadow 0.28s var(--ease-out);
}

.sample:hover {
  transform: translate3d(0, -4px, 0);
  border-color: rgba(14, 14, 17, 0.22);
  box-shadow: 0 16px 34px -22px rgba(14, 14, 17, 0.4);
}

/* the coloured strip across the top of each card */
.sample .top {
  padding: 11px 16px;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #fff;
  background: var(--ink);
}

/* Six tints, one per case study, so the row reads as a set rather than six
   identical grey blocks. Each is dark enough to keep white text legible. */
.sample .top.s1 { background: #8c4a2f; }
.sample .top.s2 { background: #2f5d47; }
.sample .top.s3 { background: #40506e; }
.sample .top.s4 { background: #7a5a2a; }
.sample .top.s5 { background: #6b3a52; }
.sample .top.s6 { background: #3d5257; }

.sample .body {
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
  padding: 18px 18px 20px;
}

.sample .body h3 {
  margin: 0;
  font-size: 1.06rem;
  letter-spacing: -0.015em;
}

.sample .body p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--muted);
}

.sample .body p:last-child { margin-top: auto; }

/* --------------------------------------------------------------------------
   The language you are already reading
   --------------------------------------------------------------------------
   assets/js/lang.js replaces the active entry's <a> with a <span.lang-current>.
   It has no href and nothing to focus, so it cannot be clicked or tabbed to.

   This restates what style.css applies via `.lang-menu a[aria-current="true"]`,
   because that selector only matches an anchor and the active row is no longer
   one. Without it the current language renders as plain black text with no
   highlight, which looks more broken than the clickable version did.
   -------------------------------------------------------------------------- */
.lang-menu .lang-current,
.lang-menu .lang-current[aria-current="true"] {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 11px;
  border-radius: 8px;
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  color: var(--ink);
  background: var(--accent-soft);
  cursor: default;
  user-select: none;
  text-decoration: none;
}

.lang-menu .lang-current .code {
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  border: 1px solid var(--accent);
  border-radius: 5px;
  padding: 3px 6px;
  color: var(--accent);
}

.lang-menu .lang-current .native {
  margin-left: auto;
  font-size: 0.76rem;
  color: var(--muted);
}

/* a small dot instead of the tick, so the row still reads as "you are here"
   without repeating the same signal twice */
.lang-menu .lang-current::after {
  content: "";
  margin-left: auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  flex: none;
}

.lang-menu .lang-current .native + .tick,
.lang-menu .lang-current:has(.native)::after { margin-left: 0; }

.lang-menu a[aria-disabled="true"] {
  pointer-events: none;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   The "this page is in English" bar
   --------------------------------------------------------------------------
   Shown when a visitor who chose Bulgarian lands on an English page from a
   search result, a bookmark or a link in an email. A quiet bar, not a
   redirect - silently forwarding them would break the back button and the URL
   would no longer match what they clicked.
   -------------------------------------------------------------------------- */
.lang-nudge {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 350;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: calc(100vw - 32px);
  padding: 11px 12px 11px 16px;
  background: var(--ink);
  color: var(--paper);
  border-radius: 12px;
  font-size: 0.88rem;
  box-shadow: 0 14px 34px -14px rgba(14, 14, 17, 0.5);
  transform: translate3d(-50%, 0, 0);
  animation: nudge-in 0.4s cubic-bezier(0.16, 0.84, 0.28, 1) both;
  animation-delay: 0.5s;
}

@keyframes nudge-in {
  from { opacity: 0; transform: translate3d(-50%, 10px, 0); }
  to   { opacity: 1; transform: translate3d(-50%, 0, 0); }
}

.lang-nudge a {
  color: var(--paper);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.lang-nudge button {
  flex: none;
  width: 26px;
  height: 26px;
  padding: 0;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--paper);
  background: rgba(247, 243, 236, 0.14);
  border: 0;
  border-radius: 7px;
  cursor: pointer;
}

.lang-nudge button:hover { background: rgba(247, 243, 236, 0.26); }

@media (max-width: 560px) {
  .lang-nudge {
    left: 16px;
    right: 16px;
    bottom: 14px;
    max-width: none;
    transform: none;
    flex-wrap: wrap;
    animation-name: nudge-in-mobile;
  }
  @keyframes nudge-in-mobile {
    from { opacity: 0; transform: translate3d(0, 10px, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .sample,
  .lang-nudge { transition: none; animation: none; }
  .sample:hover { transform: none; }
}

@media print {
  .lang-nudge { display: none !important; }
}

/* ==========================================================================
   The honesty notice and the demo links
   --------------------------------------------------------------------------
   These were inline in work.html, which meant the style checker could not see
   them and reported both classes as undefined. More to the point, a page that
   states plainly what it is not should be built from the same components as
   everything else rather than carrying its own private styles.

   .honest exists because the work page used to carry six client case studies
   that never happened. It now says so instead, and the notice needs to read as
   a deliberate statement rather than as small print.
   ========================================================================== */

.honest {
  border-left: 3px solid var(--accent);
  padding: 2px 0 2px 18px;
  margin: 26px 0 34px;
  max-width: 64ch;
  color: var(--ink-2);
  font-size: 1rem;
  line-height: 1.64;
}

.honest strong { color: var(--ink); }

.demo-links {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 16px 0 0;
}

.demo-links a {
  font-size: 0.86rem;
  display: inline-block;
  padding: 6px 0;
}