/* Therapist Card Container */
.therapist-card {
    text-align: center; /* Center align text */
    font-family: sans-serif; /* Choose your desired font */
    display: flex; /* Use flexbox for layout */
    flex-direction: column; /* Stack items vertically */
    justify-content: space-between; /* Distribute space */
    padding-bottom: 20px; /* Padding at the bottom */
    width: 100%; /* Ensure card takes full width of grid cell */
    min-width: 0; /* Allow card to shrink beyond content's intrinsic min-width */
  }

  /* Image section */
  .therapist-card-image { /* New rule for the image container */
    width: 100%; /* Occupy available width within the card structure */
    max-width: 200px; /* Limit maximum size of the image area, consistent with original image max-width */
    aspect-ratio: 1 / 1; /* Ensures the container is always square; height adjusts with width */
    margin-left: auto; /* Center the image container horizontally */
    margin-right: auto;
    overflow: hidden; /* Ensures the image is clipped to the container's bounds */
  }

  .therapist-card-image img {
    width: 100%; /* Image fills the width of the square .therapist-card-image container */
    height: 100%; /* Image fills the height of the square .therapist-card-image container */
    display: block; /* Remove extra space below image */
    object-fit: cover;
  }

  /* Content section below image */
  .therapist-card-content {
    padding-top: 12px;
    padding-left: 6px;
    padding-right: 6px;
    padding-bottom: 6px;
    flex-grow: 1; /* Allow content to grow and push booking info down */
    display: flex; /* Make this a flex container */
    flex-direction: column; /* Stack its children vertically */
  }

  /* Therapist Name */
  .therapist-name {
    font-size: 1.3em; /* Adjust size */
    font-weight: bold;
    color: #004d40; /* Dark teal color - adjust */
    margin-top: 0;
    margin-bottom: 4px;
    line-height: 1.2;
    font-size: 1.3em;
    padding: 0px 0px 0px 0px !important;
    margin-block-start: 0 !important;
    margin-block-end: 4px !important;
    margin: 0px 0px 4px 0px !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Description text */
  .therapist-description {
    font-size: 0.8em;
    color: #555; /* Dark grey color - adjust */
    line-height: 1.4;
    padding: 0px 0px 4px 0px !important;
    margin-block-start: 0 !important;
    margin-block-end: 0px !important;
    padding-bottom: 0px !important;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* "Read More" link */
  .read-more-link {
    color: var(--cbb-primary-color, #d32f2f); /* Use primary color, fallback to default blue */
    font-size: 0.9em;
    text-decoration: none; /* Remove underline */
    font-weight: bold;
    padding: 0px 0px 0px 0px !important;
    margin-block-start: 0 !important;
    margin-block-end: 0px !important;
    display: inline-block; /* Allow margin */
    margin-bottom: 4px !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
    margin-top: auto !important; /* Push to the bottom of the container */
  }

  .read-more-link:hover {
    text-decoration: underline; /* Underline on hover */
  }


  /* Booking info section */
  .therapist-booking-info {
    padding: 0 5px; /* Padding left/right */
    margin-top: auto; /* Push to the bottom if content is short */
  }

  /* "Nästa lediga tid" label */
  .next-available-label {
    font-size: 0.9em;
    color: #004d40; /* Dark teal color - adjust */
    font-weight: bold;
    margin-bottom: 2px;
  }

  /* Actual time text */
  .next-available-time {
    font-size: 1.2em; /* Larger font size */
    font-weight: bold;
    color: #004d40; /* Dark teal color - adjust */
    margin-top: 0;
    margin-bottom: 15px;
  }

/* Booking Button */
.booking-button {
  display: flex;
  align-items: center; /* Vertically centers the text */
  justify-content: center; /* Horizontally centers the text (if text-align wasn't enough) */
  width: fit-content; /* Size to content, not full width */
  margin-left: auto; /* Center the block */
  margin-right: auto; /* Center the block */
  text-align: center; /* Center text within the button */
  background-color: var(--cbb-primary-color, #d32f2f); /* Use primary color, fallback to default blue */
  color: #fff !important; /* White text */
  padding: var(--cbb-button-padding, 12px 25px); /* Button padding */
  border-radius: var(--cbb-button-border-radius, 25px); /* Rounded corners */
  text-decoration: none; /* Remove underline */
  font-weight: bold;
  font-size: 1rem;
  transition: background-color 0.3s ease; /* Smooth hover effect */
}

/* Make booking buttons inside cbb-stl-button fill full width */
.cbb-stl-button .booking-button {
  width: 100%; /* Fill the full width of the cbb-stl-button container */
  margin-left: 0; /* Remove auto margins since we're using full width */
  margin-right: 0;
}

.booking-button:hover {
  background-color: color-mix(in srgb, var(--cbb-primary-color, #d32f2f) 85%, black); /* Darken primary color on hover */
  color: #fff !important;
}

.booking-button-light {
    font-weight: 500;
}

/* Therapist List Grid */
.therapist-list-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 columns on mobile */
    gap: 16px; /* Adjust gap as needed */
}

.therapist-list-grid .therapist-card {
    height: 100%; /* Ensure cards in a grid row are same height */
}

/* Desktop: 4 columns */
@media (min-width: 768px) { /* Adjust breakpoint as needed */
    .therapist-list-grid {
        grid-template-columns: repeat(4, 1fr); /* 4 columns on desktop */
    }
}