/**
 * Homepage - Tagline after the Logo
 * General hero and content styling for the homepage layout.
 */

/* ========================================================================
   Homepage Hero Section
   ======================================================================== */

/* Text container in hero section:
   - Takes ~57% width minus side padding
   - Adds internal horizontal padding */
div#hero-text {
  width: calc(57% - 4rem);
  padding: 0rem 3rem;
}

/* Overall hero wrapper:
   - Uses flexbox to place text and image side by side
   - Removes extra padding
   - Distributes space between child elements */
div.hero {
  display: flex;
  padding: 0rem;
  justify-content: space-between;
}

/* Hero image block:
   - Fixed dimensions
   - Background image covers area
   - Positioned left, non-repeating */
div#hero-image {
  width: 33.5rem;
  height: 41rem;
  background-image: url('../images/homepage/WomanThinkingTall.png');
  background-repeat: no-repeat;
  background-position: left;
  background-size: cover;
}

/* Hero heading (main headline):
   - Large uppercase font with wide letter spacing
   - Light weight
   - Bottom margin and spacing to the right */
div.hero h1 {
  font-size: 3.6rem;
  line-height: 4.2rem;
  font-weight: 300;
  text-transform: uppercase;
  margin: 0 0 1rem 0;
  letter-spacing: 0.2em;
  padding-right: 1rem;
}

/* Accent color applied to highlighted words in hero heading */
div.hero h1 span {
  color: var(--aqua);
}

/* Tagline below hero heading:
   - White text
   - Medium-large size with comfortable line height */
p.tagline {
  color: #fff;
  font-size: 1.7rem;
  line-height: 2.55rem;
}

/* ========================================================================
   Homepage Content Sections (Intro, About, Curriculum, Research, CoP)
   ======================================================================== */

/* Main content grid:
   - 3-column layout (40% / 30% / 30%)
   - Vertical gap between rows
   - Constrained max-width */
div#home-content {
  display: grid;
  grid-template-columns: 40% 30% 30%;
  grid-row-gap: 2rem;
  max-width: calc(100% - 2rem);
}

/* Section headings inside home content */
div#home-content section h2 {
  font-size: 2.6rem;
  line-height: 3.9rem; /* ~1.4x */
  margin: 0 0 0.5rem 0;
}

/* Curriculum section heading has no bottom margin */
div#home-content section#curriculum h2 {
  margin-bottom: 0rem;
}

/* Generic paragraph styles inside sections */
div#home-content section p {
  margin: 0rem;
  font-size: 1.5rem;
  line-height: 2.25rem;
}

/* Intro + About paragraphs: extra top margin */
div#home-content section#intro p,
div#home-content section#about p {
  margin: 1rem 0rem 0rem;
}

/* About, Research text, and CoP paragraphs: extra bottom spacing */
div#home-content section#about p,
div#home-content section#research-text p,
div#home-content section#cop p {
  margin-bottom: 1.5rem;
}

/* ========================================================================
   Community of Practice (CoP) Section
   ======================================================================== */

/* CoP container:
   - 2-column grid
   - Light background
   - Internal padding and gap */
section#cop {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1rem;
  background-color: var(--offwhite);
  padding: 2rem;
}

/* Text and image containers adjust internal widths */
section#cop div.text-container {
  width: calc(100% - 0.5rem);
}
section#cop div.img-container {
  width: calc(100% - 0.5rem);
  padding: 0px;
  display: flex;
  align-items: center;
}

/* Image inside CoP scales to full width */
section#cop div.img-container img {
  width: 100%;
}

/* ========================================================================
   Research Section
   ======================================================================== */

/* Research text appears on right side (columns 2–4) */
section#research-text {
  grid-column: 2 / 4;
  margin-left: 2rem;
}

/* Research image appears on left side (column 1) */
section#research-image {
  grid-column: 1 / 2;
}

/* Research image container: vertically aligned with text */
section#research-image,
section#research-image div.img-container {
  display: flex;
  align-items: center;
}

/* ========================================================================
   Curriculum Section
   ======================================================================== */

/* Curriculum grid:
   - Two columns side by side
   - Moderate gap
   - Positioned in columns 2–4 of main grid */
section#curriculum {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 1.5rem;
  grid-column: 2 / 4;
  /* margin-top: 1rem;  (commented out) */
  /* Paragraph alignment adjustment is commented out below */
}

/* Curriculum section paragraph nudge (disabled/commented) */
section#curriculum > p {
  /* margin-top: 2rem; */
}

/* Intro and CoP sections span full grid width */
section#intro,
section#cop {
  grid-column: 1 / 4;
}

/* ========================================================================
   About Section
   ======================================================================== */

/* About section uses flexbox layout */
section#about {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  position: relative;
}

/* Links inside home content sections */
div#home-content section a {
  font-weight: 600;
  color: var(--blue);
  font-size: 1.6rem;
  line-height: 2.4rem;
}

/* Remove underline on hover */
div#home-content section a:hover {
  text-decoration: none;
}

/* Primary button style (blue button variant) */
div#home-content section a.primary-btn {
  font-size: 1.5rem;
  line-height: 2.25rem;
  letter-spacing: 0.05rem;
  color: var(--white);
}

/* About section’s blue button expands almost full width */
section#about a.primary-btn {
  width: calc(100% - 3rem);
}

/* ========================================================================
   Section Boxes (Reusable Boxed Content Elements)
   ======================================================================== */

div.section-box {
  background-color: var(--offwhite);
  padding: 1.5rem 1.5rem 3rem 1.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

/* Paragraphs inside section boxes: smaller size */
div.section-box p {
  font-size: 1.25rem;
  line-height: 1.875;
}

/* Cloud data image scaling (commented-out max-width replaced with transform) */
div.section-box img#cloud-data {
  /* max-width: 59.375%; */
}

/* Section box layout refinements */
div.section-box {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

/* Section box headings:
   - Medium-large font
   - Center aligned with optional icon/image above */
div.section-box h3 {
  margin: 0;
  font-size: 1.75rem;
  line-height: 2.625rem;
  margin: 1.25rem auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
}

/* Images inside section box headings (like icons) */
div.section-box h3 img {
  margin-bottom: 1rem;
  width: 10rem;
}

/* Cloud data image specifically scaled down */
div.section-box img#cloud-data {
  transform: scale(0.8);
}

/* Paragraphs and links inside section box take full width */
div.section-box p,
div.section-box a {
  width: 100%;
}

/* Section box links: positioned at bottom-right */
div.section-box a {
  right: 1rem;
  text-align: right;
}
section div.section-box a {
  align-self: flex-end;
  position: absolute;
  bottom: 1.25rem;
  width: calc(100% - 2.5rem);
}

/* Icon inside section box link */
section div.section-box a i {
  color: var(--orange);
  font-size: 1.5rem;
  font-weight: bold;
}

/* Curriculum intro spans first two columns of grid */
div#curriculum-intro {
  grid-column: 1 / 3;
}