:root{ --blue:#123c8c; --red:#c4161c; --bg:#ffffff; --text:#111827; --muted:#4b5563; --line:#e5e7eb; --card:#f8fafc; --shadow: 0 10px 25px rgba(15, 23, 42, 0.08); --radius:16px; } *{box-sizing:border-box} html,body{margin:0;padding:0} html { scroll-padding-top: 60px; } body{ font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background: var(--bg); color: var(--text); line-height: 1.55; } a{color:var(--blue); text-underline-offset:3px} a:hover{color:var(--red)} .container{max-width:1100px;margin:0 auto;padding:0 20px} /* Header */ .header{ position:sticky; top:0; z-index:10; background:#fff; border-bottom:1px solid var(--line); } .header__row{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 0; } .brand{ display:flex; align-items:center; gap:12px; text-decoration:none; } .logo{ height:48px; width:auto; display:block; } /* Nav */ .nav{ display:flex; gap:18px; align-items:center; } .nav a{ text-decoration:none; font-weight:600; color:var(--blue); } .nav a:hover{color:var(--red)} /* Buttons */ .btn{ display:inline-flex; align-items:center; justify-content:center; padding:12px 16px; border-radius:12px; border:1px solid transparent; background:var(--red); color:#fff; font-weight:800; text-decoration:none; box-shadow: 0 8px 18px rgba(196, 22, 28, 0.18); } .btn:hover{filter: brightness(0.98); color:#fff;} .btn--ghost{ background:#fff; color:var(--blue); border:1px solid var(--line); box-shadow:none; } .btn--ghost:hover{border-color: var(--blue); color: var(--blue);} .btn--small{padding:9px 12px; border-radius:12px;} /* Typography */ h1{ margin:0 0 12px; font-size:44px; line-height:1.08; color:var(--blue); letter-spacing:-0.5px; } h2{margin:0 0 10px; font-size:26px; color:var(--blue);} h3{margin:0 0 8px; font-size:18px; color:var(--blue);} .lead{font-size:16px; color:var(--muted); max-width:700px;} .muted{color:var(--muted)} .small{font-size:12px;color:var(--muted)} strong{color:var(--red)} /* Layout */ .hero{padding:65px 0 15px} .hero__grid{ display:grid; grid-template-columns: 1.1fr 0.9fr; gap:22px; align-items:start; } .hero__cta{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0 10px} .chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px} .chip{ font-size:12px; padding:6px 10px; border-radius:999px; border:1px solid var(--line); color:var(--muted); background:#fff; } /* Cards */ .heroCard, .card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:16px; box-shadow: var(--shadow); } .section{padding:48px 0} .section--alt{ background:#f9fafb; border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .grid{ margin-top:14px; display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; } /* Tables */ .table{ width:100%; border-collapse:collapse; overflow:hidden; border-radius:14px; border:1px solid var(--line); background:#fff; margin-top:12px; } .table th, .table td{ padding:12px 14px; border-bottom:1px solid var(--line); text-align:left; } .table th{ background:#f3f4f6; color:var(--blue); font-weight:800; } .table tr:last-child td{border-bottom:none} /* Footer */ .footer{ padding:28px 0; border-top:1px solid var(--line); margin-top:24px; color:var(--muted); font-size:14px; } /* Mobile */ @media (max-width: 900px){ h1{font-size:36px} .hero__grid{grid-template-columns:1fr} .grid{grid-template-columns:1fr} .nav{gap:12px; flex-wrap:wrap; justify-content:flex-end} .logo{height:44px} } @media (max-width: 520px){ .container{padding:0 16px} h1{font-size:32px} .nav{display:none} } .navToggle { display:none; } .aboutGrid{ margin-top:20px; display:grid; grid-template-columns: 1fr 1fr; gap:20px; } .aboutCard{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:20px; box-shadow:var(--shadow); } .aboutPhoto{ width:100%; max-width:160px; border-radius:50%; margin-bottom:12px; } .aboutCard h3{ margin-top:0; color:var(--blue); } @media (max-width: 800px){ .aboutGrid{ grid-template-columns:1fr; } } /* === About: two columns with equal photos === */ #about .aboutGrid{ display:grid; grid-template-columns: 1fr 1fr; gap:32px; align-items:start; } #about .aboutCard{ text-align:center; } #about .aboutPhoto{ width:140px; height:140px; object-fit:cover; border-radius:50%; margin:0 auto 12px; display:block; } #about .aboutCard p{ max-width:360px; margin:0 auto 8px; } /* Mobile */ @media (max-width: 800px){ #about .aboutGrid{ grid-template-columns:1fr; } } section#about .aboutGrid{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:32px !important; } section#about .aboutCard{ text-align:center !important; } section#about img.aboutPhoto{ width:140px !important; height:140px !important; object-fit:cover !important; border-radius:50% !important; display:block !important; margin:0 auto 12px !important; } @media (max-width: 800px){ section#about .aboutGrid{ grid-template-columns:1fr !important; } } /* Mobile nav */ @media (max-width: 520px){ .navToggle { display:block; background:transparent; border:1px solid var(--line); border-radius:10px; padding:8px 10px; font-size:18px; } .nav { display:none; flex-direction:column; align-items:flex-end; gap:10px; padding:10px 0; } .nav.open { display:flex; } } /* Mobile nav */ @media (max-width: 520px){ .navToggle { display:block; background:transparent; border:1px solid var(--line); border-radius:10px; padding:8px 10px; font-size:18px; } .nav { display:none; flex-direction:column; align-items:flex-end; gap:10px; padding:10px 0; } .nav.open { display:flex; } } .card h3{ display:flex; gap:10px; align-items:center; } section { scroll-margin-top: 60px; } .testimonialCard { max-width: 820px; margin: 0 auto; padding: 18px; } .testimonialRow { display: flex; gap: 16px; align-items: center; } .testimonialPhoto { width: 72px; height: 72px; object-fit: cover; border-radius: 999px; } .testimonialQuote { margin: 0; font-style: italic; } .testimonialName { margin-bottom: 6px; } .footer--pro{ background: var(--blue); color:#fff; padding:40px 0; margin-top:50px; } .footerFlex{ display:flex; justify-content:space-between; align-items:flex-start; gap:40px; } .footerLegal{ max-width:700px; } .footerSmall{ font-size:13px; opacity:0.85; margin-top:10px; line-height:1.5; } .footerSocials{ display:flex; gap:18px; font-size:26px; } .footerSocials a{ color:#fff; text-decoration:none; transition:0.2s ease; } .footerSocials a:hover{ opacity:0.7; transform:translateY(-2px); } /* Mobile */ @media (max-width: 900px){ .footerFlex{ flex-direction:column; align-items:flex-start; } } .footerSocials{ display:flex; gap:20px; } .socialIcon{ width:60px; height:60px; background:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:0.25s ease; } .socialIcon:hover{ transform:translateY(-4px); box-shadow:0 8px 18px rgba(0,0,0,0.25); } .icon{ width:26px; height:26px; fill: var(--blue); } @media (max-width: 768px){ .testimonialRow{ flex-direction: column; text-align: center; } .testimonialPhoto{ margin: 0 auto 12px auto; } } .testimonialQuote{ font-style: italic !important; }



.contactbar{

  margin-top: 16px;

  display: flex;

  flex-wrap: wrap;

  gap: 12px;

}



.contactpill{

  display: inline-flex;

  align-items: center;

  gap: 10px;

  padding: 10px 16px;

  border-radius: 999px;

  text-decoration: none;

  background: #fff;

  border: 1px solid var(--line);

  color: var(--text);

  font-weight: 600;

  box-shadow: 0 6px 16px rgba(15,23,42,0.06);

  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;

}



.contactpill:hover{

  transform: translateY(-2px);

  box-shadow: 0 12px 24px rgba(15,23,42,0.12);

  border-color: rgba(18,60,140,0.35);

}



/* kolečko s ikonou */

.contactpill__icon{

  width: 32px;

  height: 32px;

  border-radius: 50%;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;



  /* důležité pro mobil */

  line-height: 1;

  font-size: 16px;

  color: #fff;

}



/* barvy */

.contactpill--phone .contactpill__icon{ background: var(--red); }

.contactpill--wa    .contactpill__icon{ background: #25D366; }

.contactpill--mail  .contactpill__icon{ background: var(--blue); }



/* Mobil */

@media (max-width: 600px){

  .contactpill{

    width: 50%;

    justify-content: flex-start;

  }

}



@media (max-width: 600px){

  .contactbar{

    flex-direction: column;

  }

}



.contactbar{

  flex-direction: column;

}



@media (max-width: 600px){

  .contactbar{

    display: flex;

    flex-direction: column;   /* pod sebe */

    gap: 10px;

  }



  .contactpill{

    width: 100%;              /* přes celou šířku */

  }

}



.hero__grid > :last-child{

  margin-top: 110px;

}







@media (max-width: 520px){



  .header__row{

    flex-wrap:wrap;

  }



  .navToggle{

    display:block;

  }



  .nav{

    display:none;

    width:100%;

    flex-direction:column;

    align-items:flex-end;

    gap:10px;

    padding:10px 0;

  }



  .nav.open{

    display:flex;

  }

}









.hero h1,

.hero p,

.hero .contact-buttons {

  opacity: 0;

  transform: translateY(15px);

  animation: fadeUp 0.6s ease forwards;

}



.hero p {

  animation-delay: 0.2s;

}



.hero .contact-buttons {

  animation-delay: 0.4s;

}



@keyframes fadeUp {

  to {

    opacity: 1;

    transform: translateY(0);

  }

}









.contact-button {

  transition: transform 0.2s ease;

}



.contact-button:hover {

  transform: translateY(-3px);

}

















#services .card {

  transition: transform 0.25s ease, box-shadow 0.25s ease;

  will-change: transform;

}



#services .card:hover {

  transform: translateY(-8px);

  box-shadow: 0 18px 35px rgba(0, 0, 0, 0.08);

}















