/* * * * * * Rozvržení sekce * * * * * */
.workshopy-sekce {
  margin-bottom: 80px;
}
.workshopy-sekce .heading {
  height: 180px; /* Stejné jako v prakticke.css */
}

/* * * * * * Akordeon kontejner * * * * * */
.accordion-container {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* Hlavička tabulky nad šuplíky */
.accordion-legend {
  display: none; /* Na mobilu schováme, zapneme na tabletu/desktopu */
  padding: 0 20px;
  color: var(--offBlack);
  font-family: "Saira", sans-serif;
  font-size: 0.9rem;
}

/* Samotný šuplík */
.accordion-item {
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.accordion-header {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 20px;
  gap: 10px;
  padding: 20px;
  cursor: pointer;
  color: var(--purple);
  transition: all 0.3s ease;
  align-items: center;
}
.accordion-header span {
  font-weight: 500;
  color: inherit;
}
.w-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 300;
  justify-content: end;
}
.accordion-header span.desktop {
  display: none;
}
.w-toggle svg {
  transition: transform 0.3s ease;
}

/* Skrytý obsah */
.accordion-body {
  display: grid;
  grid-template-rows: 0fr;
  transition:
    grid-template-rows 0.15s ease,
    padding 0.15s ease;
  padding: 0 20px; /* Když je zavřeno, nemá spodní ani horní padding */
}

/* Tenhle obal to celé drží na 0px */
.accordion-inner {
  overflow: hidden;
  min-height: 0;
}

/* * * * * * Otevřený stav akordeonu * * * * * */
.accordion-item.active .accordion-body {
  grid-template-rows: 1fr;
  padding: 0 20px 20px 20px; /* Přidáme padding jen dole, ať je to úhledné */
}

/* * * * * * Otevřený stav akordeonu * * * * * */
.accordion-item.active {
  border-color: var(--purple);
}
.accordion-item.active .accordion-header {
  background-color: #835e8d; /* Tmavší fialová ze screenshotu s průhledností nebo var(--purple) */
  color: var(--offWhite);
}
.accordion-item.active .w-toggle svg {
  transform: rotate(180deg);
}
.accordion-item.active .accordion-body {
  grid-template-rows: 1fr;
  padding: 20px;
}

/* * * * * * Vnitřek obsahu (grid pro detaily) * * * * * */
.w-info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
  /* margin-bottom: 30px; */
}
.w-label {
  font-weight: 700;
  color: var(--purple);
}
.w-value {
  color: var(--offBlack);
  margin-bottom: 15px;
}
a.w-value {
  color: var(--purple);
  font-weight: 600;
}

/* * * * * * Galerie fotek * * * * * */
.w-gallery {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}
.w-gallery figure {
  aspect-ratio: 1 / 1;
  margin: 0;
}

@media screen and (min-width: 500px) {
  .w-gallery {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

/* * * * * * * * * * * tablet na šířku (od 667px / 768px) * * * * * * * * * * */
@media screen and (min-width: 768px) {
  .workshopy-sekce {
    grid-template-columns: 250px 1fr;
  }
  .workshopy-sekce .heading {
    height: 250px;
  }
  .accordion-legend {
    display: grid;
    grid-template-columns: 120px 1fr 1fr 100px; /* Rozložení podle screenshotu */
    gap: 15px;
  }
  .accordion-header {
    grid-template-columns: 120px 1fr 1fr 100px;
  }
  .w-toggle {
    justify-content: flex-end;
    gap: 10px;
  }
  .accordion-header span.desktop {
    font-weight: 300;
    display: unset;
  }
  .w-info-grid {
    grid-template-columns: 150px 1fr;
    row-gap: 20px;
  }
  .w-label {
    grid-column: 1;
  }
  .w-value {
    grid-column: 2;
  }
  .w-gallery {
    grid-template-columns: 1fr 1fr;
  }
}

@media screen and (min-width: 900px) {
  .w-gallery {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

/* * * * * * * * * * * * desktop malý (od 1025px) * * * * * * * * * * * */
@media screen and (min-width: 1025px) {
  .accordion-legend,
  .accordion-header {
    grid-template-columns: 150px 1fr 1fr 100px;
  }
  @media screen and (min-width: 500px) {
    .w-gallery {
      grid-template-columns: 1fr 1fr 1fr 1fr;
    }
  }
}