/* ============================================
   Julia Hiadlovska — Portfolio
   Shared stylesheet
   ============================================ */

/* Avenir Next first (installed on macOS / licensed systems),
   Mulish as the closest free Google Fonts fallback.
   Dosis + Libre Franklin used only inside Marlin font specimen. */
@import url('https://fonts.googleapis.com/css2?family=Mulish:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,400&family=Dosis:wght@800&family=Libre+Franklin:wght@400&display=swap');

:root {
  --bg: #ffffff;
  --footer-bg: #fafafa;
  --text: #000000;
  --text-muted: #000000;
  --text-soft: #000000;        /* všetko čierne podľa špecifikácie */
  --border: #ededed;
  --accent: #000000;
  --pill-blue: #4BC8FF;        /* semester pill */
  --pill-purple: #F2C0E6;      /* case study pill */
  --pill-green: #B9FBBE;       /* redesign pill */
  --soft-grey: #f3f3f3;
  --evala-pink: #fbe3ee;
  --marlin-grey: #f0f0f0;
  /* "The Goal" / Evala callout — light blue */
  --callout-blue-border: #A4C3F2;
  --callout-blue-fill: rgba(164, 195, 242, 0.2);
  --callout-blue-title: #3883F6;
  /* Results — green */
  --callout-green-border: #64B885;
  --callout-green-fill: rgba(100, 184, 133, 0.2);
  --callout-green-title: #64B885;
  /* Key takeaways — purple */
  --callout-purple-border: #CEB9F1;
  --callout-purple-fill: rgba(206, 185, 241, 0.2);
  --callout-purple-title: #8B6FD1;
  --max-width: 1240px;
  --reading-width: 740px;
  --font-display: "Avenir Next", "Mulish", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: "Avenir Next", "Mulish", -apple-system, BlinkMacSystemFont, sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

a { text-decoration: none; color: inherit; }

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 40px;
}

/* Reading container — for article/case study pages.
   Wraps content in a narrow centered column, matching the prototype's
   ~250px left/right insets on a 1240px page. */
.reading-container {
  width: 100%;
  max-width: var(--reading-width);
  margin: 0 auto;
  padding: 0 24px;
}

/* Eyebrow subheading — small UPPERCASE light grey label
   (Avenir Light 16pt in the Figma prototype) */
.eyebrow-subhead {
  font-size: 15px;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-soft);
  margin: 28px 0 10px;
}

/* ---------- Header ---------- */
header {
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.9);
  z-index: 100;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}
.logo {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.2px;
}
nav ul {
  display: flex;
  gap: 36px;
  list-style: none;
}
nav a {
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
  position: relative;
}
nav a::after {
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  width: 0; height: 2px;
  background: var(--text);
  transition: width 0.25s ease;
}
nav a:hover::after { width: 100%; }
nav a.active { font-weight: 700; }
nav a.active::after { width: 100%; }

/* ---------- Main ---------- */
main { flex: 1; }

/* ---------- Page intro / back link ---------- */
.page-top {
  padding: 40px 0 0;
}
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--text-muted);
  transition: opacity 0.2s ease;
}
.back-link:hover { opacity: 0.6; }

.eyebrow-label {
  font-size: 17px;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 6px;
}

