/* ==========================================================================
   iottag — resources pages stylesheet
   Page-specific components for /resources/… — load AFTER main.css and
   platform.css (resources pages reuse .hero--photo / .photo-card / .btn):
     <link rel="stylesheet" href="…/assets/css/main.css">
     <link rel="stylesheet" href="…/assets/css/platform.css">
     <link rel="stylesheet" href="…/assets/css/resources.css">
   Contents:
     1. Case Studies hub (case-studies, prefix cs-)
     2. Video Library (video-library, prefix vl-)
     3. White Papers (white-papers, prefix wp-)
     4. Articles & Insights (articles-insights, prefix ai-)
   ========================================================================== */

/* 1. CASE STUDIES HUB (case-studies) ---------------------------------------- */
/* hero overlay — same 80% brand-gradient wash as the technology heroes */
.hero__ovl--cs {
  position: absolute; inset: 0; z-index: 1;
  opacity: .8;
  background: var(--grad-hero);
  backdrop-filter: blur(4px);
}

/* industry filter tabs — segmented bar, active tab white with blue underline */
.cs-tabs {
  display: flex; width: 100%;
  background: #fff;
  border: 1px solid #e5e7eb; border-radius: var(--r-md);
  overflow: hidden;
}
.cs-tab {
  flex: 1 1 0; min-width: 0;
  height: 58px; padding: 0 16px;
  border: 0; background: #f2f2f2;
  font-family: var(--f-body); font-size: 18px; line-height: 1.2; color: var(--c-ink);
  cursor: pointer;
  transition: background .15s ease;
}
.cs-tab + .cs-tab { border-left: 1px solid #e5e7eb; }
.cs-tab:hover { background: #fafafa; }
.cs-tab.is-active { background: #fff; box-shadow: inset 0 -2px 0 #268fc3; }
@media (max-width: 960px) {
  .cs-tabs { flex-wrap: wrap; }
  .cs-tab { flex: 1 1 33%; }
  .cs-tab + .cs-tab { border-left: 0; }
}

/* featured case-study cards — pale-blue body under a 180px photo */
.cs-cards { display: flex; gap: 24px; width: 100%; }
.cs-card {
  flex: 1 1 0; min-width: 0;
  background: var(--c-blue-pale);
  border-radius: var(--r-md); overflow: hidden;
  display: flex; flex-direction: column;
}
.cs-card__img { width: 100%; height: 180px; object-fit: cover; }
.cs-card__body { flex: 1; padding: 20px 24px; display: flex; flex-direction: column; gap: 20px; }
.cs-card__title {
  margin: 0;
  font-family: var(--f-alt); font-weight: 400; font-size: 24px; line-height: 1.4;
  letter-spacing: -.01em; color: #4b5059;
}
.cs-card__sub { margin: 0; font-family: var(--f-body); font-size: 12px; line-height: 1.2; color: var(--c-ink); }
.cs-card__text { margin: 0; flex: 1; font-family: var(--f-body); font-size: 12px; line-height: 1.2; color: var(--c-grey); }
.cs-card__actions { display: flex; gap: 8px; }
.cs-card__actions .btn { flex: 1 1 0; min-width: 0; padding: 10px 12px; gap: 12px; white-space: nowrap; }
@media (max-width: 1100px) { .cs-cards { flex-wrap: wrap; } .cs-card { min-width: 300px; } }

/* outcomes grid — bordered white cells in 4-up / 3-up rows */
.cs-grid {
  width: 100%;
  background: #fff;
  border: 1px solid var(--c-line); border-radius: var(--r-md);
  overflow: hidden;
}
.cs-grid__row { display: flex; }
.cs-grid__row + .cs-grid__row { border-top: 1px solid var(--c-line); }
.cs-cell {
  flex: 1 1 0; min-width: 0; min-height: 200px;
  padding: 24px;
  display: flex; flex-direction: column; justify-content: center; gap: 16px;
}
.cs-cell + .cs-cell { border-left: 1px solid var(--c-line); }
.cs-cell .icon { font-size: 48px; color: var(--c-blue); }
.cs-cell img { width: 48px; height: 48px; }
.cs-cell__label {
  margin: 0;
  font-family: var(--f-alt); font-weight: 400; font-size: 24px; line-height: 1.4;
  letter-spacing: -.01em; color: #4b5059;
}
@media (max-width: 1100px) {
  .cs-grid__row { flex-wrap: wrap; }
  .cs-cell { flex: 1 1 45%; min-height: 160px; border-top: 1px solid var(--c-line); }
  .cs-grid__row:first-child .cs-cell:nth-child(-n+2) { border-top: 0; }
}

/* solution photo strip — joined 240px tiles, 1px seams, bold titles */
.cs-strip { display: flex; gap: 1px; width: 100%; border-radius: var(--r-md); overflow: hidden; }
.cs-strip .photo-card { border-radius: 0; height: 240px; padding: 20px; }
@media (max-width: 1100px) { .cs-strip { flex-wrap: wrap; } .cs-strip .photo-card { min-width: 180px; } }

/* 2. VIDEO LIBRARY (video-library) ------------------------------------------ */
/* video cards — pale card, static player chrome over the thumbnail
   (tabs reuse .cs-tabs, hero overlay reuses .hero__ovl--cs) */
.vid-grid { display: flex; gap: 24px; width: 100%; }
.vid-card {
  flex: 1 1 0; min-width: 300px;
  background: var(--c-blue-pale);
  border: 1px solid rgba(29,162,216,.12); border-radius: var(--r-md);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.vid-card__media { position: relative; height: 320px; }
.vid-card__thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vid-card__play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 80px; height: 80px; border-radius: 50%;
  background: var(--c-blue-light);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 32px 32px rgba(0,0,0,.14);
}
.vid-card__play img { width: 40px; height: 40px; }
.vid-card__bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 80px;
  padding: 0 16px 20px;
  display: flex; flex-direction: column; gap: 2px; justify-content: flex-end;
  background: url("../img/resources/vl-player-shade.png") center / cover no-repeat;
}
.vid-card__time { display: flex; gap: 10px; align-items: center; font-family: var(--f-alt); font-weight: 700; font-size: 16px; line-height: 1.5; color: #fff; }
.vid-card__time span:first-child { flex: 1 1 0; }
.vid-card__time img { width: 40px; height: 40px; }
.vid-card__progress { height: 4px; background: #e5e7eb; border-radius: 9px; display: flex; align-items: center; }
.vid-card__progress img { width: 16px; height: 16px; display: block; }
.vid-card__body { padding: 20px 24px; display: flex; flex-direction: column; gap: 8px; }
.vid-card__body h3 { margin: 0; font-family: var(--f-alt); font-weight: 700; font-size: 24px; line-height: 1.3; letter-spacing: -.01em; color: #4b5059; }
.vid-card__body p { margin: 0; font-family: var(--f-body); font-size: 18px; line-height: 1.2; color: var(--c-ink); }
@media (max-width: 1100px) { .vid-grid { flex-wrap: wrap; } }

/* demonstration cards — 3 staggered rows of white icon cards */
.vl-demo { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; flex-shrink: 0; }
.vl-demo__row { display: flex; gap: 4px; }
.vl-demo__row--o { padding-left: 100px; }
.vl-demo-card {
  width: 244px; height: 170px;
  background: #fff;
  border: 1px solid var(--c-line); border-radius: var(--r-md);
  padding: 24px;
  display: flex; flex-direction: column; gap: 16px; justify-content: center;
}
.vl-demo-card img { width: 48px; height: 48px; }
.vl-demo-card img.vl-demo-card__ic--sm { width: 40px; height: 40px; }
.vl-demo-card h3 { margin: 0; font-family: var(--f-alt); font-weight: 400; font-size: 22px; line-height: 1.4; letter-spacing: -.01em; color: #4b5059; }
@media (max-width: 1240px) {
  .vl-demo { width: 100%; align-items: center; }
  .vl-demo__row { flex-wrap: wrap; justify-content: center; }
  .vl-demo__row--o { padding-left: 0; }
}

/* joined photo strip — 320px (default) / 280px (--s) tiles, 2px seams */
.vl-strip { display: flex; gap: 2px; width: 100%; border-radius: var(--r-md); overflow: hidden; }
.vl-strip .photo-card { border-radius: 0; }
.vl-strip--s .photo-card { height: 280px; }
@media (max-width: 1100px) {
  .vl-strip { flex-wrap: wrap; gap: 8px; }
  .vl-strip .photo-card { min-width: 240px; border-radius: var(--r-md); }
}

/* customer-story tiles — .ts-tiles variant with 24px labels */
.ts-tiles--vl { flex: 0 0 560px; }
.ts-tiles--vl .ts-tile { padding: 24px; }
.ts-tiles--vl .ts-tile h3 { font-size: 24px; }
@media (max-width: 1100px) { .ts-tiles--vl { flex: 1 1 100%; } }

/* 3. WHITE PAPERS (white-papers, prefix wp-) ---------------------------------- */
/* featured white-paper cards - pale card, flexing photo, full-width download */
.wp-cards { display: flex; gap: 24px; width: 100%; }
.wp-card {
  flex: 1 1 0; min-width: 300px; height: 400px;
  background: var(--c-blue-pale);
  border: 1px solid rgba(29,162,216,.12); border-radius: var(--r-md);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.wp-card__img { flex: 1 1 0; min-height: 0; width: 100%; object-fit: cover; }
.wp-card__body { padding: 20px 24px; display: flex; flex-direction: column; gap: 16px; }
.wp-card__title {
  margin: 0;
  font-family: var(--f-alt); font-weight: 400; font-size: 24px; line-height: 1.4;
  letter-spacing: -.01em; color: #4b5059;
}
.wp-card__sub { margin: 0; font-family: var(--f-body); font-size: 18px; line-height: 1.2; color: var(--c-ink); }
.wp-card__body .btn { width: 100%; padding: 8px 20px; height: 40px; }
@media (max-width: 1100px) {
  .wp-cards { flex-wrap: wrap; }
  .wp-card { height: auto; }
  .wp-card__img { flex: none; height: 200px; }
}

/* white-paper category rows - bold doc list beside a rounded photo */
.wp-cat { display: flex; gap: 80px; align-items: center; width: 100%; }
.wp-cat--flip { flex-direction: row-reverse; }
.wp-cat__list { flex: 1 1 0; min-width: 320px; margin: 0; padding: 0; list-style: none; }
.wp-cat__item {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 16px 0;
  border-bottom: 1px solid rgba(6,3,9,.15);
}
.wp-cat__item img { width: 40px; height: 40px; flex-shrink: 0; }
.wp-cat__item span {
  font-family: var(--f-alt); font-weight: 700; font-size: 24px; line-height: 1.3;
  letter-spacing: -.01em; color: #4b5059;
  padding-top: 5px;
}
.wp-cat__img { width: 480px; max-width: 100%; border-radius: var(--r-md); object-fit: cover; flex-shrink: 0; }
.section--grey { background: var(--c-surface); }   /* Coming soon band */
.section.section--grey { box-shadow: 0 0 0 100vmax var(--c-surface); clip-path: inset(0 -100vmax); }   /* full-bleed tint, box stays capped */
@media (max-width: 1100px) {
  .wp-cat, .wp-cat--flip { flex-direction: column; gap: 40px; align-items: flex-start; }
  .wp-cat__img { width: 100%; }
}

/* 4. ARTICLES & INSIGHTS (articles-insights, prefix ai-) --------------------- */
/* short photo hero (Figma header is 400px tall) */
.hero--sm { min-height: 400px; }

/* article cards ride on .wp-card — 320px tall, white variant, invisible spacer */
.wp-card--art { height: 320px; }
.wp-card--white { background: #fff; }
.wp-card--ghost { visibility: hidden; }

/* recommended-articles rows ride on .wp-cat — linked headings, trailing arrow */
.ai-kicker {
  margin: 0 0 22px;
  font-family: var(--f-alt); font-weight: 400; font-size: 24px; line-height: 1.4;
  letter-spacing: -.01em; color: var(--c-grey);
}
a.wp-cat__item { text-decoration: none; }
.wp-cat__item span { flex: 1 1 0; min-width: 0; transition: color .15s ease; }
/* the arrow span must keep the icon font — .wp-cat__item span (above) resets it */
.wp-cat__item .icon {
  font-family: "Material Symbols Outlined"; font-weight: 400;
  flex: 0 0 auto; padding-top: 0;
  font-size: 40px; color: var(--c-ink); transition: color .15s ease;
}
a.wp-cat__item:hover span, a.wp-cat__item:hover .icon { color: var(--c-blue); }
.wp-cat__img--tall { height: 520px; }

/* industry insights strip — joined 320px tiles, 2px seams, bold titles */
.ai-strip { display: flex; gap: 2px; width: 100%; border-radius: var(--r-md); overflow: hidden; }
.ai-strip .photo-card { border-radius: 0; height: 320px; padding: 24px; }
@media (max-width: 1100px) { .ai-strip { flex-wrap: wrap; } .ai-strip .photo-card { min-width: 240px; } }