/**
 * JCWS Expandable Block - Filter System UI
 *
 * Stylizacja rozwijanego bloku filtrowania z sektorami i markami.
 * Zachowuje obecny design system z drobnymi ulepszeniami.
 *
 * Używane na:
 * - Strony kategorii produktów (is_product_category)
 *
 * @package JCWS_Jamipak_Theme
 * @version 2.0.0
 * @based-on JCWS Design Pattern Library v1.2.3
 *
 * BREAKPOINTS - Ustandaryzowane zgodnie z konwencją
 * ============================================
 * 1. Desktop > 1280px
 * 2. Laptop 960px - 1280px
 * 3. Tablet 640px - 960px
 * 4. Mobile < 640px
 */

/* ==========================================================================
   TAG LAYOUT WRAPPER (Category Showcase)
   ========================================================================== */

/* Główny wrapper - flexbox layout */
.jcws-tag-layout-wrapper {
  display: flex;
  gap: var(--space-lg);
  margin: var(--space-lg) 0;
}

/* Boczny header "Wybierz branżę?" */
.jcws-tag-sidebar-header {
  align-items: center;
  background: linear-gradient(135deg,
    #a5cf8a 0%,              /* jasny zielony */
    var(--secondary) 50%,    /* #74b44f */
    #a5cf8a 100%
  );
  background-size: 400% 400%;
  animation: jcws-tag-gradient-shift 8s ease infinite;
  border: 2px solid var(--success);
  border-radius: var(--radius-md);
  display: flex;
  flex: 0 0 180px;
  justify-content: center;
  overflow: hidden;
  padding: calc(var(--space-xl) + var(--space-sm)) var(--space-lg);
  position: relative;
  text-align: center;
}

.jcws-tag-sidebar-header::before {
  animation: jcws-tag-shimmer 10s ease-in-out infinite;
  background:
    radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.25) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(255, 255, 255, 0.15) 0%, transparent 50%),
    radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
  content: '';
  height: 200%;
  left: -50%;
  pointer-events: none;
  position: absolute;
  top: -50%;
  width: 200%;
}

@keyframes jcws-tag-gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes jcws-tag-shimmer {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.6; }
}

.jcws-tag-sidebar-header h4 {
  color: var(--white);
  font-size: var(--h4-font-size);
  line-height: var(--leading-tight);
  margin: 0;
  padding-bottom: 0;
  position: absolute;
  top: var(--space-sm);
  z-index: 1;
}

/* Kontener siatki tagów */
.jcws-tag-grid-container {
  display: grid;
  flex: 1;
  gap: var(--space-lg);
  grid-template-columns: repeat(3, 1fr);
}

/* Pojedynczy element tagu */
.jcws-tag-item {
  background: var(--white);
  border: 2px solid var(--success);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
  transition: var(--transition);
}

.jcws-tag-item:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-5px);
}

/* Obrazek */
.jcws-tag-image {
  background-color: var(--bg-light);
  height: 200px;
  overflow: hidden;
  width: 100%;
}

.jcws-tag-image img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

/* Tytuł branży */
.jcws-tag-title {
  color: var(--text);
  font-size: var(--font-lg);
  font-weight: 600;
  margin: 0;
  padding: var(--space-md) var(--space-sm) var(--space-sm);
  text-align: center;
}

/* Wrapper przycisku */
.jcws-tag-button-wrapper {
  margin-top: auto;
  padding: 0 var(--space-lg) var(--space-lg);
}

/* Przycisk "Zobacz produkty" */
.jcws-tag-button {
  background-color: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  display: block;
  font-size: var(--font-sm);
  padding: var(--space-sm) var(--space-lg);
  text-align: center;
  text-decoration: none;
  transition: var(--transition);
  width: 100%;
}

.jcws-tag-button:hover {
  background-color: var(--bg-light);
  border-color: var(--success);
}

/* ==========================================================================
   EXPANDABLE BLOCK (Filter System)
   ========================================================================== */