/* ---------- Headings ---------- */
.display-xl {
  font-family: var(--font-display);
  font-size: 76px;
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -1.5px;
}
.display-lg {
  font-family: var(--font-display);
  font-size: 52px;
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -1px;
}
.display-md {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.5px;
}
.heading-section {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.3px;
  margin: 36px 0 18px;
  line-height: 1.15;
}
.heading-sub {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.2px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.course-code { font-weight: 900; }

/* ---------- Pills / tokens ---------- */
.pill {
  display: inline-block;
  font-size: 14px;
  font-weight: 900;
  color: #000000;
  padding: 6px 18px;
  border-radius: 999px;
  margin-bottom: 18px;
  letter-spacing: 0.2px;
}
.pill-blue { background: var(--pill-blue); }
.pill-purple { background: var(--pill-purple); }
.pill-green { background: var(--pill-green); }

/* ---------- Buttons ---------- */
.btn-primary {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  padding: 18px 38px;
  border-radius: 999px;
  transition: transform 0.2s ease, background 0.2s ease;
}
.btn-primary:hover { transform: translateY(-2px); background: #2a2a2a; }
.btn-text {
  font-weight: 700;
  font-size: 16px;
  position: relative;
}
.btn-text::after {
  content: "";
  position: absolute;
  left: 0; bottom: -4px;
  width: 0; height: 2px;
  background: var(--text);
  transition: width 0.25s ease;
}
.btn-text:hover::after { width: 100%; }

.read-more {
  display: inline-block;
  font-weight: 700;
  font-size: 15px;
  margin-top: 6px;
  position: relative;
}
.read-more::after {
  content: "";
  position: absolute;
  left: 0; bottom: -3px;
  width: 0; height: 2px;
  background: var(--text);
  transition: width 0.25s ease;
}
.read-more:hover::after { width: 100%; }

/* ---------- Prose (reading pages) ---------- */
.prose {
  max-width: var(--reading-width);
  margin: 0 auto;
}
.prose p {
  font-size: 16px;
  line-height: 1.75;
  color: #2a2a2a;
  margin-bottom: 22px;
}
.prose p:last-child { margin-bottom: 0; }

/* ---------- Footer ---------- */
footer {
  background: var(--footer-bg);
  border-top: 1px solid var(--border);
  padding: 40px 0;
  margin-top: 80px;
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  font-size: 16px;
  font-weight: 500;
}
.footer-inner .dot { color: #bbb; }
.footer-inner a { display: inline-flex; align-items: center; transition: opacity 0.2s ease; }
.footer-inner a:hover { opacity: 0.55; }
.footer-inner svg { width: 22px; height: 22px; }

/* ---------- Image placeholders ---------- */
.img-placeholder {
  background: var(--soft-grey);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #aaa;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  padding: 24px;
  min-height: 220px;
}

/* ============================================
   HOME
   ============================================ */
.home-main { display: flex; align-items: center; }
.hero { width: 100%; padding: 80px 0 120px; }
.hero-grid {
  display: grid;
  grid-template-columns: max-content max-content;
  justify-content: center;
  align-items: center;
  gap: 48px;
}
.hero-eyebrow { font-size: 18px; font-weight: 600; margin-bottom: 14px; }
.hero-title {
  font-family: "Avenir Next", "Mulish", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 48px;
  font-weight: 800; /* Avenir Next Heavy */
  line-height: 1.05;
  letter-spacing: -1px;
  white-space: nowrap;
  margin-bottom: 24px;
}
/* Pink brush-stroke highlight behind UX/UI Designer */
.brush-wrap {
  position: relative;
  display: inline-block;
  padding: 0 18px;
}
.brush-svg {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 118%;
  transform: translateY(-50%) rotate(-1.2deg);
  z-index: 0;
  pointer-events: none;
}
.brush-svg path { fill: #F2C0E6; }
.brush-text {
  position: relative;
  z-index: 1;
}
.hero-text {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--text);
  max-width: 420px;
  min-height: 109px;
  margin-bottom: 44px;
}
.hero-actions { display: flex; align-items: center; gap: 36px; }
.hero-photo {
  position: relative;
  width: 300px;
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Pink brush stroke behind the "UX/UI Designer" title.
   Uses images/brush.png — a transparent PNG of just the pink stroke.
   The PNG is stretched to fill the whole padded box (background-size:100% 100%),
   so the larger the padding, the larger the entire stroke. Generous vertical
   padding makes the stroke comfortably taller than the text, and the wider
   side padding lets the tapered ends spill past the text. */
.brush-wrap {
  position: relative;
  display: inline-block;
  padding: 28px 48px 30px;
  background-image: url('images/brush.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% 100%;
}

/* ============================================
   STUDIES (hub)
   ============================================ */
.section-block { padding: 56px 0 0; }
.studies-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  padding: 40px 0;
}
.studies-copy .pill { margin-bottom: 14px; }
.studies-copy h2 { margin-bottom: 12px; }
.studies-copy p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 400px;
  margin-bottom: 14px;
}

/* Scattered course codes */
.code-cloud {
  position: relative;
  min-height: 200px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 20px;
  padding: 20px;
}
.code-cloud span {
  display: inline-block;
  font-size: 28px;
  color: #1a1a1a;
  white-space: nowrap;
}
.code-cloud .c-bold { font-weight: 900; }
.code-cloud .c-light { font-weight: 400; color: #c5c5c5; }
.code-cloud .c-mid { font-weight: 600; color: #888; }
.code-cloud .c-italic { font-style: italic; font-weight: 400; }
.code-cloud .r-1 { transform: rotate(-6deg); }
.code-cloud .r-2 { transform: rotate(4deg); }
.code-cloud .r-3 { transform: rotate(-3deg); }
.code-cloud .r-4 { transform: rotate(7deg); }
.code-cloud .r-5 { transform: rotate(2deg); }

/* keyboard keys for "Why KISK" */
.keycaps { display: flex; gap: 10px; align-items: center; justify-content: center; min-height: 200px; }
.keycap {
  min-width: 56px;
  height: 56px;
  border: 2px solid #1a1a1a;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  padding: 0 8px;
}

/* ============================================
   STUDIES — semester detail
   ============================================ */
.course {
  padding: 30px 0;
  max-width: var(--reading-width);
  margin: 0 auto;
}
.course h3 {
  font-size: 22px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.2px;
  margin-bottom: 14px;
}
.course h3 .course-code { font-weight: 800; }
.course p {
  font-size: 16px;
  line-height: 1.7;
  color: #2a2a2a;
}
.course .inline-link {
  display: inline-block;
  font-weight: 700;
  margin-top: 8px;
}
.course .inline-link:hover { opacity: 0.6; }

/* ============================================
   WORK (hub)
   ============================================ */
.work-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
  padding: 50px 0;
}
.work-copy .pill { margin-bottom: 16px; }
.work-copy h2 { margin-bottom: 14px; }
.work-copy p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 420px;
  margin-bottom: 16px;
}
.work-thumb {
  border-radius: 10px;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  padding: 24px;
}
.thumb-evala { background: var(--evala-pink); }
.thumb-marlin { background: var(--marlin-grey); }

/* ============================================
   CASE STUDY
   ============================================ */
.case-hero {
  padding: 30px 0 40px;
  max-width: var(--reading-width);
  margin: 0 auto;
}
.case-hero .display-lg { margin-bottom: 18px; }
.case-hero .lead {
  font-size: 17px;
  line-height: 1.6;
  color: var(--text-muted);
}
.case-section {
  padding: 18px 0;
  max-width: var(--reading-width);
  margin: 0 auto;
}
.case-section.wide { max-width: var(--max-width); }
.case-section h2 {
  margin-top: 18px;
  margin-bottom: 18px;
}
/* h3 inside .case-section is the small UPPERCASE eyebrow subheading */
.case-section h3 {
  font-size: 15px;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--text-soft);
  margin: 24px 0 8px;
}
.case-section h4 {
  font-size: 16px;
  font-weight: 700;
  margin: 18px 0 6px;
  color: var(--text);
}
.case-section p {
  font-size: 16px;
  line-height: 1.7;
  color: #2a2a2a;
  margin-bottom: 14px;
}
.case-section ul {
  list-style: none;
  margin-bottom: 16px;
}
.case-section ul li {
  font-size: 16px;
  line-height: 1.7;
  color: #2a2a2a;
  padding-left: 22px;
  position: relative;
  margin-bottom: 10px;
}
.case-section ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 11px;
  width: 6px; height: 6px;
  background: #1a1a1a;
  border-radius: 50%;
}
.case-section ul li strong { font-weight: 800; }

/* Two-column row inside a case study (e.g. The Context / The Challenge) */
.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 36px;
  margin: 8px 0 20px;
}
.two-col h3 { margin-top: 0; }

