/* ===================================================================
   LAYOUT
   Main container, hero, sections, grids
   =================================================================== */

/* Main scrolling container */
main {
     -webkit-overflow-scrolling: touch;
     background-attachment: fixed;
     background-image: url('/wwwroot/home.avif');
     background-position: center;
     background-size: var(--bg-size-desktop);
     height: 100vh;
     overflow-y: scroll;
     scroll-behavior: smooth;
     scroll-snap-type: y proximity; 
     width: 100vw;
     display: flex;
     flex-direction: column;
     overflow-x: hidden;
}

@media (max-width: 1023px) {
     main {
          background-size: var(--bg-size-mobile);
          scroll-snap-type: y mandatory; 
          overflow-x: auto;
     }
}

/* ===================================================================
   HERO COMPONENTS
   =================================================================== */

hero {
     width: 100vw;
     height: var(--hero-height);
     min-height: var(--hero-min-height);
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: flex-end;
     color: var(--color-white);
     scroll-snap-align: start end;
}

@media (max-width: 1023px) {
     hero {
          min-height: var(--hero-height-mobile);
     }
}

hero-fvh {
     align-items: center;
     display: flex;
     flex-direction: column;
     height: 100vh;
     justify-content: center;
}

hero-fvh > * {
     animation: fadeUp var(--motion-slow) var(--motion-ease) forwards;
     opacity: 0;
     transform: translateY(var(--anim-offset));
}

hero-fvh > *:nth-child(2) {
     animation-delay: var(--anim-stagger-2);
}

hero-fvh > *:nth-child(3) {
     animation-delay: var(--anim-stagger-4);
}

hero-fvh > h1 {
     border-bottom: 1px solid var(--color-white);
     padding-block: var(--spacing-2xl);
     padding-inline: var(--spacing-3xl);
     margin-block: 0;
}

@media (max-width: 1023px) {
     hero-fvh > h1 {
          padding-block: var(--spacing-lg);
          padding-inline: var(--spacing-xl);
     }
}

/* ===================================================================
   SECTIONS
   =================================================================== */

section {
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: flex-start;
     flex: 1 0 auto;
     scroll-snap-align: start end;
     position: relative;
}

/* Background variants */
.bg-w { background: var(--color-white); }
.bg-g { background: var(--color-bg-light); }

.scrollsnap-all {
     scroll-snap-type: y mandatory; 
}

/* Section content containers */
section-content {
     width: var(--section-content-width);
     padding-block: var(--spacing-6xl);
     padding-inline: var(--spacing-4xl);
}

section-content-fvw {
     width: 100%;
     padding-block: var(--spacing-6xl);
     padding-inline: var(--spacing-4xl);
}

@media (max-width: 1023px) {
     section-content {
          width: 100vw;
          padding-block-start: calc(var(--nav-height-mobile) + var(--spacing-xl));
          padding-block-end: var(--spacing-3xl);
          padding-inline: var(--spacing-lg);
     }

     section-content-fvw {
          padding-block-start: calc(var(--nav-height-mobile) + var(--spacing-xl));
          padding-block-end: var(--spacing-3xl);
          padding-inline: var(--spacing-lg);
     }
}

/* ===================================================================
   FULL VIEWPORT HEIGHT HELPERS
   =================================================================== */

.fvh-center {
     display: flex;
     flex-direction: column;
     justify-content: center;
     height: 100vh;
     min-height: 100vh;
     align-items: center;
} 

/* ===================================================================
   GRID SYSTEMS
   =================================================================== */

.column-center {
     display: flex;
     justify-content: center;
     align-items: center;
     flex-direction: column;
     text-align: center;
}

one-grid {
     display: grid;
     grid-template-columns: repeat(1, 1fr);
     gap: var(--spacing-4xl);
     margin-block: var(--spacing-6xl);
     width: 100%;
}

@media (max-width: 1023px) {
     one-grid {
          gap: var(--spacing-xl);
          margin-block: var(--spacing-2xl);
     }
}

two-grid {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: var(--spacing-4xl);
     margin-block: var(--spacing-6xl);
     width: 100%;
}

@media (max-width: 1023px) {
     two-grid {
          grid-template-columns: 1fr;
          gap: var(--spacing-xl);
          margin-block: var(--spacing-2xl);
     }
}

four-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: var(--spacing-4xl);
     margin-block: var(--spacing-6xl);
     width: 100%;
}

@media (max-width: 1023px) {
     four-grid {
          grid-template-columns: 1fr;
          gap: var(--spacing-xl);
          margin-block: var(--spacing-2xl);
     }
}

/* ===================================================================
   ICONS
   =================================================================== */

.hero-icon {
     width: var(--icon-hero);
     height: var(--icon-hero);
     margin: var(--spacing-4xl);
}

.card-icon {
     width: var(--icon-card);
     height: var(--icon-card);
     margin: var(--spacing-xl);
}

.glass-card-icon {
     width: var(--icon-card);
     height: var(--icon-card);
     margin: var(--spacing-xl);
     filter: brightness(0) invert(1);
}

@media (max-width: 1023px) {
     .card-icon {
          width: var(--icon-card-mobile);
          height: var(--icon-card-mobile);
     }
}

.quote-icon {
     width: var(--icon-quote);
     height: var(--icon-quote);
}

@media (max-width: 1023px) {
     .quote-icon {
          width: var(--icon-quote-mobile);
          height: var(--icon-quote-mobile);
     }
}