/**** HERO ****//**** HERO ****//**** HERO ****/

#hero {position: relative; overflow: hidden; background-color: var(--color-bg-primary);}
#hero .container {display: grid; grid-template-columns: minmax(0px, 0.9fr) minmax(0px, 1.1fr); align-items: center; gap: var(--space-2xl);}
#hero h1 {max-width: 12ch; margin: 0px 0px var(--space-lg) 0px; font-size: var(--font-size-hero);}
#hero .hero-text {max-width: 56ch; margin: 0px 0px var(--space-sm) 0px;}
.hero-actions {display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs);}
.hero-actions .btn {margin-right: 0px;}
.hero-visual-placeholder {position: relative; aspect-ratio: 16 / 9; overflow: hidden; background-color: var(--color-bg-secondary); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-lg);}
.hero-visual-placeholder img {width: 100%; height: 100%; object-fit: cover;}

/**** SECTION RHYTHM ****//**** SECTION RHYTHM ****//**** SECTION RHYTHM ****/

#directions {background-color: var(--color-bg-light);}
#about-short {background-color: var(--color-bg-secondary);}
#numbers {color: var(--color-bg-secondary); background-color: var(--color-navy-dark);}
#numbers h2 {color: var(--color-bg-light);}
#collectives {background-color: var(--color-bg-light);}
#home-news {background-color: var(--color-bg-white);}
#achievements {background-color: var(--color-bg-primary);}
#gallery-strip {background-color: var(--color-bg-secondary);}
#how-to-start {background-color: var(--color-bg-light);}

/**** HOME GRIDS ****//**** HOME GRIDS ****//**** HOME GRIDS ****/

#directions .cards, #collectives .cards, #home-news .cards {display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); margin: var(--space-xl) 0px var(--space-md) 0px;}
#numbers .cards, #achievements .cards {display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); margin: var(--space-xl) 0px 0px 0px;}
#about-short .container {padding-left: calc(var(--container-padding) + var(--space-lg)); border-left: var(--space-3xs) solid var(--color-gold);}
#gallery-strip .container {display: grid; grid-template-columns: minmax(0px, 1fr) auto; align-items: end; column-gap: var(--space-xl);}
#gallery-strip h2, #gallery-strip p {grid-column: 1;}
#gallery-strip .btn {grid-column: 2; grid-row: 1 / 3; margin: 0px;}
.achievements-note {margin: var(--space-sm) 0px 0px 0px; font-size: var(--font-size-xs); color: var(--color-text-muted);}
#how-to-start .start-notice {margin: var(--space-lg) 0px var(--space-lg) 0px; padding: var(--space-md); background-color: var(--color-bg-secondary); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-md);}
#how-to-start .notice-title {margin: 0px 0px var(--space-2xs) 0px; font-family: var(--font-family-heading); font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--color-navy-dark);}
#how-to-start .notice-text {margin: 0px; color: var(--color-text-secondary);}
#how-to-start .steps {grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: var(--space-lg); margin: var(--space-xl) 0px var(--space-lg) 0px;}
#how-to-start .steps li {display: grid; grid-template-columns: var(--touch-target) minmax(0px, 1fr); align-content: start; column-gap: var(--space-md);}
#how-to-start .steps li::before {grid-row: 1 / 3; margin: 0px;}
#how-to-start .steps h3 {margin: 0px 0px var(--space-xs) 0px;}
#how-to-start .steps p {grid-column: 2; margin: 0px;}
#how-to-start .start-actions {display: flex; flex-wrap: wrap; gap: var(--space-xs);}
#how-to-start .start-actions .btn {margin: 0px;}

/**** MEDIA 1350 ****//**** MEDIA 1350 ****//**** MEDIA 1350 ****/

@media (max-width: 1350px) {
    #hero .container {gap: var(--space-xl);}
    #directions .cards, #collectives .cards {grid-template-columns: repeat(2, minmax(0px, 1fr));}
}

/**** MEDIA 750 ****//**** MEDIA 750 ****//**** MEDIA 750 ****/

@media (max-width: 750px) {
    #hero .container {grid-template-columns: 1fr; gap: var(--space-xl);}
    #hero h1 {max-width: 14ch;}
    .hero-visual-placeholder {width: 100%; max-width: var(--text-width);}
    #directions .cards, #collectives .cards, #home-news .cards, #numbers .cards, #achievements .cards {grid-template-columns: 1fr;}
    #about-short .container {padding-left: var(--container-padding); border-left: 0px;}
    #gallery-strip .container {grid-template-columns: 1fr;}
    #gallery-strip .btn {grid-column: 1; grid-row: auto; margin-top: var(--space-sm);}
    #how-to-start .steps {grid-template-columns: 1fr; gap: var(--space-md);}
}

/**** MEDIA 500 ****//**** MEDIA 500 ****//**** MEDIA 500 ****/

@media (max-width: 500px) {
    .hero-actions {display: block;}
    #how-to-start .start-notice {padding: var(--space-sm);}
    #how-to-start .steps li {grid-template-columns: var(--touch-target) minmax(0px, 1fr); column-gap: var(--space-sm);}
    #how-to-start .start-actions {display: block;}
}