.protocols {

}

.protocols .ms-checkbox-group{
    margin-bottom: 52px;
}

.protocol{
    margin-bottom: 72px;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "img caption" "img text";
    row-gap: 12px;
    column-gap: 30px;
}

.protocol img{
    grid-area: img;
    max-height: 148px;
    aspect-ratio: 1/1;
}
.protocol .caption{
    grid-area: caption;
    margin-bottom: 0;
}

.protocol .text{
    grid-area: text;
}

.protocols .cards-container{
    gap: 32px;
}
.protocols .cards-container__card{
    gap: 10px;
}
.protocols .cards-container__card .caption{
    margin: 10px 0;
}

.protocol-expanded {
    background-color: var(--clr-grey);
}

.grey_color_text_protocols {
	color: #959799;
	text-decoration: none;
}
.grey_href {
	color: rgb(189, 185, 185);
	text-decoration:none;
}
.protocols-short-list {
    display: flex;          /* one row layout */
    flex-wrap: nowrap;      /* prevent wrapping to new lines */
    gap: 8px;               /* space between items */
    height: 47px;           /* fixed height */
    overflow-x: auto;       /* horizontal scroll if needed */
    overflow-y: hidden;     /* hide vertical overflow */
    -ms-overflow-style: none;     /* IE and Edge */
    scrollbar-width: none;        /* Firefox */
    width: calc(100% + var(--default-padding));
}

.protocols-short-list > .ms-checkbox-group__item {
    height: 44px;
    flex: 0 0 auto;         /* keep natural width */
    display: flex;          /* center text vertically */
    align-items: center;
    white-space: nowrap;    /* keep text in one line */
}
/* Mobile: stack image -> caption -> text */
@media (max-width: 768px) {
  .protocol{
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "img"
      "caption"
      "text";
    row-gap: 10px;
    column-gap: 0;
  }

  /* Optional: tighten spacing on mobile */
  .protocol > .caption { margin-top: 6px; }
}