/*
Theme Name: Maksymilian CV
Theme URI: http://localhost/wordpress
Author: Maksymilian Wieczorek
Description: Jednoekranowy motyw CV / portfolio dla technika dostepu linowego z interaktywna galeria.
Version: 1.3.7
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: maksymilian-cv
*/

:root {
  --navy: #0E1B2A;
  --navy-deep: #0a121c;
  --paper: #F5F2EC;
  --accent: #E8602C;
  --ink: #16202B;
  --ink-soft: #2C3A48;
  --muted: #5A6776;
  --side-text: #E7EDF3;
  --side-soft: #CBD6E0;
  --line-warm: #DAD3C7;
}

* { box-sizing: border-box; }

/* Stop Google Translate's banner from shifting the layout (caused bottom cut-off) */
.goog-te-banner-frame.skiptranslate { display: none !important; }
body { top: 0 !important; }
.goog-tooltip, #goog-gt-tt { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--navy-deep);
  overflow-x: clip;
}

.mcv-stage {
  position: relative;
  background: var(--navy-deep);
  overflow: hidden;
}

.mcv-frame {
  width: 100%;
  min-height: 100vh;
  display: flex;
  background: var(--paper);
  font-family: 'Barlow', sans-serif;
  color: var(--ink);
  position: fixed;
  overflow: hidden;
}

.mcv-aside {
  width: 446px;
  flex: none;
  background: var(--navy);
  color: var(--side-text);
  display: flex;
  flex-direction: column;
}

.mcv-photo {
  position: relative;
  height: 310px;
  flex: none;
  overflow: hidden;
}

.mcv-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
  display: block;
}

.mcv-photo-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(14, 27, 42, 0) 50%, rgba(14, 27, 42, 0.92) 100%);
}

.mcv-photo-id {
  position: absolute;
  left: 38px;
  bottom: 24px;
  right: 38px;
}

.mcv-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 47px;
  line-height: 0.94;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.mcv-role {
  margin-top: 10px;
  display: inline-block;
  background: var(--accent);
  color: #fff;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  padding: 5px 12px;
}

.mcv-aside-body {
  padding: 18px 38px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
  min-height: 0;
}

.mcv-contact {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.mcv-contact-row {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 13.5px;
  color: var(--side-soft);
}

.mcv-contact-label {
  color: var(--accent);
  font-weight: 600;
  width: 58px;
  flex: none;
  font-family: 'Barlow Condensed', sans-serif;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-size: 12.5px;
}

.mcv-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.12);
}

.mcv-block {
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.mcv-side-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #fff;
}

.mcv-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mcv-chip {
  font-size: 12px;
  font-weight: 500;
  color: var(--side-soft);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 4px 9px;
  line-height: 1.1;
}

.mcv-two-col {
  display: flex;
  gap: 26px;
}

.mcv-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.mcv-fact {
  font-size: 13px;
  color: var(--side-soft);
}

.mcv-fact strong {
  color: #fff;
  font-weight: 600;
}

.mcv-main {
  flex: 1;
  min-width: 0;
  padding: 38px 44px 34px;
  display: flex;
  flex-direction: column;
}

.mcv-summary {
  flex: none;
  padding-bottom: 20px;
  border-bottom: 2px solid var(--ink);
}

.mcv-summary-head {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px;
}

.mcv-eyebrow {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--accent);
}

.mcv-summary-text {
  font-size: 16.5px;
  line-height: 1.45;
  color: var(--ink-soft);
  max-width: 820px;
}

.mcv-cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: none;
  cursor: pointer;
  background: var(--accent);
  color: #fff;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 15.5px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 11px 19px;
  border-radius: 999px;
  animation: mcvPulse 1.9s ease-out infinite;
}

.mcv-cta-count {
  background: rgba(255, 255, 255, 0.28);
  border-radius: 999px;
  padding: 1px 9px;
  font-size: 13.5px;
  font-weight: 700;
}

.mcv-hint {
  position: absolute;
  top: calc(100% + 13px);
  right: 0;
  width: 248px;
  background: var(--ink);
  color: #fff;
  padding: 13px 15px;
  border-radius: 11px;
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.38);
  z-index: 20;
  display: none;
  animation: mcvHintBob 1.6s ease-in-out infinite;
}

.mcv-hint.is-visible {
  display: block;
}

.mcv-hint-arrow {
  position: absolute;
  top: -7px;
  right: 40px;
  width: 14px;
  height: 14px;
  background: var(--ink);
  transform: rotate(45deg);
}

.mcv-hint p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.45;
}

.mcv-hint strong { color: var(--accent); }

.mcv-hint button {
  margin-top: 9px;
  border: none;
  background: transparent;
  color: #8FA3B5;
  font-size: 12px;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}

.mcv-experience {
  flex: none;
  min-height: 0;
  padding-top: 18px;
  display: flex;
  flex-direction: column;
}

.mcv-section-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 14px;
}

