/* Article Specific Styles */



:root {

  --article-text-color: #333333;

  --article-heading-color: #121212;

  --article-accent: #FFBF00;

  --article-light-bg: #f9f9f9;

  --article-border: #e0e0e0;

  --article-quote-bg: #f5f5f5;

}



/* Article Hero Section */

.article-hero {

  background: var(--primary);

  padding: 150px 0 50px;

  position: relative;

  width: 100%;

}



.article-hero::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.05));

  z-index: 1;

}



.article-hero .container {

  position: relative;

  z-index: 2;

  max-width: 900px;

  width: 100%;

  padding: 0 20px;

  margin: 0 auto;

}



.article-meta {

  display: flex;

  align-items: center;

  margin-bottom: 1.5rem;

  gap: 2rem;

}



.article-category {

  background: var(--accent);

  color: var(--secondary);

  padding: 0.3rem 1rem;

  border-radius: 50px;

  font-weight: 600;

  font-size: 0.9rem;

}



.article-date {

  color: var(--secondary);

  font-size: 0.9rem;

}



.article-hero h1 {

  font-size: 3rem;

  color: var(--secondary);

  margin-bottom: 1.5rem;

  line-height: 1.2;

}



.article-author {

  display: flex;

  align-items: center;

  gap: 1rem;

  margin-top: 2rem;

}



.author-info {

  display: flex;

  flex-direction: column;

}



.author-info span {

  font-size: 0.85rem;

  color: var(--secondary);

}



.author-info strong {

  font-size: 1rem;

  color: var(--secondary);

}



/* Article Content Styles */

.article-content {

  padding: 4rem 0;

  background: white;

  width: 100%;

}



.container {

  width: 100%;

  max-width: 1200px;

  margin: 0 auto;

  padding: 0 20px;

}



/* UPRAVENO: Změna layoutu po odstranění aside */

.content-wrapper {

  /* Odstraněno grid rozdělení */

  max-width: 800px; /* Omezená šířka pro lepší čitelnost */

  margin: 0 auto; /* Automatické vycentrování */

  padding: 0 20px;

  width: 100%;

  box-sizing: border-box;

}



.main-content {

  font-size: 1.1rem;

  line-height: 1.7;

  color: var(--article-text-color);

  width: 100%;

}



.article-image {

  margin-bottom: 2rem;

  border-radius: 10px;

  overflow: hidden;

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

  max-width: 800px; /* Omezení maximální šířky */

  width: 100%;

  margin-left: auto;

  margin-right: auto;

}



.article-image img {

  width: 100%;

  height: auto;

  max-height: 450px; /* Omezení maximální výšky */

  display: block;

  object-fit: cover;

}



.image-caption {

  display: block;

  text-align: center;

  padding: 0.75rem;

  font-size: 0.9rem;

  color: #666;

  font-style: italic;

}



.article-intro {

  font-size: 1.2rem;

  line-height: 1.7;

  color: #444;

  margin-bottom: 2rem;

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

  padding-left: 1.5rem;

  width: 100%;

  box-sizing: border-box;

}



.main-content h2 {

  font-size: 1.8rem;

  color: var(--article-heading-color);

  margin: 2.5rem 0 1rem;

  position: relative;

  padding-bottom: 0.5rem;

  width: 100%;

  box-sizing: border-box;

}



.main-content h2::after {

  content: '';

  position: absolute;

  bottom: 0;

  left: 0;

  width: 60px;

  height: 3px;

  background: var(--article-accent);

  border-radius: 2px;

}



.main-content h3 {

  font-size: 1.4rem;

  color: var(--article-heading-color);

  margin: 1.8rem 0 1rem;

  width: 100%;

  box-sizing: border-box;

}



.main-content p {

  margin-bottom: 1.5rem;

  width: 100%;

  box-sizing: border-box;

}



.main-content ul, .main-content ol {

  margin-bottom: 1.5rem;

  padding-left: 2rem;

  width: 100%;

  box-sizing: border-box;

}



.main-content li {

  margin-bottom: 0.5rem;

}



.feature-list {

  list-style: none;

  padding-left: 0;

}



.feature-list li {

  position: relative;

  padding-left: 2rem;

  margin-bottom: 1rem;

}



.feature-list li::before {

  content: '✓';

  position: absolute;

  left: 0;

  color: var(--article-accent);

  font-weight: bold;

}



.benefit-list {

  list-style: none;

  padding-left: 0;

}



.benefit-list li {

  position: relative;

  padding-left: 2rem;

  margin-bottom: 1rem;

}



.benefit-list li::before {

  content: '→';

  position: absolute;

  left: 0;

  color: var(--article-accent);

  font-weight: bold;

}



.info-box {

  background: var(--article-light-bg);

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

  padding: 1.5rem;

  margin: 2rem 0;

  border-radius: 0 5px 5px 0;

  width: 100%;

  box-sizing: border-box;

}



.info-box h3 {

  margin-top: 0;

  color: var(--article-heading-color);

  font-size: 1.3rem;

}



.testimonial {

  background: var(--article-quote-bg);

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

  padding: 1.5rem;

  margin: 2rem 0;

  font-style: italic;

  color: #444;

  width: 100%;

  box-sizing: border-box;

}



.testimonial cite {

  display: block;

  margin-top: 1rem;

  font-weight: 600;

  font-style: normal;

  text-align: right;

}



.data-table {

  width: 100%;

  border-collapse: collapse;

  margin: 2rem 0;

  font-size: 0.95rem;

  box-sizing: border-box;

  overflow-x: auto;

  display: block;

}



.data-table th, .data-table td {

  padding: 0.75rem 1rem;

  text-align: left;

  border-bottom: 1px solid var(--article-border);

}



.data-table th {

  background: var(--article-light-bg);

  font-weight: 600;

}



