/* FOX additions on top of the Nordhaven template CSS.
   Palette stays black & white; green (from the FOX logo) only on hover. See docs/decisions.md. */
:root {
  --fox-green: #4ea218;
}

html {
  scroll-behavior: smooth;
}

#o-nas,
#sluzby,
#projekty,
#reference,
#certifikaty,
#kontakt {
  scroll-margin-top: 70px;
}

/* ---------- header: anchors left, text logo centre, Kontakt right ---------- */
.navbar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
}

.navbar-info-right.fox-nav-links {
  justify-content: flex-start;
  gap: 32px;
  width: auto;
  max-width: none;
}

.navbar-left {
  justify-self: end;
}

.navbar-logo-img {
  width: auto;
  height: auto;
}

/* logo = the word "Fox" in the site font (Inter Bold, like the big titles) */
.fox-logo-text {
  display: block;
  color: var(--dark);
  font-family: var(--_typography---font-family--inter);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.06em;
}

.footer-logo-link .fox-logo-text {
  color: var(--light);
  font-size: 44px;
}

/* ---------- green hover accents ---------- */
.nav-button:hover .nav-item-btn,
.footer-link:hover,
.contact-hero-item-link:hover,
.contact-submit-btn.tag-text:hover,
.service-tabs-link:hover,
.collection-link:hover .project-item-name,
.collection-link:hover .fox-project-open,
.fox-cert:hover .fox-cert-name,
.navbar-logo:hover .fox-logo-text {
  color: var(--fox-green);
}

.nav-button:hover .footer-link-line,
.footer-link-wrap:hover .footer-link-line {
  background-color: var(--fox-green);
}

.contact-submit-btn.tag-text:hover {
  border-bottom-color: var(--fox-green);
}

/* ---------- hero, rebuilt after the template's composition:
   white band with a thin centre line, the word standing on the band just above the photo strip,
   letters filled with the same photo so it reads as the picture continuing upwards
   (the template has the band and the line baked into its photo).
   Measured on the template at 1440px: 383px (26.6vw) photo.
   Owner's choices: the word spans the content container edge to edge (same edges as the text below),
   and the white gap above the photo is wider than the template's 9px.
   Sizes use cqi (width of .hero) rather than vw, which would include the scrollbar.
   4.106 = width of the visible letters of "FOX ZLÍN" in em (Inter Bold, letter-spacing -0.045em), measured;
   "F" has 0.066em side bearing on the left, "N" 0.022em on the right — shifted by half the difference
   so the letters themselves touch the container edges.
   --fox-gutter = the template's .container-fluid side margin (30px; 28px ≤991; 16px ≤479), max width 1340px.
   Inter, line-height .8: baseline 0.764em below the line box top, capitals 0.737em tall,
   the accent on Í reaches ~0.95em above the baseline — --hero-pad gives it room inside the
   element, otherwise the photo fill (background-clip: text) would not paint it. ---------- */
.hero {
  --fox-gutter: 30px;
  --hero-size: calc(min(100cqi - 2 * var(--fox-gutter), 1340px) / 4.106);
  --hero-pad: calc(var(--hero-size) * 0.2);
  --hero-top: calc(8.4cqi - var(--hero-size) * 0.027 - var(--hero-pad)); /* 8.4cqi = air above the capitals */
  --hero-photo: 26.6vw;
  --hero-gap: 1.8cqi;
  container-type: inline-size;
  height: auto;
}

.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: calc(100% - var(--hero-photo));
  background-color: var(--stroke);
  opacity: 0.65; /* owner: lines in the first screen at 65% opacity */
}

/* header bottom line above the first screen — same lighter stroke */
.navbar-wrap {
  border-bottom-color: rgba(227, 227, 227, 0.65); /* --stroke #e3e3e3 at 65% */
}

.hero-title-wrap {
  position: relative;
  inset: auto;
  height: auto;
  padding-top: var(--hero-top);
}

.hero-title {
  position: relative;
  left: -0.022em;
  padding-top: var(--hero-pad);
  font-size: var(--hero-size);
  line-height: 0.8;
  letter-spacing: -0.045em;
  white-space: nowrap;
  /* same photo as .hero-img (4:3, so 75vw tall at full width, centred by object-fit),
     shifted so the part right above the visible strip shows through the letters */
  background-image: url("/img/stock/hero-2000.webp");
  background-size: 100% auto;
  /* min(0px, …): on narrower screens the aligned photo would start below the top of the element
     and leave the accent on Í unpainted — keep the photo covering the whole word */
  background-position: center min(0px, calc((var(--hero-photo) - 75cqi) / 2 + var(--hero-pad) + var(--hero-size) * 0.764 + var(--hero-gap)));
}

.hero-img {
  display: block;
  width: 100%;
  height: var(--hero-photo);
  margin-top: calc(var(--hero-gap) - var(--hero-size) * 0.036);
  object-fit: cover;
}

/* small caption laid on a photo (services) */
.fox-photo-caption {
  z-index: 2;
  position: absolute;
  right: 24px;
  bottom: 20px;
  max-width: 380px;
  margin: 0;
  color: #fff;
  text-align: right;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
}

/* CTA: template fills the word with a second photo; over our photo that blends in — plain white instead */
.cta-title {
  font-size: 30vw;
  line-height: 0.8;
  color: #fff;
  -webkit-text-fill-color: #fff;
  background-image: none;
  filter: none;
  mix-blend-mode: normal;
}

