#content .content-box .exerciseIcon{
    height: 100px;
}

/* desktop: title + intro text on the left, icon on the right spanning both rows */
#content .exercise-header{
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "title icon"
    "intro icon";
  column-gap: 1rem;
  align-items: start;
}

#content .exercise-header h1{
  grid-area: title;
}

#content .exercise-header .exerciseIcon{
  grid-area: icon;
}

#content .exercise-header #intro-text{
  grid-area: intro;
}

#content .dropdown-content img{  
  display: block;
}

#content .topic-icon{  
  height: 30px;
  margin-right: 10px;  
}

/* set by dashboard-exercise.js when the text is taller than the shrunk box */
#intro-text.collapsible{
  cursor: pointer;
}

#intro-text p:empty{
  display: none;
}

#intro-text p:last-of-type{
  margin-bottom: 0;
  padding-bottom: 0;
}

#intro-text.shrink{
  max-height:80px;
  overflow: hidden;
  position : relative;
}

#intro-text.shrink:after{ 
  content  : "";
  position : absolute;
  z-index  : 1;
  bottom   : 0;
  left     : 0;
  pointer-events   : none;  
  background-image : linear-gradient(to bottom, 
                    rgba(255,255,255, 0) 50%, 
                    rgba(255,255,255, 1) 100%);  
  width    : 100%;
  height   : 80px;  
}

/* GRID TABULKA PRO ITEM BASED */
#content .gridContainer{
  display: grid;  
  padding: 0px;
  grid-gap: 0px;    
  /* the meter column has a definite width (the meter cell is a size container, so its content cannot size it) */
  grid-template-columns: min-content auto 30px clamp(100px, 40%, 300px) min-content;
  border:1px solid var(--lightGrayHover);
  border-radius: 3px;
}

/* one set: its five cells + the item list below them, on the container's columns */
#content .gridRow{
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  border-bottom:1px dotted var(--lightGrayHover);
}

/* the container's own border closes the grid */
#content .gridRow:last-child{
  border-bottom: none;
}

#content  .gridItem{  
  font-size: 16px;
  font-weight: 400;
  padding:5px;
  padding: 10px 10px;      
  display: inline-flex; align-items: center;
}

#content .gridItem.box1{ padding:5px 5px; }
#content .gridItem.box1:empty{ padding: 0; }

#content .gridItem.box1 img{ height: 35px; }
#content .gridItem.box2{ font-weight: bold; font-size: 18px; }
#content .gridItem.box3{ justify-content: flex-end; }
/* The crystal meter is sized in percent of the cell: --meter (0-100, the set with the most crystals has 100) of
   what is left of the cell's width after the icon. The tooltip's shadow DOM shrink-wraps its content, so plain
   percent widths cannot resolve inside it; the cell is a size container and the meter is measured in cqw instead. */
#content .gridItem.box4{ container-type: inline-size; }
#content .crystal-meter{
  width: calc((100cqw - 18px - var(--unit)) * var(--meter) / 100);
  max-width: none;
}

#content .meter-fill{
  box-sizing: border-box;
  background-repeat: no-repeat;
  /* grows from empty to its inline width on load; the curve is easeInOutCubic */
  animation: meter-fill 1.5s cubic-bezier(0.65, 0, 0.35, 1);
}

@keyframes meter-fill{
  from { width: 0; }
}

@media (prefers-reduced-motion: reduce){
  #content .meter-fill{ animation: none; }
  #content .gridItem.wide{ transition: none; }
}

#content .gridItem:hover:not(.wide){  
  cursor: pointer;  
}

/* A set's item list. It slides open by growing its single row from 0fr to 1fr; padding and border sit
   on the inner grid, inside the clipping wrapper, so nothing of them shows while it is closed. */
