/* ==========================================================================
   DVCCN supplemental CSS
   Helper classes for the Bricks rebuild where the original design used inline
   styles (and therefore had no reusable class). Loaded after site.css/pages.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Bricks integration fixes
   -------------------------------------------------------------------------- */

/* Bricks wraps each Section in a flex column with align-items:center, which
   makes .container children shrink-wrap to their content width and center,
   instead of filling to max-width like the original design's block .container.
   Force full width so headers/sections span the 1200px container as designed. */
.container { width: 100%; }

/* Logos: Bricks' lazy-load placeholder + width attributes can distort aspect
   ratio (the footer logo rendered stretched). Pin width to auto and lock the
   intrinsic ratio so they stay correct before and after the image loads. */
.site-header__logo img { width: auto; aspect-ratio: 530 / 115; }
.footer-logo img { width: auto; max-width: 100%; aspect-ratio: 527 / 237; }

/* Interior page-hero background (was inline-styled per page in the JSX).
   Relative path resolves from this file's /css/ dir to /assets/. */
.page-hero .hero__bg {
  background-image: url('../assets/seed-illustration.webp');
  background-position: center 35%;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Home — Connect teaser tiles (was inline-styled in Sections.jsx ConnectTeaser) */
.connect-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 48px;
}
.connect-tile {
  padding: 28px 24px;
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  border-radius: var(--radius-sm);
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-decoration: none;
  color: var(--fg-1);
  transition: box-shadow 250ms var(--ease-out);
}
.connect-tile:hover { box-shadow: var(--shadow-md); }
.connect-tile__icon { color: var(--color-clay); display: flex; }
.connect-tile__label {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  line-height: 1.1;
}
.connect-tile__sub { font-size: 13px; color: var(--fg-2); }

@media (max-width: 760px) {
  .connect-tiles { grid-template-columns: repeat(2, 1fr); }
}