/* =========================================================
   KONTAKTY.CSS
   Classic – kontaktni stranka (scope striktne pod .contact-page)
   ========================================================= */

/* -------------------------
   Spacer (doporuceni: bez   v HTML)
   ------------------------- */
.contact-page .contact-spacer{height:30px;}
.contact-page .contact-spacer-small{height:15px;}

/* -------------------------
   Grid: FIRMA + PODPORA
   HTML: .contact-grid.contact-grid-2 > .contact-card
   ------------------------- */
.contact-page .contact-grid{
  display:grid;
  gap:24px;
}

.contact-page .contact-grid-2{
  grid-template-columns:repeat(2, minmax(0, 1fr));
}

@media (max-width:768px){
  .contact-page .contact-grid-2{
    grid-template-columns:1fr;
  }
}

/* -------------------------
   Karty: FIRMA / PODPORA
   HTML: .contact-card (+ .highlight)
   ------------------------- */
.contact-page .contact-card{
  background:#fff;
  border-radius:18px;
  box-shadow:0 12px 30px rgba(0,0,0,.06);
  padding:24px;
}

.contact-page .contact-card.highlight{
  border:none;
}

.contact-page .contact-card h3{
  font-size:22px;
  margin:0 0 14px;
}

.contact-page .contact-card p{
  margin:0 0 12px;
  line-height:1.6;
}

.contact-page .contact-card p:last-child{margin-bottom:0;}

.contact-page .contact-card a{
  color:inherit;
  text-decoration:underline;
  text-underline-offset:2px;
}

/* -------------------------
   Nadpis sekce "Naše kamenné prodejny"
   HTML: .contact-section-title h3
   ------------------------- */
.contact-page .contact-section-title h3{
  font-size:22px;
  margin:0 0 20px;
}

/* -------------------------
   Seznam prodejen + mezery mezi kartami
   HTML: .contact-stores > .store-card
   ------------------------- */
.contact-page .contact-stores{
  display:flex;
  flex-direction:column;
  gap:40px; /* mezera mezi kartami prodejen */
}

/* -------------------------
   Karta prodejny (desktop)
   HTML: .store-card > .store-content + .store-image
   ------------------------- */
.contact-page .store-card{
  display:flex;
  gap:40px;
  align-items:center;
  background:#fff;
  border-radius:22px;
  box-shadow:0 15px 40px rgba(0,0,0,.06);
  padding:28px;
}

.contact-page .store-card .store-content{flex:1.1; min-width:0;}
.contact-page .store-card .store-image{flex:.9; min-width:0;}

/* Stridani (2.,4.,6. karta...) – funguje, protoze HTML ma vzdy content -> image */
.contact-page .contact-stores .store-card:nth-child(even){
  flex-direction:row-reverse;
}

/* Nadpis prodejny */
.contact-page .store-card h3{
  font-size:22px;
  margin:0 0 14px;
}

/* Text prodejny */
.contact-page .store-card p{
  margin:0 0 12px;
  line-height:1.6;
}

.contact-page .store-card p:last-child{margin-bottom:0;}

/* Obrazek prodejny */
.contact-page .store-image img{
  width:100%;
  border-radius:18px;
  display:block;
  box-shadow:0 18px 45px rgba(0,0,0,.08);
}

/* Mobil: vse do sloupce, bez stridani */
@media (max-width:768px){
  .contact-page .store-card{
    flex-direction:column;
    gap:22px;
  }

  .contact-page .contact-stores .store-card:nth-child(even){
    flex-direction:column;
  }
}

/* -------------------------
   Sluzby (fajfky)
   HTML: ul.store-services > li
   ------------------------- */
.contact-page .store-services{
  list-style:none;
  padding:0;
  margin:10px 0 20px;
}

.contact-page .store-services li{
  position:relative;
  padding-left:22px;
  margin-bottom:8px;
}

.contact-page .store-services li::before{
  content:"?";
  position:absolute;
  left:0;
  top:0;
  color:#2eca70;
  font-weight:700;
}

/* -------------------------
   Tlacitko "Zobrazit na mape"
   HTML: p.store-map > a
   ------------------------- */
.contact-page p.store-map{margin-top:18px;}

.contact-page p.store-map a{
  display:inline-block;
  padding:10px 18px;
  border-radius:30px;
  border:2px solid #2eca70;
  color:#2eca70;
  font-weight:600;
  text-decoration:none;
  transition:all .25s ease;
}

.contact-page p.store-map a:hover{
  background:#2eca70;
  color:#fff;
  transform:translateY(-2px);
}