#content .gridItem.wide{
  grid-column: 1 / span 5;
  display: grid;
  /* the columns of the row, handed down to the wrapper and the list, so the list can start at the name column */
  grid-template-columns: subgrid;
  grid-template-rows: 0fr;
  /* .gridItem centers; the wrapper must stretch to the (0-high) row, or it keeps its full height and clips nothing */
  align-items: stretch;
  padding: 0;
  /* quick start, slow settle (easeOutQuint) */
  transition: grid-template-rows .3s cubic-bezier(0.22, 1, 0.36, 1);
}
#content .gridItem.wide > .none-content-box{
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  min-height: 0;
  overflow: hidden;
}
/* starts at the name column, so it follows the icon column's width (nothing when no set has an icon) */
#content .gridItem.wide .exercise-grid{
  grid-column: 2 / -1;
  padding: 10px;
  padding-right: 20px;
}
/* an open set: a dotted line under its header cells, above the item list */
#content .gridRow:has(> .gridItem.wide.selected) > .gridItem:not(.wide){
  border-bottom: 1px dotted var(--lightGrayHover);
}
#content .gridItem.wide h2{
  display: none;  
}
#content .gridItem.wide h3{
  display: none;  
}
#content .gridItem.wide .item-heading-wrapper{
  display: none;  
}
#content .gridItem.wide.selected{
  grid-template-rows: 1fr;
}
/* once open, stop clipping, so the items' preview dropdowns can reach below the list */
#content .gridItem.wide.selected > .none-content-box{
  overflow: visible;
  transition: overflow 0s .3s;
  transition-behavior: allow-discrete;
}
#content .gridItem.wide p{
  margin: 5px 0px;
}

@media screen and (max-width: 550px) {
  
	#content .segmentWrapperWrapper{
		text-align: center;
	}

  #content .gridItem.wide .exercise-grid{
  grid-column: 1 / -1;
  padding-right: 10px;
  }

  /* the meter column is a fixed 100px instead of 40% of the grid */
  #content .gridContainer{
    grid-template-columns: min-content auto 30px 100px min-content;
  }

  /* an item's screenshot preview spans the screen with margins (like .dropdown-content.wide), instead of hanging off its button */
  #content .exercise-grid .dropdown-content{
    transform: none;
    margin: auto var(--unit);
    left: 0; right: 0;
  }

  #content .item-toolbar{
    flex-direction: column;
    align-items: center;
  }

  /* NOVY OBSAH SKRYT */
  #content .label.small.red{
    display: none;
  }

  #content .content-box .exerciseIcon{
    display: block;
    height: 50px;
    margin-top: 10px;
  }

  /* mobile: title + icon on the first row, intro text full width below */
  #content .exercise-header{
    grid-template-areas:
      "title icon"
      "intro intro";
    align-items: center;
    row-gap: var(--unit);
  }

  #content .exercise-header h1{
    margin: 0 !important; /* overrides the .mt-1 utility */
  }

  #content .content-box .exercise-header .exerciseIcon{
    margin: 0;
  }

  /* KC grid rows without sets: only the name line stays */
  #content .grid-item.no-sets{
    display: none;
  }

}

/* recommendations: scrolls horizontally, the scrollbar shows only on actual overflow */
#content .recommendations-scroll{
  overflow-x: auto;
  padding-bottom: 15px;
  gap: calc(var(--unit) * 3.5); /* .gap-6 */
}

@media screen and (max-width: 550px) {
  #content .recommendations-scroll{
    gap: calc(var(--unit) * 2); /* .gap-3 */
  }
}

#content .recommendations-wrap{
  position: relative;
}

/* 20px fade to white on the right edge, while there is more to scroll to */
#content .recommendations-wrap::after{
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 10px; /* the scroller's padding-bottom */
  width: 20px;
  pointer-events: none;
  background-image: linear-gradient(to right, rgba(255,255,255, 0), rgba(255,255,255, 1));
  opacity: 0;
  transition: opacity .2s;
}

#content .recommendations-next{
  display: none;
  position: absolute;
  top: calc(50% - 5px); /* centered on the cards, without the scroller's padding-bottom */
  right: 0;
  transform: translateY(-50%);
  z-index: 2;
}

#content .recommendations-wrap.can-scroll-right::after{
  opacity: 1;
}

#content .recommendations-wrap.can-scroll-right .recommendations-next{
  display: inline-flex;
}

/* very narrow screens: one item per row, two would be cramped */
@media screen and (max-width: 400px) {
  #content .gridItem.wide .exercise-grid{
    grid-template-columns: 1fr;
  }
}

#content .preview-box-png{
  min-width: 260px;
  max-width: 260px;
}