/* IDEAS (/ideas) --------------------------------------------------------
   Loaded last and scoped to .page-ideas, so nothing here reaches the
   header, the footer, or any other route.

   Same band system as /research, /about, /method and /context:
   full-width sections, one inner container inset by --page-gutter and no
   max-width, so the wordmark, the H1, every band edge, the footer
   wordmark and the copyright rule share one left and right line. */

.page-ideas {
  --id-pad-y: clamp(1.25rem, 1.8vw, 2.25rem);
  --id-measure: 40rem;
  --id-col-gap: clamp(1.5rem, 2.4vw, 2.5rem);
  --id-sage: #E8EEE3;
  --id-rule: rgba(32, 51, 41, 0.14);
}

/* BANDS ---------------------------------------------------------------- */

.page-ideas main { background: var(--paper); }

.id-sec { padding-block: var(--id-pad-y); }
.id-shell { width: 100%; padding-inline: var(--page-gutter); }

.id-sec--paper { background: var(--paper); }
.id-sec--sage { background: var(--id-sage); }
.id-sec--ink { background: var(--ink-green); }

/* TYPE ----------------------------------------------------------------
   H1 and H2 take the homepage's own declarations, so the first heading
   is the size of the homepage's first and every section heading matches
   its section headings. Each sits at (0,2,1) while `.page-ideas main p`
   is (0,1,2), so the paragraph rule cannot reach them. */

.page-ideas main .id-eyebrow {
  display: block;
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--rust);
  margin: 0 0 var(--s3);
  max-width: none;
  line-height: 1.6;
}

.page-ideas main .id-h1 {
  font-family: var(--display);
  font-weight: 500;
  /* Identical to the homepage hero H1. */
  font-size: clamp(3.5rem, 5.9vw, 6.4rem);
  line-height: 0.98;
  letter-spacing: -0.008em;
  color: var(--ink-green);
  margin: 0 0 var(--s3);
  max-width: none;
}

.page-ideas main .id-h2 {
  font-family: var(--display);
  font-weight: 500;
  /* Matches .growth-heading on the homepage. */
  font-size: clamp(2rem, 3.7vw, 3.4rem);
  line-height: 1.06;
  letter-spacing: -0.004em;
  color: var(--ink-green);
  margin: 0 0 var(--s3);
}
/* The featured title is a link, but a heading first: no colour change
   and no rule until hover. */
.page-ideas main .id-h2 a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 200ms var(--ease);
}
.page-ideas main .id-h2 a:hover { border-bottom-color: var(--rust); }

.page-ideas main p {
  font-family: var(--sans);
  font-size: 1.125rem;
  line-height: 1.6;
  color: var(--forest);
  max-width: var(--id-measure);
  margin: 0 0 var(--s3);
}
.page-ideas main p:last-child { margin-bottom: 0; }

.page-ideas main .id-lead {
  font-size: 1.1875rem;
  line-height: 1.5;
  color: var(--olive);
  max-width: 48rem;
}

/* Links take the site convention: no rule until hover. */
.page-ideas main .id-link {
  display: inline-block;
  margin-top: var(--s2);
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--rust);
  border-bottom: 1px solid transparent;
  transition: border-color 200ms var(--ease);
}
.page-ideas main .id-link:hover { border-bottom-color: var(--rust); }
.page-ideas main .id-link .arw { display: inline-block; transition: transform 220ms var(--ease); }
.page-ideas main .id-link:hover .arw { transform: translateX(3px); }
.page-ideas main .id-head .id-link:hover .arw { transform: translateY(3px); }

/* 1. PAGE HEAD --------------------------------------------------------- */

.id-head { padding-block: clamp(1.75rem, 2.4vw, 2.5rem) clamp(1.25rem, 1.8vw, 2rem); }

/* 2. RECOMMENDED ------------------------------------------------------- */

.id-featured-grid {
  display: grid;
  grid-template-columns: minmax(0, 50fr) minmax(0, 50fr);
  gap: clamp(1.75rem, 3vw, 3.25rem);
  align-items: center;
}
.id-featured-media { display: block; width: 100%; }
.id-featured-media img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }

/* 3. BROWSE -----------------------------------------------------------
   The search field and the topic filter sit on one row, the field taking
   the room the select does not need. */

.id-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 14rem);
  gap: var(--id-col-gap);
  align-items: center;
  margin-bottom: var(--s3);
}
.page-ideas .id-search-field { width: 100%; margin: 0; }

