/* Outer wrapper: border + bottom spacing like the callout box */
.linguas-tabs-wrapper {
  margin: 0 0 1.5rem;
  border: 2px solid var(--at-border, #404040);
  background-color: #ffffff;
}

/* Tabs row */
.linguas-tabs {
  display: flex;
  flex-wrap: nowrap;
  width: 100%;
  margin: 0;
  padding: 0;
  background-color: #ffffff;
  border-bottom: 2px solid var(--at-border, #404040);
}

/* Tabs: inactive = white, active = yellow */
.linguas-tab {
  flex: 1 1 0;
  padding: 0.45em 0.75em; /* comfortable tab height (Desktop/Normal View) */
  line-height: 1.2;
  font-size: inherit; /* inherit body size */
  font-weight: 600;
  letter-spacing: 0.05em;
  background-color: #ffffff; /* inactive */
  border: none;
  border-right: 2px solid var(--at-border, #404040);
  cursor: pointer;
  color: #404040;
}

.linguas-tab:last-child {
  border-right: none;
}

.linguas-tab:hover,
.linguas-tab:focus {
  background-color: #f7f7f7;
  color: #404040;
}

.linguas-tab.active {
  background-color: #F4E28A;
}

/* Panels container: only side + bottom padding */
.linguas-tab-panels {
  padding: 0 1.25rem 1rem;
  background-color: #ffffff;
}

/* Panels */
.linguas-tab-panel {
  display: none;
  color: #404040;
}

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

/* Inner wrapper: THIS controls the gap between tabs and first line */
.linguas-tab-panel-inner {
  padding-top: 0.3rem; /* <- adjust this up/down to taste */
}

/* Kill extra margin on the first block element so it doesn't add more gap */
.linguas-tab-panel-inner > *:first-child {
  margin-top: 0;
}

/* Mobile Tweak: Increased vertical padding for tab height */
@media (max-width: 600px) {
  .linguas-tab {
    font-size: 0.9em;
    /* TWEAK HERE: Increased vertical padding from 0.45em to 0.6em */
    padding: 0.6em 0.4em;
  }

  .linguas-tab-panels {
    padding: 0.35rem 1rem 0.9rem;
  }
}