.jcws_expandable_block {
  background: var(--jcws-bg);
  border: 2px solid var(--jcws-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--jcws-shadow);
  box-sizing: border-box;
  font-family: inherit;
  margin: 0 var(--clamp-padding-value) var(--space-md);
  padding: var(--space-sm) var(--clamp-padding-value);
  position: relative;
  transition: var(--transition);
  width: auto;
}

.jcws_expandable_block:hover {
  border-color: var(--jcws-border-strong);
  box-shadow: var(--jcws-shadow-strong);
}

.jcws_selected_brand {
  color: var(--jcws-accent) !important;
  font-weight: 800;
}

/* Toggle Button */
.jcws_expand_toggle {
  background: var(--jcws-accent);
  border: none;
  border-radius: var(--radius-md);
  box-shadow: var(--jcws-shadow);
  color: var(--white);
  cursor: pointer;
  font-family: 'Ubuntu Sans Regular', sans-serif;
  font-size: var(--font-base) !important;
  font-weight: 700;
  margin-bottom: 0;
  padding: var(--space-sm) var(--space-md);
  text-align: center;
  transition: var(--transition-slow), var(--transition);
  width: 100%;
}

.jcws_expand_toggle:hover,
.jcws_expand_toggle:focus {
  background: var(--jcws-accent-80);
  box-shadow: var(--jcws-shadow-strong);
  outline: none;
  transform: translateY(-1px);
}

.jcws_expand_toggle:focus-visible {
  outline: var(--jcws-focus-outline);
  outline-offset: var(--jcws-focus-offset);
}

/* Expandable Content */
.jcws_expand_content[hidden] {
  display: none !important;
}

.jcws_expand_content {
  border-top: 1px solid var(--jcws-border);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xl);
  overflow: hidden;
  padding-top: var(--space-xl);
  position: relative;
  transition: max-height 0.3s ease;
}

.jcws_expand_left,
.jcws_expand_right {
  box-sizing: border-box;
  flex: 1 1 45%;
  min-width: 280px;
}

.jcws_expand_left h4,
.jcws_expand_right h4 {
  color: var(--jcws-accent);
  font-family: 'Ubuntu Sans Regular', sans-serif;
  font-size: var(--h4-font-size);
  font-weight: 700;
  margin-bottom: var(--space-sm);
  padding-bottom: 0;
}

.jcws_expand_left hr,
.jcws_expand_right hr {
  border: none;
  border-bottom: 2px solid var(--jcws-accent);
  margin-bottom: var(--space-md);
  width: 50px;
}

/* Pionowa linia rozdzielająca lewy i prawy blok */
.jcws_expand_content::before {
  background-color: var(--jcws-border);
  bottom: 0;
  content: "";
  left: 50%;
  pointer-events: none;
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  width: 1px;
}

/* ==========================================================================
   SECTOR GRID (Sektory/Branże)
   ========================================================================== */

.jcws_sector_grid {
  display: grid;
  gap: var(--space-md) var(--space-sm);
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}

/* .jcws_sector_item styles moved to "SECTOR ITEM & BRAND ITEM (Common Styles)" section above */

.jcws_sector_item h5,
.jcws_brand_item h5 {
  color: var(--jcws-text);
  font-size: var(--font-base);
  font-weight: 700;
  margin: 0 0 var(--space-sm);
  padding-bottom: 0;
}

.jcws_sector_btn {
  align-self: flex-start;
  background-color: var(--jcws-accent);
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--jcws-shadow);
  color: var(--white);
  font-family: 'Ubuntu Sans Regular', sans-serif;
  font-size: var(--font-sm);
  font-weight: 700;
  padding: var(--space-sm) var(--space-md);
  text-decoration: none;
  transition: var(--transition-slow), var(--transition);
}

.jcws_sector_btn:hover,
.jcws_sector_btn:focus {
  background-color: var(--jcws-accent-80);
  box-shadow: var(--jcws-shadow-strong);
  color: var(--bg-light);
  outline: none;
  transform: translateY(-1px);
}

.jcws_sector_btn:focus-visible {
  outline: var(--jcws-focus-outline);
  outline-offset: var(--jcws-focus-offset);
}