a {

  position: relative;

  text-decoration: none;

}



a::after {

  content: "";

  position: absolute;

  left: 0;

  bottom: -3px;

  width: 0;

  height: 2px;

  background: var(--red);

  transition: width 0.3s ease;

}



a:hover::after {

  width: 100%;

}

































@media (max-width: 520px){

  .contactbar{

    position: sticky;

    bottom: 10px;

    z-index: 20;

    background: rgba(255,255,255,0.92);

    backdrop-filter: blur(8px);

    padding: 10px;

    border-radius: 14px;

    box-shadow: 0 12px 28px rgba(0,0,0,0.10);

  }



  .contactpill{

    flex: 1;

    justify-content: center;

    min-height: 46px; /* pohodlný tap */

  }



  .contactpill__text{

    font-size: 14px;

  }

}









@media (max-width: 520px){

  .contactpill:active,

  .btn:active,

  #services .card:active{

    transform: translateY(1px) scale(0.99);

  }

}









@media (max-width: 520px){

  .fade-section{

    transform: translateY(24px);

    transition: opacity 0.55s ease, transform 0.55s ease;

  }

}









.mottoBlock{

  width: 100%;

  display: flex;

  flex-direction: column;

  align-items: center;

  margin: 20px 0 32px;

}



.mottoLine{

  font-size: 20px;

  font-style: italic;

  font-weight: 600;

  letter-spacing: 1px;

  margin: 0;

  text-align: center !important;

  position: relative;

}



