/* =========================================================================
   Vojtěch Moudrý - shared styles
   Used by: index.html, recommendations.html
   Page-specific styles remain inline in each HTML file.
   ========================================================================= */


/* -------------------------------------------------------------------------
   1. Design tokens
   ------------------------------------------------------------------------- */
:root{
  /* Color */
  --bg:#08090d;
  --bg-rgb:8, 9, 13;
  --text:#f4f6fb;
  --muted:#a5adba;

  --blue:#3aa8ff;
  --violet:#8c6cff;
  --pink:#ff6fb5;
  --green:#5ce2ad;
  --orange:#ffb45e;

  /* Translucent white surfaces & borders (sit on top of --bg). */
  --surface-1:rgba(255,255,255,.045);
  --surface-2:rgba(255,255,255,.075);
  --surface-3:rgba(255,255,255,.12);

  --border-subtle:rgba(255,255,255,.08);
  --border-default:rgba(255,255,255,.13);
  --border-strong:rgba(255,255,255,.18);
  --line:var(--border-default);

  /* Type */
  --font-body:16px;
  --font-small:13px;
  --font-label:12px;
  --font-lead:clamp(17px, 1.55vw, 21px);
  --font-modal-title:22px;
  --font-h2:clamp(38px, 4.8vw, 56px);
  --font-hero:clamp(42px, 5.2vw, 64px);

  --weight-regular:500;
  --weight-medium:620;
  --weight-bold:720;

  /* Layout */
  --max:1180px;
  --radius-card:24px;
  --radius-pill:999px;

  --section-label-color:var(--violet);

  /* Stacking */
  --z-base:1;
  --z-elevated:2;
  --z-portrait:3;
  --z-pill:4;
  --z-nav:50;
  --z-modal:100;
}


/* -------------------------------------------------------------------------
   2. Reset + base
   ------------------------------------------------------------------------- */
*{ box-sizing:border-box }

html, body{
  margin:0;
  padding:0;
  min-height:100%;
}

html{
  scroll-behavior:smooth;
  overflow-x:clip;
}

body{
  background:
    radial-gradient(circle at 72% 30%, rgba(96,84,210,.20) 0%, rgba(96,84,210,.09) 28%, rgba(96,84,210,0) 58%),
    radial-gradient(circle at 42% 24%, rgba(58,135,210,.12) 0%, rgba(58,135,210,.045) 30%, rgba(58,135,210,0) 58%),
    linear-gradient(135deg, rgba(22,38,70,.46) 0%, rgba(28,38,78,.32) 46%, rgba(32,28,62,.32) 78%, var(--bg) 100%);
  background-color:var(--bg);
  color:var(--text);
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size:var(--font-body);
  font-weight:var(--weight-regular);
  letter-spacing:.012em;
  line-height:1.52;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
}

a{ color:inherit; text-decoration:none }
img{ display:block; max-width:100% }
p, li{ font-weight:var(--weight-regular); letter-spacing:.016em }
h1, h2, h3, p{ margin-top:0 }


/* -------------------------------------------------------------------------
   3. Typography
   ------------------------------------------------------------------------- */
h1{
  max-width:700px;
  margin-bottom:24px;
  font-size:var(--font-hero);
  line-height:1.08;
  letter-spacing:.004em;
  font-weight:var(--weight-bold);
}

h2{
  max-width:900px;
  margin-bottom:0;
  font-size:var(--font-h2);
  line-height:1.07;
  letter-spacing:.002em;
  font-weight:var(--weight-bold);
}

.kicker{
  margin-bottom:22px;
  color:var(--section-label-color);
  font-size:var(--font-label);
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
}


/* -------------------------------------------------------------------------
   4. Layout primitives
   ------------------------------------------------------------------------- */
.wrap{
  width:min(calc(100% - 40px), var(--max));
  margin:0 auto;
}

main, section{ position:relative; z-index:var(--z-base) }

section{
  padding:76px 0;
  margin-top:0;
  border-top:1px solid var(--line);
}