.data-table tr:nth-child(even) {

  background: var(--article-light-bg);

}



.table-caption {

  font-size: 0.85rem;

  color: #666;

  margin-top: -1.5rem;

  margin-bottom: 2rem;

  font-style: italic;

  width: 100%;

  box-sizing: border-box;

}



.image-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 1.5rem;

  margin: 2rem 0;

  width: 100%;

  box-sizing: border-box;

}



.grid-item {

  border-radius: 10px;

  overflow: hidden;

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

  position: relative;

}



.grid-item img {

  width: 100%;

  height: 200px;

  object-fit: cover;

  display: block;

}



.grid-item span {

  display: block;

  padding: 0.75rem;

  text-align: center;

  font-size: 0.9rem;

  background: white;

}



.cta-box {

  background: var(--article-accent);

  border-radius: 10px;

  padding: 2rem;

  margin: 3rem 0;

  text-align: center;

  color: var(--secondary);

  width: 100%;

  box-sizing: border-box;

}



.cta-box h3 {

  font-size: 1.5rem;

  color: var(--secondary);

  margin-bottom: 1rem;

}



.cta-button {

  display: inline-flex;

  align-items: center;

  gap: 0.75rem;

  padding: 1rem 2rem;

  background: var(--secondary);

  color: white;

  border-radius: 50px;

  text-decoration: none;

  font-weight: 600;

  margin-top: 1rem;

  transition: all 0.3s ease;

}



.cta-button:hover {

  transform: translateY(-3px);

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

}



.text-link {

  display: block;

  margin-top: 1rem;

  color: var(--secondary);

  text-decoration: underline;

}



.article-tags {

  display: flex;

  flex-wrap: wrap;

  gap: 0.5rem;

  margin-top: 3rem;

  padding-top: 1.5rem;

  border-top: 1px solid var(--article-border);

  width: 100%;

  box-sizing: border-box;

}



.tag {

  background: var(--article-light-bg);

  color: var(--article-text-color);

  padding: 0.3rem 0.8rem;

  border-radius: 50px;

  font-size: 0.8rem;

}



/* Article Navigation */

.article-navigation {

  background: var(--article-light-bg);

  padding: 2rem 0;

  border-top: 1px solid var(--article-border);

  border-bottom: 1px solid var(--article-border);

  width: 100%;

}





.prev-link, .next-link {

  text-decoration: none;

  padding: 1.5rem;

  background: white;

  border-radius: 10px;

  box-shadow: 0 5px 15px rgba(0,0,0,0.05);

  transition: all 0.3s ease;

  box-sizing: border-box;

}



.prev-link:hover, .next-link:hover {

  transform: translateY(-3px);

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

}



.prev-link {

  padding-left: 3rem;

  position: relative;

}



.next-link {

  padding-right: 3rem;

  position: relative;

  text-align: right;

}



.prev-link::before, .next-link::before {

  content: '←';

  position: absolute;

  font-size: 1.5rem;

  top: 50%;

  transform: translateY(-50%);

  color: var(--article-accent);

}



.prev-link::before {

  left: 1rem;

}



.next-link::before {

  content: '→';

  right: 1rem;

}



.prev-link span, .next-link span {

  display: block;

  font-size: 0.85rem;

  color: #777;

  margin-bottom: 0.5rem;

}



.prev-link h4, .next-link h4 {

  font-size: 1.1rem;

  color: var(--article-heading-color);

  margin: 0;

}



/* Responzivní úpravy */

@media (max-width: 900px) {

  .container {

    width: 100%;

    box-sizing: border-box;

  }

  

  .content-wrapper {

    max-width: 100%;

    padding: 0 15px;

  }

  

  .article-hero h1 {

    font-size: 2.5rem;

  }

}



/* Responzivní úpravy pro telefony */

@media (max-width: 768px) {

  .article-hero {

    padding: 120px 15px 40px;

  }

  

  .article-hero h1 {

    font-size: 2.2rem;

  }

  

  .article-meta {

    flex-direction: column;

    align-items: flex-start;

    gap: 0.75rem;

  }

  

  .main-content {

    font-size: 1rem;

  }

  

  .main-content h2 {

    font-size: 1.5rem;

  }

  

  .main-content h3 {

    font-size: 1.25rem;

  }

  

  .article-intro {

    font-size: 1.1rem;

    border-left-width: 3px;

    padding-left: 1rem;

  }

  

  .image-grid {

    grid-template-columns: 1fr;

  }

  

  .data-table {

    font-size: 0.8rem;

  }

  

  .data-table th, .data-table td {

    padding: 0.5rem;

  }

  

  .cta-box {

    padding: 1.5rem;

  }

  

  .cta-button {

    padding: 0.75rem 1.5rem;

    width: 100%;

    justify-content: center;

  }

  

  .nav-links {

    grid-template-columns: 1fr;

    gap: 1.5rem;

  }

  

  .prev-link, .next-link {

    text-align: left;

    padding-left: 3rem;

    width: 100%;

    box-sizing: border-box;

  }

  

  .next-link::before {

    left: 1rem;

    right: auto;

    content: '→';

  }

  

  .feature-list li, .benefit-list li {

    padding-left: 1.5rem;

  }

}



@media (max-width: 480px) {

  .article-hero h1 {

    font-size: 1.8rem;

  }

  

  .article-hero {

    padding-top: 100px;

  }

  

  .article-content {

    padding: 2rem 0;

  }

  

  .content-wrapper {

    padding: 0 10px;

  }

  

  .cta-box h3 {

    font-size: 1.3rem;

  }

  

  .article-image img {

    max-height: 350px;

  }

  

  .testimonial {

    padding: 1rem;

  }

  

  .info-box {

    padding: 1rem;

  }

}