.mottoLine::after{

  content: "";

  display: block;

  width: 50px;

  height: 2px;

  background: var(--red);

  margin: 10px auto 0;

  opacity: 0.7;

}



.mottoAuthor{

  font-size: 14px;

  margin-top: 6px;

  opacity: 0.6;

  letter-spacing: 1px;

  text-align: center !important;

}













@media (max-width: 520px){

  .mottoBlock{

    margin: 16px 0 24px;

  }



  .mottoLine{

    font-size: 18px;

  }



  .mottoAuthor{

    font-size: 13px;

  }

}









.fade-section{

  opacity: 0;

  transform: translateY(30px);

  transition: opacity 0.7s ease, transform 0.7s ease;

}



.fade-section.visible{

  opacity: 1;

  transform: translateY(0);

}







#mission .card.fade-section,

#about .aboutCard.fade-section{

  opacity: 0 !important;

  transform: translateY(30px) !important;

  transition: opacity 0.7s ease, transform 0.7s ease !important;

  will-change: opacity, transform;

}



#mission .card.fade-section.visible,

#about .aboutCard.fade-section.visible{

  opacity: 1 !important;

  transform: translateY(0) !important;

}









.contactHero{

  position: relative;

  background-image: url("contact-photo.jpg");

  background-size: cover;

  background-position: center;

  border-radius: var(--radius);

  box-shadow: var(--shadow);

  max-width: 1100px;

  margin: 40px auto 0 auto;

  min-height: 600px;

  display: flex;

  align-items: center;

  overflow: hidden;

}



