/* ==========================================================================
   PODUL — "TieLabs - Tabs (Styled)" widget

   Restyles the existing category-tabs widget
   (framework/widgets/tabs.php, restored into this child theme) into the Podul
   design language. No markup was changed.

   NOTE ON !important
   The widget prints inline style attributes on almost every element it renders
   — the row flexbox, the thumbnail box, the meta line, the title and the
   "show more" button all carry hardcoded values (110px thumbs, 6px radius,
   #0088cc button, #222 titles). Inline styles beat any stylesheet rule that is
   not !important, so every property that overrides one of those is marked. The
   inline value being replaced is named in the comment above each block.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Shell
   -------------------------------------------------------------------------- */

html body .tabs-container-wrapper,
html body .widget.tabs-widget {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin-bottom: 2.5rem;
}

html body .tabs-widget .widget-container {
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
}

html body .tabs-widget .tabs-wrapper {
  border: var(--podul-border-thin) solid var(--podul-black);
  background-color: var(--podul-white);
  box-shadow: var(--podul-shadow-md);
}


/* --------------------------------------------------------------------------
   2. Tab bar
   -------------------------------------------------------------------------- */

html body .tabs-widget ul.tabs {
  display: flex !important;
  flex-wrap: nowrap;
  overflow-x: auto;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
  background: none !important;
  border: 0 !important;
  border-bottom: var(--podul-border-thin) solid var(--podul-black) !important;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

html body .tabs-widget ul.tabs::-webkit-scrollbar {
  display: none;
}

html body .tabs-widget ul.tabs > li {
  flex: 1 1 auto;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-right: var(--podul-border-thin) solid var(--podul-black) !important;
  background: none !important;
}

html body .tabs-widget ul.tabs > li:last-child {
  border-right: 0 !important;
}

/* line-height is the one that matters here: Jannah inherits a 65px line-height
   onto widget links, which made the tab cells ~97px tall and read as excess
   padding above the labels. Resetting it to 1 lets the padding do the work. */
html body .tabs-widget ul.tabs > li > a {
  display: block;
  padding: .875rem .75rem !important;
  line-height: 1 !important;
  font-family: var(--podul-font-body);
  font-size: var(--podul-text-xs);
  font-weight: var(--podul-weight-black);
  letter-spacing: var(--podul-track-label);
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  color: var(--podul-ink) !important;
  background: none !important;
  border: 0 !important;
  transition: var(--podul-transition);
}

html body .tabs-widget ul.tabs > li > a:hover {
  background-color: var(--podul-yellow) !important;
}

/* Jannah's tab script puts .active on the <li>, not the <a>. */
html body .tabs-widget ul.tabs > li.active > a {
  background-color: var(--podul-black) !important;
  color: var(--podul-yellow) !important;
}


/* --------------------------------------------------------------------------
   3. Panels

   The widget does not hide the inactive panels server-side, so without this
   every tab's list renders stacked on first paint. Jannah's script then takes
   over with inline display values once a tab is clicked.
   -------------------------------------------------------------------------- */

html body .tabs-widget .tabs-wrapper > .tab-content {
  display: none;
  padding: 1.25rem;
}

html body .tabs-widget .tabs-wrapper > .tab-content:first-of-type {
  display: block;
}

html body .tabs-widget .tab-content.is-not-active {
  display: none;
}

/* Scrollable list, as in the reference. */
html body .tabs-widget .widget-posts-list-container {
  max-height: 44rem;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--podul-slate-300) transparent;
}

html body .tabs-widget .widget-posts-list-container::-webkit-scrollbar {
  width: 6px;
}

html body .tabs-widget .widget-posts-list-container::-webkit-scrollbar-thumb {
  background-color: var(--podul-slate-300);
}

html body .tabs-widget ul.posts-list-items {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}


/* --------------------------------------------------------------------------
   4. Rows

   Replaces inline: display:flex; align-items:flex-start; margin-bottom:15px
   -------------------------------------------------------------------------- */

html body .tabs-widget li.tab-post-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: .875rem;
  margin: 0 !important;
  padding: .875rem 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--podul-rule-faint) !important;
  background: none !important;
}

html body .tabs-widget li.tab-post-item:first-child {
  padding-top: 0 !important;
}

