:root {

  /* Pokračování v existujících barvách webu */

  --primary: linear-gradient(135deg, #B3B3B3, #808080);

  --secondary: #121212;

  --text: #2c3e50;

  --accent: #FFBF00;

  --accent-hover: #e6ac00;

  --light-gray: #f8fafc;

  --mid-gray: #e2e8f0;

  --dark-gray: #313131;

  --white: #ffffff;

  --shadow-light: 0 4px 6px -1px rgba(0, 0, 0, 0.1);

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

  --shadow-heavy: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  --border-radius: 16px;

  --border-radius-lg: 24px;

  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}



/* Modern Magazine Header */

.magazine-header {

  background: linear-gradient(135deg, var(--primary), rgba(255, 191, 0, 0.1));

  position: relative;

  padding: 180px 2rem 100px;

  text-align: center;

  overflow: hidden;

  border-bottom: 1px solid var(--mid-gray);

}



.magazine-header::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background: url('../imgs/obrazek_20.avif') center/cover no-repeat;

  opacity: 0.08;

  z-index: 1;

}



.magazine-header::after {

  content: '';

  position: absolute;

  bottom: 0;

  left: 0;

  width: 100%;

  height: 120px;

  background: linear-gradient(to top, var(--light-gray), transparent);

  z-index: 2;

}



.magazine-header-content {

  position: relative;

  z-index: 3;

  max-width: 900px;

  margin: 0 auto;

}



.magazine-header h1 {

  font-size: clamp(2.5rem, 5vw, 4rem);

  color: var(--secondary);

  margin-bottom: 1.5rem;

  font-weight: 800;

  letter-spacing: -0.02em;

  line-height: 1.1;

  background: linear-gradient(135deg, var(--secondary), var(--dark-gray));

  -webkit-background-clip: text;

  -webkit-text-fill-color: transparent;

  background-clip: text;

}



.magazine-header p {

  font-size: clamp(1.1rem, 2vw, 1.3rem);

  color: var(--text);

  margin-bottom: 2.5rem;

  line-height: 1.6;

  max-width: 600px;

  margin-left: auto;

  margin-right: auto;

}



.contact-cta {

  display: inline-flex;

  align-items: center;

  gap: 0.75rem;

  background: var(--accent);

  color: var(--secondary);

  padding: 1.25rem 2.5rem;

  border-radius: 50px;

  text-decoration: none;

  font-weight: 600;

  font-size: 1.1rem;

  transition: var(--transition);

  box-shadow: var(--shadow-medium);

  position: relative;

  overflow: hidden;

}



.contact-cta::before {

  content: '';

  position: absolute;

  top: 0;

  left: -100%;

  width: 100%;

  height: 100%;

  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);

  transition: left 0.5s;

}



.contact-cta:hover::before {

  left: 100%;

}



.contact-cta:hover {

  transform: translateY(-4px);

  box-shadow: var(--shadow-heavy);

  background: var(--accent-hover);

}



.contact-cta::after {

  content: '📞';

  font-size: 1.2rem;

  margin-left: 0.5rem;

}



/* Container */

.container {

  max-width: 1400px;

  margin: 0 auto;

  padding: 0 2rem;

}



/* Modern Section Headings */

section h2 {

  font-size: clamp(2rem, 4vw, 2.8rem);

  color: var(--secondary);

  text-align: center;

  margin-bottom: 4rem;

  position: relative;

  padding-bottom: 1.5rem;

  font-weight: 700;

  letter-spacing: -0.01em;

}



section h2::before {

  content: '';

  position: absolute;

  bottom: 0;

  left: 50%;

  transform: translateX(-50%);

  width: 60px;

  height: 4px;

  background: linear-gradient(90deg, var(--accent), var(--accent-hover));

  border-radius: 2px;

}



section h2::after {

  content: '';

  position: absolute;

  bottom: -8px;

  left: 50%;

  transform: translateX(-50%);

  width: 120px;

  height: 1px;

  background: var(--mid-gray);

}



/* Categories Section */

.categories-section {

  background: var(--white);

  padding: 6rem 0;

}



