/* v style.css */
:root { --font-mono: "IBM Plex Mono", monospace; }

code, pre, .mono { 
  font-family: var(--font-mono);
}


html {
scroll-behavior: smooth;
}

main {
  width: min(1280px, 100% - 160px); 
  margin: 0 auto;               
}


body {
background: #0f0f0f;
color: #eaeaea;
margin: 0;
padding: 0;
font-family: "IBM Plex Mono", monospace;
}

/* ================== GLOBAL ================== */
html {
  scroll-behavior: smooth;
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}

:root {
  --side: 80px;                                /* defaultní bordery */
  --container: min(1280px, 100% - calc(var(--side) * 2));
  --sep-color: rgba(255, 255, 255, 0.8);       /* barva linek */
}

/* menší bordery */
@media (max-width: 1000px) { :root { --side: 40px; } }
@media (max-width: 600px)  { :root { --side: 16px; } }

body {
  background: #0f0f0f;
  color: #eaeaea;
  margin: 0;
  font-family: "IBM Plex Mono", monospace;
}

main {
  width: var(--container);
  margin-inline: auto;

  /* vertikální zarovnání na střed */
  min-height: 100vh;
  display: grid;
  place-items: center;
}

/* =========================================================
   BACK BUTTON (fixed top-left in project pages)
========================================================= */
.back-btn {
  position: absolute;
  top: clamp(140px, 10vw, 160px);
  left: clamp(40px, 6vw, 80px);

  display: inline-flex;
  align-items: center;
  gap: 12px;

  text-decoration: none;
  font-size: clamp(14px, 1.1vw, 18px);
  letter-spacing: 1px;
  color: #f5f5f5;
  font-weight: 600;
  text-transform: none;
  font-family: "IBM Plex Mono", monospace;

  opacity: 0.9;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 1000;
}

.back-btn:hover {
  opacity: 1;
  transform: translateX(-4px);
}

.back-icon {
  width: clamp(18px, 2vw, 24px);
  height: auto;
  display: block;
  transition: transform 0.25s ease;
}

.back-btn:hover .back-icon {
  transform: translateX(-3px);
}

/* Responsive tweaks */
@media (max-width: 768px) {
  .back-btn {
    top: 200px;
    left: 24px;
    font-size: 13px;
    gap: 8px;
  }
  .back-icon {
    width: 18px;
  }
}

/* ================== HERO ================== */
.hero {
  display: grid;
  place-items: center;
  text-align: center;
  width: 100%;
  margin-top: 100px;
}

.hero-inner {
  display: grid;
  grid-template-rows: auto auto auto auto;
  align-items: center;
  justify-items: center;
  gap: clamp(28px, 6vw, 90px);
}

.hero-eyebrow {
  margin: 0;
  font-size: clamp(14px, 2vw, 22px);
  letter-spacing: 1px;
  color: #f5f5f5;
}

.hero-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  margin-bottom: 50px;
  margin-top: 50px;
}

.logo-full {
  width: clamp(220px, 70vw, 1009px);
  height: auto;
  display: block;
}

.hero-arrow .arrow-down {
  width: clamp(28px, 6vw, 48px);
  height: clamp(28px, 6vw, 48px);
  opacity: .7;
  animation: arrowFloat 2.8s ease-in-out infinite;
}

@keyframes arrowFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(8px); }
}

/* ========= META INFO ========= */

.meta-grid{
  margin-top: clamp(40px, 12vw, 150px);

  display: grid;
  grid-template-columns: 1fr auto 1fr;            
  grid-template-areas:
    "clients   sector   timing"
    "location  year     .";

  column-gap: clamp(32px, 8vw, 160px);           
  row-gap:    clamp(24px, 6vw, 80px);

  align-items: start;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
}


.meta{
  display: inline-grid;           
  grid-auto-rows: auto;
  row-gap: 6px;
  margin: 0;
  width: max-content;            
}