.mcv-exp-grid {
  flex: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 38px;
  align-content: start;
}

.mcv-exp-col {
  display: flex;
  flex-direction: column;
}

.mcv-job {
  position: relative;
  padding: 0 0 13px 18px;
  border-left: 2px solid var(--line-warm);
  margin-bottom: 13px;
}

.mcv-job-dot {
  position: absolute;
  left: -6px;
  top: 4px;
  width: 10px;
  height: 10px;
  background: var(--accent);
  border-radius: 50%;
}

.mcv-job-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}

.mcv-job-role {
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ink);
  line-height: 1.15;
}

.mcv-job-date {
  font-size: 11.5px;
  font-weight: 600;
  color: #8A7E6B;
  white-space: nowrap;
  flex: none;
  font-family: 'Barlow Condensed', sans-serif;
  letter-spacing: 0.5px;
}

.mcv-job-site {
  font-size: 12.5px;
  color: var(--accent);
  font-weight: 600;
  margin-top: 1px;
}

.mcv-job-desc {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
  line-height: 1.3;
}

.mcv-contact-note {
  margin-top: 4px;
  font-size: 12.5px;
  font-style: italic;
  color: var(--side-soft);
}

.mcv-linkedin-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  margin-top: 12px;
  background: var(--accent);
  color: #fff;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 6px 16px;
  border-radius: 999px;
  transition: background 0.15s ease;
}

.mcv-linkedin-btn:hover {
  background: #cf5324;
}

.mcv-footer-cta {
  flex: none;
  padding-top: 14px;
  border-top: 1px solid var(--line-warm);
  display: flex;
  justify-content: center;
}

/* While generating the PDF, hide interactive controls without changing layout. */
.mcv-capturing .mcv-cta,
.mcv-capturing .mcv-photo-download,
.mcv-capturing .mcv-hint {
  visibility: hidden !important;
  animation: none !important;
}

.mcv-education {
  flex: none;
  padding-top: 14px;
  border-top: 1px solid var(--line-warm);
  display: flex;
  align-items: baseline;
  gap: 16px;
}

.mcv-education-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--ink);
}

.mcv-education-text {
  font-size: 13.5px;
  color: var(--ink-soft);
}

.mcv-gallery {
  position: absolute;
  inset: 0;
  background: var(--navy);
  display: none;
  flex-direction: column;
  z-index: 5;
}

.mcv-gallery.is-open {
  display: flex;
  animation: mcvOverlayIn 0.25s ease;
}

.mcv-gallery-top {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 34px 16px;
}

.mcv-stagebox {
  flex: 1;
  min-height: 0;
  position: relative;
  margin: 0 34px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--navy-deep);
}

.mcv-hero {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  animation: mcvKen 9s ease-out forwards;
}

.mcv-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 60px 34px 26px;
  background: linear-gradient(180deg, rgba(10, 18, 28, 0) 0%, rgba(10, 18, 28, 0.88) 100%);
  pointer-events: none;
}

.mcv-caption-index {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 2.5px;
  color: var(--accent);
  margin-bottom: 5px;
}

.mcv-caption-text {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 600;
  font-size: 27px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #fff;
  line-height: 1.05;
}

.mcv-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  background: rgba(10, 18, 28, 0.4);
  color: #fff;
  cursor: pointer;
  font-size: 26px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 3px;
  transition: background .18s ease, transform .18s ease, border-color .18s ease;
}

.mcv-arrow:hover {
  background: var(--accent);
  border-color: var(--accent);
  transform: translateY(-50%) scale(1.08);
}

.mcv-arrow-prev { left: 18px; }
.mcv-arrow-next { right: 18px; }

.mcv-strip {
  flex: none;
  display: flex;
  justify-content: safe center;
  gap: 12px;
  padding: 18px 34px 22px;
  overflow-x: auto;
  scrollbar-width: none;
}

.mcv-thumb {
  flex: none;
  width: 104px;
  height: 68px;
  padding: 0;
  border: none;
  cursor: pointer;
  border-radius: 4px;
  overflow: hidden;
  background: var(--navy-deep);
  outline: 3px solid transparent;
  outline-offset: -3px;
  opacity: 0.5;
  transition: transform .2s ease, opacity .2s ease, outline-color .2s ease;
}

.mcv-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mcv-thumb:hover {
  transform: translateY(-4px);
  opacity: 1;
}

.mcv-thumb.is-active {
  outline-color: var(--accent);
  opacity: 1;
}

.mcv-strip::-webkit-scrollbar { display: none; }

@keyframes mcvKen { from { transform: scale(1); } to { transform: scale(1.08); } }
@keyframes mcvOverlayIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes mcvHintBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
@keyframes mcvPulse {
  0%   { box-shadow: 0 6px 18px rgba(232, 96, 44, 0.35), 0 0 0 0 rgba(232, 96, 44, 0.5); }
  70%  { box-shadow: 0 6px 18px rgba(232, 96, 44, 0.35), 0 0 0 14px rgba(232, 96, 44, 0); }
  100% { box-shadow: 0 6px 18px rgba(232, 96, 44, 0.35), 0 0 0 0 rgba(232, 96, 44, 0); }
}