/* ==========================================================================
   SECTOR ITEM & BRAND ITEM (Common Styles)
   ========================================================================== */

.jcws_brand_item,
.jcws_sector_item {
  background: var(--jcws-surface);
  border: 1px solid var(--jcws-border);
  border-radius: var(--radius-md);
  box-shadow: var(--jcws-shadow);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin-bottom: var(--space-xs);
  padding: var(--space-sm) var(--space-sm);
  position: relative;
  transition: all 0.3s ease;
}

.jcws_brand_item:hover,
.jcws_sector_item:hover {
  border-color: var(--jcws-border-strong);
  box-shadow: var(--jcws-shadow-strong);
  transform: translateY(-2px);
}

/* Selected States */
.jcws_selected_brand,
.jcws_selected_sector {
  background-color: var(--white);
  border-color: var(--danger);
  border-width: 3px;
  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4);
  transform: scale(1.02);
}

.jcws_selected_brand h5,
.jcws_selected_sector h5 {
  color: var(--danger);
  font-weight: 800;
}

/* Dodatkowy efekt dla wybranego producenta/sektora */
.jcws_selected_brand::before,
.jcws_selected_sector::before {
  content: '✓';
  position: absolute;
  top: 8px;
  right: 8px;
  background: var(--danger);
  color: var(--white);
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Przycisk w wybranym elemencie */
.jcws_selected_brand .jcws_brand_btn,
.jcws_selected_sector .jcws_sector_btn {
  background-color: var(--danger);
  border-color: var(--danger);
  color: var(--white);
}

.jcws_selected_brand .jcws_brand_btn:hover,
.jcws_selected_sector .jcws_sector_btn:hover {
  background-color: var(--danger-hover);
  border-color: var(--danger-hover);
  color: var(--white);
}

/* Clear Buttons */
.jcws_clear_brand_btn,
.jcws_clear_tag_btn {
  background: var(--danger);
  border: none;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  color: var(--white);
  cursor: pointer;
  display: inline-block;
  font-family: 'Ubuntu Sans Regular', sans-serif;
  font-size: var(--font-sm);
  font-weight: 700;
  margin-bottom: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  text-decoration: none;
  transition: var(--transition);
}

.jcws_clear_brand_btn:hover,
.jcws_clear_tag_btn:hover {
  background: var(--danger-hover);
  color: var(--white);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.jcws_clear_brand_btn:focus-visible,
.jcws_clear_tag_btn:focus-visible {
  outline: 3px solid var(--danger);
  outline-offset: 3px;
}

/* ==========================================================================
   BRAND GRID (Marki/Producenci)
   ========================================================================== */

.jcws_brand_grid,
.jcws_sector_grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm) var(--space-sm);
}

