/* Industry Talk Sessions (/industry-talks/). Everything is namespaced .it-* or nested under
   .it-page so it cannot leak into other pages. It builds on the shared .video-card /
   .video-thumb components in main.css and uses the site's own colour and spacing tokens. */

.it-page { --it-focus: var(--blue); }

/* ---------- hero ---------- */
.it-hero { padding: var(--sp-8) 0 var(--sp-7); background: linear-gradient(180deg, var(--bg-alt) 0%, #fff 100%); }
.it-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--sp-7); align-items: center; }
.it-eyebrow { margin: 0 0 var(--sp-3); font-family: var(--font-head); font-size: var(--fs-small); font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--orange); }
.it-hero h1 { margin: 0 0 var(--sp-4); font-size: var(--fs-hero); line-height: 1.04; letter-spacing: -0.025em; }
.it-lede { margin: 0 0 var(--sp-5); max-width: 36rem; font-size: 1.125rem; line-height: 1.6; color: var(--muted); }
.it-cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.it-cta-center { justify-content: center; }
.it-stats { list-style: none; margin: var(--sp-6) 0 0; padding: var(--sp-5) 0 0; border-top: 1px solid var(--border); display: grid; grid-template-columns: repeat(4, minmax(0, auto)); gap: var(--sp-5); justify-content: start; }
.it-stats li { display: flex; flex-direction: column; gap: 2px; }
.it-stats b { font-family: var(--font-head); font-size: 1.5rem; line-height: 1.1; color: var(--ink-strong); }
.it-stats span { font-size: var(--fs-tiny); color: var(--muted); line-height: 1.3; max-width: 9rem; }

