/**
 * Hero Section Styles
 * Myśl Konserwatywna - Portal Publicystyczny
 * 
 * Dynamiczny layout strony głównej z algorytmem ważności
 */

/* ===========================================
   HERO SECTION
   =========================================== */

.hero-section {
  padding: var(--space-4) 0; /* Reduced from space-6 (25% reduction) */
  background-color: var(--color-bg);
}

@media (min-width: 768px) {
  .hero-section {
    padding: var(--space-6) 0; /* Reduced from space-8 (25% reduction) */
  }
}

/* ===========================================
   HERO GRID
   =========================================== */

.hero-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3); /* Reduced from space-4 */
}

@media (min-width: 768px) {
  .hero-grid {
    gap: var(--space-4); /* Reduced from space-6 */
  }
}

/* ===========================================
   HERO ITEM
   =========================================== */

.hero-item {
  /* Mobile: pełna szerokość */
  flex: 0 0 100%;
  min-width: 0;
}

@media (min-width: 768px) {
  .hero-item {
    /* Desktop: dynamiczna szerokość z CSS variable */
    flex: 0 0 calc(var(--item-width, 50%) - var(--space-3));
  }
}

@media (min-width: 1024px) {
  .hero-item {
    flex: 0 0 calc(var(--item-width, 33.33%) - var(--space-4));
  }
}

.hero-item-link {
  display: block;
  height: 100%;
  text-decoration: none;
  color: inherit;
  transition: var(--transition-transform);
}

.hero-item-link:hover {
  transform: translateY(-4px);
}

.hero-item-link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 4px;
  border-radius: var(--radius-lg);
}

/* ===========================================
   HERO IMAGE
   =========================================== */

.hero-image {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-3); /* Reduced from space-4 */
}

.hero-image::before {
  content: '';
  display: block;
  padding-bottom: 42%; /* Reduced from 56.25% (16:9) to ~42% for 25% height reduction */
}

.hero-image img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slow);
}

.hero-item-link:hover .hero-image img {
  transform: scale(1.05);
}

/* Gradient overlay */
.hero-image::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.4), transparent);
  pointer-events: none;
}

/* ===========================================
   CONTENT TYPE BADGE
   =========================================== */

.content-type {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wider);
  border-radius: var(--radius-sm);
  z-index: 1;
}

.content-type--article {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
}

.content-type--news {
  background-color: var(--color-secondary);
  color: var(--color-text-inverse);
}

.content-type--video {
  background-color: var(--color-accent);
  color: var(--color-text-inverse);
}

.content-type--event {
  background-color: var(--color-success);
  color: var(--color-text-inverse);
}

/* ===========================================
   HERO CONTENT
   =========================================== */

.hero-content {
  padding: 0 var(--space-2);
}

.hero-title {
  font-family: var(--font-heading);
  font-size: var(--text-xl);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-tight);
  color: var(--color-primary);
  margin-bottom: var(--space-1); /* Reduced from space-2 */
  
  /* Limit to 3 lines */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (min-width: 768px) {
  .hero-title {
    font-size: var(--text-2xl);
  }
}

.hero-item-link:hover .hero-title {
  color: var(--color-secondary);
}

.hero-excerpt {
  font-size: var(--text-base);
  color: var(--color-text-light);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-2); /* Reduced from space-3 */
  
  /* Limit to 2 lines */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.hero-meta {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.hero-author {
  font-weight: var(--font-weight-medium);
}

.hero-date::before {
  content: '•';
  margin-right: var(--space-3);
}

/* ===========================================
   HERO FEATURED (Large item)
   =========================================== */

.hero-item--featured {
  flex: 0 0 100%;
}

.hero-item--featured .hero-image::before {
  padding-bottom: 34%; /* Reduced from 45% for 25% height reduction */
}

.hero-item--featured .hero-title {
  font-size: var(--text-2xl);
}

@media (min-width: 768px) {
  .hero-item--featured .hero-title {
    font-size: var(--text-3xl);
  }
}

@media (min-width: 1024px) {
  .hero-item--featured .hero-title {
    font-size: var(--text-4xl);
  }
}

/* ===========================================
   HERO TOPIC (Temat miesiąca)
   =========================================== */

/* ===========================================
   HERO VARIANTS
   =========================================== */

/* Dark hero section */
.hero-section--dark {
  background-color: var(--color-primary);
  padding: var(--space-6) 0; /* Reduced from space-8 to match main hero reduction */
}

.hero-section--dark .hero-title,
.hero-section--dark .hero-excerpt,
.hero-section--dark .hero-meta {
  color: var(--color-text-inverse);
}

.hero-section--dark .hero-item-link:hover .hero-title {
  color: var(--color-accent-light);
}

/* Hero with background image */
.hero-section--bg {
  position: relative;
  background-size: cover;
  background-position: center;
  padding: var(--space-12) 0; /* Reduced from space-16 for 25% reduction */
}

.hero-section--bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.8));
}

.hero-section--bg .container {
  position: relative;
  z-index: 1;
}

/* ===========================================
   HERO SKELETON (Loading state)
   =========================================== */

.hero-item--skeleton .hero-image {
  background-color: var(--color-bg-alt);
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.hero-item--skeleton .hero-title,
.hero-item--skeleton .hero-excerpt {
  background-color: var(--color-bg-alt);
  border-radius: var(--radius-sm);
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.hero-item--skeleton .hero-title {
  height: 1.5em;
  width: 80%;
}

.hero-item--skeleton .hero-excerpt {
  height: 1em;
  width: 100%;
  margin-top: var(--space-2);
}

@keyframes skeleton-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* ===========================================
   RESPONSIVE ADJUSTMENTS
   =========================================== */

/* On very small screens, reduce padding */
@media (max-width: 374px) {
  .hero-section {
    padding: var(--space-3) 0; /* Further reduced for very small screens */
  }
  
  .hero-grid {
    gap: var(--space-2); /* Reduced from space-3 */
  }
  
  .hero-title {
    font-size: var(--text-lg);
  }
}

/* Tablet landscape */
@media (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) {
  .hero-item {
    flex: 0 0 calc(50% - var(--space-3));
  }
}