.jcws_brand_btn {
  background-color: var(--jcws-chip);
  border: 1px solid var(--jcws-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  color: var(--jcws-text);
  cursor: pointer;
  display: inline-block;
  font-family: 'Ubuntu Sans Regular', sans-serif;
  font-size: var(--font-sm);
  font-weight: 700;
  padding: var(--space-sm) var(--space-md) 0.5rem;
  text-decoration: none;
  transition: var(--transition-slow), var(--transition);
  white-space: nowrap;
}

.jcws_brand_btn:hover,
.jcws_brand_btn:focus {
  background-color: var(--jcws-chip-hover);
  border-color: var(--jcws-border-strong);
  box-shadow: var(--jcws-shadow);
  outline: none;
  transform: translateY(-1px);
}

.jcws_brand_btn:focus-visible {
  outline: var(--jcws-focus-outline);
  outline-offset: var(--jcws-focus-offset);
}

/* ==========================================================================
   RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* === LAPTOP 960px - 1280px === */
@media (min-width: 960px) and (max-width: 1280px) {


  .jcws_expand_content {
    gap: var(--space-xl);
  }

  .jcws_sector_grid {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  }
}

/* ==========================================================================
   COLLAPSE BUTTON (Tablet/Mobile only)
   ========================================================================== */

.jcws_collapse_toggle {
  align-items: center;
  background: var(--jcws-accent);
  border: none;
  border-radius: var(--radius-md);
  box-shadow: var(--jcws-shadow);
  color: var(--white);
  cursor: pointer;
  display: none;
  font-family: 'Ubuntu Sans Regular', sans-serif;
  font-size: var(--font-base) !important;
  font-weight: 700;
  justify-content: center;
  margin-top: var(--space-sm);
  padding: var(--space-sm) var(--space-lg);
  text-decoration: none;
  transition: var(--transition);
  width: 100%;
}

.jcws_collapse_toggle:hover,
.jcws_collapse_toggle:focus {
  background: var(--jcws-accent-80);
  box-shadow: var(--jcws-shadow-strong);
  outline: none;
  transform: translateY(-1px);
}

.jcws_collapse_toggle:focus-visible {
  outline: var(--jcws-focus-outline);
  outline-offset: var(--jcws-focus-offset);
}

/* === TABLET 640px - 960px === */
@media (max-width: 959px) {
  /* Pokazuj przycisk zwijający na tablet i mobile */
  .jcws_collapse_toggle.jcws_tablet_mobile_only {
    display: flex;
    flex: 0 0 100%;
  }

  .jcws-tag-layout-wrapper {
    flex-direction: column;
  }

  .jcws-tag-sidebar-header {
    display: none;
  }

  .jcws-tag-grid-container {
    grid-template-columns: repeat(2, 1fr);
  }


  .jcws_expand_content {
    flex-direction: column;
    gap: var(--space-sm);
  }

  .jcws_expand_content::before {
    display: none;
  }

  .jcws_expand_left,
  .jcws_expand_right {
    width: 100%;
  }

  .jcws_sector_grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  }
}

/* === MOBILE < 640px === */
@media (max-width: 639px) {
  .jcws-tag-grid-container {
    gap: var(--space-md);
    grid-template-columns: 1fr;
  }

  .jcws-tag-image {
    height: 180px;
  }

  .jcws_expandable_block {
    border-left: solid 1px var(--jcws-border);
    border-radius: var(--radius-lg);
    border-right: solid 1px var(--jcws-border);
    margin: 0 0 var(--space-sm);
    padding: var(--space-sm) var(--space-md);
  }

  .jcws_expand_toggle {
    font-size: var(--font-sm);
  }

  .jcws_expand_content {
    flex-direction: column;
    gap: var(--space-md);
  }

  .jcws_expand_content::before {
    display: none;
  }

  .jcws_expand_left,
  .jcws_expand_right {
    width: 100%;
  }

  .jcws_expand_left h4,
  .jcws_expand_right h4 {
    font-size: var(--h5-font-size);
  }

  .jcws_sector_grid {
    gap: var(--space-sm);
    grid-template-columns: 1fr;
  }

  .jcws_sector_item {
    padding: var(--space-md);
  }

  .jcws_sector_btn {
    font-size: var(--font-xs);
    padding: var(--space-xs) var(--space-sm);
  }

  .jcws_brand_grid {
    gap: var(--space-xs);
  }

  .jcws_brand_btn {
    font-size: var(--font-xs);
    padding: var(--space-xs) var(--space-md);
  }
}

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .jcws-tag-sidebar-header,
  .jcws_expandable_block,
  .jcws_expand_content {
    animation: none !important;
    transition: none !important;
  }

  .jcws-tag-sidebar-header::before {
    animation: none !important;
  }

  * {
    transition: none !important;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  .jcws_expandable_block,
  .jcws_sector_item {
    border-width: 3px !important;
  }

  .jcws_brand_btn {
    border-width: 2px !important;
  }
}

/* Print Styles */
@media print {
  .jcws_expandable_block {
    border: 1px solid var(--border);
    box-shadow: none !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .jcws_expand_toggle {
    display: none;
  }

  .jcws_expand_content {
    border-top: none;
  }

  .jcws_expand_content::before {
    display: none;
  }
}