.meta[style*="clients"]  { grid-area: clients;  justify-self: start;  text-align: left;  }
.meta[style*="sector"]   { grid-area: sector;   justify-self: center; text-align: center;}
.meta[style*="timing"]   { grid-area: timing;   justify-self: end;    text-align: right; }
.meta[style*="location"] { grid-area: location; justify-self: start;  text-align: left;  }
.meta[style*="year"]     { grid-area: year;     justify-self: center; text-align: center;}

/* typografie */
.label{
  text-transform: none;
  letter-spacing: 1px;
  font-size: 11px;
  color: #f5f5f5;
  opacity: .9;
  margin: 0;

  justify-self: start;               /* pravý okraj labelu lícuje s pravým okrajem value */
  text-align: right;
}
.value{
  font-size: clamp(18px, 2vw, 22px);
  letter-spacing: 1px;
  color: #f5f5f5;
  font-weight: bold;
  margin: 0;

  white-space: nowrap;
}

/* ========= TABLET: 2 sloupce ========= */
@media (max-width: 900px){
  .meta-grid{
    grid-template-columns: 1fr 1fr;
    column-gap: clamp(16px, 5vw, 40px);
  }

  .meta[style*="clients"],
  .meta[style*="location"],
  .meta[style*="timing"],
  .meta[style*="sector"],
  .meta[style*="year"]{
    justify-self: center;
    text-align: center;
  }

  .label{ justify-self: end; text-align: right; }
}

/* ========= MOBIL: 1 sloupec + linky pod hodnotami ========= */
@media (max-width: 600px){
  .meta-grid{
    grid-template-columns: 1fr;
    row-gap: 14px;
  }
  .meta{
    justify-self: center;
    text-align: center;
    width: max-content;
  }

  .value{
    white-space: normal;           /* na mobilu dovolíme zalomení, ať to nepřetéče */
    position: relative;
    padding-bottom: 20px;    
      text-align: center;      /* mezera pro linku */
  }
  .value::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;                   /* od kraje ke kraji bloku */
    height: 1px;
    background: rgba(255,255,255,.8);
  }

  .label{
    justify-self: end;
    text-align: right;
  }
}



/* ================== SHOWCASE ================== */
.fnv-showcase {
  width: var(--container);
  margin-inline: auto;
  margin-block: clamp(48px, 10vw, 200px);
}

.fnv-mockup {
  display: block;
  width: 100%;
  height: auto;
  margin-block: clamp(48px, 12vw, 150px);
}

.fnv-info {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 3vw, 24px) clamp(24px, 6vw, 110px);
  align-items: start;
  box-sizing: border-box;
}

.fnv-info .eyebrow {
  grid-column: 1 / -1;
  margin: 0;
  font-size: clamp(13px, 1.4vw, 22px);
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #f5f5f5;
}

.fnv-info .copy {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(14px, 3vw, 24px) clamp(24px, 5vw, 48px);
  margin: 0;
  color: #f5f5f5;
  line-height: 1.35;
  font-size: clamp(14px, 1.2vw, 16px);
  text-align: justify;
}

.fnv-info .highlight-text {
  color: #c7c7c7;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 0;
}

.fnv-info .highlight-color { color: #f5f5f5; }

.fnv-info .second-text {
  color: #c7c7c7;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: .5px;
  font-weight: 800;
  margin: 0;
}

@media (max-width: 900px) {
  .fnv-info { grid-template-columns: 1fr; }
  .fnv-info .copy { grid-template-columns: 1fr; }
  .hero-eyebrow { margin-top: 50px; }
  .hero-logo { margin-top: 50px;}
} 


/* ================== BUTTON ================== */
.fnv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 12px 22px;
  border-radius: 999px;
  background: #f5f5f5;
  font-family: "IBM Plex Mono", monospace;

  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;

  width: auto;
  max-width: max-content;
  margin: 0;
}

