/* ===================== */
/* RESPONSYWNOŚĆ - ZKONSOLIDOWANA */

/* DUŻE EKRANY (do 1200px) - Wymuszenie własnego rzędu dla Głównego Partnera */
@media (max-width: 1200px) {
  .partner-main {
    flex: 0 0 100%; 
  }
}

/* TABLETY I MAŁE LAPTOPY (do 1024px) */
@media (max-width: 1024px) {
  .partners-section {
    gap: 30px;
  }
  
  .logo-default { display: none; }
  .logo-compact { display: block; }

  .bento-grid { grid-template-columns: repeat(2, 1fr); }
  .bento-live, .bento-latest { grid-column: span 2; grid-row: span 1; }
  .bento-upcoming { grid-column: span 2; }
  .bento-contact { grid-column: span 2; }
}

/* DUŻE TELEFONY / MAŁE TABLETY (do 850px) */
@media (max-width: 850px) {
  .partner-group.side-by-side {
    gap: 30px;
  }

  .thumbnails-container {
    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
    gap: 6px;
  }

  .thumbnails-container img {
    height: 60px;
  }

  .thumbnails-container:not(:has(> :nth-child(3))) {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  }

  .thumbnails-container:not(:has(> :nth-child(3))) img {
    height: 120px;
    width: 160px;
  }

  .thumbnails-container figcaption {
    font-size: 11px;
    padding: 4px 0;
  }

  .contact-page .container {
    flex-direction: column;
  }

  .contact-page .contact-info {
    text-align: center;
    margin-bottom: 30px; 
  }

  .contact-page .login-form {
    width: 100%;       
    max-width: 100%;   
    margin: 0 auto;    
    text-align: left;  
  }

  .add-page .login-form,
  .edit-page .login-form {
    width: 100%;
    max-width: 100%;
    margin: 0;
  }

  .login-form form {
    width: 100%;
  }

  .login-form input:not([type="checkbox"]):not([type="radio"]),
  .login-form textarea,
  .login-form select {
      width: 100%;
      max-width: 100%; 
      box-sizing: border-box; 
  }

  .container {
    width: 100%;
    padding: 10px;
  }

  .title-container-index{
    width: 100%;
  }

  .stat-box { flex: 1 1 calc(50% - 20px); }
  .pre-event-info { padding: 30px 15px; }

  .header-nav {
    gap: 20px; 
  }
}

/* DUŻE TELEFONY / MAŁE TABLETY (do 725px) */
@media (max-width: 725px) {
    .menu-toggle {
      display: block;
      margin-left: auto;
  }

  /* STYLIZACJA ROZWINIĘTEGO MENU */
  .nav-group {
      display: none;
      position: absolute; 
      top: 100%; /* Ustawia menu dokładnie pod nagłówkiem (100% wysokości nagłówka w dół) */
      left: 0;
      width: 100%;
      z-index: 999; /* Gwarantuje, że menu przykryje wszystkie inne elementy na stronie */
      margin-top: 0; /* Usunięto margin-top: 10px, bo top: 100% robi lepszą robotę */
      border-radius: 0 0 12px 12px; /* Zmieniono zaokrąglenie, aby góra ładnie przylegała do nagłówka */
      border-top: none; /* Zapobiega podwójnej linii między nagłówkiem a menu */
      box-sizing: border-box; /* Zabezpiecza przed wychodzeniem poza ekran */
      flex-direction: column;
      align-items: center;
      gap: 15px;
      background: var(--white); 
      backdrop-filter: blur(10px);     
      -webkit-backdrop-filter: blur(10px);
      box-shadow: var(--shadow-light);  
      border-bottom: 1px solid rgba(255, 255, 255, 0.3); 
      border-left: 1px solid rgba(255, 255, 255, 0.3); 
      border-right: 1px solid rgba(255, 255, 255, 0.3); 
      padding: 20px 0;
      animation: slideIn 0.3s ease-out;
  }

  .nav-group.active {
      display: flex;
  }
}

/* POPRAWKA DLA NAGŁÓWKA FORMULARZA - Zapobieganie nachodzeniu na tytuł */
@media (max-width: 650px) {
    .page-title-row {
        flex-direction: column;
        align-items: flex-start; /* Wyrównuje przycisk i tytuł do lewej */
        gap: 15px;
        min-height: auto;
    }

    .page-title-row .btn,
    .page-title-row .btn-back,
    .page-title-row .btn-back-med {
        position: relative; /* Wyłącza 'wyjęcie' z normalnego układu */
       
    }
}

