/* About page (About v2, redesign_support_files/VosCast About v2 - Daylight Glass.dc.html) in Daylight Glass.
   Loads after tokens.css and site.css, on the About page only ($vcPageCss = 'about'). Sections, glass, play
   buttons, the closing panel and the floating demo button are in site.css. */


/* Icons in the tiles and cards: a green square with the drawing in it. */
.vc-about-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: 16px; background: rgba(108,192,36,.14); color: var(--acc-strong); }
.vc-about-icon svg { display: block; width: 26px; height: 26px; }

/* Hero: title, lead and stats card beside the studio photo. */
.vc-about-hero { position: relative; overflow: hidden; overflow: clip; padding: calc(var(--vc-header-h) + clamp(24px, 3vw, 40px)) 0 clamp(72px, 8vw, 112px); background: var(--bg); }
.vc-about-hero__grid { display: flex; flex-wrap: wrap; align-items: center; gap: 48px clamp(40px, 5vw, 72px); }
.vc-about-hero__copy { flex: 1.1 1 520px; min-width: 0; }
.vc-about-hero .vc-page-title { max-width: 640px; -webkit-hyphens: auto; hyphens: auto; }
.vc-about-hero .vc-page-lead { max-width: 540px; }
.vc-about-hero__media { flex: 1 1 400px; min-width: 0; max-width: 560px; margin: 0 auto; }

/* Stats card: two columns of figures with hairlines between them (the card clips the outer ones). */
.vc-about-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: clamp(36px, 4vw, 48px) 0 0; padding: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.9); border-radius: 28px; background: var(--vc-bright); -webkit-backdrop-filter: var(--vc-glass-blur); backdrop-filter: var(--vc-glass-blur); box-shadow: var(--vc-bright-shadow); list-style: none; }
.vc-about-stats li { display: flex; flex-direction: column; gap: 10px; padding: clamp(20px, 2.2vw, 28px); box-shadow: -1px 0 0 rgba(15,22,38,.1), 0 -1px 0 rgba(15,22,38,.1); }
/* "10,000,000+" is 6.05em wide in JetBrains Mono, so the size follows the column. */
.vc-about-stats strong { font-family: var(--font-mono); font-size: clamp(26px, 2.6vw, 36px); line-height: 1; font-weight: 500; letter-spacing: -0.05em; white-space: nowrap; }
.vc-about-stats strong span { color: var(--acc-large); }
.vc-about-stats li > span { color: var(--mut2); font-size: 15px; line-height: 1.35; }
@media (max-width: 479px) {
  .vc-about-stats li { padding: 18px 16px; }
  .vc-about-stats strong { font-size: clamp(20px, 5.6vw, 26px); }
  .vc-about-stats strong span { color: var(--acc-strong); }
}

.vc-about-photo { padding: 10px; border-radius: 36px; }
.vc-about-photo__frame { position: relative; aspect-ratio: 569 / 520; overflow: hidden; border-radius: 28px; background: var(--bg2); }
.vc-about-photo__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% center; }
.vc-about-photo__frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(200deg, rgba(10,15,28,0) 55%, rgba(10,15,28,.3) 100%); pointer-events: none; }
.vc-about-photo__badge { position: absolute; left: 14px; bottom: 14px; z-index: 1; display: inline-flex; align-items: center; gap: 8px; max-width: calc(100% - 28px); padding: 8px 14px; border-radius: var(--radius-pill); background: rgba(255,255,255,.9); color: var(--ink); font-family: var(--font-mono); font-size: 11px; line-height: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }

/* 01 · What we offer, on the pale band (light since 2026-10-27; the mockup had it on dark): the copy first in the
   page, the tiles to its left on wide screens. The tiles share one bright glass panel with hairlines between
   them, like the stats card, so they don't read as more of the white cards in the next section. */
.vc-about-offer { position: relative; overflow: hidden; overflow: clip; padding: clamp(80px, 9vw, 128px) 0; border-top: 1px solid rgba(15,22,38,.042); border-bottom: 1px solid rgba(15,22,38,.042); background: var(--bg2); }
.vc-about-offer__grid { display: grid; gap: 48px; }
.vc-about-offer__copy { max-width: 480px; }
.vc-about-offer__copy > h2 ~ p { color: var(--mut); font-size: 18px; text-wrap: pretty; }
.vc-about-offer__copy > h2 + p { margin-top: 22px; }
.vc-about-offer__copy > p + p { margin-top: 14px; }
.vc-about-offer .vc-btn { margin-top: 32px; }
.vc-about-tiles { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; margin: 0; padding: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.9); border-radius: 28px; background: var(--vc-bright); -webkit-backdrop-filter: var(--vc-glass-blur); backdrop-filter: var(--vc-glass-blur); box-shadow: var(--vc-bright-shadow); list-style: none; }
.vc-about-tile { display: flex; align-items: center; gap: 16px; padding: clamp(20px, 2.4vw, 30px); box-shadow: -1px 0 0 rgba(15,22,38,.1), 0 -1px 0 rgba(15,22,38,.1); }
.vc-about-tile h3 { font-size: 22px; line-height: 1.2; font-weight: 800; letter-spacing: -0.02em; }
.vc-about-tile p { margin-top: 6px; color: var(--mut2); font-size: 15px; text-wrap: pretty; }
@media (min-width: 480px) {
  .vc-about-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vc-about-tile { flex-direction: column; align-items: flex-start; gap: 18px; }
}
@media (min-width: 1024px) {
  .vc-about-offer__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; gap: clamp(40px, 6vw, 96px); }
  .vc-about-offer__copy { grid-area: 1 / 2; }
  .vc-about-tiles { grid-area: 1 / 1; }
}

