/* ==========================================================================
   home.css
   Styles used only on Home ("Confluence", index.html).
   The folding sections, tags and Expand / Collapse All: components.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Banner: the opening text beside the Venn diagram
   -------------------------------------------------------------------------- */

.home-banner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);   /* the diagram a little wider than the text */
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}

/* the title on one line beside the diagram */
.home-intro .page-title {
  font-size: clamp(2.75rem, 6.2vw, 5.5rem);
  white-space: nowrap;
}

.home-intro .page-sub {
  margin-bottom: 1.5rem;
}

.home-lead {
  max-width: 40rem;
  margin: 0 0 1rem;
  line-height: 1.65;
  color: var(--ink-soft);
}

.home-mark {                           /* the two words set in red on the old page */
  font-weight: 700;
  color: var(--accent);
}

.home-intro .item-links {
  margin-top: 1.5rem;
}

.home-figure {
  margin: 0;
}

/* The Confluence diagram (drawn in build_home.py): the logo's soft discs, names outside on hairlines */
.home-diagram {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.dg-discs circle {
  fill: var(--accent);
  fill-opacity: .22;
}

.dg-core {
  fill: var(--accent);
}

.dg-core-label {
  font: 800 17px var(--font);
  fill: var(--accent-ink);
}

.dg-leaders {
  fill: none;
  stroke: var(--ink-soft);
  stroke-width: 1;
}

.dg-label {
  font: 700 17px var(--font);
  letter-spacing: .05em;
  fill: var(--ink);
}

/* narrow screens: the version with the names inside the discs (both drawn in build_home.py) */
.home-diagram.is-phone {
  display: none;
}

.home-diagram.is-phone .dg-label {
  font-size: 15px;
}

@media (max-width: 560px) {
  .home-diagram.is-wide {
    display: none;
  }

  .home-diagram.is-phone {
    display: block;
  }
}

@media (max-width: 820px) {
  .home-banner {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0;
  }

  /* the diagram right after the title and subtitle, before the text (Mehul, 7 October 2026) */
  .home-intro {
    display: contents;
  }

  .home-intro .page-title { order: 1; }
  .home-intro .page-sub   { order: 2; }
  .home-figure            { order: 3; margin-bottom: 1.75rem; }
  .home-lead              { order: 4; }
  .home-intro .item-links { order: 5; }

  .home-figure {
    max-width: 36rem;
  }
}

.home {
  padding-top: .5rem;
}

/* --------------------------------------------------------------------------
   Research: two themes side by side, then the two lists
   -------------------------------------------------------------------------- */

.home-themes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem clamp(2rem, 5vw, 4rem);
}

/* below the themes, one under the other: the scope with its areas, the interests, the two links */
.home-lists {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}

/* the headings of the two lists: as the themes' headings above them */
.home-block-title {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--accent);
}

/* the areas: soft pills (not links), two columns, all pills one size (as wide as the longest area), at the left
   like everything else on the page (Mehul, 7 October 2026) */
.home-areas {
  display: grid;
  grid-template-columns: repeat(2, 1fr);   /* (equal columns, as wide as the longest pill: width below) */
  width: fit-content;
  max-width: 100%;
  gap: .6rem 1rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}

.home-areas li {
  display: flex;                       /* the text centred in its pill, also when the pills of a row differ */
  align-items: center;
  justify-content: center;
  padding: .6rem 1.5rem;
  text-align: center;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  background: var(--tray-bg);
  border-radius: var(--pill);
}

.home-theme h3 {
  margin: 0 0 .6rem;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--accent);
}

.home-theme p,
.home-lists p {
  margin: 0;
  line-height: 1.65;
  color: var(--ink-soft);
}

/* the interests: two columns */
.home-list {
  columns: 2;
  column-gap: clamp(2rem, 5vw, 4rem);
  margin: 1rem 0 0;
  padding-left: 1.2rem;
  line-height: 1.55;
}

.home-list li {
  break-inside: avoid;
  margin-bottom: .45rem;
}

.home-list li::marker {
  color: var(--accent);
}

@media (max-width: 760px) {
  .home-themes {
    grid-template-columns: minmax(0, 1fr);
  }

  .home-areas {                        /* two narrower columns: the six pills take half the height */
    width: auto;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .5rem;
  }

  .home-areas li {
    padding: .55rem .75rem;
    font-size: .875rem;
  }

  .home-list {
    columns: 1;
  }
}

/* --------------------------------------------------------------------------
   Explore: the menu's places as boxes of one size, four per row across the
   full width (as the years on the Initiatives page)
   -------------------------------------------------------------------------- */

.explore-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .6rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.explore-box {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 4.25rem;
  padding: .5rem .75rem;
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
  color: var(--timeline-year);
  text-decoration: none;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

/* the extra box: brand green, leading nowhere */
.explore-fill {
  min-height: 4.25rem;
  background: var(--accent);
  border-radius: 12px;
}

.explore-box:hover,
.explore-box:focus-visible {
  color: var(--accent-ink);
  background: var(--accent);
  border-color: var(--accent);
}

@media (max-width: 760px) {
  .explore-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* the dot between the parts of a list entry ("knowledge representation · semantics · …") */
.dot {
  margin: 0 .15em;
  font-weight: 700;
  color: var(--accent);
}

/* lines break at the dots, not inside a phrase: each phrase stays whole (unless it is wider than the column) */
.home-list .part {
  display: inline-block;               /* a whole phrase moves to the next line, never half of it */
  max-width: 100%;
}

/* no thin line above the first section (the wave already separates it from the banner), nor below the last one
   (the footer follows) — Mehul, 7 October 2026 */
.home > .home-section:first-of-type {
  border-top: 0;
}

.home > .home-section:last-of-type {
  border-bottom: 0;
}

/* the two sections: plain headings, no folding (Mehul, 7 October 2026); both titles in capitals, as the first
   was written ("RESEARCH > …", "EXPLORE > CODESIGN LAB") */
.home-section-title {
  padding: clamp(1.4rem, 3vw, 1.9rem) 0;
  margin: 0;
  text-transform: uppercase;
}