.categories-grid {

  display: grid;

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

  gap: 2rem;

}



.category-card {

  background: var(--light-gray);

  border-radius: var(--border-radius-lg);

  padding: 2.5rem 2rem;

  text-decoration: none;

  transition: var(--transition);

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

  border: 2px solid transparent;

  position: relative;

  overflow: hidden;

}



.category-card::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  height: 4px;

  background: linear-gradient(90deg, var(--accent), var(--accent-hover));

  transform: scaleX(0);

  transition: transform 0.3s ease;

}



.category-card:hover::before {

  transform: scaleX(1);

}



.category-card:hover {

  transform: translateY(-8px);

  box-shadow: var(--shadow-heavy);

  background: var(--white);

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

}



.category-icon {

  background: linear-gradient(135deg, var(--accent), var(--accent-hover));

  width: 80px;

  height: 80px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 1.5rem;

  font-size: 2rem;

  transition: var(--transition);

  box-shadow: var(--shadow-medium);

}



.category-card:hover .category-icon {

  transform: scale(1.1) rotate(5deg);

  box-shadow: var(--shadow-heavy);

}



.category-card h3 {

  font-size: 1.4rem;

  color: var(--secondary);

  margin-bottom: 1rem;

  font-weight: 600;

}



.category-card p {

  color: var(--text);

  font-size: 1rem;

  line-height: 1.6;

  opacity: 0.8;

}



/* Featured Article Section - KOMPAKTNÍ VERZE */

.featured-article {

  background: var(--light-gray);

  padding: 4rem 0; /* Sníženo z 6rem */

}



.featured-card {

  display: grid;

  grid-template-columns: 1fr 1.2fr; /* Upravený poměr */

  gap: 0;

  background: var(--white);

  border-radius: var(--border-radius-lg);

  overflow: hidden;

  box-shadow: var(--shadow-medium);

  transition: var(--transition);

  border: 2px solid transparent;

  max-height: 400px; /* Omezená výška */

}



.featured-card:hover {

  transform: translateY(-4px);

  box-shadow: var(--shadow-heavy);

  border-color: var(--accent);

}



.featured-image {

  position: relative;

  overflow: hidden;

  height: 400px; /* Fixní výška */

}



.featured-image img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.6s ease;

}



.featured-card:hover .featured-image img {

  transform: scale(1.05);

}



.featured-overlay {

  position: absolute;

  top: 1.5rem; /* Menší padding */

  left: 1.5rem;

}



.featured-content {

  padding: 2rem; /* Sníženo z 3rem */

  display: flex;

  flex-direction: column;

  justify-content: center;

  height: 400px; /* Fixní výška pro srovnání s obrázkem */

  overflow: hidden;

}



.featured-content h3 {

  font-size: 1.6rem; /* Sníženo z 2rem */

  color: var(--secondary);

  margin-bottom: 1rem; /* Sníženo z 1.5rem */

  line-height: 1.3;

  font-weight: 700;

  display: -webkit-box;

  -webkit-line-clamp: 2; /* Omezení na 2 řádky */

  -webkit-box-orient: vertical;

  overflow: hidden;

}



.featured-content p {

  font-size: 1rem; /* Sníženo z 1.1rem */

  color: var(--text);

  line-height: 1.6; /* Sníženo z 1.7 */

  margin-bottom: 1.5rem; /* Sníženo z 2rem */

  opacity: 0.9;

  display: -webkit-box;

  -webkit-line-clamp: 3; /* Omezení na 3 řádky */

  -webkit-box-orient: vertical;

  overflow: hidden;

}



.featured-meta {

  display: flex;

  gap: 1.5rem; /* Sníženo z 2rem */

  margin-bottom: 1.5rem; /* Sníženo z 2rem */

  font-size: 0.9rem; /* Sníženo z 0.95rem */

  color: #64748b;

}



.reading-time {

  display: flex;

  align-items: center;

  gap: 0.5rem;

}



