/* ==========================================================
   CGM LAB HOMEPAGE — UWF COLORS / QUARTO MARKDOWN
   Replace the entire existing lab-home.css with this file.

   FONT SIZES:
   Main heading: .cgm-hero h1
   Lab name:     .cgm-lab-name
   Topic ribbon: .cgm-ribbon
   Smaller-screen sizes are in the section near the end.
   ========================================================== */

/* ==========================================================
   FOUNDATION
   Sets the UWF colors and general page behavior.
   --cgm-ink is the main text color; --cgm-green is the darker green
   used for smaller text. The title-block rule hides Quarto's automatic
   page title because the homepage supplies its own heading.
   ========================================================== */

body:has(.cgm-home) {
  --cgm-ink: #00205B;
  --cgm-green: #007A33;
  --cgm-lime: #97D200;
  --cgm-paper: #FFFFFF;
  background: var(--cgm-paper);
}

body:has(.cgm-home) #title-block-header {
  display: none;
}

body:has(.cgm-home) #quarto-content main.content {
  grid-column: screen-start / screen-end;
  width: 100%;
  max-width: none;
  padding: 0;
  margin: 0;
}

.cgm-home,.cgm-home * {
  box-sizing: border-box;
}

.cgm-home {
  color: var(--cgm-ink);
  overflow: hidden;
  font-family: Arial,sans-serif;
}

.cgm-home h1,.cgm-home h2,.cgm-home h3 {
  color: inherit;
  border: 0;
  padding: 0;
}

.cgm-home h2 .anchorjs-link,.cgm-home h3 .anchorjs-link {
  display: none;
}

.cgm-home p {
  line-height: 1.7;
}

.cgm-home a {
  text-decoration: none;
}

.cgm-home a:focus-visible {
  outline: 3px solid #005EA6;
  outline-offset: 5px;
}

.cgm-eyebrow {
  font-size: .74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .13em;
  margin: 0 0 24px;
}


/* ==========================================================
   MAIN HEADING AND LAB NAME
   Controls the two-column opening section and its typography.
   grid-template-columns sets the relative widths of text and illustration.
   gap sets the space between them; padding sets space around the section.
   In font-size: clamp(minimum, fluid size, maximum), the middle value
   scales with browser width. All three values influence the result.
   .cgm-lab-name spans both columns above the main heading.
   letter-spacing controls how closely the letters sit together.
   ========================================================== */

.cgm-hero {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  column-gap: 60px;
  row-gap: 32px;
  align-items: center;
  max-width: 1250px;
  margin: auto;
  padding: 78px 36px 68px;
}

/* Main Landscapes / Data / Discovery heading. */
.cgm-hero h1 {
  font-size: clamp(2rem, 3.75vw, 3.5rem);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.065em;
  margin: 0 0 28px;
  overflow-wrap: anywhere;
}

.cgm-hero h1 span {
  color: #00A346;
}

.cgm-lead {
  font-size: 1.25rem;
  line-height: 1.5!important;
  font-weight: 600;
  max-width: 530px;
}

.cgm-hero-copy>p:not(.cgm-eyebrow) {
  max-width: 530px;
}

.cgm-hero h1 .cgm-discovery {
  color: #00A346;
}

/* Full-width lab name: spans the text and illustration columns.
   Change font-size here to resize the lab name. */
.cgm-lab-name {
  grid-column: 1 / -1;
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  line-height: 1.4;
}

.cgm-lab-name p {
  margin: 0;
}

.cgm-hero > * {
  min-width: 0;
}


/* ==========================================================
   BUTTONS AND LINKS
   Styles the homepage buttons and their spacing.
   .cgm-actions > p handles the paragraph added by Markdown.
   Increase gap to separate the buttons; padding changes button size.
   The outline button has a transparent background. Hover rules apply
   when a visitor points at a button; focus rules help keyboard users.
   ========================================================== */

.cgm-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 28px;
}

.cgm-button {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  background: #00205B;
  color: white!important;
  padding: 14px 20px;
  border-radius: 6px;
  font-weight: 700;
  font-size: .9rem;
  border: 1px solid var(--cgm-green);
  transition: transform .18s;
}

.cgm-button:hover {
  transform: translateY(-3px);
  background: #005EA6;
}

.cgm-button-outline {
  background: transparent;
  color: var(--cgm-green)!important;
}

.cgm-button-outline:hover {
  background: #FFFFFF;
}

.cgm-community-note a,.cgm-text-link {
  color: var(--cgm-green);
  font-weight: 700;
  font-size: .9rem;
}

.cgm-actions > p {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin: 0;
}


