/* ==========================================================================
   Connect 2026 - Content Library sub-tabs                               T-17
   --------------------------------------------------------------------------
   The 9-tab row under the "Content Library" title. Appears on 20 of the 22
   screens - every listing and every reader.

   MEASURED on artboard p3:
     title      10.0pt Medium x2.4 = 24px, #1cb7fc   (= .cn-section-title)
     tab label   7.5pt Medium x2.4 = 18px            (--cn-text-body)
     active     #49c5fd  (= --cn-cyan-alt) with an underline
     inactive   #575756  (= --cn-ink-muted)
     gap        ~20px
     full-width 1px rule under the row

   Server-routed, not client-side panels: each tab is a real URL. That matters
   for the SEO problems the brief calls out - a hash-switched tab set would
   leave 9 tabs' worth of content on one unindexable page.

   DEPENDS ON: tokens.css
   ========================================================================== */

/*
   VERTICAL RHYTHM ABOVE THE TABS, measured on p6:

     navy nav bar bottom     265.3
     "Content Library" top   316.5   -> 51px of air above the title
     tab labels top          349.8   -> 33.3 top to top, and the title's line
                                        box is 27.6, so 6px between them

   Both were wrong: the title sat hard against the nav bar because nothing set
   a top margin, and 20px above the tabs because .cn-section-title carries the
   20px step by default. Scoped to this modifier rather than changed on
   .cn-section-title, which a dozen other places use at the 20px step.
*/
.cn-section-title--library {
  margin-top: 51px;
  margin-bottom: 6px;
}

/*
   MEASURED ON p2. Tab labels sit at y=349.8 with their bottom at 367.9; the
   active underline is drawn at 366.8 - on the text, not below it - and the
   full-width rule at 383.8. So the underline hugs the label and there is 15px
   of air before the rule.

   Both were off: the link carried 4px of padding before its underline, which
   floated it away from the word, and the row carried 8px before the rule
   instead of 15.
*/
.cn-tabs {
  border-bottom: 1px solid var(--cn-ink-muted);
  padding-bottom: 15px;
}

.cn-tabs__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cn-space-5);
  list-style: none;
}

.cn-tabs__link {
  display: inline-block;
  padding-bottom: 2px;   /* p2: underline sits on the label, not below it */
  border-bottom: 2px solid transparent;
  font-size: var(--cn-text-body);
  font-weight: var(--cn-fw-medium);
  line-height: 1.3;
  color: var(--cn-ink-muted);
  transition: color var(--cn-dur) var(--cn-ease),
              border-color var(--cn-dur) var(--cn-ease);
}

.cn-tabs__link:hover { color: var(--cn-cyan); }

.cn-tabs__link[aria-current="page"] {
  color: var(--cn-cyan-alt);
  border-bottom-color: var(--cn-cyan-alt);
}

/* =========================================================== RESPONSIVE == */
/*
   T-40 DECISION: the 9-tab bar scrolls horizontally. It does NOT become a
   <select>.

   Why: all nine stay real, crawlable links, which matters because the brief
   names poor SEO as a current problem - a select would hide eight of nine
   destinations from a crawler. A nine-option select is also worse to use on
   a phone than a swipe.

   A fade at the right edge signals there is more to scroll; scroll-snap makes
   the swipe land cleanly on a tab rather than mid-label.
*/
@media (max-width: 1279px) {
  .cn-tabs {
    position: relative;
    /* Fade the right edge to signal overflow. Transparent -> page background. */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 32px), transparent);
  }

  .cn-tabs__list {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .cn-tabs__list::-webkit-scrollbar { display: none; }

  .cn-tabs__link {
    white-space: nowrap;
    scroll-snap-align: start;
    /* 44px tap target - see the T-40 checklist. */
    padding-block: var(--cn-space-3);
  }
}