.fnv-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 46px rgba(0, 0, 0, .28);
  background: #fff;
}

.fnv-btn:active { transform: translateY(0); }

.fnv-btn-ico {
  width: 40px;
  height: auto;
  margin: 0;
  flex-shrink: 0;
}

.fnv-btn-text {
  font-size: 22px;
  color: #2a2a2a;
  font-weight: bold;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin: 0;
  white-space: nowrap;
}




/* ===== FORCE MOBILE (≤600px) – text + button menší ===== */
@media (max-width: 600px) {
  /* layout do 1 sloupce */
  .fnv-showcase .fnv-info {
    grid-template-columns: 1fr !important;
    row-gap: 20px !important;
    text-align: left !important;
    justify-items: start !important;
  }

  /* menší eyebrow */
  .fnv-showcase .fnv-info .eyebrow {
    font-size: 16px !important;
    letter-spacing: 0.5px !important;
  }

  /* menší text + větší čitelnost */
  .fnv-showcase .fnv-info .copy {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    font-size: 13.5px !important;
    line-height: 1.35 !important;
    text-align: left !important;
  }

  .fnv-showcase .fnv-info .second-text {
    font-size: 14px !important;
    letter-spacing: 0.4px !important;
  }

  /* zmenšený button */
  .fnv-showcase .fnv-btn {
    padding: 8px 16px !important;
    gap: 6px !important;
    border-radius: 999px !important;
  }
  .fnv-showcase .fnv-btn-ico {
    width: 22px !important;
    height: auto !important;
  }
  .fnv-showcase .fnv-btn-text {
    font-size: 16px !important;
    letter-spacing: 1px !important;
  }
}

/* ================== GALERIE ================== */
.grid {
  width: var(--container);
  margin-inline: auto;

  display: grid;
  grid-template-columns: repeat(3, max-content);
  justify-content: space-between;

  column-gap: clamp(20px, 4vw, 40px);
  margin-block: clamp(40px, 8vw, 80px);
}

.col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: clamp(28px, 6vw, 80px);
}

.grid img {
  display: block;
  height: auto;
  max-width: 100%;
}

.img1 { width: clamp(140px, 16vw, 200px); }
.img2 { width: clamp(200px, 18vw, 236px); }
.img3 { width: clamp(200px, 18vw, 235px); }
.img4 { width: clamp(200px, 18vw, 236px); }
.img5 { width: clamp(200px, 18vw, 236px); }
.img6 { width: clamp(200px, 18vw, 236px); }

@media (max-width: 1024px) {
  .grid {
    grid-template-columns: repeat(2, max-content);
    justify-content: center;
    gap: clamp(20px, 5vw, 48px);
  }
}

@media (max-width: 600px) {
  .grid { grid-template-columns: 1fr; justify-items: center; }
  .col { align-items: center; }
}


/* ================== SCROLL REVEAL ================== */
:root {
  --dur: .72s;
  --ease: cubic-bezier(.22,.66,.2,1);
  --d: 0ms;
}

.js [data-anim] {
  opacity: 0;
  filter: blur(2px);
  transition:
    transform var(--dur) var(--ease) var(--d),
    opacity  var(--dur) var(--ease) var(--d),
    filter   var(--dur) var(--ease) var(--d);
  will-change: transform, opacity, filter;
}

