/* ===== ZÁVĚSNÉ BALKONY - DODATEČNÉ STYLY ===== */



.zavesne-section {

  padding: 6rem 2rem;

  background: var(--primary);

}



.zavesne-container {

  max-width: 1200px;

  margin: 0 auto;

}



.zavesne-info {

  display: grid;

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

  gap: 2rem;

  margin-top: 3rem;

}



.info-block {

  display: flex;

  gap: 1.5rem;

  padding: 2rem;

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

  border-radius: 15px;

  transition: all 0.3s ease;

}



.info-block:hover {

  transform: translateY(-5px);

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

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

}



.info-icon {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 60px;

  height: 60px;

  background: var(--accent);

  border-radius: 12px;

  color: var(--secondary);

  flex-shrink: 0;

}



.info-content h3 {

  font-size: 1.25rem;

  color: var(--secondary);

  margin-bottom: 0.75rem;

  font-weight: 600;

}



.info-content p {

  color: var(--secondary);

  line-height: 1.6;

  font-size: 0.95rem;

}



/* Výhody sekce */

.vyhody-section {

  padding: 6rem 2rem;

  background: var(--primary);

}



.vyhody-container {

  max-width: 1200px;

  margin: 0 auto;

}



.vyhody-grid {

  display: grid;

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

  gap: 2rem;

  margin-top: 3rem;

}



.vyhoda-card {

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

  padding: 2.5rem;

  border-radius: 15px;

  text-align: center;

  transition: all 0.3s ease;

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

  position: relative;

  overflow: hidden;

}



.vyhoda-card::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 4px;

  background: var(--accent);

  transform: scaleX(0);

  transform-origin: left;

  transition: transform 0.3s ease;

}



.vyhoda-card:hover::before {

  transform: scaleX(1);

}



.vyhoda-card:hover {

  transform: translateY(-10px);

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

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

}



.vyhoda-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;

}



.vyhoda-card h3 {

  font-size: 1.2rem;

  color: var(--secondary);

  margin-bottom: 1rem;

  font-weight: 600;

}



.vyhoda-card p {

  color: var(--secondary);

  line-height: 1.6;

  font-size: 0.95rem;

}



/* Specifikace sekce */

.specifikace-section {

  padding: 6rem 2rem;

  background: var(--primary);

}



.specifikace-container {

  max-width: 1200px;

  margin: 0 auto;

}



.parametry-grid {

  display: grid;

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

  gap: 2rem;

  margin-top: 3rem;

}



.parametr-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;

}



.parametr-card:hover {

  transform: translateY(-5px);

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

}



.parametr-card h3 {

  font-size: 1.1rem;

  font-weight: 600;

  margin-bottom: 0.75rem;

  color: var(--secondary);

}



.parametr-value {

  font-size: 1.5rem;

  font-weight: 700;

  color: var(--secondary);

  margin-bottom: 0.5rem;

}



.parametr-desc {

  font-size: 0.9rem;

  color: var(--secondary);

  line-height: 1.5;

}



/* Timeline - Fáze realizace */

.faze-section {

  padding: 6rem 2rem;

  background: var(--primary);

}



.faze-container {

  max-width: 1000px;

  margin: 0 auto;

}



.timeline {

  position: relative;

  padding: 3rem 0;

}



.timeline::before {

  content: '';

  position: absolute;

  left: 50%;

  transform: translateX(-50%);

  width: 3px;

  height: 100%;

  background: var(--accent);

}



.timeline-item {

  margin-bottom: 3rem;

  position: relative;

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 2rem;

  align-items: center;

}



.timeline-item:nth-child(even) .timeline-content {

  grid-column: 1;

}



.timeline-item:nth-child(odd) .timeline-content {

  grid-column: 2;

}



.timeline-marker {

  position: absolute;

  left: 50%;

  transform: translateX(-50%);

  width: 50px;

  height: 50px;

  background: var(--accent);

  border: 3px solid var(--primary);

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-weight: 700;

  color: var(--secondary);

  font-size: 1.2rem;

  z-index: 2;

}



.timeline-content {

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

  padding: 2rem;

  border-radius: 12px;

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

  transition: all 0.3s ease;

}



.timeline-content:hover {

  transform: translateX(-5px);

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

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

}



.timeline-content h3 {

  font-size: 1.3rem;

  color: var(--secondary);

  margin-bottom: 0.75rem;

  font-weight: 600;

}



.timeline-content p {

  color: var(--secondary);

  line-height: 1.6;

  font-size: 0.95rem;

}



/* Porovnání tabulka */

.porovnani-section {

  padding: 6rem 2rem;

  background: var(--primary);

}



.porovnani-container {

  max-width: 1200px;

  margin: 0 auto;

}



.porovnani-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);

}



table td {

  padding: 1.25rem 1.5rem;

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

  color: var(--secondary);

}



table tbody tr:hover {

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

}



table td.highlight {

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

  font-weight: 500;

  color: var(--accent);

}



table strong {

  color: var(--secondary);

  font-weight: 600;

}



/* Responzivní design */

@media (max-width: 1024px) {

  .timeline::before {

    display: none;

  }



  .timeline-item {

    grid-template-columns: 1fr;

    margin-bottom: 2rem;

  }



  .timeline-item:nth-child(even) .timeline-content,

  .timeline-item:nth-child(odd) .timeline-content {

    grid-column: 1;

  }



  .timeline-marker {

    left: 0;

    transform: translateX(0);

  }



  .timeline-content {

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

    margin-left: 70px;

  }

}



@media (max-width: 768px) {

  .zavesne-section,

  .vyhody-section,

  .specifikace-section,

  .faze-section,

  .porovnani-section {

    padding: 4rem 1.5rem;

  }



  .zavesne-info,

  .vyhody-grid,

  .parametry-grid {

    grid-template-columns: 1fr;

    gap: 1.5rem;

  }



  .info-block {

    flex-direction: column;

    text-align: center;

  }



  .info-icon {

    margin: 0 auto;

  }



  .vyhoda-card {

    padding: 1.5rem;

  }



  .porovnani-table {

    font-size: 0.85rem;

  }



  table th,

  table td {

    padding: 0.75rem 0.5rem;

  }

}



@media (max-width: 480px) {

  .zavesne-section,

  .vyhody-section,

  .specifikace-section,

  .faze-section,

  .porovnani-section {

    padding: 2.5rem 1rem;

  }



  .vyhoda-card {

    padding: 1rem;

  }



  .vyhoda-number {

    width: 40px;

    height: 40px;

    font-size: 1.2rem;

  }



  .parametr-card {

    padding: 1.5rem;

  }



  table {

    font-size: 0.75rem;

  }



  table th,

  table td {

    padding: 0.5rem 0.25rem;

  }

}