/*
 * misc.css: page-lane stylesheet (BUILD-BRIEF section 6, Lane T). Loads
 * after ve-site.css, tokens.css/base.css/chrome.css only. Covers the
 * events/community/awards, legal/info, 404/thanks/sitemap templates and the
 * token-only PS funnel pages. Content itself uses .ve-prose (base.css) for
 * link/list styling; this file only carries layout the content wrapper
 * needs.
 */

/* Shared content-kit wrapper for legacy single-column pages (replaces the
   retired PP `.entry-content` class name). */
.ve-content { max-width: 74ch; }
.ve-content > *:first-child { margin-top: 0; }
.ve-content h1 { margin-bottom: 0.5em; font-weight: 300; }
.ve-content h2 { font-weight: 300; }
.ve-content img.rounded,
.ve-content .rounded img {
  border-radius: var(--radius-img);
}
.ve-content img.alignright { float: right; margin: 0 0 16px 24px; max-width: 45%; height: auto; }
.ve-content img.alignleft { float: left; margin: 0 24px 16px 0; max-width: 45%; height: auto; }
.ve-content.cf::after { content: ''; display: table; clear: both; }

/* Content-kit layout helpers: our own names for the row/column, note,
   callout, CTA row, rule and video-frame blocks the events/community pages
   use. Flex rows, no floats, so no clearing element is needed. */
.ve-cols { display: flex; flex-wrap: wrap; gap: 0 4%; align-items: flex-start; }
.ve-col { flex: 1 1 100%; min-width: 0; margin-bottom: 1.5em; }
.ve-col > :first-child { margin-top: 0; }
.ve-col iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--radius-img); }
@media (min-width: 769px) {
  .ve-col--half { flex-basis: 48%; }
  .ve-col--third { flex-basis: 30.66%; }
  .ve-col--two-thirds { flex-basis: 65.33%; }
  .ve-col--two-fifths { flex-basis: 37.6%; }
  .ve-col--three-fifths { flex-basis: 58.4%; }
}

.ve-video { overflow: hidden; text-align: center; }
.ve-video iframe { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--radius-img); }

.ve-note {
  background: var(--ve-butter);
  border-left: 5px solid var(--c-gold);
  border-radius: var(--radius-card);
  padding: 1.1em 1.3em;
  margin: 1.5em 0;
}
.ve-callout {
  background: var(--c-pink-tint);
  border-radius: var(--radius-card);
  padding: 1.2em 1.4em;
  margin: 1.5em 0;
  text-align: center;
}
.ve-callout .ve-btn { margin-top: 0.3em; }
.ve-cta-row { margin: 1.5em 0; text-align: center; clear: both; }
.ve-cols > .ve-rule { flex-basis: 100%; }
.ve-rule { height: 0; border: 0; border-top: 1px dashed var(--c-line); margin: 2.4em 0; clear: both; }

/* Two-column fa-ul lists (Community Outreach etc.) keep their gold dot via
   the inline `--c-gold` icon color already set on each <i>; this just
   trims the WordPress fa-ul indent to line up with the icon. */
.ve-content .fa-ul { list-style: none; margin: 0; padding: 0; }

/* Partner With Us: intro callout sits beside the round photo; the closing
   note clears it. */
.page-partner-with-us .partner-intro-callout { max-width: 560px; margin: 28px 0 42px; }
.page-partner-with-us .partner-cta-note { clear: both; margin-top: 36px; padding: 34px 42px; }
.page-partner-with-us .partner-cta-note .ve-btn { margin-top: 20px; }
@media screen and (max-width: 600px) {
  .page-partner-with-us .partner-intro-callout { max-width: none; }
  .page-partner-with-us .partner-cta-note { padding: 24px 20px; }
}

@media (max-width: 600px) {
  .ve-content img.alignright,
  .ve-content img.alignleft { float: none; margin: 0 0 16px; max-width: 100%; }
}