/* =============================================================================
   lib/styles/pages/home_page.css — Total Solutions Home Page Shell
   Minimal structural styles only. All section, card, and component styles
   live in their own dedicated CSS files.
   ============================================================================= */

/* Outer page wrapper — full-height flex column so footer is always at bottom */
.home-page {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background-color: var(--color-surface-primary);
}

/* Main content landmark — grows to fill available space between nav + footer */
.home-page__main {
    flex: 1 0 auto;
    outline: none;
    display: flex;
    flex-direction: column;
}

/* Appended Methodology Link under the 4-Stage Process Timeline */
.home-page__methodology-link-wrapper {
    display: flex;
    flex-direction: column;       
    align-items: center;          
    justify-content: center;
    /* Consuming your space tokens: 4rem top/bottom, 1.5rem left/right */
    padding: var(--space-16) var(--space-6); 
    background-color: var(--color-surface-secondary); 
    text-align: center;
    /* Consuming your space tokens: 1.5rem gap between text and button */
    gap: var(--space-6);       
}

/* Supporting text above the button */
.methodology-lead-text {
    /* Using your typography tokens for a confident, readable subheading */
    font-size: var(--font-size-h2); 
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary); 
    line-height: var(--line-height-body);
    max-width: var(--container-sm); /* Bound to 48rem width for readability */
    margin: var(--space-0);
}

/* Ensure the button and icon align nicely */
.methodology-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2); /* 0.5rem gap */
    padding: var(--space-3) var(--space-6);
}

/* Scripture Wrapper above the final CTA */
.home-page__scripture-wrapper {
    display: flex;
    justify-content: center;
    text-align: center;
    padding-top: var(--section-padding-y-sm); /* Using your 3rem token */
    padding-bottom: var(--section-padding-y-sm);
}

/* Mobile responsiveness adjustments */
@media (max-width: 768px) {
    .home-page__methodology-link-wrapper {
        /* Reduced to 3rem top/bottom, 1rem left/right */
        padding: var(--space-12) var(--space-4); 
        gap: var(--space-5);
    }
    
    .methodology-lead-text {
        font-size: var(--font-size-body-lg); /* Scales down on mobile */
    }

    .home-page__scripture-wrapper {
        padding-top: var(--space-8);
        padding-bottom: var(--space-8);
    }
}

/* =========================================================================
   Choreographed Load Sequences (ScrollReveal Integration for Inline Blocks)
   ========================================================================= */

@media (prefers-reduced-motion: no-preference) {
  /* Methodology Wrapper Inline Elements */
  .home-page__methodology-link-wrapper > * {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--motion-duration-medium, 400ms) var(--motion-ease-out, ease-out),
                transform var(--motion-duration-medium, 400ms) var(--motion-ease-out, ease-out);
  }

  .is-visible .home-page__methodology-link-wrapper > * {
    opacity: 1;
    transform: translateY(0);
  }

  .is-visible .home-page__methodology-link-wrapper > :nth-child(1) { transition-delay: 0.1s; }
  .is-visible .home-page__methodology-link-wrapper > :nth-child(2) { transition-delay: 0.25s; }

  /* Scripture Wrapper Inline Elements */
  .home-page__scripture-wrapper > * {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--motion-duration-medium, 400ms) var(--motion-ease-out, ease-out),
                transform var(--motion-duration-medium, 400ms) var(--motion-ease-out, ease-out);
  }

  .is-visible .home-page__scripture-wrapper > * {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.1s;
  }
}