/* ===== BALKONOVÉ ZÁBRADLÍ - DODATEČNÉ STYLY ===== */



.zabradli-intro {

  padding: 6rem 2rem;

  background: var(--primary);

}



.zabradli-container {

  max-width: 1200px;

  margin: 0 auto;

}



.intro-content {

  display: flex;

  flex-direction: column;

  gap: 2rem;

}



.intro-content > p {

  font-size: 1.1rem;

  color: var(--secondary);

  line-height: 1.8;

  text-align: center;

}



.intro-features {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

  gap: 2rem;

  margin-top: 2rem;

}



.intro-feature {

  text-align: center;

  padding: 1.5rem;

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

  border-radius: 12px;

  transition: all 0.3s ease;

}



.intro-feature:hover {

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

  transform: translateY(-5px);

}



.intro-feature h3 {

  font-size: 1.2rem;

  color: var(--accent);

  margin-bottom: 0.75rem;

  font-weight: 600;

}



.intro-feature p {

  color: var(--secondary);

  font-size: 0.95rem;

  line-height: 1.6;

}



/* Typy zábradlí */

.zabradli-types {

  padding: 6rem 2rem;

  background: var(--primary);

}



.types-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));

  gap: 2.5rem;

  margin-top: 3rem;

}



.type-card {

  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));

  padding: 2rem;

  border-radius: 16px;

  border: 1px solid rgba(255, 191, 0, 0.2);

  transition: all 0.3s ease;

  display: flex;

  flex-direction: column;

  gap: 1rem;

}



.type-card:hover {

  transform: translateY(-10px);

  border-color: rgba(255, 191, 0, 0.5);

  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.05));

  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);

}



.type-icon {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 70px;

  height: 70px;

  background: linear-gradient(135deg, #FFFB60, #FFDB00);

  border-radius: 14px;

  color: var(--secondary);

}



.type-card h3 {

  font-size: 1.3rem;

  color: var(--secondary);

  font-weight: 600;

  margin-top: 0.5rem;

}



.type-description {

  color: var(--secondary);

  font-size: 0.95rem;

  line-height: 1.6;

}



.type-benefits {

  list-style: none;

  padding: 1rem 0;

  display: flex;

  flex-direction: column;

  gap: 0.75rem;

}



.type-benefits li {

  color: var(--secondary);

  font-size: 0.9rem;

  padding-left: 1.5rem;

  position: relative;

}



.type-benefits li::before {

  content: '✓';

  position: absolute;

  left: 0;

  color: var(--accent);

  font-weight: bold;

}



.type-price {

  margin-top: auto;

  padding-top: 1rem;

  border-top: 1px solid rgba(255, 191, 0, 0.2);

  color: var(--accent);

  font-weight: 600;

  font-size: 0.9rem;

}



/* Bezpečnostní normy */

.bezpecnost-section {

  padding: 6rem 2rem;

  background: var(--primary);

}



.normy-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

  gap: 2rem;

  margin-top: 3rem;

}



.norma-card {

  background: linear-gradient(135deg, #FFFB60 0%, #FFDB00 50%, #B38B00 100%);

  padding: 2rem;

  border-radius: 15px;

  text-align: center;

  color: var(--secondary);

  box-shadow: 0 10px 20px rgba(255, 191, 0, 0.2);

  transition: all 0.3s ease;

}



.norma-card:hover {

  transform: translateY(-5px);

  box-shadow: 0 15px 30px rgba(255, 191, 0, 0.3);

}



.norma-number {

  display: inline-block;

  font-size: 1.8rem;

  font-weight: 700;

  color: var(--secondary);

  margin-bottom: 0.75rem;

}



.norma-card h3 {

  font-size: 1.2rem;

  color: var(--secondary);

  margin-bottom: 0.75rem;

  font-weight: 600;

}



.norma-card p {

  color: var(--secondary);

  font-size: 0.9rem;

  line-height: 1.6;

}



/* Srovnání materiálů */

.srovnani-materialu {

  padding: 6rem 2rem;

  background: var(--primary);

}



.srovnani-table {

  margin-top: 3rem;

  overflow-x: auto;

  border-radius: 15px;

  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);

}



table {

  width: 100%;

  border-collapse: collapse;

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

}



