/* Learn page: the video library, plus the pieces the CMS-driven campaign
   needs beyond the approved webinar styles in banner-vca.css and
   webinar-learn.css.

   Library cards deliberately match the blog tiles below them (white card,
   16px corners, picture flush to the top edge, body padded under it), which
   is the "consistency between old and new designs" asked for in review. */

/* ------------------------------------------------------------- section */

.vlib {
  background: #f6f9fb;
  padding: 104px 0 0;
}

.vlib-head {
  max-width: 720px;
  margin: 0 auto 44px;
  text-align: center;
}

.vlib-eyebrow {
  margin: 0 0 16px;
  font-family: var(--font-body, "Creato Display", sans-serif);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--brand-teal, #27bfd4);
}

.vlib-heading {
  margin: 0 0 16px;
  font-family: var(--font-display, "Recoleta", Georgia, serif);
  font-weight: 600;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--brand-navy, #073149);
}

.vlib-lede {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: rgba(51, 49, 52, 0.72);
}

/* Gate status under the intro: a register prompt until the visitor has
   registered, a quiet confirmation after. */
.vlib-gate { margin-top: 24px; }

.vlib-gate p {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 12px;
  margin: 0;
  padding: 10px 12px 10px 18px;
  border: 1px solid rgba(7, 49, 73, 0.1);
  border-radius: 999px;
  background: #fff;
  font-family: var(--font-body, "Creato Display", sans-serif);
  font-size: 14.5px;
  font-weight: 600;
  color: var(--brand-navy, #073149);
}

.vlib-gate .vcv-lock-ico { width: 17px; height: 17px; flex: none; color: var(--brand-teal, #27bfd4); }

.vlib-gate-btn {
  padding: 9px 18px;
  border: 0;
  border-radius: 999px;
  background: var(--vca-orange, #fe6710);
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.vlib-gate-btn:hover { background: #e85a08; }
.vlib-gate-btn:focus-visible { outline: 2px solid var(--brand-teal, #27bfd4); outline-offset: 3px; }

.vlib-gate-open { display: none !important; padding-right: 18px !important; }
.learn-unlocked .vlib-gate-locked { display: none !important; }
.learn-unlocked .vlib-gate-open { display: inline-flex !important; }

/* ------------------------------------------------------------- grid */

/* Three across; a short row (two cards, or one left over) centres under the
   heading rather than hugging the left edge. */
.vlib-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, calc((100% - 56px) / 3)));
  justify-content: center;
  gap: 28px;
  margin: 0;
  padding: 0 0 88px;
  border-bottom: 1px solid rgba(7, 49, 73, 0.08);
  list-style: none;
}

.vlib-item {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(7, 49, 73, 0.09);
  border-radius: 16px;
  background: #fff;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.vlib-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(7, 49, 73, 0.1);
}

/* The player is laid over the frame from this wrapper (see webinar-learn.js),
   so it is the positioning parent, not the card. */
.vlib-media { position: relative; }

/* The card frame: flush to the card's top edge like a blog tile picture,
   rather than the floating glass frame used on the navy hero. */
.vlib-thumb {
  border: 0;
  border-radius: 16px 16px 0 0;
  background: #0c1c2d;
  box-shadow: none;
}

.vlib-thumb .vcb-player-poster { border-radius: 16px 16px 0 0; }

.vcv-card.vlib-card:hover .vlib-thumb,
.vcv-card.vlib-card:focus-visible .vlib-thumb {
  transform: none;
  box-shadow: none;
}

.vcv-card.vlib-card:focus-visible { outline-offset: -3px; border-radius: 16px 16px 0 0; }

.vlib-media .vcv-player { border-radius: 16px 16px 0 0; }

.vlib-thumb .vcb-player-play { width: 58px; font-size: 17px; }
.vlib-thumb .vcb-player-center { gap: 10px; padding-bottom: 0; }
.vlib-thumb .vcb-player-coming { font-size: 13px; letter-spacing: 0.28em; }

.vlib-duration {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  padding: 4px 9px;
  border-radius: 6px;
  background: rgba(3, 22, 33, 0.78);
  color: #fff;
  font-family: var(--font-body, "Creato Display", sans-serif);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.vlib-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px 24px 26px;
}

.vlib-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin: 0 0 12px;
  font-family: var(--font-body, "Creato Display", sans-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-teal, #27bfd4);
}

.vlib-date { color: rgba(51, 49, 52, 0.48); }

.vlib-name {
  margin: 0 0 12px;
  font-family: var(--font-display, "Recoleta", Georgia, serif);
  font-weight: 600;
  font-size: clamp(19px, 1.45vw, 22px);
  line-height: 1.3;
  color: var(--brand-navy, #073149);
}

.vlib-desc p {
  margin: 0 0 10px;
  font-size: 14.5px;
  line-height: 1.65;
  color: rgba(51, 49, 52, 0.74);
}

.vlib-desc p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------- gate */

/* Until the visitor registers, a ready video's play mark shows a lock
   instead of the triangle. It replaces the mark rather than adding a label,
   so nothing extra sits on the thumbnail's own artwork. With no JS the
   triangle stays, which is the honest default. */
.vcb-player-play .vcv-lock-ico,
.vcv-next-mark .vcv-lock-ico { display: none; width: 44%; height: 44%; }

.learn-gated .vcv-card.has-video .vcv-ico-play { display: none; }
.learn-gated .vcv-card.has-video .vcb-player-play .vcv-lock-ico,
.learn-gated .vcv-card.has-video .vcv-next-mark .vcv-lock-ico { display: block; }
.learn-gated .vcv-card.has-video .vcb-player-play { padding-left: 0; }

/* The library says it in words too, under the picture. */
.vlib-locked-tag {
  display: none;
  align-items: center;
  gap: 6px;
  color: rgba(7, 49, 73, 0.62);
}

.vlib-locked-tag .vcv-lock-ico { width: 13px; height: 13px; }
.learn-gated .vlib-locked-tag { display: inline-flex; }

.vcv-card[aria-disabled="true"] { cursor: default; }

/* --------------------------------------------- campaign format variants */

/* A hero with no featured video or image: the intro takes the full width. */
.vcv-top-solo { grid-template-columns: minmax(0, 1fr) !important; }
.vcv-top-solo .vcv-intro { max-width: 820px; }

/* A hero that features an image rather than a video. */
.vcv-feature-image { margin: 0; }
.vcv-feature-image img {
  display: block;
  width: 100%;
  border-radius: 16px;
}

/* Speakers on the navy campaign band. The homepage banner's portrait row
   left-aligns three large photos and leaves the rest of a full-width band
   empty. Here the row takes the takeaways' three columns (same grid, same
   gap) so each author sits under a column, as a compact portrait beside
   their name. */
.cmp-speakers {
  display: block;
  margin-top: clamp(40px, 4.4vw, 60px);
  padding-top: clamp(28px, 3vw, 40px);
  border-top: 1px solid rgba(255, 255, 255, 0.09);
}

.cmp-speakers .vcb-hear { margin-bottom: 22px; font-size: 12px; }

.cmp-speakers .vcb-speaker-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 48px);
}

.cmp-speakers .vcb-speaker {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 18px;
  align-items: center;
}

.cmp-speakers .vcb-speaker-photo {
  grid-row: 1 / 3;
  width: clamp(72px, 6.2vw, 92px);
  aspect-ratio: 1;
  margin: 0;
  border-radius: 16px;
  overflow: hidden;
}

.cmp-speakers .vcb-speaker-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: none;
}

.cmp-speakers .vcb-speaker-name { align-self: end; font-size: clamp(15px, 1.2vw, 17px); }
.cmp-speakers .vcb-speaker-role { align-self: start; margin-top: 4px; font-size: 13px; }

@media (max-width: 767px) {
  .cmp-speakers .vcb-speaker-list { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .cmp-speakers .vcb-speaker-photo { width: 72px; border-radius: 14px; }
}

.wbn-cta-note {
  margin: 14px 0 0;
  font-size: 14px;
  color: rgba(7, 49, 73, 0.6);
}

.wbn-list {
  max-width: 760px;
  margin: 0 auto 24px;
  padding-left: 1.2em;
  text-align: left;
  font-size: 17px;
  line-height: 1.7;
  color: rgba(7, 49, 73, 0.82);
}

/* The success panel's Start Watching button. */
.wbl-success-go {
  width: 100%;
  justify-content: center;
  margin-top: 22px;
  font-size: 16px;
}

/* ------------------------------------------------------------- responsive */

@media (max-width: 991px) {
  .vlib { padding-top: 80px; }
  .vlib-grid { grid-template-columns: repeat(auto-fit, minmax(0, calc((100% - 22px) / 2))); gap: 22px; padding-bottom: 64px; }
}

@media (max-width: 639px) {
  .vlib { padding-top: 64px; }
  .vlib-head { margin-bottom: 32px; }
  .vlib-grid { grid-template-columns: minmax(0, 1fr); padding-bottom: 52px; }
  .vlib-gate p { border-radius: 18px; padding: 12px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .vlib-item { transition: none; }
  .vlib-item:hover { transform: none; }
}

/* Review copies of the Learn page (learn/<preview>/) carry this ribbon. */
.learn-preview-ribbon {
  position: fixed;
  left: 50%;
  bottom: 18px;
  z-index: 9999;
  transform: translateX(-50%);
  max-width: calc(100% - 32px);
  padding: 10px 18px;
  border-radius: 999px;
  background: #fe6710;
  box-shadow: 0 12px 30px rgba(3, 22, 33, 0.3);
  color: #fff;
  font-family: var(--font-body, "Creato Display", sans-serif);
  font-size: 13.5px;
  font-weight: 700;
  text-align: center;
}

.learn-preview-ribbon a { color: #fff; text-decoration: underline; }

/* The name under the large card when a campaign features more than one video. */
.vcv-feature-name {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 16px 0 6px;
  font-family: var(--font-display, "Recoleta", Georgia, serif);
  font-size: clamp(18px, 1.5vw, 21px);
  color: #fff;
}

.vlib-empty {
  margin: 0;
  padding: 0 0 88px;
  text-align: center;
  color: rgba(51, 49, 52, 0.6);
}

/* -------------------------------------------- up next (featured video 2+) */

/* The second video of a pair, and any after it, as compact rows under the
   large card. They play in the large frame (webinar-learn.js). */
.vcv-next {
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
  padding: 18px 0 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  list-style: none;
}

.vcv-next-item.vcv-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 14px 8px 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.vcv-next-item.vcv-card:hover { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.2); }
.vcv-next-item.vcv-card:focus-visible { outline: 2px solid var(--vca-teal, #27bfd4); outline-offset: 3px; border-radius: 14px; }

.vcv-next-thumb {
  position: relative;
  flex: none;
  width: 148px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 10px;
  background: #0c1c2d;
}

.vcv-next-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Not released yet: the same defocused still as the coming-soon cards. */
.vcv-next-item:not(.has-video) .vcv-next-thumb img { opacity: 0.6; filter: blur(5px) saturate(0.9); transform: scale(1.15); }

/* Gated: light blur on rail cards with a video until the visitor registers. */
.learn-gated .vcv-next-item.has-video .vcv-next-thumb img { opacity: 0.7; filter: blur(3px) saturate(0.95); transform: scale(1.08); }

.vcv-next-mark {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: auto;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  background: rgba(3, 22, 33, 0.55);
  color: #fff;
  font-size: 11px;
}

.vcv-next-mark .vcv-ico-play { padding-left: 2px; }

.vcv-next-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

.vcv-next-title {
  font-family: var(--font-display, "Recoleta", Georgia, serif);
  font-size: 17px;
  line-height: 1.3;
  color: #fff;
}

.vcv-next-title .vcv-num { margin-right: 4px; font-size: 13px; }

.vcv-next-meta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body, "Creato Display", sans-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(214, 234, 238, 0.66);
}

.vcv-next-meta.is-soon { color: #ff9a5c; }

.vcv-clock-ico { width: 14px; height: 14px; flex: none; vertical-align: -2px; }

/* No single-word last lines in the short copy blocks. */
.vlib-lede { text-wrap: balance; }
.vlib-desc p,
.wbl-writeup,
.vcv-next-title { text-wrap: pretty; }

/* ------------------------------------------------------------- header */

/* The navy hero pulls the header in to its own wide gutter (6.4vw, in
   banner-vca.css) so the logo lines up with the headline. Below 1400px that
   left the menu too little room, and the Book a Workshop cluster wrapped
   onto the hero over the campaign label. Tighten the shared gutter there;
   the logo and the hero still line up. */
@media (max-width: 1399.98px) {
  body:has(main > .vca-banner:first-of-type),
  body:has(main > .vca-banner:first-of-type) .vca-banner { --vca-gutter: clamp(20px, 2.5vw, 40px); }
}

/* Preview ribbon: dismissable, so it never has to sit over content. */
.learn-preview-ribbon { display: flex; align-items: center; gap: 12px; padding-right: 8px; }
.learn-preview-ribbon button {
  display: grid;
  place-items: center;
  flex: none;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}

/* The menu button's four squares are drawn with a navy outline, right for
   the white header and invisible on the navy hero. */
body:has(main > .vca-banner:first-of-type) .header-absolute .menu_btn .cubes span { border-color: #fff; }
/* The second square is the diamond, drawn with an inset shadow, not a border. */
body:has(main > .vca-banner:first-of-type) .header-absolute .menu_btn .cubes span:nth-child(2) { box-shadow: inset 0 0 0 2px #fff; }

/* A hero with no lockup image (a white paper, say) put its headline flush
   against the labels: the lockup's own margin was providing that space. */
.vcb-status + .vcb-headline { margin-top: clamp(26px, 2.4vw, 34px); }




/* No single-word last line under the campaign label. */
.cmp-band .vcb-headline { text-wrap: balance; }

/* The ribbon's pill shape cannot hold wrapped text: on narrow screens it
   becomes a full-width bar at the bottom edge. */
.learn-preview-ribbon > span { flex: 1; min-width: 0; }
.learn-preview-ribbon { border-radius: 16px; }
@media (max-width: 639px) {
  .learn-preview-ribbon {
    left: 12px;
    right: 12px;
    bottom: 12px;
    max-width: none;
    transform: none;
    border-radius: 14px;
    padding: 10px 10px 10px 14px;
    font-size: 12.5px;
    text-align: left;
  }
}

/* ------------------------------------------------------- document cover */

/* A download campaign shows the paper as a report cover: straight, A4
   proportions, rounded like the site's video cards, a navy art panel with
   concentric circles over editorial type. Deliberately flat, like a
   published report rather than a marketing mock-up. */
.cmp-cover {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: clamp(10px, 1.6vw, 24px) 0 0;
}

/* A soft light behind the paper, so it sits on the navy rather than in it. */
.cmp-cover::before {
  content: "";
  position: absolute;
  top: 6%;
  left: 50%;
  width: 78%;
  aspect-ratio: 1;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(39, 191, 212, 0.16), transparent);
  pointer-events: none;
}

.cmp-cover-page {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(calc(100% - 24px), 330px);
  aspect-ratio: 1 / 1.414;
  overflow: hidden;
  border-radius: 12px;
  background: #fff;
  /* A hairline ring keeps the edge crisp on navy; the shadows lift the page. */
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.06),
    0 30px 60px -12px rgba(2, 14, 24, 0.6),
    0 10px 24px rgba(2, 14, 24, 0.28);
  transition: transform 0.4s ease;
}

.cmp-cover:hover .cmp-cover-page { transform: translateY(-4px); }

.cmp-cover-art {
  position: relative;
  flex: 0 0 50%;
  overflow: hidden;
  /* Its own rounding, so Safari keeps the corners while the page lifts. */
  border-radius: 12px 12px 0 0;
  background: linear-gradient(155deg, #0b3a56 0%, #073149 45%, #04202f 100%);
}

.cmp-cover-svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.cmp-cover-mast {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: clamp(16px, 1.8vw, 22px) clamp(18px, 2vw, 26px);
}

.cmp-cover-mast img { width: clamp(78px, 7vw, 96px); height: auto; }

.cmp-cover-kind {
  font-family: var(--font-body, "Creato Display", sans-serif);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: #8fe3ee;
}

.cmp-cover-body {
  flex: 1;
  padding: clamp(18px, 2vw, 26px) clamp(18px, 2vw, 26px) 0;
}

/* A short teal rule leads into the title, as on a report cover. */
.cmp-cover-body::before {
  content: "";
  display: block;
  width: 28px;
  height: 2px;
  margin-bottom: 14px;
  background: #27bfd4;
}

.cmp-cover-title {
  margin: 0 0 10px;
  font-family: var(--font-display, "Recoleta", Georgia, serif);
  font-weight: 600;
  font-size: clamp(21px, 2vw, 27px);
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: #073149;
  text-wrap: balance;
}

.cmp-cover-title b { color: #1a8fa3; font-weight: inherit; white-space: nowrap; }

.cmp-cover-sub {
  margin: 0;
  font-family: var(--font-body, "Creato Display", sans-serif);
  font-size: clamp(12px, 1vw, 13.5px);
  line-height: 1.45;
  color: rgba(7, 49, 73, 0.66);
}

.cmp-cover-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  margin: 0 clamp(18px, 2vw, 26px);
  padding: 12px 0 clamp(14px, 1.6vw, 20px);
  border-top: 1px solid rgba(7, 49, 73, 0.12);
  font-family: var(--font-body, "Creato Display", sans-serif);
}

.cmp-cover-authors { font-size: 9.5px; line-height: 1.45; color: rgba(7, 49, 73, 0.72); }
.cmp-cover-year { flex: none; font-size: 9.5px; font-weight: 700; letter-spacing: 0.14em; color: #073149; }

.cmp-cover-cap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 26px;
  font-family: var(--font-body, "Creato Display", sans-serif);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(214, 234, 238, 0.7);
}

.cmp-cover-cap svg { width: 16px; height: 16px; color: #27bfd4; }

@media (prefers-reduced-motion: reduce) {
  .cmp-cover-page { transition: none; }
}