/* Colocated styles for app/views/pages/home.html.erb
 *
 * home.html.erb is almost entirely built on brand utility/component
 * classes (stack-*, row-*, grid-*-*, surface-card, headline-*,
 * button--*, pill--*, icon-tile--*, etc. from the geneops-brand
 * gem). Only one element still carries raw utilities — the slideshow
 * container that fades between showcase slides. */

.home-showcase-fade {
  transition-property: opacity;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.home-feature-check { color: var(--text-primary); }

.home-section--deep-bottom { padding-bottom: 8rem; /* Note: bespoke deep-bottom pad */ }
.home-card-anchor-host     { position: relative; }
.home-stack--padded-md     { padding-top: var(--spacing-16); }       /* pt-8  */
.home-stack--padded-lg     { padding-top: var(--spacing-32); }       /* pt-12 */
.home-bullet-offset        { margin-top: var(--spacing-8); }      /* mt-2  */
.home-feature-column-centered { justify-content: center; }
.home-measure-centered     { margin-inline: auto; }
.home-mcp-link             { align-self: flex-start; }
.home-mcp-link:hover       { color: var(--text-hover); }

/* Icon-left card layout: icon pinned to its own left column, all other
   content in the right column. Mobile: icon centered above content. */
.home-icon-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-16);
}

.home-icon-card > .icon-tile { flex-shrink: 0; }

.home-icon-card > *:not(.icon-tile) {
  flex: 1;
  min-width: 0;
}

.home-icon-card .pill { align-self: flex-start; }

@media (min-width: 40rem) {
  .home-icon-card {
    flex-direction: row;
    align-items: flex-start;
  }
}