.mcv-cta-mobile {
  display: none;
}

/* Hide the "View gallery" desktop launcher button. */
.mcv-gallery-launch {
  display: none !important;
}

.mcv-photo-download {
  display: none;
}

@media (max-width: 1024px) {
  html, body {
    background: var(--paper);
  }

  .mcv-stage {
    position: static;
    display: block;
    min-height: 0;
    overflow: visible;
  }

  .mcv-frame {
    width: 100%;
    min-height: 0;
    height: auto;
    position: relative;
    transform: none !important;
    box-shadow: none;
    flex-direction: column;
    overflow: visible;
  }

  .mcv-aside {
    width: 100%;
  }

  .mcv-photo {
    height: 62vw;
    max-height: 440px;
  }

  .mcv-aside-body {
    gap: 18px;
    padding: 26px 17px 30px;
  }

  .mcv-aside-body .mcv-block {
    order: 1;
  }

  .mcv-aside-body .mcv-contact {
    order: 2;
  }

  .mcv-aside-body .mcv-two-col {
    order: 3;
  }

  .mcv-aside-body .mcv-divider {
    display: none;
  }

  .mcv-chips {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: auto;
    grid-auto-columns: max-content;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .mcv-chip {
    white-space: nowrap;
  }

  .mcv-chips::-webkit-scrollbar {
    display: none;
  }

  .mcv-main {
    padding: 26px 22px 30px;
  }

  .mcv-experience {
    flex: none;
  }

  .mcv-exp-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .mcv-main {
    overflow: hidden;
  }

  .mcv-gallery-launch {
    display: none;
  }

  .mcv-cta-mobile {
    display: inline-flex;
    align-self: center;
    margin-top: 22px;
  }

  .mcv-photo-download {
    display: inline-flex;
    position: absolute;
    top: 60px;
    right: 10px;
    z-index: 4;
    padding: 9px 15px;
    font-size: 13px;
    letter-spacing: 1px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.38);
  }

  /* Top-of-photo button replaces the footer one on mobile */
  .mcv-footer-cta {
    display: none;
  }

  /* Keep everything inside the viewport on mobile (no horizontal cut-off) */
  html, body { overflow-x: hidden; }

  .mcv-exp-col,
  .mcv-job,
  .mcv-job-head,
  .mcv-job-desc {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .mcv-gallery {
    position: fixed;
  }

  .mcv-gallery-top {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 16px 18px 12px;
  }

  .mcv-gallery-top .mcv-cta {
    order: -1;
    justify-content: center;
  }

  .mcv-stagebox {
    margin: 0 14px;
  }

  .mcv-strip {
    padding: 14px 18px 18px;
  }
}

@media (max-width: 560px) {
  .mcv-name {
    font-size: 34px;
  }

  .mcv-photo-id {
    left: 22px;
    right: 22px;
  }

  .mcv-main {
    padding: 22px 16px 26px;
  }

  .mcv-summary-text {
    font-size: 15px;
  }

  .mcv-two-col {
    flex-direction: column;
    gap: 14px;
  }

  .mcv-caption-text {
    font-size: 20px;
  }

  .mcv-arrow {
    width: 44px;
    height: 44px;
    font-size: 22px;
  }
}

@media print {
  @page { size: landscape; margin: 0; }
  html, body { background: #fff; }
  .mcv-stage {
    position: static;
    display: block;
    height: 620px;
    overflow: hidden;
  }
  .mcv-frame {
    transform: scale(0.715) !important;
    transform-origin: top left;
    box-shadow: none;
  }
  .mcv-gallery-launch,
  .mcv-footer-cta,
  .mcv-photo-download,
  .mcv-hint,
  .mcv-cta-mobile,
  .mcv-gallery {
    display: none !important;
  }
}

/* === Left fixed, right scrollable (desktop only, >1024px) ===
   Appended override — existing rules above stay untouched.
   The whole window scrolls; the left sidebar is fully fixed so it never
   moves while the right column scrolls past it. If the sidebar ever gets
   more content than fits on screen, it scrolls inside itself. */
@media (min-width: 1025px) {
  .mcv-stage {
    overflow: visible;
  }

  .mcv-frame {
    position: relative;
    overflow: visible;
    align-items: flex-start;
    /* Navy fills the left 446px strip for the full page height,
       so the sidebar colour reaches the bottom even past the fixed aside. */
    background: linear-gradient(to right, var(--navy) 446px, var(--paper) 446px);
  }

  .mcv-aside {
    position: fixed;
    top: 0;
    left: 0;
    width: 446px;
    height: 100vh;
    overflow-y: auto;
  }

  .mcv-main {
    margin-left: 446px;
  }
}