@import url('../fonts/fonts.css');

/* ============ Tokens ============ */
:root{
  --ink:      #0F1B24;
  --ink-2:    #16323D;
  --blue:     #5DA6F2;
  --blue-deep:#2C6CA6;
  --sand:     #ECE5D6;
  --paper:    #FAF8F3;
  --gold:     #C99A2E;
  --line:     rgba(15,27,36,.12);
  --line-light: rgba(250,248,243,.22);

  --font-display: 'Big Shoulders', 'Arial Narrow', sans-serif;
  --font-body: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Consolas, monospace;

  --wrap: 1180px;
  --radius: 2px;
  --ease: cubic-bezier(.22,.68,.32,1);
  --header-h: 96px;
}

/* ============ Reset ============ */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: clip; }
body{
  margin:0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img{ max-width:100%; height:auto; display:block; }
a{ color: inherit; text-decoration: none; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,p,dl,dd{ margin:0; }
button{ font: inherit; color: inherit; background:none; border:0; cursor:pointer; }
svg{ display:block; }

.sr-only{
  position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}
.skip-link{
  position:absolute; left:8px; top:-48px; z-index:200;
  background:var(--ink); color:var(--paper); padding:.7em 1.1em;
  transition: top .2s var(--ease);
  font-family: var(--font-mono); font-size:.85rem;
}
.skip-link:focus{ top:8px; }

:focus-visible{ outline: 2px solid var(--blue); outline-offset: 3px; }

.wrap{
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: 24px;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============ Type roles ============ */
.eyebrow{
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--blue-deep);
  margin-bottom: .9em;
}
.eyebrow-light{ color: rgba(250,248,243,.85); }
.eyebrow-gold{ color: var(--gold); }

.section-title{
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .01em;
  line-height: .96;
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  max-width: 16ch;
  margin-bottom: .5em;
}
.section-lead{
  font-size: 1.08rem;
  color: rgba(15,27,36,.72);
  max-width: 58ch;
  margin-bottom: 2.6rem;
}

/* ============ Buttons ============ */
.btn{
  display:inline-flex; align-items:center; gap:.55em;
  font-family: var(--font-mono);
  font-size: .92rem;
  letter-spacing:.02em;
  padding: .95em 1.5em;
  border-radius: var(--radius);
  border: 1px solid transparent;
  white-space: nowrap;
  transition: transform .18s var(--ease), background-color .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.btn .icon{ width:1.05em; height:1.05em; fill: currentColor; }
.btn-primary{
  background: var(--blue);
  color: var(--ink);
  font-weight: 600;
}
.btn-primary:hover{ background:#7FBAF6; transform: translateY(-2px); }
.btn-ghost{
  border-color: rgba(250,248,243,.55);
  color: var(--paper);
}
.btn-ghost:hover{ border-color: var(--paper); background: rgba(250,248,243,.08); transform: translateY(-2px); }
.btn-call{
  border-color: rgba(250,248,243,.55);
  color: inherit;
  padding: .65em 1.1em;
  font-size: .88rem;
}
.site-header.is-scrolled .btn-call{ border-color: var(--line); }
.btn-call:hover{ border-color: var(--blue); color: var(--blue); }

/* ============ Seam signature divider ============ */
.seam{
  --seam-color: var(--ink);
  height: 14px;
  margin-top: 1.5rem;
  background-image:
    repeating-linear-gradient(115deg, var(--seam-color) 0 2px, transparent 2px 16px);
  opacity: .16;
  position: relative;
}
.seam::before, .seam::after{
  content:"";
  position:absolute; left:0; right:0; height:1px;
  background: var(--seam-color);
}
.seam::before{ top:0; }
.seam::after{ bottom:0; }
.seam-light{ --seam-color: var(--paper); opacity:.5; }

/* ============ Header ============ */
.site-header{
  position: sticky; top:0; z-index: 100;
  background: transparent;
  color: var(--paper);
  transition: background-color .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
  border-bottom: 1px solid transparent;
  isolation: isolate;
}
.site-header::before{
  content:"";
  position:absolute; inset:0; z-index:-1;
  background: linear-gradient(180deg, rgba(15,27,36,.62) 0%, rgba(15,27,36,.28) 70%, rgba(15,27,36,0) 100%);
  transition: opacity .25s var(--ease);
}
.site-header.is-scrolled{
  background: var(--paper);
  border-bottom-color: var(--line);
  color: var(--ink);
}
.site-header.is-scrolled::before{ opacity:0; }
.site-header::after{
  content:"";
  position:absolute; left:0; bottom:-1px; height:2px; width:0;
  background: linear-gradient(90deg, var(--blue), var(--gold));
  transition: width .5s var(--ease);
}
.site-header.is-scrolled::after{ width:100%; }
.header-row{
  display:flex; align-items:center; justify-content:space-between;
  gap: 1.5rem;
  padding-block: 16px;
}
.brand{ position:relative; display:inline-flex; }
.brand-logo{ height: 64px; width:auto; }
.brand-logo-color{ display:none; }
.site-header.is-scrolled .brand-logo-white{ display:none; }
.site-header.is-scrolled .brand-logo-color{ display:block; }

.main-nav{ flex:1; display:flex; justify-content:center; }
.nav-list{ display:flex; gap: 2.1rem; }
.nav-list a{
  font-family: var(--font-mono);
  font-size: .86rem;
  letter-spacing: .03em;
  text-transform: uppercase;
  padding: .3em 0;
  position: relative;
}
.nav-list a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px;
  background: var(--blue);
  transition: right .22s var(--ease);
}
.nav-list a:hover::after{ right:0; }

.header-actions{ display:flex; align-items:center; gap:.9rem; }

.nav-toggle{
  display:none; flex-direction:column; gap:5px; padding:8px;
}
.nav-toggle span{ width:22px; height:2px; background: currentColor; }

/* ============ Hero ============ */
.hero{
  position: relative;
  min-height: 92vh;
  display:flex; flex-direction:column; justify-content:flex-end;
  color: var(--paper);
  overflow: hidden;
  margin-top: calc(-1 * var(--header-h));
  padding-top: var(--header-h);
}
.hero-media{ position:absolute; inset:0; z-index:-2; }
.hero-media img{ width:100%; height:100%; object-fit: cover; object-position: center 60%; }
.hero-scrim{
  position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(0deg, rgba(15,27,36,.92) 0%, rgba(15,27,36,.55) 42%, rgba(15,27,36,.18) 68%, rgba(15,27,36,.35) 100%);
}
.hero-content{ padding-block: 7rem 4.5rem; max-width: 900px; }
.hero-title{
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(2.6rem, 7vw, 5.4rem);
  line-height: .94;
  letter-spacing: .005em;
  margin-bottom: .55em;
  text-wrap: balance;
}
.hero-lead{
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  max-width: 46ch;
  color: rgba(250,248,243,.86);
  margin-bottom: 2.1rem;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap: 1rem; }

/* ============ Sections generic ============ */
.section{ padding-block: 5.5rem; position:relative; }
.section:has(> .seam){ padding-bottom: 0; }
.section-services{ background: var(--paper); }
.section-gallery{ background: var(--sand); }
.section-firma{ background: var(--paper); }
.section-dotace{ background: var(--ink-2); color: var(--paper); }
.section-kontakt{ background: var(--paper); }

/* ============ Service cards ============ */
.cards{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
  background: var(--line);
  border: 1px solid var(--line);
}
.card{
  background: var(--paper);
  padding: 2.4rem 2rem;
}
.card-icon{ width:52px; height:52px; color: var(--blue-deep); margin-bottom: 1.4rem; }
.card-icon .seam-stroke{ stroke: var(--gold); stroke-width:1.6; opacity:.8; }
.card h3{
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.35rem;
  letter-spacing: .01em;
  margin-bottom: .5em;
}
.card p{ color: rgba(15,27,36,.7); font-size: .98rem; }

/* ============ Gallery ============ */
.filters{ display:flex; gap:.6rem; margin-bottom: 2.2rem; flex-wrap:wrap; }
.filter-btn{
  font-family: var(--font-mono); font-size:.82rem; letter-spacing:.03em; text-transform:uppercase;
  padding:.6em 1.1em; border:1px solid var(--line); border-radius: var(--radius);
  color: rgba(15,27,36,.65);
  transition: all .18s var(--ease);
}
.filter-btn:hover{ border-color: var(--blue-deep); color: var(--ink); }
.filter-btn.is-active{ background: var(--ink); border-color: var(--ink); color: var(--paper); }

.gallery-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem;
}
.gallery-item{
  position: relative; display:block; overflow:hidden; text-align:left;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--line);
}
.gallery-item img{
  width:100%; height:100%; object-fit:cover;
  transition: transform .5s var(--ease);
}
.gallery-item:hover img{ transform: scale(1.06); }
.gallery-item.is-hidden{ display:none; }
.gallery-caption{
  position:absolute; left:0; right:0; bottom:0;
  padding: .8em 1em 1em;
  font-family: var(--font-mono); font-size:.78rem; letter-spacing:.01em;
  color: var(--paper);
  background: linear-gradient(0deg, rgba(15,27,36,.82), rgba(15,27,36,0));
  transform: translateY(8px);
  opacity:0;
  transition: all .25s var(--ease);
}
.gallery-item:hover .gallery-caption, .gallery-item:focus-visible .gallery-caption{ opacity:1; transform:none; }

/* ============ Firma / spec sheet ============ */
.firma-grid{
  display:grid; grid-template-columns: 1.1fr 1fr; gap: 3.5rem; align-items:start;
}
.spec-sheet{
  border: 1px solid var(--line);
  background: var(--sand);
  padding: 1.8rem 2rem;
}
.spec-title{
  font-family: var(--font-mono); font-size:.78rem; letter-spacing:.12em; text-transform:uppercase;
  color: var(--blue-deep); margin-bottom: 1.1rem;
}
.spec-list{ display:flex; flex-direction:column; gap:.75rem; }
.spec-row{
  display:grid; grid-template-columns: 11ch 1fr; gap: 1rem;
  font-family: var(--font-mono); font-size: .92rem;
  padding-block: .55rem;
  border-bottom: 1px dashed var(--line);
}
.spec-row:last-child{ border-bottom:0; }
.spec-row dt{ color: rgba(15,27,36,.55); }
.spec-row dd{ color: var(--ink); }
.spec-row a:hover{ color: var(--blue-deep); text-decoration: underline; }

/* ============ Dotace EU (muted, subordinate section) ============ */
.section-dotace{ padding-block: 3rem; }
.section-dotace::before{
  content:""; position:absolute; top:0; left:0; right:0; height:3px;
  background: linear-gradient(90deg, var(--gold), var(--blue));
}
.section-dotace .wrap{ max-width: 760px; }
.dotace-title{
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.3;
  color: var(--paper);
  margin-bottom: .6em;
}
.dotace-lead{
  font-size: .92rem;
  color: rgba(250,248,243,.65);
  max-width: 62ch;
  margin-bottom: 1.8rem;
}
.dotace-grid{
  display:grid; grid-template-columns: 1fr 1fr; gap: 1.2rem;
  max-width: 560px;
  margin-bottom: 1.2rem;
}
.dotace-poster{
  display:block; border: 1px solid var(--line-light); background: rgba(250,248,243,.03);
  transition: border-color .2s var(--ease), transform .2s var(--ease);
}
.dotace-poster:hover{ border-color: var(--gold); transform: translateY(-3px); }
.dotace-caption{
  display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap;
  padding: 1em 1.2em;
  font-family: var(--font-mono); font-size:.85rem;
  color: rgba(250,248,243,.85);
}
.dotace-link{ color: var(--gold); white-space:nowrap; }
.dotace-footnote{
  font-family: var(--font-mono); font-size:.78rem; color: rgba(250,248,243,.5);
}
.dotace-footnote a{ color: rgba(250,248,243,.75); text-decoration: underline; text-underline-offset: .2em; }
.dotace-footnote a:hover{ color: var(--gold); }

/* ============ Kontakt ============ */
.kontakt-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
  background: var(--line); border: 1px solid var(--line);
}
.kontakt-big{
  background: var(--paper); padding: 2.2rem 1.8rem;
  display:flex; flex-direction:column; gap:.5rem;
  transition: background-color .2s var(--ease);
}
.kontakt-big:hover{ background: var(--sand); }
.kontakt-label{
  font-family: var(--font-mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.1em;
  color: var(--blue-deep);
}
.kontakt-value{
  font-family: var(--font-display); font-weight:700; text-transform:uppercase;
  font-size: 1.5rem; line-height:1.15;
}

/* ============ Footer ============ */
.site-footer{ background: var(--ink); color: rgba(250,248,243,.7); padding-block: 2.6rem; }
.footer-row{ display:flex; align-items:center; gap:1.6rem; flex-wrap:wrap; justify-content:space-between; }
.footer-logo{ height:34px; width:auto; opacity:.92; }
.footer-legal, .footer-copy, .footer-credit{ font-family: var(--font-mono); font-size:.78rem; }
.footer-legal{ flex:1; min-width: 260px; }
.footer-meta{ display:flex; flex-direction:column; align-items:flex-end; gap:.35rem; text-align:right; }
.footer-credit{ color: rgba(250,248,243,.55); }
.footer-credit a{ color: rgba(250,248,243,.8); text-decoration: underline; text-underline-offset: .2em; }
.footer-credit a:hover{ color: var(--blue); }

/* ============ Lightbox ============ */
.lightbox{
  position: fixed; inset:0; z-index: 300;
  background: rgba(15,27,36,.96);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding: 2rem;
}
.lightbox[hidden]{ display:none; }
.lightbox-img{ max-width: min(90vw, 1100px); max-height: 74vh; object-fit:contain; }
.lightbox-caption{
  color: var(--paper); font-family: var(--font-mono); font-size:.85rem; margin-top: 1.2rem;
}
.lightbox-close{
  position:absolute; top: 20px; right: 24px; font-size: 2.2rem; line-height:1; color: var(--paper);
}
.lightbox-nav{
  position:absolute; top:50%; translate: 0 -50%; color: var(--paper);
  font-size: 1.6rem; padding: .6em .8em; opacity:.75;
}
.lightbox-nav:hover{ opacity:1; }
.lightbox-prev{ left: 12px; }
.lightbox-next{ right: 12px; }

/* ============ Responsive ============ */
@media (max-width: 980px){
  .firma-grid{ grid-template-columns: 1fr; gap: 2.4rem; }
  .cards{ grid-template-columns: 1fr; }
  .gallery-grid{ grid-template-columns: repeat(2, 1fr); }
  .kontakt-grid{ grid-template-columns: 1fr; }
  .dotace-grid{ grid-template-columns: 1fr; }
}

@media (max-width: 760px){
  .main-nav{
    position: fixed; inset: var(--header-h) 0 0 0; z-index: 90;
    background: var(--paper);
    display:flex; justify-content:flex-start;
    transform: translateX(100%);
    transition: transform .3s var(--ease);
  }
  .main-nav.is-open{ transform: translateX(0); }
  .nav-list{ flex-direction:column; gap: 0; width:100%; padding: 1rem 24px; }
  .nav-list a{ display:block; padding: 1.1em 0; border-bottom: 1px solid var(--line); font-size:1rem; color: var(--ink); }
  .nav-toggle{ display:flex; }
  .header-call span{ display:none; }
  .header-call .icon{ width:1.3em; height:1.3em; }

  .gallery-grid{ grid-template-columns: 1fr 1fr; }
  .section{ padding-block: 3.6rem; }
  .hero{ min-height: 100vh; }
}

@media (max-width: 480px){
  .gallery-grid{ grid-template-columns: 1fr; }
  .hero-actions{ flex-direction:column; align-items:stretch; }
  .btn{ justify-content:center; }
}