/* -------------------------------------------------------------------------
   5. Navigation (fixed pill, transparent at top, glass on scroll)
   ------------------------------------------------------------------------- */
/* Nav has two visual states:
   - Top of page: brand is flush against the wrap edge (translateX 0), no
     glass background.
   - On scroll: brand slides right into the pill padding (translateX +18px),
     nav gains glass background, border and backdrop blur. The nav-links
     on the right do NOT move - only the brand animates. */
.nav{
  position:fixed;
  top:14px;
  left:50%;
  transform:translateX(-50%);
  width:min(calc(100% - 40px), var(--max));
  z-index:var(--z-nav);
  isolation:isolate;
  display:flex;
  align-items:center;
  justify-content:space-between;
  /* Asymmetric: 0 left so brand sits flush at top state; brand slides
     right by 18px when scrolled, sitting inside the pill padding. */
  padding:10px 10px 10px 0;
  border:1px solid transparent;
  border-radius:var(--radius-pill);
  background:transparent;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  transition:
    background-color .24s ease,
    border-color .24s ease,
    box-shadow .24s ease,
    backdrop-filter .24s ease,
    -webkit-backdrop-filter .24s ease;
}

.nav.scrolled{
  background:rgba(var(--bg-rgb), .84);
  border-color:var(--line);
  box-shadow:0 18px 54px rgba(0,0,0,.32);
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

.brand{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:15px;
  font-weight:var(--weight-medium);
  letter-spacing:.018em;
  transform:translateX(0);
  transition:transform .28s cubic-bezier(.4,.0,.2,1);
}
.nav.scrolled .brand{
  transform:translateX(18px);
}

.nav-links{
  display:flex;
  align-items:center;
  gap:28px;
}

.nav-links a{
  padding:9px 13px;
  border-radius:var(--radius-pill);
  color:var(--muted);
  font-size:15px;
  font-weight:var(--weight-medium);
  letter-spacing:.018em;
  transition:.22s ease;
}
.nav-links a:hover{
  color:var(--text);
  background:var(--surface-2);
}

.nav-links a.resume-link{
  color:#071015;
  background:var(--green);
  font-weight:var(--weight-medium);
}


/* -------------------------------------------------------------------------
   6. Buttons (base)
   ------------------------------------------------------------------------- */
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 18px;
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  background:var(--surface-2);
  color:var(--text);
  font-size:14px;
  font-weight:var(--weight-medium);
  letter-spacing:.018em;
  white-space:nowrap;
  transition:transform .22s ease, background .22s ease, box-shadow .22s ease;
}
.button:hover{
  transform:translateY(-2px);
  background:var(--surface-3);
}


/* -------------------------------------------------------------------------
   7. Avatar bubble + LinkedIn profile link
   ------------------------------------------------------------------------- */
.avatar-placeholder{
  position:relative;
  overflow:hidden;
  flex:0 0 44px;
  width:44px;
  height:44px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,.22);
  border-radius:50%;
  background:
    radial-gradient(circle at 30% 25%, rgba(255,255,255,.32), transparent 28%),
    linear-gradient(135deg, rgba(58,168,255,.72), rgba(140,108,255,.74), rgba(255,111,181,.64));
  color:#fff;
  font-size:13px;
  font-weight:780;
  letter-spacing:.04em;
  box-shadow:0 14px 34px rgba(0,0,0,.22);
}
.avatar-placeholder img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:inherit;
  background:transparent;
  z-index:1;
  opacity:0;
  transition:opacity .35s ease;
}
.avatar-placeholder img.is-loaded{ opacity:1 }
.avatar-placeholder .initials{
  position:relative;
  z-index:0;
}

.rec-person-link{
  color:inherit;
  text-decoration:none;
  transition:color .18s ease;
}
.rec-person-link:hover,
.rec-person-link:focus-visible{
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}


/* -------------------------------------------------------------------------
   8. Recommendation category tag
   ------------------------------------------------------------------------- */
