/* =========================================================
   luciejirakova.cz: shared styles for every page
   ========================================================= */

/* =========================================================
   1. DESIGN TOKENS
   Change these few values and the whole site follows.
   ========================================================= */
:root {
  --paper:      #F4EFE3;  /* eggshell background */
  --paper-deep: #EAE3D2;  /* slightly darker paper for boxes */
  --ink:        #22211C;  /* main text + rules */
  --ink-soft:   #5A5548;  /* secondary text */
  --rule:       #CFC6B2;  /* thin divider lines */
  --coral:      #FF9F87;  /* main accent: portrait frame */
  --poppy:      #BE3A26;  /* warm red: small labels, links, contact button */
  --marigold:   #F5B83D;  /* spare accent colour */

  --serif: "Instrument Serif", Georgia, serif;
  --sans:  "Instrument Sans", system-ui, sans-serif;

  --max: 1120px;          /* max page width */
  --gutter: clamp(20px, 5vw, 56px);  /* side padding that grows with screen */
}

/* =========================================================
   2. BASICS
   ========================================================= */
* { box-sizing: border-box; margin: 0; }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

/* Keyboard users see where they are */
a:focus-visible { outline: 2px solid var(--poppy); outline-offset: 3px; }

.wrap {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* =========================================================
   3. HEADER (bold name, stays pinned while scrolling)
   ========================================================= */
html { scroll-behavior: smooth; }   /* menu links glide to sections */

.site-header {
  position: sticky;      /* sticks to the top of the screen while scrolling */
  top: 0;
  z-index: 10;           /* keeps it above the page content */
  background: var(--paper);
  padding-bottom: 16px;  /* breathing room under the header (no line) */
}

/* So section titles aren't hidden behind the sticky header when you jump to them */
section[id], footer[id] { scroll-margin-top: 110px; }

.masthead {
  display: flex;
  flex-wrap: wrap;               /* on phones the menu drops below the name */
  justify-content: space-between;
  align-items: center;
  gap: 14px 32px;
  padding-top: 20px;
}

/* Your name: bold sans, links back to the top of the page */
.brand {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.02em;   /* pulls the letters slightly closer */
  line-height: 1;
  text-decoration: none;
  transition: color .2s;
}
.brand:hover { color: var(--poppy); }

.masthead nav {
  display: flex;
  align-items: center;
  gap: 26px;
  font-size: 15px;
}
.masthead nav a { text-decoration: none; color: var(--ink-soft); }
.masthead nav a:not(.btn):hover { color: var(--ink); }

/* Smaller version of the button for the header */
.btn.btn-small { padding: 8px 18px; font-size: 14px; }
.masthead nav .btn-accent { color: #fff; }
.masthead nav .btn-accent:hover { color: #fff; }

/* Footer line */
.double-rule {
  border-top: 4px solid var(--ink);   /* one simple thick line */
  margin: 16px 0 0;
}

/* =========================================================
   4. HERO
   ========================================================= */
.hero {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: clamp(32px, 6vw, 80px);
  align-items: center;
  padding: clamp(48px, 8vw, 96px) 0;
}

.hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(44px, 6.4vw, 84px);  /* shrinks smoothly on smaller screens */
  line-height: 1.02;
  letter-spacing: -0.015em;
}

.hero h1 em { color: var(--poppy); }   /* the highlighted words */
.nowrap { white-space: nowrap; }        /* keeps "C-suite" on one line */

.hero .intro {
  font-size: 19px;
  color: var(--ink-soft);
  max-width: 40ch;
  margin-top: 24px;
}

.buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

.btn {
  display: inline-block;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1.5px solid var(--ink);
  text-decoration: none;
  font-weight: 500;
  font-size: 15px;
  transition: background .25s, color .25s, border-color .25s;
  white-space: nowrap;   /* button text never breaks onto two lines */
}
.btn-solid { background: var(--ink); color: var(--paper); }
.btn-accent { background: var(--poppy); border-color: var(--poppy); color: #fff; }
/* Hover: colours swap places */
.btn:hover        { background: var(--ink);   border-color: var(--ink);   color: var(--paper); } /* outline button fills with ink */
.btn-solid:hover  { background: var(--poppy); border-color: var(--poppy); color: #fff; }        /* ink turns poppy */
.btn-accent:hover { background: var(--ink);   border-color: var(--ink);   color: #fff; }        /* poppy turns ink */

/* ---- The portrait card: the one "loud" element ---- */
.portrait {
  position: relative;
  padding: 0 8px 8px 0;        /* room for the hard shadow */
}

.portrait-card {
  aspect-ratio: 4 / 5;
  background: var(--coral);           /* shows while the photo loads */
  border: 2px solid var(--ink);
  border-radius: 18px;
  box-shadow: 8px 8px 0 var(--ink);   /* hard shadow, no blur */
  overflow: hidden;
}

/* The photo fills the whole frame.
   object-fit: cover crops it neatly instead of stretching it.
   object-position decides which part stays visible (move "30%" to shift the crop). */
.portrait-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}


/* ---- Fun "Email me" button ----
   On hover: "Email me" rolls up, "Say hi! 👋" rolls in, and the button does a little wiggle. */
.btn-email {
  position: relative;
  overflow: hidden;             /* hides the text that's waiting below */
}
.btn-email span {
  display: block;
  transition: transform .4s cubic-bezier(.3, 1.5, .5, 1);
}
.btn-email::after {
  content: attr(data-hover);    /* takes the text from data-hover="..." in the HTML */
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(110%);
  transition: transform .4s cubic-bezier(.3, 1.5, .5, 1);
}
.btn-email:hover span    { transform: translateY(-160%); }
.btn-email:hover::after  { transform: translateY(0); }
.btn-email:hover         { animation: wiggle .5s ease; }

@keyframes wiggle {
  0%, 100% { rotate: 0deg; }
  25%      { rotate: -4deg; }
  50%      { rotate: 3deg; }
  75%      { rotate: -2deg; }
}

/* =========================================================
   5. SECTION HEADINGS (newspaper style)
   ========================================================= */
.section { padding: clamp(40px, 6vw, 72px) 0; }

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  border-top: 1px solid var(--ink);
  padding-top: 12px;
  margin-bottom: 32px;
}
.section-head h2 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(32px, 4vw, 44px);
  line-height: 1.1;
}
.section-head a { font-size: 15px; color: var(--ink-soft); }

/* =========================================================
   6. JOURNAL: three newspaper columns with thin rules between
   ========================================================= */
.columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.story {
  padding: 0 28px;
  border-left: 1px solid var(--rule);
  text-decoration: none;
}
.story:first-child { padding-left: 0; border-left: none; }
.story:last-child  { padding-right: 0; }

.story .topic { font-size: 14px; color: var(--poppy); font-weight: 500; }
.story h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.15;
  margin: 8px 0 10px;
}
.story p { font-size: 15px; color: var(--ink-soft); }
.story:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }

/* Empty state: no posts yet = the post row simply isn't shown */
.columns:not(:has(.story)) { display: none; }

/* =========================================================
   7. CV: experience list + side column
   ========================================================= */
.cv {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 56px;
}

.job {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--rule);
}
.job:first-child { padding-top: 0; }
.job .years { font-size: 15px; color: var(--ink-soft); padding-top: 4px; }
.job h3 { font-family: var(--serif); font-weight: 400; font-size: 26px; line-height: 1.2; }
.job .where { font-size: 15px; color: var(--poppy); font-weight: 500; }
.job p { margin-top: 6px; color: var(--ink-soft); font-size: 16px; }

/* Side column looks like a boxed newspaper sidebar */
.sidebar {
  background: var(--paper-deep);
  border: 1px solid var(--ink);
  padding: 24px;
  align-self: start;
}
.sidebar h3 { font-family: var(--serif); font-weight: 400; font-size: 24px; margin-bottom: 8px; }
.sidebar ul { padding-left: 18px; color: var(--ink-soft); font-size: 16px; }
.sidebar li { margin: 4px 0; }
.sidebar h3:not(:first-child) { margin-top: 24px; }

/* =========================================================
   8. FOOTER / CONTACT
   ========================================================= */
footer { padding-bottom: 48px; }
.contact {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding-top: 32px;
}
.contact p { font-family: var(--serif); font-size: clamp(30px, 4vw, 44px); line-height: 1.15; max-width: 36ch; }
.small-print { margin-top: 40px; font-size: 14px; color: var(--ink-soft); }

