/* =============================================
   INSIDE OUR WORKSHOP PAGE  (load with base.css + nav.css)
   Header + tabs live in nav.css
   ============================================= */
.cf-panel[hidden] { display: none; }
.ws-inner { padding: clamp(40px, 5vw, 75px) var(--pad); }

/* =============================================
   TAB 1 — PACKED WITH SCIENCE
   ============================================= */
.ws-bullets { list-style: none; max-width: 900px; }
.ws-bullets li {
  position: relative;
  padding-left: 22px;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: #000;
  margin-bottom: 13px;
}
.ws-bullets li::before { content: "•"; position: absolute; left: 4px; color: #000; }

.ws-scope { background: #f5f5f5; }
.ws-scope__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 5vw, 90px);
  align-items: start;
}
.ws-scope__title {
  font-size: 48px;   /* 53.33 / 42 / 32 */
  font-weight: 400;
  line-height: 1.2;
  color: #000;
}
.ws-scope__list { list-style: none; }
.ws-scope__list li {
  position: relative;
  padding-left: 22px;
  font-size: var(--fs-body);
  line-height: 1.5;
  color: #000;
  margin-bottom: 13px;
}
.ws-scope__list li::before { content: "•"; position: absolute; left: 4px; color: #000; }
.ws-scope__list strong { color: #1a1a1a; font-weight: 700; }

/* =============================================
   TAB 2 — MILESTONES (horizontal scroll columns)
   ============================================= */
/* Cards section bleeds to the right edge (no right padding) */
#tab-milestones .ws-inner { padding-right: 0; }
.ms-scroll {
  display: flex;
  gap: 30px;
  overflow-x: auto;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  scrollbar-width: none;       /* Firefox: hide scrollbar */
  -ms-overflow-style: none;    /* old Edge */
}
.ms-scroll::-webkit-scrollbar { display: none; }   /* Chrome/Safari */
.ms-scroll.is-grabbing { cursor: grabbing; }
.ms-scroll.is-grabbing a, .ms-scroll.is-grabbing .ms-link { pointer-events: none; }
.ms-col {
  flex: 0 0 clamp(320px, 30vw, 425px);
  display: flex;
  flex-direction: column;
  gap: 20px;               /* Figma: header → list gap */
}
.ms-head {
  display: flex;
  align-items: center;
  gap: 10px;               /* Figma */
  background: var(--integ-bg);   /* #d8e3f6 */
  border-radius: 5px;      /* Figma */
  padding: 10px;           /* Figma */
}
.ms-pie { width: 83px; height: 126px; flex-shrink: 0; display: block; }   /* Figma pie image */
.ms-head__title { font-size: 28px; line-height: 42px; font-weight: 700; color: #006cb5; }   /* Figma */
.ms-list { list-style: none; }
.ms-list li { font-size: 24px; line-height: 40px; color: #222; }   /* Figma 24 / 40 */
.ms-link { color: #006cb5; text-decoration: none; }
a.ms-link:hover { text-decoration: underline; }

/* =============================================
   TAB 3 — SOME GEEK STUFF
   ============================================= */
.gk-intro {
  font-size: 20px;               /* Figma 20 / 30, black */
  line-height: 30px;
  color: #000;
  max-width: 978px;
  margin-bottom: clamp(40px, 5vw, 80px);
}
.gk-cards {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;                     /* Figma */
  margin-bottom: 20px;
}
.gk-card {
  height: 290px;                 /* Figma: taller cards */
  padding: 30px;                 /* Figma */
  display: flex;
  flex-direction: column;
  justify-content: space-between;   /* content top, label bottom */
  color: #fff;
}
.gk-card__head { display: block; font-size: 22px; font-weight: 700; line-height: 30px; }   /* Figma (MS SQL server) */
.gk-card__body { font-size: 18px; line-height: 1.3; list-style: none; }                     /* Figma 18px */
.gk-card__body li { position: relative; padding-left: 16px; margin-bottom: 5px; }
.gk-card__body li:last-child { margin-bottom: 0; }
.gk-card__body li::before { content: "•"; position: absolute; left: 0; }
.gk-card__body p { margin-bottom: 5px; }
.gk-card__body p:last-child { margin-bottom: 0; }
.gk-card--blue .gk-card__body p { font-size: 16px; line-height: 24px; margin-top: 10px; }   /* Figma "2008 …" sub */
.gk-card strong { font-weight: 700; }
.gk-card__label { display: block; font-size: 19px; font-weight: 700; line-height: 30px; }    /* Figma */
.gk-card--blue  { background: #91bdff; }
.gk-card--pink  { background: #ffb4b7; }
.gk-card--gray  { background: #aeaeae; }
.gk-card--gold  { background: #e0bc07; }
.gk-card--teal  { background: #08cda3; }
.gk-card--slate { background: #7190c0; }

.gk-stats {
  background: #13bee5;
  color: #fff;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  row-gap: 30px;
  column-gap: 20px;
  padding: 60px 73px 30px 30px;   /* Figma */
}
.gk-stat__num { display: block; font-size: clamp(34px, 3.65vw, 55px); font-weight: 400; line-height: 1.1; }   /* Figma ~55 */
.gk-stat__label { display: block; font-size: 18px; margin-top: 4px; }
.gk-stats__caption { grid-column: 1 / -1; font-weight: 700; font-size: 19px; line-height: 30px; }

/* =============================================
   TAB 4 — BULLETIN + RECENT UPDATES
   ============================================= */
.bul-grid {
 display: flex;
    justify-content: space-between;
  align-items: start;
}
/* Stepper (Figma): each item has its own 52px vertical bar with a gap between
   them (segmented rail); 14px text, blue active / grey inactive. */
.bul-years { display: flex; flex-direction: column; gap: 14px; }
.bul-year {
  position: relative;
  background: none;
  border: none;
  padding: 16px 0 16px 24px;
  text-align: left;
  font-family: var(--font);
  font-size: 14px;
  line-height: 20px;
  color: #abb7c2;
  cursor: pointer;
  transition: color 0.2s;
}
.bul-year::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #cfd6dc;
  transition: background 0.2s;
}
.bul-year--active { color: #0061a9; }
.bul-year--active::before { background: #0061a9; }
.bul-content { max-width: 758px; display: flex; flex-direction: column; gap: 22px; }
.bul-card { background: #f5f5f5; padding: clamp(28px, 3vw, 40px); display: flex; flex-direction: column; gap: 12px; }
.bul-card h3 { font-size: 32px; line-height: 1.2; font-weight: 700; color: #000; }   /* Figma 32px */
.bul-card p { font-size: 20px; line-height: 30px; color: #000; }                     /* Figma 20 / 30 */
.bul-card .bul-link { color: #1a7eab; text-decoration: underline; }
.bul-empty { color: #9a9a9a; font-size: 16px; padding: 18px 0; }

/* =============================================
   TAB 5 — WHAT THEY TELL OF US
   ============================================= */
.wt-grid {
  display: flex;
  justify-content: space-between;
  align-items: start;
      gap: 200px;
}
.wt-views { min-width: 0; }
.wt-nav { display: flex; flex-direction: column; gap: 14px; }
.wt-navlink {
  position: relative;
  background: none;
  border: none;
  padding: 16px 0 16px 24px;
  text-align: left;
  font-family: var(--font);
  font-size: 14px;
  line-height: 20px;
  color: #abb7c2;
  cursor: pointer;
  transition: color 0.2s;
}
.wt-navlink::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #cfd6dc;
  transition: background 0.2s;
}
.wt-navlink--active { color: #0061a9; }
.wt-navlink--active::before { background: #0061a9; }
.wt-view[hidden] { display: none; }

/* Clinics logo grid */
.cl-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  max-width: 963px;
}
.cl-tile {
  border: 1px solid #e6e6e6;
  border-radius: 2px;
  aspect-ratio: 219 / 212;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px;
}
.cl-tile img { max-width: 80%; max-height: 64%; object-fit: contain; }
/* Selected clinics whose logos read too small — icon scaled up ~28% */
.cl-tile--lg img { transform: scale(1.6); }

/* Endorsements scroller — drag to scroll, no scrollbar, bleeds off the right edge */
.en-scroll {
  display: flex;
  align-items: flex-start;   /* expanding one card must not stretch its neighbours */
  gap: 25px;
  overflow-x: auto;
  margin-right: calc(-1 * var(--pad));   /* bleed past the section's right padding */
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  scrollbar-width: none;       /* Firefox */
  -ms-overflow-style: none;    /* old Edge */
}
.en-scroll::-webkit-scrollbar { display: none; }   /* Chrome/Safari */
.en-scroll.is-grabbing { cursor: grabbing; }
.en-scroll.is-grabbing a { pointer-events: none; }
.en-card {
  flex: 0 0 clamp(320px, 44vw, 640px);   /* wider cards */
  min-height: 600px;
  background: #f5f5f5;
  border-radius: 4px;
  padding: clamp(32px, 3vw, 44px);
  display: flex;
  flex-direction: column;
}
/* Collapsed: clamp to 8 lines so every card is the same height; Read More expands. */
.en-quote {
  font-size: 20px;
  line-height: 1.5;
  color: #1a1a1a;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 8;
  line-clamp: 8;
  overflow: hidden;
}
.en-card.is-expanded .en-quote {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  overflow: visible;
}
.en-list { margin: 12px 0; padding-left: 22px; list-style: disc; }
.en-list li { margin-bottom: 6px; }
.en-more {
  visibility: hidden;   /* revealed (JS adds .en-clamped) only when the text overflows */
  align-self: flex-start;
  margin-top: 16px;
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: 15px;
  color: #006CB5;
  text-decoration: underline;
  text-underline-offset: 4px;   /* spacing between the text and its underline */
  cursor: pointer;
}
.en-clamped .en-more { visibility: visible; }
/* Author info pinned to the bottom of every card — one plain line, no bold/colours */
.en-brief {
  margin-top: auto;
  padding-top: 24px;
  font-size: 15px;
  line-height: 1.5;
  font-weight: 400;
  color: #444;
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 900px) {
  .ws-scope__title {
  font-size: 32px;   /* 53.33 / 42 / 32 */
  font-weight: 400;
  line-height: 1.2;
  color: #000;
}
  .gk-cards { grid-template-columns: repeat(3, 1fr); }

  .en-card {
 
  min-height: 500px;

}
}
@media (max-width: 760px) {
  .ws-scope__title { font-size: 32px; }
  .ms-head__title { font-size: 22px; line-height: 1.3; }
  .ms-pie { width: 60px; height: 91px; }
  .ms-list li { font-size: 18px; line-height: 30px; }
  .gk-stat__num { font-size: 32px; }
  .bul-card h3 { font-size: 24px; }
  .en-quote { font-size: 18px; }
  .en-brief { font-size: 12px; }
  .ws-scope__grid { grid-template-columns: 1fr; }
  .gk-cards { grid-template-columns: repeat(2, 1fr); }
  .gk-card { height: auto; min-height: 210px; }
  .gk-stats { grid-template-columns: repeat(2, 1fr); row-gap: 24px; column-gap: 16px; }
  .bul-grid { grid-template-columns: 1fr; row-gap: 22px;  flex-direction: column;}
  .bul-content { max-width: none; margin-left: 0; width: 100%; }
  .wt-grid { grid-template-columns: 1fr; row-gap: 22px;         flex-direction: column;}
  .wt-views { max-width: none; width: 100%; }
  .bul-years, .wt-nav {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 10px;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;               /* Firefox */
  }
  .bul-years::-webkit-scrollbar, .wt-nav::-webkit-scrollbar { display: none; }  /* Chrome/Safari */
  /* show 6 items per view; any beyond that slide in */
  .bul-year, .wt-navlink { padding: 8px 0; flex: 0 0 calc((100% - 50px) / 6); text-align: center; }
  /* horizontal tabs: move the bar to a bottom underline */
  .bul-year::before, .wt-navlink::before { top: auto; bottom: 0; left: 0; right: 0; width: auto; height: 3px; }
  .cl-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
  .gk-cards { grid-template-columns: 1fr; }
  .cl-grid { grid-template-columns: repeat(2, 1fr); }
}