.featured-cta {

  display: inline-flex;

  align-items: center;

  gap: 0.75rem;

  background: var(--accent);

  color: var(--secondary);

  padding: 0.75rem 1.5rem; /* Sníženo z 1rem 2rem */

  border-radius: 50px;

  text-decoration: none;

  font-weight: 600;

  font-size: 0.95rem; /* Sníženo */

  transition: var(--transition);

  align-self: flex-start;

}



.featured-cta:hover {

  background: var(--accent-hover);

  transform: translateX(4px);

}



/* Newsletter Section */

.newsletter-section {

  background: linear-gradient(135deg, var(--accent), var(--accent-hover));

  padding: 6rem 0;

  color: var(--secondary);

  position: relative;

  overflow: hidden;

}



.newsletter-section::before {

  content: '';

  position: absolute;

  top: -50%;

  right: -20%;

  width: 40%;

  height: 200%;

  background: radial-gradient(circle, rgba(255,255,255,0.1), transparent);

  border-radius: 50%;

  animation: float 8s ease-in-out infinite;

}



.newsletter-content {

  display: flex;

  align-items: center;

  gap: 4rem;

  position: relative;

  z-index: 2;

}



.newsletter-text {

  flex: 1.3;

}



.newsletter-text h2 {

  font-size: 2.4rem;

  margin-bottom: 1.5rem;

  color: var(--secondary);

  text-align: left;

  font-weight: 800;

}



.newsletter-text h2::before,

.newsletter-text h2::after {

  display: none;

}



.newsletter-text p {

  font-size: 1.1rem;

  margin-bottom: 1.5rem;

  line-height: 1.7;

  opacity: 0.9;

}



.contact-highlight {

  font-weight: 600;

  font-size: 1.2rem;

}



.phone-link {

  color: var(--secondary);

  text-decoration: underline;

  font-weight: 700;

  transition: var(--transition);

}



.phone-link:hover {

  opacity: 0.8;

}



.newsletter-form {

  flex: 1;

}



.newsletter-form form {

  display: flex;

  gap: 1rem;

  flex-direction: column;

}



.newsletter-form input {

  padding: 1.25rem 1.5rem;

  border: none;

  border-radius: 50px;

  font-size: 1rem;

  box-shadow: var(--shadow-medium);

  outline: none;

  transition: var(--transition);

}



.newsletter-form input:focus {

  box-shadow: var(--shadow-heavy);

  transform: translateY(-2px);

}



.newsletter-form .submit-btn {

  background: var(--secondary);

  color: var(--white);

  border: none;

  border-radius: 50px;

  padding: 1.25rem 2rem;

  font-weight: 600;

  font-size: 1.1rem;

  cursor: pointer;

  transition: var(--transition);

  box-shadow: var(--shadow-medium);

}



.newsletter-form .submit-btn:hover {

  transform: translateY(-2px);

  box-shadow: var(--shadow-heavy);

  background: var(--dark-gray);

}



/* Articles Grid with Modern Cards */

.recent-articles {

  padding: 6rem 0;

  background: var(--light-gray);

  position: relative;

}



.articles-grid {

  display: grid;

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

  gap: 2.5rem;

  margin-bottom: 4rem;

}



.article-card {

  background: var(--white);

  border-radius: var(--border-radius-lg);

  overflow: hidden;

  box-shadow: var(--shadow-light);

  transition: var(--transition);

  height: 100%;

  display: flex;

  flex-direction: column;

  position: relative;

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

}



.article-card::before {

  content: '';

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  height: 4px;

  background: linear-gradient(90deg, var(--accent), var(--accent-hover));

  opacity: 0;

  transition: var(--transition);

}



.article-card:hover::before {

  opacity: 1;

}



.article-card:hover {

  transform: translateY(-8px);

  box-shadow: var(--shadow-heavy);

  border-color: var(--accent);

}



.article-img {

  height: 240px;

  overflow: hidden;

  position: relative;

}



.article-img::after {

  content: '';

  position: absolute;

  bottom: 0;

  left: 0;

  right: 0;

  height: 50%;

  background: linear-gradient(to top, rgba(0,0,0,0.1), transparent);

  opacity: 0;

  transition: var(--transition);

}