/* =========================================================
   9. RESPONSIVE: tablets and phones
   Everything stacks into one column below 820px.
   ========================================================= */
@media (max-width: 820px) {
  .hero, .cv { grid-template-columns: 1fr; }
  .portrait { max-width: 380px; }

  .columns { grid-template-columns: 1fr; }
  .story {
    padding: 20px 0;
    border-left: none;
    border-top: 1px solid var(--rule);
  }
  .story:first-child { border-top: none; padding-top: 0; }
}

@media (max-width: 480px) {
  .job { grid-template-columns: 1fr; gap: 4px; }
  .masthead nav { gap: 18px; }
  /* On phones: name + menu on one slim row */
  .masthead { flex-wrap: nowrap; padding-top: 14px; gap: 12px; }
  .brand { font-size: 18px; white-space: nowrap; }
  .masthead nav { gap: 14px; }
  .btn.btn-small { padding: 7px 14px; }
}

/* Respect people who turn off animations in their system settings */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* =========================================================
   CV PAGE
   ========================================================= */

/* Current page in the menu: darker text + poppy underline */
.masthead nav a[aria-current="page"] {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--poppy);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* ---- Intro ---- */
.cv-intro {
  display: grid;
  padding: clamp(48px, 7vw, 88px) 0 clamp(32px, 5vw, 56px);
  border-bottom: 1px solid var(--ink);
}
.cv-intro h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(52px, 8vw, 104px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}
.name-row {
  display: flex;
  flex-wrap: wrap;            /* on phones the button drops below the name */
  justify-content: space-between;
  align-items: center;
  gap: 16px 32px;
  margin-bottom: 14px;
}
.name-row h1 { margin: 0; }
.cv-intro .role { font-size: 21px; }
.cv-intro .summary { color: var(--ink-soft); max-width: 62ch; margin-top: 18px; font-size: 18px; }

/* ---- At a glance: big numbers in newspaper columns ---- */
.glance {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--ink);
}
.glance div { padding: 24px 20px; border-left: 1px solid var(--rule); }
.glance div:first-child { border-left: none; padding-left: 0; }
.glance strong {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 5vw, 56px);
  line-height: 1;
  color: var(--poppy);
}
.glance span { font-size: 15px; color: var(--ink-soft); }

/* ---- Experience + side column ---- */
.cv-body {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: clamp(32px, 6vw, 72px);
}

.role-entry {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid var(--rule);
}
.role-entry:first-of-type { padding-top: 0; }
.role-entry .years { font-size: 15px; color: var(--ink-soft); padding-top: 6px; }
.role-entry h3 { font-family: var(--serif); font-weight: 400; font-size: 30px; line-height: 1.15; }
.role-entry .where { font-size: 15px; color: var(--poppy); font-weight: 500; }
.role-entry ul { margin-top: 12px; padding-left: 20px; color: var(--ink-soft); }
.role-entry li { margin: 6px 0; }
.role-entry li::marker { color: var(--coral); }

.side h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 26px;
  border-top: 1px solid var(--ink);
  padding-top: 10px;
  margin-bottom: 14px;
}
.side section + section { margin-top: 40px; }

/* Skill tags look like little stickers */
.tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; }
.tags li {
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 5px 14px;
  font-size: 14px;
  background: var(--paper);
  transition: color .25s, border-color .25s;
}
/* Hover: border and text turn poppy */
.tags li:hover { border-color: var(--poppy); color: var(--poppy); }