.cta-thumb {
  width: 100%;
  height: min(80vh, 760px);
  object-fit: cover;
}

/* ---------- about: 5 numbers as in the template, one-line labels ---------- */
@media screen and (min-width: 992px) {
  .about-us-stat .content-item-text {
    white-space: nowrap;
  }
}

/* ---------- services: names on one line, description as a caption on the photo ---------- */
@media screen and (min-width: 992px) {
  .service-tabs-menu {
    width: auto;
    max-width: none;
  }

  .service-tabs-link {
    white-space: nowrap;
  }
}

.service-tab-thumb.fox-has-caption {
  position: relative;
}

.service-tab-thumb.fox-has-caption::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 40%;
  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.45));
  pointer-events: none;
}

/* ---------- projects ---------- */
.fox-projects-subtitle {
  max-width: 560px;
  margin: 16px 0 0;
}

/* template cards hold only name + year; ours also carry details — let the card grow */
#projekty .project-list {
  grid-template-rows: auto;
  height: auto;
}

#projekty .collection-link {
  height: auto;
  overflow: visible;
}

.fox-project-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 12px;
  color: var(--dark);
}

.fox-project-meta .related-body-item {
  display: flex;
  flex-wrap: wrap;
  gap: 0 6px;
}

.fox-project-open {
  margin-top: 8px;
  text-decoration: underline;
  transition: color 0.45s;
}

/* ---------- references: template hides the year column on small screens — show it above the row ---------- */
@media screen and (max-width: 991px) {
  #reference .faq-year-number {
    display: block;
    margin-bottom: 8px;
  }
}

/* ---------- certificates ---------- */
.fox-certs {
  padding-top: 120px;
  padding-bottom: 120px;
}

.fox-cert-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 340px));
  gap: 40px;
  margin-top: 60px;
}

/* align with the heading's right column */
@media screen and (min-width: 992px) {
  .fox-cert-grid {
    width: 720px;
    margin-left: auto;
  }
}

.fox-cert {
  display: flex;
  flex-direction: column;
  gap: 8px;
  color: var(--dark);
  text-decoration: none;
}

.fox-cert-thumb {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background-color: #f4f4f4;
  border: 1px solid #e6e6e6;
}

.fox-cert-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.fox-cert-name {
  margin-top: 8px;
  transition: color 0.45s;
}

/* ---------- lightbox (js/fox.js) ---------- */
.fox-lb {
  z-index: 10000;
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background-color: rgba(25, 25, 25, 0.94);
}

.fox-lb.is-open {
  display: flex;
}

.fox-lb-img {
  max-width: min(92vw, 1200px);
  max-height: 84vh;
  object-fit: contain;
}

.fox-lb-btn {
  position: absolute;
  padding: 12px 16px;
  color: #fff;
  font-size: 28px;
  line-height: 1;
  background: none;
  border: 0;
  cursor: pointer;
  transition: color 0.3s;
}

.fox-lb-btn:hover {
  color: var(--fox-green);
}

.fox-lb-prev {
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
}

.fox-lb-next {
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
}

.fox-lb-close {
  top: 16px;
  right: 16px;
}

.fox-lb-count {
  position: absolute;
  bottom: 20px;
  left: 0;
  right: 0;
  color: #fff;
  text-align: center;
}

.fox-lb-single .fox-lb-prev,
.fox-lb-single .fox-lb-next,
.fox-lb-single .fox-lb-count {
  display: none;
}

/* ---------- contact & form ---------- */
.fox-contact-label {
  margin-bottom: 16px;
}

/* our photos are lighter than the template's — darken so the white text stays readable */
#kontakt .contact-hero-img {
  opacity: 0.35;
}

/* ---------- footer: addresses need wider columns than the template's 160px ---------- */
.footer-body .footer-link {
  white-space: nowrap;
}

@media screen and (min-width: 992px) {
  .footer-right {
    width: auto;
    grid-template-columns: repeat(3, auto);
    column-gap: 64px;
  }
}

.fox-textarea {
  min-height: 120px;
  resize: vertical;
}

.fox-consent {
  margin: 0 0 24px;
  font-size: 13px;
  line-height: 18px;
  opacity: 0.7;
}

.fox-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

@media screen and (max-width: 991px) {
  .hero {
    --fox-gutter: 28px;
    --hero-photo: 42vw;
  }
}

@media screen and (max-width: 479px) {
  .hero {
    --fox-gutter: 16px;
  }
}

@media screen and (max-width: 767px) {
  /* phones: logo left, Kontakt right; the three section links don't fit */
  .navbar {
    display: flex;
  }

  .navbar-info-right.fox-nav-links {
    display: none;
  }

  .navbar-middle {
    display: block;
  }

  .fox-logo-text {
    font-size: 26px;
  }

  .hero {
    --hero-top: 8vw;
    --hero-photo: 70vw;
    --hero-gap: 3.5vw;
  }

  /* the strip shows almost the whole photo here, so "above the strip" is only pale sky —
     fill the letters with the darker middle of the photo instead */
  .hero-title {
    background-size: cover;
    background-position: center 45%;
  }

  .fox-photo-caption {
    right: 16px;
    bottom: 14px;
    max-width: 75%;
  }

  .fox-certs {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .fox-cert-grid {
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 32px;
  }
}