/* Resources page (redesign_support_files/VosCast Resources - Daylight Glass.dc.html) in Daylight Glass.
   Loads after tokens.css and site.css, on the Resources page only ($vcPageCss = 'resources'). Sections, glass,
   buttons and the closing panel are in site.css. */


/* One section: the opening, the four cards and the control panel note, over the shared blobs (site.css). The
   cards' icons are glyphs from the Flaticon font (site.css). */
.vc-res { position: relative; overflow: hidden; overflow: clip; padding: calc(var(--vc-header-h) + clamp(28px, 3vw, 40px)) 0 clamp(80px, 9vw, 128px); background: var(--bg); }
.vc-res__hero { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px 56px; }
.vc-res__copy { flex: 1 1 560px; min-width: 0; max-width: 760px; }
/* One short word, so the title runs larger than the other pages'. */
.vc-res__title { font-size: clamp(56px, 7.5vw, 104px); line-height: .92; letter-spacing: -0.045em; }
.vc-res__lead { flex: 1 1 320px; min-width: 0; max-width: 400px; margin-top: 0; }

/* The cards: one column, two from 860px. Each card is one link, named by its title and button. */
.vc-res__cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(16px, 2vw, 24px); margin: clamp(44px, 5vw, 64px) 0 0; padding: 0; list-style: none; }
@media (min-width: 860px) { .vc-res__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vc-res__cards > li { display: flex; min-width: 0; }
.vc-res-card { display: flex; flex: 1; flex-direction: column; align-items: flex-start; min-width: 0; padding: clamp(24px, 3vw, 36px); border: 1px solid rgba(15,22,38,.07); border-radius: var(--radius-card); background: var(--card); box-shadow: var(--shadow-card-soft); color: var(--ink); text-decoration: none; scroll-margin-top: calc(var(--vc-header-h) + 16px); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.vc-res-card:hover, .vc-res-card:focus { border-color: rgba(108,192,36,.45); color: var(--ink); text-decoration: none; }
.vc-res-card:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(15,22,38,.04), 0 32px 56px -28px rgba(15,22,38,.32); }
.vc-res-card__head { display: flex; align-items: center; gap: 16px; width: 100%; }
.vc-res-card__icon { flex: none; display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border: 1px solid rgba(108,192,36,.45); border-radius: var(--radius-tile); background: var(--lime-soft); color: var(--acc-strong); }
.vc-res-card__icon::before { font-family: Flaticon; font-size: 24px; line-height: 1; font-style: normal; font-weight: normal; }
.vc-res-card__icon--kb::before { content: "\f104"; }
.vc-res-card__icon--plans::before { content: "\f118"; }
.vc-res-card__icon--start::before { content: "\f117"; }
.vc-res-card__icon--licensing::before { content: "\f119"; }
.vc-res-card__title { flex: 1; min-width: 0; font-size: clamp(24px, 2.3vw, 30px); line-height: 1.12; font-weight: 800; letter-spacing: -0.025em; text-wrap: balance; }
.vc-res-card__n { flex: none; color: var(--mut3); font-family: var(--font-mono); font-size: 13px; font-weight: 700; }
.vc-res-card__text { margin-top: 18px; color: var(--mut); font-size: 17px; text-wrap: pretty; }
.vc-res-card__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 16px; width: 100%; margin-top: auto; padding-top: 28px; }
.vc-res-card__kind { color: var(--mut2); font-family: var(--font-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.vc-res-card__go { padding: 0 19px; }
.vc-res-card:hover .vc-btn--primary { border-color: var(--lime-hover); background: var(--lime-hover); }
.vc-res-card:hover .vc-btn--ghost { background: rgba(15,22,38,.084); color: var(--acc-strong); }

/* The control panel note, on glass. */
.vc-res-note { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 32px; margin-top: clamp(16px, 2vw, 24px); padding: clamp(20px, 2.4vw, 26px) clamp(22px, 3vw, 32px); border-color: rgba(15,22,38,.08); border-radius: 24px; box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 24px 48px -30px rgba(15,22,38,.2); }
.vc-res-note__text { display: flex; flex: 1 1 420px; align-items: baseline; gap: 14px; min-width: 0; color: var(--ink2); font-size: 17px; text-wrap: pretty; }
.vc-res-note__text strong { flex: none; color: var(--acc-strong); font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.vc-res-note__link { flex: none; display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink); font-size: 15px; font-weight: 700; text-decoration: none; }
.vc-res-note__link:hover, .vc-res-note__link:focus { color: var(--acc-strong); text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  .vc-res-card { transition: none; }
  .vc-res-card:hover { transform: none; }
}