.plain-list { list-style: none; padding: 0; font-size: 16px; }
.plain-list li { padding: 8px 0; border-bottom: 1px solid var(--rule); display: flex; justify-content: space-between; gap: 12px; }
.plain-list li span { color: var(--ink-soft); }
.edu small { display: block; font-size: 14px; color: var(--ink-soft); }

/* ---- "Best bit": a playful note under a role (hidden when printed) ---- */
.best-bit {
  position: relative;
  margin-top: 22px;
  background: #FFE7DF;            /* very pale coral */
  border: 1.5px dashed var(--ink);
  border-radius: 12px;
  padding: 20px 18px 14px;
}
.best-bit-label {
  position: absolute;
  top: -13px;
  left: 14px;
  background: var(--coral);
  border: 1.5px solid var(--ink);
  box-shadow: 2px 2px 0 var(--ink);
  border-radius: 999px;
  padding: 2px 12px;
  font-size: 13px;
  font-weight: 500;
  transform: rotate(-3deg);
}
.best-bit p {
  font-family: var(--serif);
  font-style: italic;
  font-size: 21px;
  line-height: 1.3;
}

/* ---- Recommendation: a newspaper pull-quote ---- */
.pull-quote {
  margin: clamp(48px, 7vw, 88px) auto;
  max-width: 820px;
  text-align: center;
}
.pull-quote blockquote {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.2;
}
.pull-quote blockquote::before { content: "“"; color: var(--coral); }
.pull-quote blockquote::after  { content: "”"; color: var(--coral); }
.pull-quote figcaption { margin-top: 18px; font-size: 15px; color: var(--ink-soft); }
.pull-quote figcaption strong { color: var(--ink); font-weight: 500; }