/* collage of real session thumbnails: a quiet 2x2 with a staggered second column */
.it-collage { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.it-shot { display: block; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow-sm); aspect-ratio: 16 / 9; background: var(--bg-alt); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.it-shot:nth-child(even) { transform: translateY(var(--sp-5)); }
.it-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.it-shot:hover { box-shadow: var(--shadow); }
.it-shot:not(:nth-child(even)):hover { transform: translateY(-2px); }
.it-shot:nth-child(even):hover { transform: translateY(calc(var(--sp-5) - 2px)); }
.it-collage { padding-bottom: var(--sp-5); }

/* ---------- intro ---------- */
.it-intro { padding: 0 0 var(--sp-6); }
.it-intro .answer-box { max-width: 52rem; }

/* ---------- featured ---------- */
.it-feat { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
.it-feat-stack { display: grid; gap: var(--sp-5); }
.it-card.is-lead .it-title { font-size: 1.3rem; -webkit-line-clamp: 4; line-clamp: 4; }
.it-card.is-lead .it-sum { -webkit-line-clamp: 6; line-clamp: 6; }

/* ---------- search and filters ---------- */
.it-tools { display: grid; gap: var(--sp-4); margin-bottom: var(--sp-6); }
.it-search input { width: 100%; max-width: 30rem; padding: 0.8rem 1rem 0.8rem 2.75rem; border: 1px solid var(--border); border-radius: var(--radius-pill); background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236E6E73' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") no-repeat 1rem center; font: inherit; font-size: 1rem; color: var(--ink); }
.it-search input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(77, 159, 255, 0.25); }
.it-chipbar { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.it-chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.95rem; border: 1px solid var(--border); border-radius: var(--radius-pill); background: #fff; color: var(--ink); font: inherit; font-size: var(--fs-small); font-weight: 600; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease; }
.it-chip span { font-size: var(--fs-tiny); font-weight: 700; color: var(--muted); }
.it-chip:hover { border-color: var(--ink); }
.it-chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.it-chip[aria-pressed="true"] span { color: rgba(255, 255, 255, 0.75); }
.it-count { margin: 0; font-size: var(--fs-small); color: var(--muted); }
.it-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; white-space: nowrap; }

/* ---------- grid and cards ---------- */
.it-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); }
.it-card { margin: 0; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.it-card[hidden] { display: none; }
.it-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #d6d6dc; }
.it-card .video-thumb { border: 0; border-radius: 0; aspect-ratio: 16 / 9; box-shadow: none; }
.it-card .video-thumb:hover { transform: none; box-shadow: none; }
/* our thumbnails are already cropped to 16:9, so undo the letterbox zoom meant for hqdefault */
.it-card .video-thumb img { transform: none; }
.it-card .video-frame { border-radius: 0; }
.it-card figcaption { padding: var(--sp-4) var(--sp-4) var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-2); flex: 1; }
.it-meta { margin: 0; font-size: var(--fs-tiny); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.it-title { margin: 0; font-size: 1.05rem; line-height: 1.35; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; }
.it-who { margin: 0; font-size: var(--fs-small); line-height: 1.45; color: var(--body); }
.it-with { margin: 0; font-size: var(--fs-tiny); color: var(--muted); }
.it-sum { margin: 0; font-size: var(--fs-small); line-height: 1.55; color: var(--muted); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; }
.it-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; }
.it-tag { padding: 0.18rem 0.6rem; border-radius: var(--radius-pill); font-size: var(--fs-tiny); font-weight: 700; background: var(--bg-alt); color: var(--body); border: 1px solid var(--border); }
.it-t-ai { background: rgba(123, 97, 255, 0.1); border-color: rgba(123, 97, 255, 0.28); color: #4a35c4; }
.it-t-data { background: rgba(77, 159, 255, 0.12); border-color: rgba(77, 159, 255, 0.32); color: #1f5fb4; }
.it-t-careers { background: var(--orange-tint); border-color: var(--orange-tint-2); color: #a84700; }
.it-actions { margin-top: auto; padding-top: var(--sp-3); }

/* ---------- empty state ---------- */
.it-empty { text-align: center; padding: var(--sp-7) var(--sp-4); border: 1px dashed var(--border); border-radius: var(--radius); background: #fff; }
.it-empty[hidden] { display: none; }
.it-empty h3 { margin: 0 0 var(--sp-2); }
.it-empty p { margin: 0 0 var(--sp-4); color: var(--muted); }
.it-note { margin-top: var(--sp-6); max-width: 52rem; }

/* ---------- benefits and links ---------- */
.it-benefits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); }
.it-benefit { padding: var(--sp-5); border: 1px solid var(--border); border-radius: var(--radius); background: #fff; border-top: 3px solid var(--orange); }
.it-benefit:nth-child(2) { border-top-color: var(--purple); }
.it-benefit:nth-child(3) { border-top-color: var(--blue); }
.it-benefit h3 { margin: 0 0 var(--sp-2); font-size: 1.1rem; }
.it-benefit p { margin: 0; color: var(--muted); line-height: 1.6; }
.it-links { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); }
.it-link { position: relative; display: block; padding: var(--sp-5); padding-right: var(--sp-6); border: 1px solid var(--border); border-radius: var(--radius); background: #fff; color: inherit; text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; }
.it-link:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: var(--orange); }
.it-link h3 { margin: 0 0 var(--sp-2); font-size: 1.05rem; }
.it-link p { margin: 0; font-size: var(--fs-small); color: var(--muted); line-height: 1.5; }
.it-link span { position: absolute; top: var(--sp-5); right: var(--sp-5); color: var(--orange); font-weight: 800; transition: transform 0.2s ease; }
.it-link:hover span { transform: translateX(3px); }

/* second button on the orange closing banner */
.it-btn-ghost { background: transparent; color: #fff; border: 2px solid rgba(255, 255, 255, 0.9); }
.it-btn-ghost:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }

/* ---------- focus and motion ---------- */
.it-page .video-thumb:focus-visible,
.it-page .it-chip:focus-visible,
.it-page .it-watch:focus-visible,
.it-page .it-link:focus-visible,
.it-page .it-btn-ghost:focus-visible,
.it-page .it-shot:focus-visible,
.it-page .video-frame:focus-visible { outline: 3px solid var(--it-focus); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .it-page * { transition: none !important; }
  .it-shot:nth-child(even), .it-shot:nth-child(even):hover { transform: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .it-hero-grid { grid-template-columns: 1fr; gap: var(--sp-6); }
  .it-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .it-feat { grid-template-columns: 1fr; }
  .it-feat-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .it-benefits { grid-template-columns: 1fr; }
  .it-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .it-hero { padding: var(--sp-6) 0 var(--sp-6); }
  .it-grid, .it-feat-stack, .it-links { grid-template-columns: 1fr; }
  .it-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .it-collage { gap: var(--sp-2); }
  .it-cta .btn { flex: 1 1 100%; justify-content: center; text-align: center; }
  .it-chipbar { flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--sp-2); -webkit-overflow-scrolling: touch; }
  .it-chip { flex: none; }
}