.rec-tag{
  width:fit-content;
  margin-bottom:14px;
  padding:6px 10px;
  border:1px solid rgba(92,226,173,.18);
  border-radius:var(--radius-pill);
  background:rgba(92,226,173,.12);
  color:var(--green);
  font-size:var(--font-label);
  font-weight:var(--weight-medium);
  letter-spacing:.018em;
}


/* -------------------------------------------------------------------------
   9. Closing CTA - gradient card with depth, glow and accent orb
   ------------------------------------------------------------------------- */
/* Background mood - radial bloom that anchors the closing card on the page.
   Sits behind the card and acts as the "outer glow" without using box-shadow
   (which would extend scrollHeight and get clipped by overflow-x:clip on body). */
.closing{
  position:relative;
  padding-bottom:96px;
  overflow:hidden;
}
.closing::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background:
    radial-gradient(ellipse 60% 40% at 50% 60%,
      rgba(140,108,255,.22) 0%,
      rgba(58,168,255,.12) 35%,
      rgba(255,111,181,.08) 55%,
      transparent 75%);
  pointer-events:none;
}
.closing > .wrap{ position:relative; z-index:1 }

.closing-card{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:1fr auto;
  gap:24px;
  align-items:end;
  padding:clamp(32px, 6vw, 62px);
  border-radius:34px;
  background:
    radial-gradient(circle at 88% 10%, rgba(255,255,255,.28), transparent 28%),
    radial-gradient(circle at 10% 0%, rgba(255,255,255,.12), transparent 38%),
    radial-gradient(circle at 95% 95%, rgba(255,111,181,.30), transparent 40%),
    linear-gradient(135deg, var(--blue), var(--violet), var(--pink));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.18),
    inset 0 -1px 0 rgba(0,0,0,.10),
    0 18px 36px -12px rgba(0,0,0,.40);
  color:#fff;
}

/* Subtle noise texture for tactile feel - inline SVG, no external assets. */
.closing-card::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  opacity:.35;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .5 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

.closing-card > *{ position:relative; z-index:2 }

.closing-card h2{ color:#fff }
.closing-card p{
  max-width:660px;
  margin:18px 0 0;
  color:rgba(255,255,255,.82);
  font-size:17px;
  line-height:1.65;
}
.closing-card .button{
  min-height:52px;
  padding:0 22px;
  background:#071015;
  color:#fff;
  border-color:transparent;
  font-size:15px;
  box-shadow:0 12px 28px rgba(0,0,0,.35);
  transition:transform .22s ease, box-shadow .22s ease;
}
.closing-card .button:hover{
  transform:translateY(-2px);
  box-shadow:0 18px 38px rgba(0,0,0,.45);
}
.closing-card a[href^="mailto"]{
  font-size:16px;
  font-weight:var(--weight-bold);
}


/* -------------------------------------------------------------------------
   10. Footer - full-bleed container with stronger ambient glow
   ------------------------------------------------------------------------- */
.footer{
  position:relative;
  border-top:1px solid var(--line);
  color:rgba(232,236,242,.58);
  font-size:14px;
  font-weight:var(--weight-regular);
  line-height:1.4;
  letter-spacing:.02em;
  isolation:isolate;
  overflow:hidden;
}
/* Stronger ambient bloom that spans the full width - footer is full-bleed
   (not constrained by .wrap), so the glow can extend across the whole page.
   Content sits in .footer-inner which carries the wrap width. */
.footer::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  background:
    radial-gradient(ellipse 80% 100% at 70% 100%,
      rgba(140,108,255,.28) 0%,
      rgba(58,168,255,.16) 35%,
      rgba(255,111,181,.08) 60%,
      transparent 80%),
    radial-gradient(ellipse 50% 80% at 20% 100%,
      rgba(58,168,255,.14) 0%,
      transparent 70%);
  pointer-events:none;
}

.footer-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:48px 0 38px;
}

.footer-meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 14px;
}