/* ---- Off duty: card with a poppy "book spine" ---- */
.off-duty {
  display: grid;
  grid-template-columns: auto 1fr;
  border: 2px solid var(--ink);
  border-radius: 18px;
  overflow: hidden;             /* keeps the spine inside the rounded corners */
  background: var(--paper);
  margin-bottom: clamp(48px, 7vw, 88px);
}
.off-duty-spine {
  background: var(--poppy);
  color: var(--paper);
  padding: 28px 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.off-duty-spine h2 {
  writing-mode: vertical-rl;    /* turns the title sideways */
  transform: rotate(180deg);    /* so it reads bottom to top */
  font-family: var(--serif);
  font-weight: 400;
  font-size: 40px;
  line-height: 1;
}
.off-duty p {
  padding: 32px clamp(24px, 4vw, 40px);
  align-self: center;
  color: var(--ink-soft);
  font-size: 18px;
  max-width: 60ch;
}

/* ---- Sticky sidebar ----
   Strengths, Tools, Languages and Education stay in place while the
   experience list scrolls, then scroll away together at the end of the
   section (just before the quote). Only on screens big enough to fit it. */
@media (min-width: 821px) {
  .side {
    position: sticky;
    top: 100px;                          /* sits just below the pinned header */
    align-self: start;                   /* needed so the column doesn't stretch */
    max-height: calc(100vh - 116px);     /* never taller than the screen... */
    overflow-y: auto;                    /* ...on short screens it scrolls inside */
    scrollbar-width: thin;
    padding-right: 4px;
  }
  /* A slightly more compact sidebar so all four sections fit on a laptop screen */
  .side h3 { font-size: 21px; padding-top: 7px; margin-bottom: 9px; }
  .side section + section { margin-top: 20px; }
  .side .tags { gap: 6px; }
  .side .tags li { font-size: 12.5px; line-height: 1.4; padding: 3px 10px; }
  .cv-body { grid-template-columns: 1.7fr 1fr; }   /* a little wider sidebar */
  .side .plain-list { font-size: 15px; }
  .side .plain-list li { padding: 4px 0; }
  .side .edu small { font-size: 13px; }
  .side .plain-list li > div { line-height: 1.35; }
}



/* ---- CV page on tablets and phones ---- */
@media (max-width: 820px) {
  .cv-body { grid-template-columns: 1fr; }
  .glance { grid-template-columns: repeat(2, 1fr); }
  .glance div:nth-child(3) { border-left: none; padding-left: 0; }
  .glance div:nth-child(n+3) { border-top: 1px solid var(--rule); }
}
@media (max-width: 480px) {
  .role-entry { grid-template-columns: 1fr; gap: 4px; }
  /* On small phones the spine becomes a band across the top */
  .off-duty { grid-template-columns: 1fr; }
  .off-duty-spine { justify-content: flex-start; padding: 14px 24px; }
  .off-duty-spine h2 { writing-mode: horizontal-tb; transform: none; font-size: 30px; }
}

/* =========================================================
   PRINT: press Ctrl+P / Cmd+P and the page becomes a clean
   paper CV (white background, no menu, no buttons).
   ========================================================= */
@media print {
  body { background: #fff; font-size: 11pt; }
  .site-header, .btn, .off-duty, footer .contact, .best-bit { display: none; }
  .cv-intro { padding-top: 0; }
  .role-entry, .pull-quote { break-inside: avoid; }
}

/* =========================================================
   "EMAIL ME" PANEL: slides down from the top of the page
   ========================================================= */
.contact-panel {
  display: grid;
  grid-template-rows: 0fr;          /* closed: zero height */
  transition: grid-template-rows .45s cubic-bezier(.3, 1, .4, 1);
}
.contact-panel.is-open,
.contact-panel:target { grid-template-rows: 1fr; }   /* open: full height */
.contact-panel-inner { overflow: hidden; }
.contact-panel.is-open .contact-panel-inner {
  max-height: calc(100vh - 90px);   /* on small screens it scrolls inside */
  overflow-y: auto;
}
.contact-box {
  border-top: 3px solid var(--ink);
  margin-top: 16px;
  padding: 28px 0 32px;
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 40px;
}
.contact-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(36px, 4.4vw, 52px);
  line-height: 1.02;
  margin-bottom: 10px;
}
.contact-title em { color: var(--poppy); }
.contact-lead { color: var(--ink-soft); font-size: 16px; max-width: 30ch; }

.contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.contact-form label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; color: var(--ink-soft); }
.contact-form .full { grid-column: 1 / -1; }
.contact-form input,
.contact-form textarea {
  font: 16px var(--sans);
  color: var(--ink);
  background: #FBF8F1;
  border: 1.5px solid var(--ink);
  border-radius: 10px;
  padding: 11px 13px;
  outline: none;
  transition: border-color .2s;
}
.contact-form input:focus,
.contact-form textarea:focus { border-color: var(--poppy); }
.contact-form textarea { min-height: 120px; resize: vertical; }
.contact-hp { position: absolute; left: -9999px; }

.contact-actions { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.contact-close {
  background: none;
  border: none;
  font: 15px var(--sans);
  color: var(--ink-soft);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.contact-close:hover { color: var(--poppy); }
.contact-form button[type="submit"]:disabled { opacity: .6; cursor: wait; }

.contact-status { grid-column: 1 / -1; font-size: 15px; }
.contact-status:empty { display: none; }
.contact-status.is-ok { font-family: var(--serif); font-style: italic; font-size: 28px; line-height: 1.2; }
.contact-status.is-error { color: var(--poppy); }
/* After sending: hide the fields, keep the thank-you and Close */
.contact-form.is-sent label,
.contact-form.is-sent button[type="submit"] { display: none; }
.contact-form.is-sent .contact-status { order: -1; }   /* thank-you first, Close below */

/* The header button stays dark while the panel is open */
.btn.btn-email.is-active { background: var(--ink); border-color: var(--ink); }

@media (max-width: 700px) {
  .contact-box { grid-template-columns: 1fr; gap: 16px; padding-top: 20px; }
  .contact-form { grid-template-columns: 1fr; }
}