/* 02 · About VosCast: six cards. On phones the icon sits beside the title, so each card stays short. */
.vc-about-cards { overflow: hidden; overflow: clip; padding: clamp(88px, 10vw, 140px) 0; }
.vc-about-cards .vc-section__head { margin-bottom: 44px; }
.vc-about-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
.vc-about-card { display: flex; flex-direction: column; gap: 20px; padding: clamp(24px, 2.6vw, 32px); border: 1px solid rgba(15,22,38,.07); border-radius: 26px; background: var(--card); box-shadow: var(--shadow-card); }
.vc-about-card h3 { font-size: 24px; line-height: 1.2; font-weight: 800; letter-spacing: -0.02em; }
.vc-about-card p { margin-top: 10px; color: var(--mut2); font-size: 16px; text-wrap: pretty; }
@media (max-width: 639px) {
  .vc-about-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px 16px; padding: 22px; }
  .vc-about-card > div { display: contents; }
  .vc-about-card h3 { font-size: 21px; }
  .vc-about-card p { grid-column: 1 / -1; margin-top: 0; }
  .vc-about-card .vc-about-icon { width: 44px; height: 44px; border-radius: 14px; }
  .vc-about-card .vc-about-icon svg { width: 22px; height: 22px; }
}
@media (min-width: 640px) { .vc-about-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .vc-about-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* 03 · Control panel: the screen on the left, the text and its tabs on the right (js/shots.js). On phones the
   tabs come before the screen they switch. Without JavaScript the tabs link to the full-size images. */
.vc-about-panel { padding: clamp(88px, 10vw, 140px) 0; }
.vc-about-tour { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.vc-about-tour__intro { margin-top: 22px; color: var(--mut); font-size: 18px; text-wrap: pretty; }
.vc-about-tour .vc-shots__list { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 960px) {
  .vc-about-tour { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); grid-template-rows: 1fr auto auto auto 1fr; grid-template-areas: "media ." "media head" "media tabs" "media foot" "media ."; gap: 0 clamp(40px, 5vw, 80px); align-items: center; }
  .vc-about-tour__head { grid-area: head; max-width: 480px; }
  .vc-about-tour .vc-shots__list { grid-area: tabs; max-width: 480px; margin-top: 28px; }
  .vc-about-tour .vc-shots__frame { grid-area: media; }
  .vc-about-tour__foot { grid-area: foot; max-width: 480px; }
}
.vc-shots__tab { display: flex; align-items: center; gap: 14px; width: 100%; height: 100%; min-height: 44px; padding: 14px 16px; border: 1px solid rgba(15,22,38,.1); border-radius: 18px; background: transparent; color: var(--ink); font: inherit; font-size: 15px; line-height: 1.35; font-weight: 700; text-align: left; text-decoration: none; cursor: pointer; transition: background .2s, border-color .2s, box-shadow .2s; }
.vc-shots__tab:hover, .vc-shots__tab:focus { border-color: rgba(108,192,36,.4); color: var(--ink); text-decoration: none; }
.vc-shots__tab.is-active { border-color: rgba(108,192,36,.6); background: var(--card); box-shadow: 0 18px 40px -24px rgba(15,22,38,.3); }
.vc-shots__n { flex: none; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(15,22,38,.06); color: var(--ink2); font-family: var(--font-mono); font-size: 13px; font-weight: 700; transition: background .2s, color .2s; }
.vc-shots__tab.is-active .vc-shots__n { background: var(--lime); color: var(--on-lime); }
.vc-shots__frame { padding: 0 10px 10px; border-radius: 32px; }
.vc-shots__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 48px; padding: 0 10px; color: var(--mut2); font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.vc-shots__bar a { display: inline-flex; flex: none; align-items: center; gap: 6px; min-height: 44px; color: var(--ink); font-weight: 700; text-decoration: none; }
.vc-shots__bar a:hover, .vc-shots__bar a:focus { color: var(--acc-strong); }
.vc-shots__screen { position: relative; aspect-ratio: 940 / 700; overflow: hidden; border: 1px solid rgba(15,22,38,.06); border-radius: 24px; background: var(--bg); }
.vc-shots__img { position: absolute; inset: 0; display: block; opacity: 0; transition: opacity .35s; }
.vc-shots__img.is-active { opacity: 1; }
.vc-shots__img img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
/* The tall screens fade out at the bottom; the statistics screen shows its chart down to the hour labels. */
.vc-shots__img::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 72px; background: linear-gradient(180deg, rgba(244,246,251,0), var(--bg)); pointer-events: none; }
.vc-about-tour__foot p { color: var(--mut2); font-size: 16px; text-wrap: pretty; }
.vc-about-tour__foot .vc-textlink { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 12px; font-size: 16px; }
@media (min-width: 960px) { .vc-about-tour__foot { margin-top: 24px; } }

@media (prefers-reduced-motion: reduce) {
  .vc-shots__tab, .vc-shots__n, .vc-shots__img { transition: none; }
}