/* Callout — "The Goal" style: 2px border + 20% fill + bold colored title */
.callout {
  background: var(--callout-blue-fill);
  border: 2px solid var(--callout-blue-border);
  border-radius: 12px;
  padding: 22px 26px;
  margin: 24px 0;
}
.callout h4 {
  margin: 0 0 8px;
  color: var(--callout-blue-title);
  font-weight: 700;
  font-size: 18px;
}
.callout p { margin-bottom: 0; color: #000000; }

.note-box {
  background: var(--soft-grey);
  border-radius: 10px;
  padding: 20px 24px;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-muted);
  margin-bottom: 30px;
  max-width: var(--reading-width);
}

.figure { margin: 28px 0; }
.figure .caption {
  font-style: italic;
  font-size: 12px;
  color: var(--text-soft);
  margin-top: 10px;
  text-align: center;
}
.figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid var(--border);
}
.figure-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 28px 0;
}
.figure-pair .figure { margin: 0; }

/* Marlin results: stacked images, all same width, no gaps — continuous page feel */
.result-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 20px 0;
}
.result-stack .figure { margin: 0; }
.result-stack .figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
  border: none;
}
.result-stack .figure:first-child img {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.result-stack .figure:last-child img {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

/* NDA note — plain italic text, matching the PDF */
.nda-note {
  font-style: italic;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-soft);
  margin-bottom: 30px;
  max-width: var(--reading-width);
}

/* Real images replacing placeholders */
.work-thumb { overflow: hidden; padding: 0; }
.work-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.studies-figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* State-flow chip — same blue style as "The Goal" callout, centered */
.state-flow {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px;
  background: var(--callout-blue-fill);
  border: 2px solid var(--callout-blue-border);
  border-radius: 8px;
  padding: 10px 22px;
  margin: 14px auto 18px;
  width: max-content;
  max-width: 100%;
  font-size: 15px;
  font-weight: 600;
  color: #000000;
}
.state-flow .arrow { color: var(--callout-blue-title); }

/* Key takeaways — purple */
.takeaway-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 16px;
}
.takeaway-card {
  background: var(--callout-purple-fill);
  border: 2px solid var(--callout-purple-border);
  border-radius: 12px;
  padding: 22px;
}
.takeaway-card h4 {
  margin: 0 0 10px;
  font-size: 18px;
  color: var(--callout-purple-title);
  font-weight: 700;
}
.takeaway-card p { font-size: 15px; line-height: 1.6; margin-bottom: 0; color: #000000; }

/* Results — green */
.result-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 16px;
}
.result-card {
  background: var(--callout-green-fill);
  border: 2px solid var(--callout-green-border);
  border-radius: 12px;
  padding: 22px;
}
.result-card h4 {
  margin: 0 0 10px;
  font-size: 18px;
  color: var(--callout-green-title);
  font-weight: 700;
}
.result-card p { font-size: 15px; line-height: 1.6; margin-bottom: 0; color: #000000; }

/* color/font specimen for Marlin */
.swatch-row { display: flex; flex-wrap: wrap; gap: 14px; margin: 14px 0 8px; }
.swatch {
  width: 90px;
}
.swatch .chip {
  height: 64px;
  border-radius: 8px;
  border: 1px solid rgba(0,0,0,0.06);
  margin-bottom: 6px;
}
.swatch .hex { font-size: 12px; font-weight: 600; color: var(--text-muted); }
.font-specimen { margin: 14px 0 22px; }
.font-specimen .name { font-size: 13px; color: #000000; margin-bottom: 6px; font-weight: 500; }
.font-specimen .sample-dosis {
  font-family: "Dosis", sans-serif;
  font-weight: 800;
  font-size: 38px;
  color: #000000;
}
.font-specimen .sample-franklin {
  font-family: "Libre Franklin", sans-serif;
  font-weight: 400;
  font-size: 32px;
  color: #000000;
}

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; justify-content: stretch; gap: 40px; text-align: center; justify-items: center; }
  .hero-photo { order: -1; }
  .hero-text { margin-left: auto; margin-right: auto; }
  .hero-actions { justify-content: center; }
  .studies-row, .work-row { grid-template-columns: 1fr; gap: 28px; }
  .takeaway-grid, .result-grid { grid-template-columns: 1fr; }
  .figure-pair { grid-template-columns: 1fr; }
  .two-col { grid-template-columns: 1fr; gap: 12px; }
  .display-lg { font-size: 42px; }
}
@media (max-width: 600px) {
  .container { padding: 0 22px; }
  nav ul { gap: 18px; }
  nav a { font-size: 14px; }
  .hero-title { font-size: 38px; white-space: normal; }
  .display-xl { font-size: 44px; letter-spacing: -1px; }
  .hero-photo { width: 260px; height: 260px; }
  .hero { padding: 50px 0 80px; }
  .display-lg { font-size: 34px; }
  .display-md { font-size: 30px; }
  .studies-copy p, .work-copy p { max-width: 100%; }
}