/* POPHIES home page styles.
   Source: DESIGN.md (visual language) and 网站规划.md §6.1 (home modules).
   Only this page's own layout and spacing live here: shared tokens stay in
   assets/css/tokens.css and shared classes in style.css. */

/* ---------- Hero ---------- */
.home-hero .page-hero {
  padding-top: calc(var(--section-sm) * 1.05);
  padding-bottom: calc(var(--section-sm) * 1.05);
}

.home-hero .page-hero__title { max-width: 24ch; }

/* The display size is cut for a heading that owns the whole width. Inside the
   split column that same size broke the title into five lines and pushed the
   buttons past the first screen, so the opening sizes the title against its own
   column instead. The two columns also start on the same line: centred, the 4:3
   illustration floated in the middle of a much taller text column and left a
   band of empty space above it.
   Second pass, after the first look at the built opening: the headline still
   outweighed the photograph, so the title came down a step and the columns were
   reversed — the illustration takes the wider share now and the text column is
   the narrower one, which also holds the title to three lines.
   Third pass, the same note once more — still too little picture, still too much
   headline: the title ceiling drops from 3.1rem to 2.8rem (at the 1320px
   container the ramp also reads lower, 41.5px -> 36.4px) and the illustration
   takes a further share of the row, 0.95fr/1.05fr -> 0.82fr/1.18fr, which puts
   the 4:3 photograph at 696 x 522 beside a 484px text column. */
@media (min-width: 900px) {
  .home-hero .page-hero__title {
    font-size: clamp(2.05rem, 2.15vw + 0.5rem, 2.8rem);
    max-width: 22ch;
  }

  .home-hero .page-hero--split .page-hero__inner {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    align-items: start;
    gap: 2.75rem;
  }
}

.home-hero .page-hero__lead { max-width: 50ch; }

/* ---------- Commercial terms ---------- */
.home-terms { padding-top: calc(var(--section) * 0.8); }

.home-terms .fact-strip {
  padding-top: 1.75rem;
  border-top: 1px solid var(--stone);
}

/* ---------- Power modes ---------- */
/* Each mode opens with its own mark, drawn in the template in brass: the same
   picture light in all three, told apart by the source beside it. */
.home-power__icon {
  display: block;
  margin-bottom: 1rem;
  color: var(--brass);
}

.home-power__icon svg {
  display: block;
  width: 28px;
  height: 28px;
}

.home-power__impact {
  margin: 0;
  padding-top: 0.85rem;
  border-top: 1px solid var(--stone);
  font-size: var(--fs-small);
  color: var(--graphite);
}

/* ---------- Capability columns ---------- */
.home-capability__grid { gap: 2.5rem 3rem; align-items: start; }

.home-capability__col {
  min-width: 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--stone);
}

.home-capability__col h3 { margin-bottom: 0.6em; }
.home-capability__col .checklist { margin-bottom: 0; }

/* ---------- Empty record modules ---------- */
.home-empty { max-width: 68ch; }

.home-applications--is-empty { padding-bottom: calc(var(--section) * 0.6); }
.home-cases--is-empty { padding-top: calc(var(--section) * 0.6); }

/* ---------- Product ranges ---------- */
/* The representative photograph of each product_category term opens the card. */
.home-range .media { margin-bottom: 0.15rem; }

/* ---------- Customization: the four levels and the sample photograph ---------- */
/* The four levels are numbered and ruled the way the same four are on the OEM / ODM
   page, so the grid reads as four separate levels instead of one block of text. */
.home-routes__levels { gap: 2.25rem 2.5rem; }

.home-level {
  padding-top: 1.5rem;
  border-top: 1px solid var(--stone);
}

/* The sample photograph is 3:2 and was capped at 46rem inside a full-width row: it
   sat on the left with an empty half beside it while the call to action floated
   above it. The closing action, the small print and the photograph now share one
   row — the text keeps the left edge the levels above use, the photograph fills the
   rest. Below 900px the three stack in reading order. */
.home-routes__foot { margin-top: 2.5rem; }

.home-routes__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.home-routes__note {
  margin-top: 1.75rem;
  max-width: none;
}

.home-routes__media { margin-top: 2rem; }

.home-routes__media .media { max-width: none; }

@media (min-width: 900px) {
  .home-routes__foot {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 3rem;
    align-items: start;
  }

  .home-routes__media { margin-top: 0; }
}

/* ---------- Test photographs ---------- */
.home-tests {
  margin-top: 2.5rem;
  align-items: start;
}

.home-test { min-width: 0; }

/* ---------- Record cards (applications, case studies) ---------- */
/* The record's own photograph opens the card; a record without one yet gets a
   rule instead of an empty grey box. */
.home-record .media { margin-bottom: 0.15rem; }

/* ---------- Record grids holding fewer records than columns ---------- */
/* The homepage shows however many records are published — two applications, one
   case study — and the grid spreads them across its row instead of leaving the
   unused column empty. A single case study becomes a wide record: its photograph
   on one side and everything that describes it on the other. */
.grid--fill { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }

@media (min-width: 1000px) {
  .grid--fill.grid--3 { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
}

.grid--feature { grid-template-columns: minmax(0, 1fr); }

@media (min-width: 900px) {
  .grid--feature .home-record {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: 0 2.5rem;
    align-items: start;
  }

  .grid--feature .home-record .media { grid-column: 1; }

  .grid--feature .home-record .card__body {
    grid-column: 2;
    padding-top: 0.5rem;
  }
}

/* A record card is a photograph over its text; the text keeps the card's own
   rhythm once it sits in a wrapper, so a two-column record reads as one card. */
.card__body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-width: 0;
}

.home-record .card__link { margin-top: 0.35rem; }