/* ==========================================================================
   Highland Tab Content Widget
   ========================================================================== */

/* ------------------------------------------------------------------
   Per-tab colour variables (set via inline style on the button)
   ------------------------------------------------------------------ */
.hcw-tab-btn {
  /* fallbacks – overridden by global style controls */
  background-color: var(--hcw-tab-bg, inherit);
  color: var(--hcw-tab-color, inherit);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  font-family: inherit;
  font-size: inherit;
  line-height: 1.2;
  text-align: center;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
  white-space: nowrap;
}

/* Active state – per-tab CSS variable override (takes precedence if set) */
.hcw-tab-btn.hcw-active {
  background-color: var(--hcw-tab-active-bg, inherit);
  color: var(--hcw-tab-active-color, inherit);
}

/* ------------------------------------------------------------------
   Tab bar
   ------------------------------------------------------------------ */
.hcw-tab-bar {
  display: flex;
  flex-wrap: wrap;
  /* alignment / gap come from Elementor style controls */
}

/* ------------------------------------------------------------------
   Panels container
   ------------------------------------------------------------------ */
.hcw-tab-panels {
  position: relative;
}

.hcw-tab-panel {
  display: none;
  width: 100%;
  /* background comes from per-tab inline style or global style control */
}

.hcw-tab-panel.hcw-active {
  display: block;
}

/* ------------------------------------------------------------------
   Inner two-column layout (image | content)
   ------------------------------------------------------------------ */
.hcw-panel-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  /* gap comes from style control */
}

.hcw-panel-image {
  flex: 0 0 45%;
  max-width: 45%;
  /* overridden by image-width style control */
}

.hcw-panel-image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.hcw-panel-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* ------------------------------------------------------------------
   Title row (heading + age range)
   ------------------------------------------------------------------ */
.hcw-panel-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  width: 100%;
}

.hcw-panel-heading {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.hcw-panel-age {
  margin: 0;
}

/* ------------------------------------------------------------------
   Description
   ------------------------------------------------------------------ */
.hcw-panel-description {
  width: 100%;
}

.hcw-panel-description p {
  margin: 0 0 0.75em;
}

.hcw-panel-description p:last-child {
  margin-bottom: 0;
}

/* ------------------------------------------------------------------
   Activities
   ------------------------------------------------------------------ */
.hcw-activities-label {
  width: 100%;
}

.hcw-activities-list {
  display: flex;
  flex-wrap: wrap;
  /* gap comes from style control */
}

.hcw-activity-item {
  display: inline-block;
}

/* ------------------------------------------------------------------
   Button
   ------------------------------------------------------------------ */
.hcw-panel-btn {
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  line-height: 1.2;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    border-color 0.2s ease;
}

.hcw-panel-btn:hover {
  text-decoration: none;
}

/* ------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------ */
@media (max-width: 768px) {
  .hcw-panel-inner {
    flex-direction: column;
  }

  .hcw-panel-image {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .hcw-tab-bar {
    flex-wrap: wrap;
  }
}