/* SMARTFONY (do 600px) */
@media (max-width: 600px) {
  .partners-section {
    gap: 20px; /* ZMIANA: Mniejszy odstęp pionowy między głównymi blokami sekcji na mobile */
  }

  /* Skalowanie logo na telefonach */
  .logo-wrapper.large {
    max-width: 240px; 
  }

  .logo-wrapper.small {
    max-width: 85px; 
  }
  
  .logos-row, 
  .logos-row-2 {
    gap: 10px 15px; /* ZMIANA: zagęszczenie wierszy w pionie (10px góra/dół, 15px lewo/prawo) */
  }

  .partner-group.side-by-side {
    flex-direction: column; 
    align-items: center;
    gap: 15px; /* ZMIANA: Zmniejszony odstęp między sub-grupami na mobile */
  }

  .logo-caption {
    font-size: 14px;
  }
  
  .partner-main .logo-caption {
    font-size: 18px;
  }

  /* Istniejące style dla nawigacji / nagłówka */
  .header-inner {
      flex-wrap: wrap;
      padding: 5px 15px;
      height: auto; 
  }

  .header-nav {
      flex-direction: column;
      gap: 15px;
      width: 100%;
      text-align: center;
  }

  .header-nav .nav-link {
      display: block;
      width: 100%;
      padding: 8px 0;
      font-size: 18px;
  }

  .header-languages {
      margin-top: 10px;
      background: rgba(255,255,255,0.5); 
      padding: 5px 15px;
      border-radius: 20px;
  }

  .footer-inner {
      display: flex;           /* Aktywuje flexboxa */
      flex-direction: column;  /* Układa tekst i linki jeden pod drugim */
      align-items: center;     /* Wyśrodkowuje elementy */
      gap: 12px;               /* Daje ładny, równy odstęp między elementami */
      padding: 15px 0;
  }
  
  .main-footer .footer-sep {
      display: none !important;
  }
  /* Kompaktowanie sekcji wydarzenia na telefonach */
  .event-section {
    padding: 15px;
    margin-bottom: 25px;
    border-radius: 12px;
  }

  /* Zmniejszenie nagłówka nazwy wydarzenia */
  .event-section .full-width label {
    font-size: 13px;
  }

  .event-section .full-width input[type="text"] {
    font-size: 18px;
    padding: 14px 15px;
  }

  /* Zmniejszenie nagłówka i odstępów dla kategorii */
  .event-section h2 {
    margin-top: 25px;
    font-size: 16px;
    padding-bottom: 8px;
  }

  .category-row {
    gap: 12px;
    padding: 10px 0;
  }
  
  .bento-grid { grid-template-columns: 1fr; }
  .bento-item { grid-column: span 1 !important; grid-row: auto !important; }

  .hero-logo {
    margin: 0 auto 0.2rem auto;
    padding: 5px 10px;
    border-radius: 25px;
  }

  /* ======================================================= */
  .hero-title-wrapper {
      aspect-ratio: auto; /* Usuwamy sztywne proporcje, które zgniatają kontener */
      padding: 40px 15px; /* Naturalny odstęp definiujący wysokość */
      min-height: 130px;
  }

  .hero-title {
      white-space: normal; /* POZWALA NA ŁAMANIE TEKSTU - krytyczne na mobile! */
      font-size: clamp(1.4rem, 6vw, 1.8rem); /* Lepsze skalowanie fontu */
      word-wrap: break-word;
      line-height: 1.2;
  }

  .hero-logo {
      max-width: 75%; /* Zwiększenie czytelności logo na małym ekranie */
      max-height: none;
      margin-bottom: 15px;
  }

  .bento-item {
      padding: 20px; /* Zmniejszamy padding, aby odzyskać przestrzeń (z 30px) */
  }

  .bento-item h2 {
      font-size: 20px; /* Delikatnie mniejsze nagłówki na małych ekranach */
  }

  .bento-icon {
      font-size: 60px; /* Mniejsza ikona w tle */
      right: -5px; /* Lepsze ułożenie zmniejszonej ikony */
      bottom: -5px;
  }

  .bento-cat-row, 
  .bento-cat-header {
      flex-wrap: wrap; /* Pozwala zrzucić czas/datę do nowej linii, gdy brakuje miejsca */
      gap: 6px;
  }

  .bento-cat-row .cat-time,
  .bento-cat-header .cat-time {
      margin-left: 0; /* Resetujemy margines automatyczny */
      width: 100%; /* Wymuszamy przeniesienie pod tagi (badge) */
      font-size: 13px;
      margin-top: 2px;
  }

  /* Zapobiega nachodzeniu badge na małych ekranach */
  .bento-badge {
      top: 15px;
      right: 15px;
      font-size: 10px;
      padding: 5px 10px;
      position: relative;     /* Wyłączamy pozycjonowanie absolutne */
      top: auto;              /* Resetujemy odgórne przesunięcie */
      right: auto;            /* Resetujemy boczne przesunięcie */
      align-self: flex-start; /* Wyrównujemy do lewej (lub zmień na center) */
      margin-bottom: 12px;    /* Odpychamy tytuł h2 w dół */
      display: inline-block;
  }

  .bento-item h2 {
      margin-top: 0;          /* Upewniamy się, że h2 nie dodaje zbędnego odstępu */
  }
}

/* Prosta animacja rozwijania */
@keyframes slideIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* MAŁE TELEFONY (do 360px) */
@media (max-width: 360px) {
  /* Dodatkowe skalowanie dla bardzo małych ekranów */
  .logo-wrapper.large {
    max-width: 180px;
  }

  .logo-wrapper.small {
    max-width: 70px;
  }

  /* Istniejące style */
  body { overflow-x: hidden; }
  
  #pageScale {
      transform: none !important; /* Nadpisujemy błędne skalowanie */
      width: 100%;
  }
  
  h1 { font-size: 16px; }
  
  .btn {
    font-size: 16px;
    padding: 10px;
  }
  
  #resultsFrom {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  
  #resultsFrom label { font-size: 13px; }
  #resultsFrom input { font-size: 14px; }
  
  .container {
    padding: 12px;
    width: 98%;
  }

  /* Maksymalne upakowanie na bardzo małych ekranach */
  .event-section {
    padding: 12px;
  }

  .event-section .full-width input[type="text"] {
    font-size: 16px;
    padding: 12px;
  }
}