html body .tabs-widget li.tab-post-item:last-child {
  border-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Replaces inline: width:110px; aspect-ratio:16/9; margin-right:12px;
   border-radius:6px */
html body .tabs-widget li.tab-post-item > .post-thumb {
  flex: 0 0 5.5rem !important;
  width: 5.5rem !important;
  aspect-ratio: var(--podul-ratio-card) !important;
  margin: 0 !important;
  overflow: hidden !important;
  position: relative !important;
  background-color: var(--podul-slate-100);
  border: var(--podul-border-thin) solid var(--podul-black) !important;
  border-radius: var(--podul-radius) !important;
  transition: var(--podul-transition);
}

html body .tabs-widget li.tab-post-item:hover > .post-thumb {
  box-shadow: var(--podul-shadow-xs);
}

html body .tabs-widget li.tab-post-item .post-thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: var(--podul-radius) !important;
}

/* The play badge on video posts is owned by assets/css/podul-video.css, which
   loads after this sheet and styles every tile in the site the same way. The
   colour override that used to live here fought its hover state. */


/* --------------------------------------------------------------------------
   5. Row text

   Replaces inline: font-size:11px; color:#666 on the meta,
   font-size:15px; margin:0 0 4px on the title, and color:#222 on its link.
   -------------------------------------------------------------------------- */

html body .tabs-widget li.tab-post-item .post-details {
  flex: 1 1 auto !important;
  min-width: 0;
}

html body .tabs-widget li.tab-post-item .post-meta {
  margin: 0 0 .35rem !important;
  font-family: var(--podul-font-body) !important;
  font-size: var(--podul-text-2xs) !important;
  font-weight: var(--podul-weight-black) !important;
  letter-spacing: var(--podul-track-label) !important;
  text-transform: uppercase !important;
  color: var(--podul-slate-400) !important;
}

html body .tabs-widget li.tab-post-item .post-meta a {
  color: var(--podul-slate-400) !important;
}

html body .tabs-widget li.tab-post-item .post-meta a:hover {
  color: var(--podul-ink) !important;
}

html body .tabs-widget li.tab-post-item h2.post-title {
  margin: 0 !important;
  font-family: var(--podul-font-display) !important;
  font-size: var(--podul-text-md) !important;
  font-weight: var(--podul-weight-headline) !important;
  letter-spacing: var(--podul-track-tight) !important;
  line-height: var(--podul-leading-tight) !important;
  text-transform: none !important;
}

html body .tabs-widget li.tab-post-item h2.post-title a {
  display: inline !important;
  padding: 1px 2px !important;
  margin-left: -2px;
  color: var(--podul-ink) !important;
  text-decoration: none !important;
  background-image: linear-gradient(var(--podul-yellow), var(--podul-yellow));
  background-repeat: no-repeat;
  background-size: 0 100%;
  transition: background-size .3s ease;
}

html body .tabs-widget li.tab-post-item:hover h2.post-title a {
  background-size: 100% 100%;
}


/* --------------------------------------------------------------------------
   6. "Show more" button

   Replaces inline: background-color:#0088cc; color:#fff; border-radius:20px;
   padding:0 14px; font-size:13px; font-weight:500
   -------------------------------------------------------------------------- */

html body .tabs-widget .show-more-wrapper {
  margin: 1.25rem 0 0 !important;
  padding-top: 1.25rem;
  border-top: var(--podul-border-thin) solid var(--podul-rule-light);
  text-align: center !important;
}

/* Same story as the tabs: a 50px inherited line-height plus a 35px top margin
   left the label sitting low in an over-tall button. */
html body .tabs-widget a.show-more-button {
  display: block !important;
  margin: 0 !important;
  padding: 1rem 1.25rem !important;
  line-height: 1 !important;
  background-color: var(--podul-black) !important;
  color: var(--podul-yellow) !important;
  border: var(--podul-border-thin) solid var(--podul-black) !important;
  border-radius: var(--podul-radius) !important;
  font-family: var(--podul-font-body) !important;
  font-size: var(--podul-text-xs) !important;
  font-weight: var(--podul-weight-black) !important;
  letter-spacing: var(--podul-track-wide) !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: var(--podul-transition) !important;
}

html body .tabs-widget a.show-more-button:hover {
  background-color: var(--podul-yellow) !important;
  color: var(--podul-ink) !important;
}