.js [data-anim].in-view {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

.js [data-anim="fade-up"]    { transform: translate3d(0,16px,0) scale(.98); }
.js [data-anim="zoom-in"]    { transform: scale(.96); }
.js [data-anim="slide-left"] { transform: translate3d(-24px,0,0); }
.js [data-anim="slide-right"]{ transform: translate3d(24px,0,0); }

@media (prefers-reduced-motion: reduce) {
  .js [data-anim] {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  .hero-arrow .arrow-down { animation: none !important; }
}


/* ========= SHOWCASE ========= */
.fnv-showcase {
margin: 0;
padding: 0;
box-sizing: border-box;
margin-bottom: 200px;
margin-top: 100px;
}

.fnv-mockup {
display: block;
width: 100%;
height: auto;
margin: 0;
margin-top: 160px;
margin-bottom: 150px;
}

.fnv-info {
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 110px;
row-gap: 24px;
align-items: start;
box-sizing: border-box;
}

.fnv-info .eyebrow {
grid-column: 1 / -1;
margin: 0;
font-size: 22px;
font-weight: bold;
letter-spacing: 0.5px;
text-transform: none;
color: #F5F5F5;
}

.fnv-info .copy {
grid-column: 1 / -1;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px 48px;
margin: 0;
color: #F5F5F5;
line-height: 1.1;
font-size: 15.5px;
text-align: justify;
}

.fnv-info .highlight-text {
color: #C7C7C7;
font-weight: bold;
text-transform: none;
letter-spacing: 1px;
margin: 0;
}

.fnv-info .highlight-color {
color: #F5F5F5;
}

.fnv-info .second-text {
color: #C7C7C7;
font-size: 16px;
text-transform: none;
letter-spacing: 0.5px;
font-weight: 800;
margin: 0;
}

/* ========= BUTTON ========= */
.fnv-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;

padding: 12px 22px;
border-radius: 999px;
background: #F5F5F5;

text-decoration: none;
transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;

width: auto;
max-width: max-content;
margin: 0;
}

.fnv-btn:hover {
transform: translateY(-2px);
box-shadow: 0 16px 46px rgba(0, 0, 0, .28);
background: #fff;
}

.fnv-btn:active {
transform: translateY(0);
}

.fnv-btn-ico {
width: 40px;
height: auto;
margin: 0;
flex-shrink: 0;
}

.fnv-btn-text {
font-size: 22px;
color: #2A2A2A;
font-weight: bold;
letter-spacing: 1.5px;
text-transform: none;
margin: 0;
white-space: nowrap;
}




.grid{
  /* 1440 - 2×80 = 1280 */
  max-width: 1280px;
  width: 100%;
  padding: 0 5vw;           /* na větších monitorech se „bordely“ zvětší */
  box-sizing: border-box;

  display: grid;
  grid-template-columns: repeat(3, max-content); /* 3 sloupce podle obsahu */
  justify-content: space-between;                /* rovnoměrně rozprostřít */
  column-gap: 40px;
  margin: 80px 0;
}

.col{
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* levé hrany nahoře i dole přesně sedí */
  row-gap: 80px;           /* vertikální mezera mezi horním a dolním obrázkem */
}


    .img1 { width: 200px; }
    .img2 { width: 236px; }
    .img3 { width: 235.5px; }
    .img4 { width: 235.8px; }
    .img5 { width: 236.6px; }
    .img6 { width: 235.8px; }

.grid img{
  display:block;
  height:auto;
  max-width:100%;
}








/* ===== Scroll Reveal – CSS ===== */
:root{
  --dur:.72s;
  --ease:cubic-bezier(.22,.66,.2,1);
  --d:0ms; /* per-item delay, doplňuje JS */
}

/* Skrývej jen pokud běží JS (html.js) */
.js [data-anim]{
  opacity:0;
  filter:blur(2px);
  transition:
    transform var(--dur) var(--ease) var(--d),
    opacity  var(--dur) var(--ease) var(--d),
    filter   var(--dur) var(--ease) var(--d);
  will-change:transform,opacity,filter;
}

/* Cílový stav */
.js [data-anim].in-view{
  opacity:1;
  transform:none;
  filter:blur(0);
}

/* Výchozí offsety (typ animace) */
.js [data-anim="fade-up"]    { transform:translate3d(0,16px,0) scale(.98); }
.js [data-anim="zoom-in"]    { transform:scale(.96); }
.js [data-anim="slide-left"] { transform:translate3d(-24px,0,0); }
.js [data-anim="slide-right"]{ transform:translate3d(24px,0,0); }

/* Respektuj prefer-reduced-motion */
@media (prefers-reduced-motion: reduce){
  .js [data-anim]{
    transition:none !important;
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
  }
}
















/* ===== Responsivita – DROP-IN (přidej na konec CSS) ===== */
:root{
  --container: min(1280px, 100% - clamp(24px, 8vw, 160px)); /* 1440px => 1280 + 2×80px okraje */
}

@media (max-width: 900px){
  .meta-grid{
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "clients  sector"
      "timing   location"
      "year     year";
    column-gap: clamp(16px, 4vw, 32px);
  }
}
@media (max-width: 520px){
  .meta-grid{
    grid-template-columns: 1fr;
    grid-template-areas:
      "clients"
      "sector"
      "timing"
      "location"
      "year";
    row-gap: 14px;
  }
}


.fnv-info {
  display: flex;
  justify-content: center;  /* horizontálně */
  align-items: center;      /* vertikálně */
  text-align: center;
  width: 100%;
  height: 100%;             /* jen pokud chceš uprostřed celé sekce */
}


@media (max-width: 900px){
  .fnv-info{ grid-template-columns: 1fr; }
  .fnv-info .copy{ grid-template-columns: 1fr; }
}

/* 6 obrázků: vždy perfektně zarovnané 3→2→1 */
.grid {
  max-width: 1280px;
  width: 100%;
  padding-inline: clamp(16px, 5vw, 80px);

  display: grid;
  grid-template-columns: repeat(3, max-content);
  justify-content: space-between;

  column-gap: clamp(20px, 4vw, 40px);
  margin-block: clamp(40px, 8vw, 80px);
}

.col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  row-gap: clamp(28px, 6vw, 80px); /* mezery uvnitř jednoho sloupce */
}