table thead {

  background: linear-gradient(to right, #FFBF00, #FFE5A3);

  color: var(--secondary);

}



table th {

  padding: 1.5rem;

  text-align: left;

  font-weight: 600;

  border-bottom: 2px solid var(--accent);

  font-size: 0.95rem;

}



table td {

  padding: 1.25rem 1.5rem;

  border-bottom: 1px solid rgba(255, 191, 0, 0.2);

  color: var(--secondary);

  font-size: 0.9rem;

}



table tbody tr:hover {

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

}



table tbody tr.highlight-row:hover {

  background: rgba(255, 191, 0, 0.1);

}



table td strong {

  color: var(--secondary);

  font-weight: 600;

}



/* Postup realizace */

.postup-section {

  padding: 6rem 2rem;

  background: var(--primary);

}



.postup-timeline {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

  gap: 2rem;

  margin-top: 3rem;

}



.postup-item {

  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));

  padding: 2rem;

  border-radius: 15px;

  border-left: 4px solid var(--accent);

  transition: all 0.3s ease;

  text-align: center;

}



.postup-item:hover {

  transform: translateY(-5px);

  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.05));

  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);

}



.postup-number {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 50px;

  height: 50px;

  background: var(--accent);

  color: var(--secondary);

  border-radius: 50%;

  font-size: 1.5rem;

  font-weight: 700;

  margin-bottom: 1rem;

}



.postup-item h3 {

  font-size: 1.15rem;

  color: var(--secondary);

  margin-bottom: 0.75rem;

  font-weight: 600;

}



.postup-item p {

  color: var(--secondary);

  font-size: 0.9rem;

  line-height: 1.6;

}



/* Tipy a inspirace */

.tipy-section {

  padding: 6rem 2rem;

  background: var(--primary);

}



.tipy-grid {

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

  gap: 2rem;

  margin-top: 3rem;

}



.tip-card {

  background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));

  padding: 2rem;

  border-radius: 15px;

  transition: all 0.3s ease;

  border: 1px solid rgba(255, 191, 0, 0.2);

}



.tip-card:hover {

  transform: translateY(-8px);

  border-color: rgba(255, 191, 0, 0.5);

  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.05));

  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);

}



.tip-number {

  display: inline-block;

  background: var(--accent);

  color: var(--secondary);

  padding: 0.5rem 1rem;

  border-radius: 20px;

  font-size: 0.85rem;

  font-weight: 600;

  margin-bottom: 1rem;

}



.tip-card h3 {

  font-size: 1.15rem;

  color: var(--secondary);

  margin-bottom: 0.75rem;

  font-weight: 600;

}



.tip-card p {

  color: var(--secondary);

  font-size: 0.9rem;

  line-height: 1.6;

}



/* Responzivní design */

@media (max-width: 1024px) {

  .types-grid,

  .normy-grid,

  .tipy-grid {

    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

    gap: 1.5rem;

  }



  .srovnani-table {

    font-size: 0.85rem;

  }



  table th,

  table td {

    padding: 0.75rem 0.5rem;

  }

}



@media (max-width: 768px) {

  .zabradli-intro,

  .zabradli-types,

  .bezpecnost-section,

  .srovnani-materialu,

  .postup-section,

  .tipy-section {

    padding: 4rem 1.5rem;

  }



  .intro-features,

  .types-grid,

  .normy-grid,

  .tipy-grid {

    grid-template-columns: 1fr;

    gap: 1.5rem;

  }



  .type-card,

  .tip-card {

    padding: 1.5rem;

  }



  .norma-card {

    padding: 1.5rem;

  }



  .postup-timeline {

    grid-template-columns: 1fr;

  }



  table {

    font-size: 0.75rem;

  }



  table th,

  table td {

    padding: 0.5rem 0.25rem;

  }

}



@media (max-width: 480px) {

  .zabradli-intro,

  .zabradli-types,

  .bezpecnost-section,

  .srovnani-materialu,

  .postup-section,

  .tipy-section {

    padding: 2.5rem 1rem;

  }



  .type-icon {

    width: 60px;

    height: 60px;

  }



  .type-card h3,

  .tip-card h3 {

    font-size: 1rem;

  }



  .norma-card {

    padding: 1rem;

  }



  .norma-number {

    font-size: 1.3rem;

  }



  .postup-number {

    width: 40px;

    height: 40px;

    font-size: 1.2rem;

  }

}