/* ==========================================================
   HOMEPAGE ILLUSTRATION
   Controls the illustration frame, caption, and image sizing.
   transform: rotate(...) gives the frame its slight tilt; use none
   for a straight frame. border-radius rounds the corners.
   box-shadow sets the offset blue shape behind the frame.
   To replace the image itself, edit its image path in index.qmd.
   ========================================================== */

.cgm-visual {
  background: #00205B;
  color: #FFFFFF;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 14px 16px 0 #8DC8E8;
  transform: rotate(2deg);
}

.cgm-visual-top {
  display: flex;
  justify-content: space-between;
  padding: 19px 22px;
  border-bottom: 1px solid #ffffff20;
  font-size: .65rem;
  letter-spacing: .09em;
}

.cgm-visual svg {
  display: block;
  width: 100%;
  height: auto;
}

.cgm-visual-caption {
  padding: 0 22px 20px;
  margin: 0;
  font-size: .8rem;
}

.cgm-visual-caption span {
  display: block;
  font-size: .65rem;
  opacity: .7;
}

.cgm-visual>p,.cgm-visual figure {
  margin: 0;
}

.cgm-visual img {
  display: block;
  width: 100%;
  height: auto;
}

.cgm-visual figcaption {
  display: none;
}

.cgm-visual-top p,.cgm-visual-caption p {
  margin: 0;
}

.cgm-illustration-note {
  display: block;
  font-size: .65rem;
  opacity: .7;
}


/* ==========================================================
   NAVY TOPIC RIBBON
   Controls the navy band and its five topic labels.
   Change font-size in .cgm-ribbon to resize the ribbon text.
   The labels are inside a Markdown paragraph, so .cgm-ribbon > p
   provides their spacing. gap: 18px 40px means 18px between rows
   and 40px between labels. white-space: nowrap keeps each label together.
   ========================================================== */

/* Navy band: change font-size here to resize all five topic labels. */
.cgm-ribbon {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 18px 40px;
  padding: 23px;
  background: #00205B;
  color: #FFFFFF;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .04em;
}

.cgm-ribbon > p {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px 40px;
  margin: 0;
  justify-content: center;
}

.cgm-ribbon-item {
  white-space: nowrap;
}


/* ==========================================================
   CONTENT SECTIONS
   Sets the width and spacing of the main content sections.
   max-width limits how wide the content becomes on large screens.
   padding: 80px 36px means 80px above/below and 36px left/right.
   Two-column sections use gap to separate the heading from the text.
   The heading rule controls the large section titles.
   ========================================================== */

/* Set shared defaults before the individual section rules below.
   The intro and research sections then customize their adjoining padding. */
.cgm-section,
.cgm-research-section,
.cgm-community {
  max-width: 1250px;
  margin: auto;
  padding: 80px 36px;
}

/* Space below the lab introduction: reduce padding-bottom for a smaller gap. */
.cgm-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: start;
  margin-bottom: 0;
  padding-bottom: 25px;
}

.cgm-section-heading h2,.cgm-community h2 {
  font-size: clamp(2rem,3.5vw,3.15rem);
  line-height: 1.1;
  letter-spacing: -.045em;
  margin: 0 0 24px;
  font-weight: 800;
}

.cgm-section-heading .cgm-eyebrow {
  color: var(--cgm-green);
  margin-bottom: 18px;
}

.cgm-intro p:first-child {
  margin-top: 0;
}

/* Space above Research in motion; combines with the intro bottom padding. */
.cgm-research-section {
  padding-top: 15px;
}


/* ==========================================================
   RESEARCH CARDS
   Styles the three research cards.
   repeat(3, minmax(0, 1fr)) creates three equal-width columns.
   gap controls spacing between cards; padding controls spacing inside.
   min-height sets a minimum card height. Each card has its own
   colored top border. Hover rules lift the card slightly.
   .cgm-card h3 controls card headings; .cgm-card p controls body text.
   ========================================================== */

.cgm-cards {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 20px;
  margin-top: 36px;
}

.cgm-card {
  display: flex;
  flex-direction: column;
  min-height: 335px;
  padding: 30px;
  border-radius: 12px;
  color: var(--cgm-ink)!important;
  transition: transform .2s,box-shadow .2s;
  border: 1px solid #B2B4B2;
  border-top-width: 6px;
}

.cgm-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 25px #00205B15;
}

.cgm-card-green {
  background: #FFFFFF;
  border-top-color: #00A346;
}

.cgm-card-blue {
  background: #FFFFFF;
  border-top-color: #005EA6;
}

.cgm-card-sand {
  background: #FFFFFF;
  border-top-color: #009CDE;
}

.cgm-card-number {
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .08em;
  margin-bottom: 35px;
}

.cgm-card h3 {
  font-size: 1.65rem;
  line-height: 1.15;
  font-weight: 700;
  margin: 0 0 15px;
  letter-spacing: -.035em;
}