.footer a{ color:rgba(232,236,242,.74) }
.footer a:hover{ color:#fff }
.footer a[href^="mailto"]{
  font-size:16px;
  font-weight:var(--weight-bold);
}

.social-links{
  flex:0 0 auto;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}
.social-links a{
  width:42px;
  height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  background:var(--surface-1);
  color:#E8ECF2;
  opacity:.82;
  transition:transform .22s ease, background .22s ease, border-color .22s ease, opacity .22s ease;
}
.social-links a:hover{
  transform:translateY(-2px);
  background:var(--surface-2);
  border-color:var(--border-strong);
  opacity:1;
}
.social-links svg{
  width:18px;
  height:18px;
  fill:currentColor;
}


/* -------------------------------------------------------------------------
   10b. Capability cards
   Used on both the homepage capabilities row and case-study Approach grid.
   Layout (grid columns) is defined per-page; this block covers the card
   chrome, meta row, typography and per-variant colour theming.
   ------------------------------------------------------------------------- */
.capability-card{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  height:100%;
  min-height:292px;
  padding:24px;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-card);
  background:var(--surface-1);
  color:#f2f5f8;
  font-weight:700;
  letter-spacing:.014em;
  transition:transform .24s ease, border-color .24s ease, background .24s ease;
}
.capability-card:hover{ transform:translateY(-4px) }

/* Soft glowing dot in the corner of each card */
.capability-card::after{
  content:"";
  position:absolute;
  inset:auto 18px 18px auto;
  width:72px;
  height:72px;
  border-radius:50%;
  filter:blur(34px);
  opacity:.22;
  pointer-events:none;
}

.capability-meta{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:24px;
}
.capability-label{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:7px 11px;
  border-radius:var(--radius-pill);
  font-size:var(--font-label);
  line-height:1;
  font-weight:var(--weight-medium);
  letter-spacing:.045em;
  text-transform:uppercase;
}
.capability-mark{
  color:rgba(255,255,255,.28);
  font-size:14px;
  font-weight:820;
  letter-spacing:.08em;
}

.capability-card h3{
  max-width:320px;
  margin:0 0 14px;
  font-size:20px;
  line-height:1.12;
  letter-spacing:.002em;
  font-weight:var(--weight-bold);
}
.capability-card p{
  margin:0;
  color:#b9c1cf;
  font-size:14px;
  line-height:1.55;
  letter-spacing:.014em;
  font-weight:var(--weight-regular);
}

/* Per-card colour theming - homepage capabilities */
.capability-strategy{ border-color:rgba(140,108,255,.28) }
.capability-strategy .capability-label{
  color:#cabfff;
  background:rgba(140,108,255,.16);
  border:1px solid rgba(140,108,255,.34);
}
.capability-strategy::after{ background:rgba(140,108,255,.75) }

.capability-lifecycle{ border-color:rgba(58,168,255,.25) }
.capability-lifecycle .capability-label{
  color:#aee1ff;
  background:rgba(58,168,255,.15);
  border:1px solid rgba(58,168,255,.32);
}
.capability-lifecycle::after{ background:rgba(58,168,255,.74) }

.capability-systems{ border-color:rgba(92,226,173,.24) }
.capability-systems .capability-label{
  color:#99f4d0;
  background:rgba(92,226,173,.14);
  border:1px solid rgba(92,226,173,.30);
}
.capability-systems::after{ background:rgba(92,226,173,.68) }

.capability-alignment{ border-color:rgba(255,180,94,.24) }
.capability-alignment .capability-label{
  color:#ffd5a6;
  background:rgba(255,180,94,.14);
  border:1px solid rgba(255,180,94,.30);
}
.capability-alignment::after{ background:rgba(255,180,94,.70) }

/* Per-card colour theming - case-study Approach (5 phases) */
.capability-discovery{ border-color:rgba(58,168,255,.25) }
.capability-discovery .capability-label{
  color:#aee1ff;
  background:rgba(58,168,255,.15);
  border:1px solid rgba(58,168,255,.32);
}
.capability-discovery::after{ background:rgba(58,168,255,.74) }

