@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

@layer base {
  html {
    scroll-behavior: smooth;
  }
  
  body {
    @apply font-sans text-gray-800 bg-gray-50;
  }
  
  /* Dodatkowe odstępy dla nagłówków */
  h1 {
    @apply mb-8;
  }
  
  h2 {
    @apply mb-6;
  }
  
  h3 {
    @apply mb-4;
  }
}

@layer components {
  .btn-primary {
    @apply inline-flex items-center px-6 py-3 bg-blue-600 text-white font-semibold rounded-lg shadow-lg hover:bg-blue-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;
  }
  
  .btn-secondary {
    @apply inline-flex items-center px-6 py-3 bg-white text-blue-600 font-semibold rounded-lg border-2 border-blue-600 hover:bg-blue-50 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2;
  }
  
  .card {
    @apply bg-white rounded-xl shadow-lg border border-gray-200 overflow-hidden;
  }
  
  /* Większe odstępy między sekcjami */
  .section-padding {
    @apply py-24 px-4 sm:px-6 lg:px-8;
  }
  
  .section-padding-large {
    @apply py-32 px-4 sm:px-6 lg:px-8;
  }
  
  .section-padding-small {
    @apply py-20 px-4 sm:px-6 lg:px-8;
  }
  
  .container-spacing {
    @apply max-w-7xl mx-auto;
  }
  
  /* Większe odstępy między sekcjami */
  .section-spacing {
    @apply mb-24;
  }
  
  .section-spacing-large {
    @apply mb-32;
  }
  
  /* Dodatkowe klasy dla odstępów */
  .content-spacing {
    @apply mb-12;
  }
  
  .content-spacing-large {
    @apply mb-16;
  }
  
  .element-spacing {
    @apply mb-8;
  }
  
  .element-spacing-large {
    @apply mb-12;
  }
  
  /* Podstawowe style dla article-content (zastępuje prose) */
  .article-content {
    @apply text-gray-800 leading-relaxed;
  }
  
  .article-content h1 {
    @apply text-3xl font-bold mb-6 text-gray-900;
  }
  
  .article-content h2 {
    @apply text-2xl font-bold mb-4 text-gray-900;
  }
  
  .article-content h3 {
    @apply text-xl font-bold mb-3 text-gray-900;
  }
  
  .article-content p {
    @apply mb-4;
  }
  
  .article-content ul {
    @apply mb-4 list-disc list-inside;
  }
  
  .article-content li {
    @apply mb-1;
  }
  
  .article-content img {
    @apply rounded-lg shadow-lg mb-6 max-w-full h-auto;
  }
  
  /* Flexbox styles dla obrazów obok tekstu */
  .article-content .flex-row {
    display: flex !important;
    flex-direction: row !important;
    gap: 2rem !important;
    margin-bottom: 3rem !important;
    align-items: stretch !important;
    width: 100% !important;
    min-height: 200px !important;
    border: 2px solid red !important;
    background-color: #fef2f2 !important;
  }

  .article-content .flex-row.reverse {
    flex-direction: row-reverse !important;
  }

  .article-content .flex-row > div:first-child {
    max-width: 45% !important;
    width: 45% !important;
    height: 200px !important;
    background-color: #e5e7eb !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #6b7280 !important;
    font-weight: bold !important;
  }

  .article-content .flex-row > div:last-child {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    border: 2px solid blue !important;
    background-color: #eff6ff !important;
    padding: 1rem !important;
  }

  @media (max-width: 768px) {
    .article-content .flex-row, .article-content .flex-row.reverse {
      flex-direction: column !important;
    }

    .article-content .flex-row > div:first-child {
      max-width: 100% !important;
      width: 100% !important;
    }
  }
}