/* Jemný gradient jen vlevo */

.contactHero::before{

  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(

    90deg,

    rgba(0,0,0,0.55) 0%,

    rgba(0,0,0,0.35) 35%,

    rgba(0,0,0,0.15) 65%,

    rgba(0,0,0,0) 100%

  );

}



.contactInfo{

  position: relative;

  z-index: 2;

  color: white;

  padding: 70px;

  max-width: 520px;

line-height: 1.9;

}



.contactInfo p{

  margin-bottom: 24px;     /* ← A TOTO */

}



.contactInfo a{

  color: white;

  text-decoration: underline;

  text-underline-offset: 3px;

}



.contactInfo a:hover{

  opacity: 0.85;

}



.contactSmall{

  margin-top: 20px;

  font-size: 14px;

  opacity: 0.85;

}



/* MOBILE */

@media (max-width: 900px){



  .contactHero{

    min-height: 650px;

     background-position: 70% top;

  }



  .contactInfo{

    padding: 40px 25px;

  }

}





.footer a {

  color: #ffffff;

  text-decoration: underline;

}



.footer a:hover {

  opacity: 0.8;

}





/* Privacy page headings only */

.privacyPage h1,

.privacyPage h2 {

  color: #1f3f8f; 

}











.testimonialCardFlip {

  position: relative;

  min-height: 180px;

  padding: 0 !important;

  perspective: 1200px;

  overflow: visible;

}



.testimonialCardInner {

  position: relative;

  width: 100%;

  min-height: 180px;

  transform-style: preserve-3d;

  transition: transform 0.8s ease;

}



.testimonialCardFlip:hover .testimonialCardInner,

.testimonialCardFlip:focus-within .testimonialCardInner {

  transform: rotateY(180deg);

}



.testimonialSide {

  position: absolute;

  inset: 0;

  width: 100%;

  min-height: 180px;

  box-sizing: border-box;

  padding: 28px;

  border-radius: inherit;

  backface-visibility: hidden;

  -webkit-backface-visibility: hidden;

  background: inherit;

  border: inherit;

  box-shadow: inherit;

}



.testimonialFront {

  z-index: 2;

  display: flex;

  align-items: center;

}



.testimonialBack {

  transform: rotateY(180deg);

  display: flex;

  align-items: center;

  overflow-y: auto;

}



.testimonialBackInner {

  width: 100%;

}



.testimonialFront .testimonialRow {

  display: flex;

  align-items: center;

  gap: 20px;

}



.testimonialFront .testimonialName,

.testimonialBack .testimonialName {

  margin: 0 0 10px 0;

}



.testimonialBack .testimonialQuote {

  margin: 0;

}













.testimonialBack {

  overflow-y: hidden;

}





.testimonialRole{

  margin:4px 0 0 0;

  font-size:0.9rem;

  color:#6b7280;

}