.cgm-card p {
  font-size: .94rem;
}

.cgm-card-link {
  font-size: .8rem;
  font-weight: 700;
  margin-top: auto;
  padding-top: 16px;
}

.cgm-card>p:first-child {
  margin: 0 0 35px;
}

.cgm-card>p:first-child .cgm-card-number {
  margin: 0;
}

.cgm-card>p:last-child {
  margin-top: auto;
}

.cgm-card .cgm-card-link {
  color: #00205B;
  font-weight: 700;
}


/* ==========================================================
   STUDENT AND COMMUNITY SECTION
   Controls the recruitment section near the bottom of the homepage.
   grid-template-columns: 1.3fr 1fr gives the main text more room
   than the side panel. gap separates the two areas.
   padding controls interior space; margin-bottom controls space below.
   The green top border connects this section to UWF branding.
   ========================================================== */

.cgm-community {
  background: #FFFFFF;
  border-radius: 18px;
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 70px;
  margin-bottom: 70px;
  padding: 50px;
  border: 1px solid #B2B4B2;
  border-top: 6px solid #00A346;
}

.cgm-community p {
  max-width: 620px;
}


/* ==========================================================
   COMMUNITY SIDE PANEL
   Styles the curiosity message beside the recruitment text.
   border-left draws the dividing line; padding-left separates the text
   from that line. .cgm-curiosity controls the large curiosity label.
   The h3 rule controls the side-panel heading.
   ========================================================== */

.cgm-community-note {
  border-left: 1px solid #B2B4B2;
  padding-left: 45px;
  align-self: center;
}

.cgm-community-note>span {
  font-size: clamp(1.7rem,3vw,2.5rem);
  font-weight: 700;
  color: var(--cgm-green);
  letter-spacing: -.04em;
}

.cgm-community-note h3 {
  font-size: 1.45rem;
  line-height: 1.3;
  margin: 25px 0 16px;
}

.cgm-community-note .cgm-curiosity {
  font-size: 2.5rem;
  font-weight: 700;
  color: #007A33;
  letter-spacing: -.04em;
}


/* ==========================================================
   TABLETS
   Applies when the browser is 1000px wide or narrower.
   Reduces spacing and card padding so the layout fits smaller screens.
   ========================================================== */

@media(max-width:1000px) {
  .cgm-hero {
    gap: 30px;
    padding-top: 55px;
  }

  .cgm-cards {
    gap: 14px;
  }

  .cgm-card {
    padding: 24px;
  }

  .cgm-section {
    gap: 35px;
  }

  .cgm-community {
    margin-inline: 24px;
    gap: 35px;
  }

}

/* ==========================================================
   PHONES
   Applies when the browser is 760px wide or narrower.
   Changes the main layouts to one column and adjusts heading sizes.
   Edit these font-size values to change mobile text independently
   from desktop text. Later rules here override the desktop settings.
   ========================================================== */

@media(max-width:760px) {
  .cgm-hero,.cgm-section,.cgm-community {
    grid-template-columns: 1fr;
  }

  .cgm-hero {
    padding: 45px 24px;
    gap: 42px;
  }

  .cgm-visual {
    max-width: 520px;
    width: 100%;
    margin: auto;
    transform: none;
    box-shadow: 8px 8px 0 #8DC8E8;
  }

  .cgm-hero h1 {
    font-size: clamp(1.5rem, 6vw, 2.75rem);
  }

  .cgm-section,.cgm-research-section {
    padding: 48px 24px;
  }

  /* Keep the introduction and research close together on phones too. */
  .cgm-section {
    padding-bottom: 25px;
  }

  .cgm-research-section {
    padding-top: 15px;
  }

  .cgm-cards {
    grid-template-columns: 1fr;
  }

  .cgm-card {
    min-height: 275px;
  }

  .cgm-card-number {
    margin-bottom: 25px;
  }

  .cgm-community {
    padding: 30px;
    margin-bottom: 40px;
  }

  .cgm-community-note {
    border-left: 0;
    border-top: 1px solid #B2B4B2;
    padding: 28px 0 0;
  }

  .cgm-ribbon {
    gap: 15px 24px;
    justify-content: flex-start;
    padding-inline: 24px;
  }

  .cgm-lab-name {
    font-size: 1.15rem;
  }

  .cgm-ribbon > p {
    gap: 15px 24px;
    justify-content: flex-start;
  }

}

/* ==========================================================
   REDUCED MOTION
   Disables animated transitions for visitors whose device settings
   request reduced motion.
   ========================================================== */

@media(prefers-reduced-motion:reduce) {
  .cgm-home * {
    transition: none!important;
  }

}