.grid img {
  height: auto;
  display: block;
  margin: 0;
}

/* ===== Tablet: 2 sloupce ===== */
@media (max-width: 1024px) {
  .grid {
    grid-template-columns: repeat(2, max-content);
    justify-content: center;
    gap: clamp(20px, 5vw, 48px);
  }
}

/* ===== Mobil: 1 sloupec ===== */
@media (max-width: 600px) {
  .grid {
    grid-template-columns: 1fr;
    justify-items: center;
    row-gap: 180px; /* ➜ mezery mezi celými .col bloky = mezi všemi obrázky */
  }

  .col {
    align-items: center;
    row-gap: 100px; /* ➜ mezery mezi obrázky uvnitř jednoho .col */
  }
}


/* === BUTTON === */
.cta-item-rk{
  position: relative;
  display: inline-block; /* drží button a underlaye pohromadě */
}

.btn-main-rk{
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 76px;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 46px;
  padding-right: 52px;
  border-radius: 20px;
  background: #f5f5f5;
  color: #000000;
  font-family: "Fibel Nord", sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1px;
  text-decoration: none;
  transition: all 0.3s ease;
  overflow: visible;
}

.btn-text-rk{
  position: relative;
  z-index: 2;
}

.btn-circle-rk{
  position: absolute;
  right: -60px;
  width: 81px;
  height: 81px;
  border-radius: 20px;
  border-width: 3px;
  border-style: solid;
  border-color: #0f0f0f;
  background-color: #f5f5f5;
  background-image: url("img/Arrow_45.svg");
  background-position: center;
  background-size: 50px;
  background-repeat: no-repeat;
  transition: all 0.3s ease;
  z-index: 2;
}

.btn-main-rk:hover{
  background: #121212;
  color: #ffffff;
}

.btn-main-rk:hover .btn-circle-rk{
  background-color: #121212;
  background-image: url("img/Arrow_up_white.svg");
  background-position: center;
  background-size: 50px;
  background-repeat: no-repeat;
  border-width: 1px;
  border-style: solid;
  border-color: #f5f5f5;
}