.article-card:hover .article-img::after {

  opacity: 1;

}



.article-img img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);

}



.article-card:hover .article-img img {

  transform: scale(1.08);

}



.article-content {

  padding: 2rem;

  display: flex;

  flex-direction: column;

  flex: 1;

  position: relative;

}



.article-tag {

  background: linear-gradient(135deg, var(--accent), var(--accent-hover));

  color: var(--secondary);

  font-weight: 700;

  font-size: 0.8rem;

  padding: 0.5rem 1rem;

  border-radius: 50px;

  align-self: flex-start;

  margin-bottom: 1rem;

  text-transform: uppercase;

  letter-spacing: 0.5px;

  box-shadow: 0 2px 8px rgba(255, 191, 0, 0.3);

  position: relative;

}



/* Category-specific styling */

.article-tag.energia { background: linear-gradient(135deg, #10b981, #059669); }

.article-tag.design { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }

.article-tag.moderni { background: linear-gradient(135deg, #06b6d4, #0891b2); }

.article-tag.rady { background: linear-gradient(135deg, #f59e0b, #d97706); }

.article-tag.zahrada { background: linear-gradient(135deg, #22c55e, #16a34a); }

.article-tag.udrzba { background: linear-gradient(135deg, #ef4444, #dc2626); }



.article-content h3 {

  font-size: 1.4rem;

  margin-bottom: 1rem;

  color: var(--secondary);

  line-height: 1.4;

  font-weight: 700;

  transition: var(--transition);

}



.article-card:hover .article-content h3 {

  color: var(--accent);

}



.article-content p {

  color: var(--text);

  line-height: 1.7;

  margin-bottom: 2rem;

  font-size: 1rem;

  flex-grow: 1;

}



.article-footer {

  display: flex;

  justify-content: space-between;

  align-items: center;

  margin-top: auto;

  padding-top: 1rem;

  border-top: 1px solid var(--mid-gray);

}



.date {

  color: #64748b;

  font-size: 0.9rem;

  display: flex;

  align-items: center;

  gap: 0.5rem;

  font-weight: 500;

}



.date::before {

  content: '📅';

  font-size: 0.8rem;

}



.read-more {

  color: var(--accent);

  text-decoration: none;

  font-weight: 700;

  display: inline-flex;

  align-items: center;

  gap: 0.5rem;

  padding: 0.5rem 1rem;

  border-radius: 50px;

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

  transition: var(--transition);

  font-size: 0.9rem;

  text-transform: uppercase;

  letter-spacing: 0.5px;

}



.read-more::after {

  content: '→';

  font-size: 1.2rem;

  transition: transform 0.3s ease;

}



.read-more:hover {

  background: var(--accent);

  color: var(--secondary);

  transform: translateX(4px);

}



.read-more:hover::after {

  transform: translateX(4px);

}



/* Modern CTA Section */

.all-articles-cta {

  margin-top: 5rem;

  display: flex;

  justify-content: center;

  position: relative;

}



.call-cta {

  display: inline-flex;

  align-items: center;

  gap: 1rem;

  padding: 1.5rem 3rem;

  background: linear-gradient(135deg, var(--secondary), var(--dark-gray));

  color: var(--white);

  border: none;

  border-radius: 50px;

  font-size: 1.2rem;

  font-weight: 700;

  cursor: pointer;

  transition: var(--transition);

  text-decoration: none;

  box-shadow: var(--shadow-medium);

  position: relative;

  overflow: hidden;

}



.call-cta::before {

  content: '';

  position: absolute;

  top: 0;

  left: -100%;

  width: 100%;

  height: 100%;

  background: linear-gradient(90deg, transparent, rgba(255, 191, 0, 0.3), transparent);

  transition: left 0.6s;

}



.call-cta:hover::before {

  left: 100%;

}



.call-cta:hover {

  transform: translateY(-4px) scale(1.02);

  box-shadow: var(--shadow-heavy);

}



.call-cta svg {

  width: 28px;

  height: 28px;

  transition: var(--transition);

  color: var(--accent);

  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.2));

}



.call-cta:hover svg {

  transform: rotate(-15deg) scale(1.1);

  color: var(--white);

}



/* Floating Action Elements */

@keyframes float {

  0%, 100% { transform: translateY(0px) rotate(0deg); }

  50% { transform: translateY(-20px) rotate(10deg); }

}



/* Enhanced Mobile Responsiveness */

@media (max-width: 1024px) {

  .articles-grid {

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

    gap: 2rem;

  }

  

  .categories-grid {

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

  }

  

  .featured-card {

    grid-template-columns: 1fr;

    max-height: none; /* Vypnutí omezení výšky na mobilech */

  }

  

  .featured-image {

    height: 250px; /* Menší výška na tabletu */

  }

  

  .featured-content {

    height: auto; /* Auto výška na mobilech */

    padding: 2rem;

  }

  

  .featured-content h3 {

    -webkit-line-clamp: none; /* Zrušení omezení řádků na mobilech */

  }

  

  .featured-content p {

    -webkit-line-clamp: none; /* Zrušení omezení řádků na mobilech */

  }

  

  .newsletter-content {

    flex-direction: column;

    gap: 3rem;

  }

  

  .newsletter-form form {

    flex-direction: row;

  }

  

  .magazine-header {

    padding: 140px 1.5rem 80px;

  }

}



@media (max-width: 768px) {

  .container {

    padding: 0 1.5rem;

  }

  

  .magazine-header {

    padding: 120px 1rem 60px;

  }

  

  .articles-grid {

    grid-template-columns: 1fr;

    gap: 1.5rem;

  }

  

  .categories-grid {

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

    gap: 1.5rem;

  }

  

  .article-content {

    padding: 1.5rem;

  }

  

  .featured-content {

    padding: 1.5rem; /* Menší padding na mobilech */

  }

  

  .featured-image {

    height: 200px; /* Ještě menší výška na mobilech */

  }

  

  .newsletter-form form {

    flex-direction: column;

  }

  

  .call-cta {

    padding: 1rem 2rem;

    font-size: 1rem;

  }

  

  section h2 {

    margin-bottom: 3rem;

  }

}



@media (max-width: 480px) {

  .magazine-header {

    padding: 100px 1rem 50px;

  }

  

  .contact-cta {

    padding: 1rem 1.5rem;

    font-size: 1rem;

  }

  

  .article-content h3 {

    font-size: 1.2rem;

  }

  

  .featured-content h3 {

    font-size: 1.4rem; /* Menší na mobilech */

  }

  

  .category-card {

    padding: 2rem 1.5rem;

  }

  

  .call-cta {

    padding: 0.75rem 1.5rem;

    font-size: 0.9rem;

    gap: 0.75rem;

  }

  

  .call-cta svg {

    width: 24px;

    height: 24px;

  }

}



/* SEO-friendly structured content indicators */

.article-card[data-category="energia"] { border-left: 4px solid #10b981; }

.article-card[data-category="design"] { border-left: 4px solid #8b5cf6; }

.article-card[data-category="moderni"] { border-left: 4px solid #06b6d4; }

.article-card[data-category="rady"] { border-left: 4px solid #f59e0b; }

.article-card[data-category="zahrada"] { border-left: 4px solid #22c55e; }

.article-card[data-category="udrzba"] { border-left: 4px solid #ef4444; }



/* Performance optimizations */

.article-img img {

  will-change: transform;

}



.article-card {

  will-change: transform, box-shadow;

}



/* Accessibility improvements */

.read-more:focus,

.call-cta:focus,

.contact-cta:focus,

.featured-cta:focus,

.category-card:focus {

  outline: 2px solid var(--accent);

  outline-offset: 2px;

}



/* Print styles for SEO */

@media print {

  .magazine-header,

  .call-cta,

  .contact-cta,

  .newsletter-section {

    background: none !important;

    color: black !important;

  }

  

  .article-card {

    break-inside: avoid;

    box-shadow: none !important;

    border: 1px solid #ccc;

  }

}