/* ==========================================================================
   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;
}
/* photo is a fixed height (never squeezed by a wrapping title) so every card in
   a row lines up: same photo edge, same title baseline, same button position */
.wp-card__img { flex: 0 0 240px; height: 240px; width: 100%; object-fit: cover; }
.wp-card__body { flex: 1 1 auto; min-height: 0; 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%; flex: 0 0 40px; margin-top: auto; padding: 8px 20px; height: 40px; }
/* featured white-paper cards run the smaller Figma H5 title (20px) */
.wp-cards--feat .wp-card__title { font-size: 20px; }
@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--art .wp-card__img { flex-basis: 150px; height: 150px; }   /* shorter card → shorter photo, body still fits a 2-line title */
.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; } }

/* white paper download gate (Figma 13149:28805) --------------------------
   Overlay + 680px card shown when a featured white paper is downloaded. */
.wp-gate {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.wp-gate[hidden] { display: none; }
/* Locking the page scroll removes the scrollbar, which widens the viewport and
   nudges the centred content (and the fixed header) to the right. --sb-gutter is
   measured in JS and pads that width back so nothing behind the overlay moves. */
body.is-gate-open { overflow: hidden; padding-right: var(--sb-gutter, 0px); }
body.is-gate-open .site-header { padding-right: calc(64px + var(--sb-gutter, 0px)); }
.wp-gate__ovl { position: absolute; inset: 0; background: rgba(64,64,64,.4); }
.wp-gate__dialog {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 40px;
  width: 680px; max-width: 100%; max-height: 100%; overflow: auto;
  padding: 41px;
  background: #fff;
  border: 1px solid rgba(6,3,9,.15); border-radius: var(--r-md);
  box-shadow: 0 32px 64px -12px rgba(0,0,0,.14);
}
.wp-gate__x {
  position: absolute; top: 12px; right: 12px;
  display: flex; padding: 4px;
  background: none; border: 0; border-radius: var(--r-sm);
  color: var(--c-grey-2); cursor: pointer;
}
.wp-gate__x:hover { color: var(--c-ink-2); }
.wp-gate__x .icon { font-size: 24px; }

.wp-gate__head { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-align: left; }
.wp-gate__title {
  margin: 0;
  font-family: var(--f-alt); font-weight: 700; font-size: 24px; line-height: 1.3;
  letter-spacing: -.01em; color: #000;
}
.wp-gate__sub { margin: 0; font-family: var(--f-alt); font-size: 16px; line-height: 1.5; color: #060309; }

.wp-gate__form { display: flex; flex-direction: column; align-items: center; gap: 40px; width: 100%; }
.wp-gate__fields { display: flex; gap: 20px; width: 100%; }
.wp-gate__field { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.wp-gate__field label { font-size: 16px; line-height: 1.2; color: #060309; }
.wp-gate__field input {
  height: 40px; padding: 0 20px;
  font-family: inherit; font-size: 18px; line-height: 1.2; color: var(--c-ink-2);
  background: #fff; border: 1px solid var(--c-line); border-radius: var(--r-md);
}
.wp-gate__field input:focus { outline: 2px solid var(--c-blue); outline-offset: -1px; }
.wp-gate__form .btn { gap: 12px; }

@media (max-width: 620px) {
  .wp-gate__dialog { padding: 32px 24px; gap: 32px; }
  .wp-gate__fields { flex-direction: column; }
}