/* ============ PÍSMO ============ */
/* soubory ve složce fonts/ (cesta je relativní k css/style.css) */
@font-face{
  font-family:"HarmonyOS Sans";
  src:url("../fonts/HarmonyOS_Sans_Regular.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"HarmonyOS Sans";
  src:url("../fonts/HarmonyOS_Sans_Bold.woff2") format("woff2");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

:root{
  --font:"HarmonyOS Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ink:#141414;
  --paper:#fbfaf8;
  --euro-orange:#e8531f;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font);
  font-weight:400;
  line-height:1.55;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}
a{color:inherit;}
a:focus-visible, button:focus-visible{outline:3px solid var(--euro-orange); outline-offset:2px;}
@media (prefers-reduced-motion: reduce){ *{animation:none !important; transition:none !important;} }

h1{
  font-family:var(--font);
  font-weight:700;
  letter-spacing:0.01em;
  text-transform:uppercase;
  margin:0;
}

/* ============ HERO ============ */
/* 3 sloupce: levá klikací oblast | panel | pravá klikací oblast */
.hero{
  position:relative;
  width:100%;
  flex:1;
  overflow:hidden;
  background:var(--ink);
  display:grid;
  grid-template-columns:1fr clamp(300px, 88vw, 600px) 1fr;
}
.hero-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center bottom;
  display:block;
  z-index:1;
}

.hero-panel{
  position:relative;
  z-index:2;
  grid-column:2;
  grid-row:1;
  width:100%;
  background:linear-gradient(90deg,
    rgba(251,250,248,0) 0,
    rgba(251,250,248,0.95) 70px,
    rgba(251,250,248,0.95) calc(100% - 70px),
    rgba(251,250,248,0) 100%);
  display:flex;
  align-items:center;
  justify-content:center;
}

.hero-center{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(14px, 2.6vw, 26px);
  width:clamp(240px, 66vw, 460px);
  text-align:center;
  padding-top:2rem;
  padding-bottom:2rem;
}

/* ============ POSTRANNÍ KLIKACÍ OBLASTI ============ */
.side-link{
  position:relative;
  z-index:2;
  grid-row:1;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:0 1rem 2.5rem;
  text-decoration:none;
  color:#fff;
  cursor:pointer;
  transition:background .2s ease;
}
.side-left{ grid-column:1; }
.side-right{ grid-column:3; }

.side-link:hover,
.side-link:focus-visible{
  background:rgba(20,20,20,0.12);
}

.side-label{
  background:rgba(20,20,20,0.78);
  padding:.65em 1.2em;
  border-radius:999px;
  font-size:14px;
  font-weight:700;
  white-space:nowrap;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .2s ease, transform .2s ease;
}
.side-link:hover .side-label,
.side-link:focus-visible .side-label{
  opacity:1;
  transform:none;
}
/* dotyková zařízení nemají hover → štítek ukázat trvale */
@media (hover:none){
  .side-label{ opacity:1; transform:none; }
}

/* ============ FIRMA ============ */
.company-block h1,
.company-block h1 + p{
  font-size:clamp(13px, 1.5vw, 17px);
  line-height:1.25;
  text-transform:uppercase;
}
.company-block h1 + p{
  font-weight:400;
  margin-top:0;
}

.lede{
  margin:8px 0 0;
  padding:0;
  text-align:center;
  color:#3a3a3a;
  font-size:clamp(11px, 1.3vw, 13.5px);
  line-height:1.5;
}
.lede a{text-decoration-color:var(--euro-orange);}

/* ============ LOGA ============ */
.brandgrid-2,
.brandgrid-3{
  display:grid;
  gap:clamp(16px,2.4vw,28px) clamp(20px,3vw,40px);
  width:100%;
}
.brandgrid-2{ grid-template-columns:1fr 1fr; }
.brandgrid-3{ grid-template-columns:1fr 1fr 1fr; }

.cell{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:9px;
  padding:clamp(10px,1.6vw,16px) clamp(8px,1.4vw,14px);
  border-radius:12px;
  border:1px solid rgba(20,20,20,0.7);
  transition:border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.cell:hover, .cell:focus-within{
  border-color:rgba(20,20,20,0.9);
  background:rgba(255,255,255,0.9);
  box-shadow:0 6px 18px -10px rgba(20,20,20,0.35);
}
.cell .logolink{
  display:flex;
  align-items:center;
  justify-content:center;
  height:clamp(42px, 6.2vw, 74px);
  width:100%;
  transition:transform .15s ease, opacity .15s ease;
}
.cell .logolink:hover, .cell .logolink:focus-visible{
  transform:translateY(-2px);
  opacity:0.8;
}
.cell img{ max-height:100%; width:auto; max-width:100%; display:block; }
.cell img.fiat-img{ max-height:85%; }
.cell img.peugeot-img{ max-width:70%; }
.cell img.autosphere-img{ max-height:95%; }

.cell-note{
  font-size:clamp(11px, 1.1vw, 13px);
  line-height:1.3;
}

/* ============ TIGGO ============ */
.tiggo-link{
  display:block;
  width:100%;
}
.tiggo-link img{
  display:block;
  width:100%;
  height:auto;
}

/* ============ FOOTER ============ */
footer{
  background:var(--ink);
  color:#cfcfcf;
  padding:22px 24px 26px;
}

.foot-wrap{
  width:clamp(300px, 88vw, 600px);
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:20px 32px;
  font-size:13px;
}
.foot-wrap > div{flex:1 1;}
.foot-wrap strong{color:#fff;}
.foot-company{line-height:1.6;}

.foot-contact{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.foot-contact-label{
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.05em;
  font-size:11px;
  color:#fff;
  margin-bottom:2px;
}
.foot-contact a{
  color:#cfcfcf;
  text-decoration:none;
  transition:color .15s ease;
}
.foot-contact a:hover, .foot-contact a:focus-visible{
  color:#fff;
  text-decoration:underline;
}

/* ============ RESPONSIVE ============ */
@media (max-width:640px){
  .company-block h1{font-size:clamp(15px,4.4vw,18px);}

  /* boční pruhy jsou na mobilu jen ~6vw široké – skrýt */
  .side-link{display:none;}

  .cell .logolink{height:clamp(50px,15vw,74px);}

  .foot-wrap{
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:18px;
  }
}