@media (max-width: 768px) {

  .testimonialCardFlip:hover .testimonialCardInner,

  .testimonialCardFlip:focus-within .testimonialCardInner {

    transform: none;

  }



  .testimonialCardInner {

    transform: none !important;

  }



  .testimonialSide {

    position: relative;

    inset: auto;

    height: auto;

  }



  .testimonialBack {

    transform: none;

    display: block;

    margin-top: 12px;

    overflow: visible;

  }

}























@media (max-width: 768px) {



  /* vypneme flip */

  .testimonialCardInner{

    transform:none !important;

    height:auto;

  }



  .testimonialCardFlip:hover .testimonialCardInner{

    transform:none !important;

  }



  /* obě strany karty normálně pod sebe */

  .testimonialSide{

    position:relative;

    inset:auto;

    height:auto;

    padding:22px;

    text-align:center;

  }



  /* front side zůstane */

  .testimonialFront{

    display:block;

  }



  /* back side bude jen text */

  .testimonialBack{

    transform:none;

    display:block;

    overflow:visible;

    padding-top:0;

  }



  /* skryjeme duplicitní jméno na back side */

  .testimonialBack .testimonialName{

    display:none;

  }



  /* zarovnání obsahu */

  .testimonialRow{

    display:block;

    text-align:center;

  }



  .testimonialPhoto{

    margin:0 auto 12px auto;

    display:block;

  }



  /* menší mezery */

  .testimonialRole{

    margin:4px 0 10px 0;

  }



  .testimonialQuote{

    margin:0;

  }



}







@media (max-width:768px){



  .testimonialRow{

    display:flex;

    flex-direction:column;

    align-items:center;

    gap:2px;

  }



  .testimonialPhoto{

    margin-bottom:4px;

  }



  .testimonialName{

    margin:0;

  }



}









@media (max-width:768px){



  .testimonialRow{

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:center;

    gap:0 !important;

  }



  .testimonialRow > div{

    margin:0 !important;

    padding:0 !important;

  }



  .testimonialPhoto{

    display:block;

    margin:0 auto 6px auto !important;

  }



  .testimonialName{

    margin:0 !important;

    padding:0 !important;

    line-height:1.2;

  }



  .testimonialRole{

    margin:4px 0 8px 0 !important;

  }



}















.askCard{

  max-width: 860px;

  margin: 0 auto;

  background: #fff;

  border: 1px solid rgba(0,0,0,.08);

  border-radius: 22px;

  padding: 28px;

  box-shadow: 0 10px 30px rgba(0,0,0,.06);

}



.askCard__intro{

  margin-bottom: 20px;

}



.askLead{

  max-width: 720px;

  margin-top: 8px;

}



.askForm{

  display: grid;

  gap: 18px;

}



.formRow{

  display: grid;

  gap: 8px;

}



.formRow label,

.contactChoice legend{

  font-weight: 700;

  font-size: 0.98rem;

}



.askForm input[type="text"],

.askForm input[type="email"],

.askForm input[type="tel"],

.askForm textarea{

  width: 100%;

  padding: 14px 16px;

  border: 1px solid rgba(0,0,0,.14);

  border-radius: 14px;

  background: #fff;

  font: inherit;

  transition: border-color .2s ease, box-shadow .2s ease;

  box-sizing: border-box;

}



.askForm input[type="text"]:focus,

.askForm input[type="email"]:focus,

.askForm input[type="tel"]:focus,

.askForm textarea:focus{

  outline: none;

  border-color: #123c8c;

  box-shadow: 0 0 0 4px rgba(18,60,140,.10);

}



.askForm textarea{

  resize: vertical;

  min-height: 140px;

}



.contactChoice{

  border: none;

  padding: 0;

  margin: 0;

  display: flex;

  flex-wrap: wrap;

  gap: 12px 18px;

  align-items: center;

}



.choiceOption{

  display: inline-flex;

  align-items: center;

  gap: 8px;

  font-weight: 500;

  cursor: pointer;

}



.choiceOption input{

  accent-color: #123c8c;

}



.askForm__submit{

  justify-self: start;

}



.formNote{

  margin: 0;

  font-size: 0.95rem;

  color: #666;

}