.id-topic-select {
  width: 100%;
  padding: 0.8rem 2.4rem 0.8rem 1rem;
  font-family: var(--sans);
  font-size: 1rem;
  color: var(--ink-green);
  background-color: var(--paper-light);
  border: 1px solid var(--border);
  border-radius: 0;
  appearance: none;
  /* The chevron is drawn rather than loaded, so it carries no request
     and inherits nothing from the platform's own select styling. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23203329' stroke-width='1.6'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  background-size: 1.05rem;
}
.id-topic-select:focus-visible { outline: 2px solid var(--rust); outline-offset: 2px; }

/* The results panel sits under the controls rather than floating, the
   same as the homepage field. */
.page-ideas .id-result-panel { margin-bottom: var(--s3); }

.page-ideas main .id-hint { color: var(--text-2); font-size: 1rem; margin-bottom: var(--s2); }
.page-ideas main .id-explore {
  font-size: 1rem;
  color: var(--text-2);
  max-width: none;
  margin-bottom: clamp(1.25rem, 2.2vw, 1.75rem);
}
.page-ideas main .id-explore a {
  color: var(--rust);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 200ms var(--ease);
}
.page-ideas main .id-explore a:hover,
.page-ideas main .id-explore a[aria-current="true"] { border-bottom-color: var(--rust); }
.page-ideas main .id-explore a[aria-current="true"] { font-weight: 500; }

/* The card grid ------------------------------------------------------- */

.id-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.75rem, 3vw, 3rem) var(--id-col-gap);
  list-style: none;
  margin: 0;
  padding: 0;
}
.id-card[hidden] { display: none; }
.id-card-link { display: block; text-decoration: none; color: inherit; }
.id-card-media { display: block; width: 100%; margin-bottom: var(--s3); overflow: hidden; }
.id-card-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 320ms var(--ease);
}
.id-card-link:hover .id-card-media img { transform: scale(1.02); }
.id-card-type {
  display: block;
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--rust);
  margin-bottom: var(--s2);
}
.id-card-title {
  display: block;
  font-family: var(--display);
  font-weight: 500;
  /* Set against the three-column card, which is about two thirds the
     width the two-column grid gave it, so the same scale ran to three
     and four lines on the longer titles. */
  font-size: clamp(1.25rem, 0.98rem + 0.85vw, 1.625rem);
  line-height: 1.18;
  letter-spacing: -0.002em;
  color: var(--ink-green);
  margin-bottom: 0.4rem;
  border-bottom: 1px solid transparent;
  transition: border-color 200ms var(--ease);
}
.id-card-link:hover .id-card-title { border-bottom-color: var(--rust); }
.id-card-desc {
  display: block;
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--text-2);
}
.page-ideas main .id-empty { color: var(--text-2); }

/* Show more -----------------------------------------------------------
   The grid always ends on a full row: the script keeps the visible
   count at a multiple of three and this control reveals the next set.
   It ships hidden and the script shows it only when cards are actually
   held back, so with scripting off every card is already on the page
   and there is no button pointing at nothing. */
.id-more-row { display: flex; justify-content: center; }
/* The space belongs to the button, not the row: with the button hidden
   a margin on the row would still hold open 44px of empty paper under
   the last card. */
.page-ideas main .id-more {
  margin-top: clamp(1.75rem, 3vw, 2.75rem);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem 0.35rem;
  border: 0;
  background: none;
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--rust);
  cursor: pointer;
}
.id-more-chev { display: block; line-height: 0; }
.id-more-chev svg {
  display: block;
  width: 26px;
  height: 26px;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 220ms var(--ease);
}
.page-ideas main .id-more:hover .id-more-chev svg { transform: translateY(3px); }
.page-ideas main .id-more:focus-visible { outline: 2px solid var(--rust); outline-offset: 3px; }
/* `display` above is (0,2,1); the UA's `[hidden]{display:none}` is
   (0,1,0) and loses to it, so the attribute has to be restated here or
   the button shows even with every card already on the page. */
.page-ideas main .id-more[hidden] { display: none; }

/* 4. KEEP EXPLORING ---------------------------------------------------
   Warm off-white for every piece of text on the ink ground, the eyebrow
   included: the inherited rust measures 2.1:1 there. */

.id-close { color: var(--paper-on-dark); }
.page-ideas main .id-close .id-eyebrow { color: var(--paper-on-dark); }
.page-ideas main .id-close .id-h2 { color: var(--paper-light); }
.page-ideas main .id-close p { color: var(--paper-on-dark); max-width: 46rem; }

.id-close-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--id-col-gap);
  align-items: center;
}
.page-ideas main .id-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  padding: 0.85rem 1.4rem;
  border: 1px solid var(--paper-light);
  background: var(--paper-light);
  color: var(--ink-green);
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  transition: background-color 160ms ease, color 160ms ease;
}
.page-ideas main .id-cta:hover { background: transparent; color: var(--paper-light); }
.page-ideas main .id-cta .arw { display: inline-block; transition: transform 220ms var(--ease); }
.page-ideas main .id-cta:hover .arw { transform: translateX(3px); }
/* The global focus ring is rust, which measures 2.1:1 on ink. */
.page-ideas main .id-cta:focus-visible { outline: 2px solid var(--paper-light); outline-offset: 3px; }

/* RESPONSIVE ----------------------------------------------------------- */

/* Below this the three-column card is narrower than its own title
   wants, so the grid drops to two. */
@media (max-width: 1100px) {
  .id-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  .page-ideas main .id-h1 { font-size: clamp(3.4rem, 12.5vw, 4.2rem); }
}

@media (max-width: 860px) {
  .id-featured-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .id-featured-media { max-width: 560px; }

  .id-controls { grid-template-columns: minmax(0, 1fr); gap: var(--s3); }
  .id-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .id-close-grid { grid-template-columns: minmax(0, 1fr); align-items: start; }

  /* 16px body, 17px lead. Each override repeats its desktop selector so
     it clears that rule's specificity. */
  .page-ideas main p { font-size: 1rem; }
  .page-ideas main .id-lead { font-size: 1.0625rem; max-width: none; }
  .id-card-desc { font-size: 1rem; }
}

@media (max-width: 620px) {
  .id-card-grid { grid-template-columns: minmax(0, 1fr); }
  .page-ideas main .id-h2 { font-size: clamp(2rem, 10vw, 3rem); }
  .page-ideas main .id-cta { width: 100%; justify-content: center; }
}