/* * {
  border: 1px solid greenyellow;
} */

.home-branding-section {
  display: flex;
  flex-direction: column;
  align-items: center;    /* center horizontally */
  justify-content: center; /* center vertically */
  width: 90dvw;
  margin: auto;
  height: 100dvh;           /* let content define height */
  gap: 2rem;              /* spacing between h1, logo, h2 */
}

.homepage-main-logo {
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;           /* fit SVG naturally */
}

.homepage-main-logo svg {
  display: block;         /* remove default inline spacing */
  max-width: 100%;        /* scale with container if needed */
  height: auto;           /* maintain natural height */
}

.home-branding-section h1,
.home-branding-section h2 {
  margin: 0;    
  text-wrap: unset;          /* remove default spacing */
}


.home-branding-section h1 {
  font-size: var(--fs-sm);
  font-weight: 300;
}

.home-branding-section h2 {
  font-size: var(--fs-sm);
  font-weight: 300;
}

 .homepage-section {
  display: grid;
  grid-template-columns: 1fr;
  height: 100%;
  width: 100%;
  align-items: center;
  place-items: center;
  /* padding: 4rem 0;  */

  /* --section-bg: transparent; */
  --section-accent: var(--color-dark-blue);
  --section-text: var(--color-dark-blue);
  --section-muted: #555;

  background-color: var(--section-bg);
  color: var(--section-text);
}

.homepage-section-image {
  /* grid-column: 1/-1; */
  padding: 6rem 4rem;
  width: 100%;
  background-color: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  
}



.homepage-section-text {
  grid-column: 1/-1;
  padding: 3rem 1rem;
  /*  width: 90vw; */
}

.homepage-section-text h3 {
  font-size: var(--fs-xxl);
  font-weight: 900;
  color: var(--section-accent);
}

.homepage-section-text p {
  font-size: var(--fs-md);
  color: var(--section-text);
}

.homepage-section[data-theme="focus"] {
  --section-accent: var(--color-red);
  --section-text: var(--color-dark-blue);
  --section-muted: #ffeae5;
}

.homepage-section[data-theme="focus"] .homepage-section-image {
  background-color: var(--color-red);
   order: 2;
}

.homepage-section[data-theme="focus"] .homepage-section-text {
  order: 1;
}



.homepage-section[data-theme="listen"] {
  --section-accent: #fff;
  --section-text: #fff;
  --section-muted: #d9f0f0;
}

.homepage-section[data-theme="listen"] .homepage-section-image {
  order: 2;
}

.homepage-section[data-theme="listen"] .homepage-section-text {
  background-color: var(--color-teal);
  order: 1;
}



.homepage-section[data-theme="listen"] img {
  max-width: 50%;
  height: auto;
  display: block;
} 


.homepage-section[data-theme="dialogue"] {
  --section-accent: #fff;
  --section-text: #fff;
  --section-muted: #ccdce6;
}

.homepage-section[data-theme="dialogue"] .homepage-section-image {
  order: 2;
}

.homepage-section[data-theme="dialogue"] .homepage-section-text {
  background-color: var(--color-orange);
  order: 1;
}


.homepage-section[data-theme="insight"] {
  --section-accent: var(--color-orange);
  --section-text: var(--color-dark-blue);
  --section-muted: #fff0e6;
}

.homepage-section[data-theme="insight"] .homepage-section-image {
  background-color: var(--color-dark-blue);
  order: 2;
}

.homepage-section[data-theme="insight"] .homepage-section-text {
  order: 1;
}

.homepage-section[data-theme="insight"] img {
  width: 30%;
} 

@media (min-width: 768px) {

  .home-branding-section h1 {
  font-size: var(--fs-md);
  font-weight: 300;
}

.home-branding-section h2 {
  font-size: var(--fs-md);
  font-weight: 300;
}

  .homepage-section-text h3 {
    font-size: var(--fs-4xl);
    font-weight: 900;
    color: var(--section-accent);
  }

  .homepage-section-text p {
    font-size: var(--fs-lg);
    color: var(--section-text);
  }
  .homepage-section {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    height: 100dvh;
    width: 100%;
  }

  .homepage-section-image {
    height: 100dvh;
  }

  .homepage-section-text {
    height: 100dvh;
    padding: 6rem 6rem;
    place-items: center;
  }

/* Focus: image left, text right */
  .homepage-section[data-theme="focus"] .homepage-section-image { grid-column: 1 / 7;order: 1; }
  .homepage-section[data-theme="focus"] .homepage-section-text { grid-column: 7 / 13; }

  /* Listen: image left, text right */
  .homepage-section[data-theme="listen"] .homepage-section-image { grid-column: 1 / 7;order: 1; }
  .homepage-section[data-theme="listen"] .homepage-section-text { grid-column: 7 / 13; }

  /* Dialogue: image right, text left */
  .homepage-section[data-theme="dialogue"] .homepage-section-image { grid-column: 7 / 13; }
  .homepage-section[data-theme="dialogue"] .homepage-section-text { grid-column: 1 / 7; }

  /* Insight: image left, text right */
  .homepage-section[data-theme="insight"] .homepage-section-image { grid-column: 1 / 7;order: 1; }
  .homepage-section[data-theme="insight"] .homepage-section-text { grid-column: 7 / 13; }

}