.is-hidden{

  display: none;

}



@media (max-width: 640px){

  .askCard{

    padding: 20px 16px;

    border-radius: 18px;

  }



  .contactChoice{

    flex-direction: column;

    align-items: flex-start;

  }



  .askForm__submit{

    width: 100%;

    justify-self: stretch;

  }

}

































#faq .faq-list{

  max-width: 900px;

  margin: 30px auto 0;

}



#faq .faq-item{

  background: #ffffff;

  border: 1px solid #e8e8e8;

  border-radius: 18px;

  padding: 22px 24px;

  margin-bottom: 18px;

  box-shadow: 0 8px 24px rgba(0,0,0,0.06);

  transition: transform 0.2s ease, box-shadow 0.2s ease;

}



#faq .faq-item:hover{

  transform: translateY(-2px);

  box-shadow: 0 14px 32px rgba(0,0,0,0.09);

}



#faq .faq-item h3{

  margin: 0 0 10px;

  color: #123c8c;

}



#faq .faq-item p{

  margin: 0;

  line-height: 1.65;

}



#faq .faq-cta{

  text-align: center;

  color: #c4161c;

  font-weight: 700;

  font-size: 1.1rem;

  max-width: 760px;

  margin: 34px auto 0;

}













.insta-cta{

  text-align:center;

  margin-top:30px;

  font-size:1rem;

  color:#666;

}



.insta-cta a{

  color:#c4161c;

  font-weight:700;

  text-decoration:none;

}



.insta-cta a:hover{

  text-decoration:underline;

}



















.trustbar{

  background:#ffffff;

  border-top:1px solid #eee;

  border-bottom:1px solid #eee;

  padding:16px 0;

}



.trustbar-inner{

  display:flex;

  justify-content:center;

  gap:40px;

  flex-wrap:wrap;

  font-size:0.95rem;

  color:#444;

}



.trust-item{

  display:flex;

  align-items:center;

  gap:6px;

}







.trustbar{

  background:#ffffff;

  border-top:1px solid #eee;

  border-bottom:1px solid #eee;

  padding:18px 0;

  position:relative;

  overflow:hidden;

}



.trustbar::before{

  content:"";

  position:absolute;

  inset:0;

  background:linear-gradient(

    90deg,

    rgba(196,22,28,0) 0%,

    rgba(196,22,28,0.06) 25%,

    rgba(196,22,28,0.12) 50%,

    rgba(196,22,28,0.06) 75%,

    rgba(196,22,28,0) 100%

  );

  transform:translateX(-100%);

  animation:trustSweep 4s ease-in-out infinite;

  pointer-events:none;

}



@keyframes trustSweep{

  0%{transform:translateX(-100%);}

  50%{transform:translateX(100%);}

  100%{transform:translateX(100%);}

}



.trustbar-inner{

  display:flex;

  justify-content:center;

  gap:40px;

  flex-wrap:wrap;

  font-size:0.95rem;

  color:#444;

  position:relative;

  z-index:1;

}







.trust-item{

  display:flex;

  align-items:center;

  gap:8px;

  padding:6px 10px;

  text-align:center;

}



@media (max-width: 768px){

  .trustbar{

    padding:14px 0;

  }



  .trustbar-inner{

    gap:14px;

    font-size:0.9rem;

    padding:0 12px;

  }



  .trust-item{

    padding:6px 8px;

  }

}



@media (max-width: 480px){

  .trustbar{

    padding:12px 0;

  }



  .trustbar-inner{

    gap:10px;

    font-size:0.85rem;

    flex-direction:column;

    align-items:center;

  }



  .trust-item{

    width:100%;

    justify-content:center;

    padding:4px 0;

  }

}







@media (max-width: 480px){

  .trust-item{

    width:auto;

    justify-content:center;

    padding:6px 12px;

    background:rgba(196,22,28,0.04);

    border-radius:999px;

  }

}

















.servicesScheme{

  width:100%;

  display:flex;

  justify-content:center;

  align-items:center;

  margin:28px 0 36px;

}