.capability-framing{ border-color:rgba(140,108,255,.28) }
.capability-framing .capability-label{
  color:#cabfff;
  background:rgba(140,108,255,.16);
  border:1px solid rgba(140,108,255,.34);
}
.capability-framing::after{ background:rgba(140,108,255,.75) }

.capability-exploration{ border-color:rgba(255,111,181,.25) }
.capability-exploration .capability-label{
  color:#ffc1de;
  background:rgba(255,111,181,.14);
  border:1px solid rgba(255,111,181,.32);
}
.capability-exploration::after{ background:rgba(255,111,181,.70) }

.capability-validation{ border-color:rgba(92,226,173,.24) }
.capability-validation .capability-label{
  color:#99f4d0;
  background:rgba(92,226,173,.14);
  border:1px solid rgba(92,226,173,.30);
}
.capability-validation::after{ background:rgba(92,226,173,.68) }

.capability-delivery{ border-color:rgba(255,180,94,.24) }
.capability-delivery .capability-label{
  color:#ffd5a6;
  background:rgba(255,180,94,.14);
  border:1px solid rgba(255,180,94,.30);
}
.capability-delivery::after{ background:rgba(255,180,94,.70) }


/* -------------------------------------------------------------------------
   11. Accessibility - skip link + focus-visible + reduced motion
   ------------------------------------------------------------------------- */
/* Skip-to-main-content link for keyboard / screen reader users.
   Visually hidden until focused (Tab key from address bar). */
.skip-to-content{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
.skip-to-content:focus{
  position:fixed;
  top:14px;
  left:50%;
  transform:translateX(-50%);
  z-index:101;
  width:auto;
  height:auto;
  padding:9px 16px;
  border-radius:var(--radius-pill);
  background:var(--text);
  color:var(--bg);
  font-weight:var(--weight-medium);
  font-size:14px;
  letter-spacing:.018em;
  outline:2px solid var(--green);
  outline-offset:4px;
}

a:focus-visible,
button:focus-visible{
  outline:2px solid var(--green);
  outline-offset:4px;
}

/* Tactile feedback on tap - runs on mobile/tablet where there's no hover.
   The button already has a hover lift; on press we settle it back so the
   tap feels confirmed. Generic anchors get a subtle opacity press. */
.button:active{
  transform:translateY(0);
  filter:brightness(.95);
}
.case-link:active,
.case-back:active,
.brand:active,
.resume-link:active{
  opacity:.7;
}

@media(prefers-reduced-motion: reduce){
  *{
    transition-duration:.001s !important;
    animation-duration:.001s !important;
  }
  .avatar-placeholder img{ transition:none }
}


/* -------------------------------------------------------------------------
   12. Shared responsive (h1/h2 mobile sizing, nav narrow, footer stack)
   ------------------------------------------------------------------------- */
@media(max-width:940px){
  h1{ font-size:clamp(30px, 8.4vw, 50px); text-wrap:balance }
  h2{ font-size:clamp(28px, 7.4vw, 44px); text-wrap:balance }
  section{ padding:58px 0 }
}

@media(max-width:760px){
  .nav{
    top:10px;
    width:min(calc(100% - 24px), var(--max));
  }
}

@media(max-width:720px){
  .footer-inner{
    flex-direction:column;
    align-items:flex-start;
  }
  .social-links{ justify-content:flex-start }
}

/* Capability cards lose their alignment-driven min-heights on mobile,
   where they stack as a single column - the min-heights only existed to
   keep multi-column grid rows level. Also tighten the meta -> heading and
   heading -> body gaps which look airy at narrow widths. */
@media(max-width:640px){
  .capability-card{
    min-height:auto;
    padding:22px;
  }
  .capability-card .capability-meta{
    margin-bottom:14px;
  }
  .capability-card h3{
    min-height:auto;
    max-width:none;
    margin:0 0 8px;
  }
  .capability-card p{
    min-height:auto;
  }
}