/* ===================================================== IN-PAGE TABS ====== */
/*
   Home (p1) has BOTH kinds of tab, which is what made the distinction clear:

     .cn-tabs__link  navigates      Content Library row, <a aria-current>
     .cn-tabs__tab   filters here   "Latest Insights" / "Latest Videos & Audio",
                                    <button role="tab" aria-selected>

   Same visual treatment, different semantics. See tabStrip.tag.

   Measured on p1: the strip sits directly under its section heading, 7.5pt
   (18px) labels, selected one in white on --cn-cyan.
*/
.cn-tabs--inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cn-space-2);
  /*
     NO MARGIN UNDER THE STRIP. .cn-tabs already carries 15px of bottom
     padding, and p1 puts the cards 14.4px under the pills - the Latest
     Insights rules start at y=1093.2 against a pill bottom of 1078.8, and the
     Videos images at 2973.6 against 2949.6 (24, with the image's own top
     air). The 24px margin here stacked on the padding and pushed both grids
     39px down. Only Home uses this strip.
  */
  margin-bottom: 0;
  border-bottom: 0;
}

.cn-tabs__tab {
  min-height: var(--cn-tab-h);
  padding: 0 var(--cn-space-3);
  border: 0;
  border-radius: var(--cn-radius-pill);
  background: transparent;
  color: var(--cn-ink-muted);
  font-family: inherit;
  font-size: var(--cn-text-body);
  font-weight: var(--cn-fw-medium);
  line-height: 1;
  cursor: pointer;
  transition: background var(--cn-dur) var(--cn-ease),
              color var(--cn-dur) var(--cn-ease);
}

.cn-tabs__tab:hover { color: var(--cn-cyan); }

/*
   Optional sub-label between the heading and the row. p1 carries one on the
   Videos & Audio strip - "Browse by type:" at 16.7px in the muted grey,
   y=2892, between the 24px heading and the tabs - and none on Latest
   Insights. So it is per-strip, not part of the component's frame.
*/
.cn-tabs__hint {
  margin: 0 0 var(--cn-space-3);
  font-size: var(--cn-text-meta);
  font-weight: var(--cn-fw-medium);
  color: var(--cn-ink-muted);
}

/*
   Selected. Navy on cyan, not white on cyan - white measures 2.28:1 against
   --cn-cyan and fails AA. Same substitution as the primary button, and the
   fill is unchanged so it still matches the artboard at a glance.
   See tokens.css for the full contrast table.
*/
.cn-tabs__tab[aria-selected="true"] {
  background: var(--cn-cyan);
  /*
     WHITE, as drawn. Sampled on p1's selected tab, p7's action pills and p2's
     topic chips - all three are pure white on the cyan fill.

     That measures 2.28:1 and fails AA, and CONNECT2026.md section 9 carries
     the recommendation to swap it for navy on the same fill at 6.84:1. It is
     an OPEN CLIENT QUESTION, not a decision we have taken: applying it here
     alone would leave the selected tab navy while the pills and chips beside
     it stayed white. When the client answers, change all three together.
  */
  color: var(--cn-ink-invert);
  /*
     NOT semibold. Every label in both p1 tab rows is Poppins-Medium,
     including the selected one - the cyan fill is what marks selection, and
     bolding the text on top of it shifts the row as tabs are clicked.
  */
  font-weight: var(--cn-fw-medium);
}

@media (max-width: 767px) {
  /* Let the strip scroll rather than wrap into three ragged rows. */
  .cn-tabs--inline {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .cn-tabs--inline::-webkit-scrollbar { display: none; }
  /*
     --cn-tab-h is 34, which is the measured desktop pill height and below the
     44px touch target. These tabs are how a phone user changes what the whole
     section shows, so they are among the most-tapped controls on Home.
  */
  .cn-tabs__tab { flex: 0 0 auto; min-height: 44px; }
}


/* The 51px of air above the section title is an artboard value taken at
   1440. It halves on a phone, where it is a third of the viewport. */
@media (max-width: 767px) {
  .cn-section-title--library { margin-top: var(--cn-space-8); }
}