.servicesScheme__img{

  display:block;

  width:100%;

  max-width:800px;

  height:auto;

  margin:0 auto;

  border-radius:20px;

  box-shadow:0 10px 30px rgba(0,0,0,0.08);

}









@media (max-width: 768px){

  .servicesScheme{

    margin:20px 0 28px;

  }



  .servicesScheme__img{

    max-width:100%;

    border-radius:14px;

  }

}















.heroCard--photo{

  overflow: hidden;

  padding: 0;

}



.heroCard__photo{

  display: block;

  width: 100%;

  height: 260px;

  object-fit: cover;

  object-position: center top;

}



.heroCard__content{

  padding: 18px 16px 16px;

}



@media (max-width: 900px){

  .heroCard__photo{

    height: 220px;

  }

}

























.hero__grid > :last-child{

  margin-top: 0;

}



/* specialni hero karta s fotkou */

.heroCard--photo{

  padding: 0;

  overflow: hidden;

}



.heroCard__photo{

  display: block;

  width: 100%;

  height: 260px;

  object-fit: cover;

  object-position: center 8%;

}



.heroCard__content{

  padding: 18px 18px 16px;

}



.heroCard__content h2{

  margin: 0 0 14px;

}



.heroCard__content .checklist{

  margin: 0 0 16px;

  padding-left: 24px;

}



.heroCard__content .muted{

  margin: 0;

}



@media (max-width: 900px){

  .heroCard__photo{

    height: 220px;

  }

}









.heroCard__content{

  padding: 20px 22px 18px;

}



.heroCard__content h2{

  margin: 0 0 16px;

  font-size: 22px;

}



.heroCard__content .checklist{

  margin: 0 0 18px;

  padding-left: 20px;

}



.heroCard__content .checklist li{

  margin-bottom: 8px;

}



.heroCard__content .muted{

  margin-top: 8px;

  line-height: 1.4;

}









.heroCard__photo{

  border-bottom: 1px solid #eee;

}





.heroCard__photo{

  border-top-left-radius: 16px;

  border-top-right-radius: 16px;

}



















.hero__grid > :last-child{

  margin-top: 0;

}



.heroCard--photo{

  padding: 0;

  overflow: hidden;

}



.heroCard__content{

  padding: 18px 22px 20px;

}



.heroCard__content h2{

  margin: 0 0 8px;

  font-size: 22px;

  line-height: 1.0;

}



.heroChecklist{

  margin: 0 0 5px;

  padding-left: 22px;

}



.heroChecklist li{

  margin-bottom: 3px;

  line-height: 1.35;

}



.heroMeta{

  margin: 0;

  line-height: 1.1;

  font-size: 14px;

}



.heroMeta strong{

  white-space: normal;

}



























.heroChecklist{

  list-style: none;

  padding-left: 0;

}



.heroChecklist li{

  position: relative;

  padding-left: 20px;

}



.heroChecklist li::before{

  content: "✔";

  position: absolute;

  left: 0;

  color: var(--blue);

  font-size: 14px;

}







.heroCard__content h2{

  margin-top: 0.5px;

}







.heroMeta{

  opacity: 0.9;

}































.heroCard--photo::after{

  content: "";

  position: absolute;

  inset: 0;



  background: linear-gradient(

    to right,

    rgba(255,255,255,0) 70%,

    rgba(255,255,255,0.4) 90%,

    rgba(255,255,255,0.9) 100%

  );



  pointer-events: none;

}









@media (max-width: 600px){



  .heroChecklist li{

    margin-bottom: 6px;

    line-height: 1.35;

  }



  .heroMeta{

    margin-top: 8px;

    line-height: 1.5;

  }



  .heroMeta div{

    margin-bottom: 4px;

  }



}

















@media (max-width: 600px){



  .chips{

    justify-content: center;

    text-align: center;

  }



}







@media (max-width: 600px){



  .chips{

    justify-content: center;

    gap: 10px;

  }



}









.header .btn,

.header .btn:hover{

  color: #fff;

}