/* ============================================================
   solutions/publishers.html — AvoLingo for Publishers.
   Rebuilt 2026-10-01 to bar-publishers-simple.md as the same family as
   solutions/schools.html, and — round 5 — mirroring css/schools.css rule
   for rule: the §9.3.1 hero (headline, line, one button, one photo), a
   §5.3 blue panel, a 46/54 split, a centred wide block and the §5.3 sand
   outro; headings and lines measured with [characters]; story photos 4:5
   at every width; one small §9.4 card per story photo, anchored
   bottom-left like schools' cards. Colour, type, radii, buttons and pills
   are the homepage's (tokens.css / styles.css / site.css); this file only
   lays them out. Every class is .pub-*.
   ============================================================ */

.pub-section { scroll-margin-top: calc(var(--nav-h) + var(--sp-8)); }
.pub-nowrap { white-space: nowrap; }   /* schools' .ks-nowrap: keep a short sentence on one line */
@media (max-width: 360px) { .pub-panel h2 .pub-nowrap + .pub-nowrap { white-space: normal; } }   /* “Now they say it.” is wider than a 320 column; it may wrap after “they” */

/* Photos are imagery (§9.4 R4): a §7 radius, no elevation. */
.pub-photo { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius--2xl); }
.pub-wide { position: relative; aspect-ratio: 9 / 5; }
.pub-split__media,
.pub-panel__media { position: relative; aspect-ratio: 4 / 5; }
.pub-split__media picture { display: block; height: 100%; }

/* Section pill (§5.4 opener) without an arrow: it labels, it doesn't link. */
.pub-pill { padding: 0.4em 1.2em; border-radius: 1rem; font-size: max(var(--fs-body-xs), 12px); }   /* §7 tag radius; same floor as the cards */
.pub-pill--speaking {
  --_theme---pills--pill-background: var(--color--blue-100);
  --_theme---pills--pill-text: var(--color--blue-1000);
}

/* Shared line under a section heading. */
.pub-hero__line,
.pub-split__text p,
.pub-panel__text p,
.pub-wideblock__line,
.pub-close__line {
  margin-top: var(--sp-20);
  font-size: var(--fs-body-l);
  line-height: var(--lh-body);
  color: var(--color--grey-800);
}
.pub-hero__title,
.pub-hero__line,
.pub-wideblock__title,
.pub-wideblock__line,
.pub-close__title,
.pub-close__line { margin-inline: auto; }

/* ---- Product cards: §9.4 content cards inside a photo ----------------
   Schools' card system: 18rem, white, --radius--l, 0.4rem padding,
   resting at --shadow--card, anchored bottom-left. UI text at the pill's
   size (body-xs, floored at 12px), 400, card copy in grey-800 (§9.4).
   Title on its own row; rows below sit on a grey-50 tile. */
.pub-card {
  position: absolute;
  z-index: 2;
  left: 4%;
  bottom: 5%;
  width: min(18rem, 84%);
  margin: 0;
  padding: var(--sp-4);
  display: grid;
  gap: var(--sp-4);
  border-radius: var(--radius--l);
  background: var(--color--white);
  box-shadow: var(--shadow--card);
  font-size: max(var(--fs-body-xs), 12px);
  line-height: var(--lh-body);
  color: var(--color--grey-800);
}
.pub-card p { margin: 0; }
.pub-card__head {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-8) 0;
  font-weight: 400;   /* §4.1: body-xs pairs with 400 */
  color: var(--color--grey-800);
}
.pub-card__head img { width: 1.5rem; height: 1.5rem; border-radius: var(--radius--circle); object-fit: cover; }

/* Avo chat (student/10_prof_avo_conversation) — schools' chat bubbles. */
.pub-chat__me,
.pub-chat__avo { padding: var(--sp-4) var(--sp-8); border-radius: var(--radius--m); }
.pub-chat__me { justify-self: end; max-width: 86%; background: var(--color--brand-100); color: var(--color--brand-1000); }
.pub-chat__avo { max-width: 92%; background: var(--color--grey-50); }

/* Unit assignments (teacher/11b_roadmap_inside_full) — schools' homework rows. */
.pub-row {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-8);
  padding: var(--sp-4) var(--sp-8);
  border-radius: var(--radius--m);
  background: var(--color--grey-50);
}
.pub-row__type { color: var(--color--grey-800); white-space: nowrap; }

/* The book (book_pages/00_cover): title row, then the cover and subtitle on a tile. */
.pub-book {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  padding: var(--sp-4) var(--sp-8) var(--sp-4) var(--sp-4);
  border-radius: var(--radius--m);
  background: var(--color--grey-50);
}
.pub-book img { flex: none; width: 1.8rem; height: 2.4rem; border-radius: var(--radius--xs); object-fit: cover; }

/* ---- 1. Hero: centred, then one wide photo (§9.3.1) ----------------- */

.pub-hero { padding-block: var(--sp-40); text-align: center; }
.pub-hero__cta { margin-top: var(--sp-32); }
.pub-hero__photo { margin-top: var(--sp-40); }
.pub-wide picture { display: block; height: 100%; }

/* ---- 2. Learners: a §5.3 panel, photo | text ------------------------ */

.pub-panel {
  margin-inline: var(--sp-8);
  padding-block: var(--sp-56);
  border-radius: var(--radius--2xl);
  background: var(--color--blue-50);
  color: var(--color--blue-1000);
}
.pub-panel__grid {
  display: grid;
  grid-template-columns: 54fr 46fr;   /* §5.2 home-grid, mirrored: the visual is the larger half */
  gap: var(--sp-20);
  align-items: center;
}
.pub-panel__text h2,
.pub-panel__text p { color: var(--color--blue-1000); }

/* ---- 3. Schools: text | photo --------------------------------------- */

.pub-split { padding-block: var(--sp-40); }
.pub-split__grid {
  display: grid;
  grid-template-columns: 46fr 54fr;   /* §5.2 home-grid */
  gap: var(--sp-20);
  align-items: center;
}
.pub-split__media .pub-photo { object-position: 50% 25%; }

/* ---- 4. Partners: centred headline over a wide photo ---------------- */

.pub-wideblock { padding-block: var(--sp-40); text-align: center; }
.pub-wideblock__photo { margin-top: var(--sp-40); text-align: left; }
.pub-wideblock__photo .pub-photo { object-position: 50% 30%; }

/* ---- 5. Closing: the §5.3 outro panel (sand-100, its own ink) ------- */

.pub-close {
  margin: 0 var(--sp-8);
  padding-block: var(--sp-64);
  border-radius: var(--radius--2xl);
  background: var(--color--sand-100);
  color: var(--color--grey-1000);
  text-align: center;
}
/* Client 2026-10-01: no brown (sand-1000) type. */
.pub-close__title { color: var(--color--grey-1000); }
.pub-close__line { color: var(--color--grey-800); }
.pub-close__cta { margin-top: var(--sp-32); }
.pub-note {
  margin-top: var(--sp-16);
  text-align: center;
  font-size: max(var(--fs-body-xs), 12px);
  color: var(--color--grey-800);
}

/* ---- Korean setting (§4.1.2) ---------------------------------------- */

:lang(ko) .pub-section h1,
:lang(ko) .pub-section h2 { line-height: var(--lh-heading); letter-spacing: var(--kern-heading); word-break: keep-all; }
:lang(ko) .pub-section p { line-height: var(--lh-ko-body); word-break: keep-all; }

/* ---- Responsive (§10.3) ---------------------------------------------- */

@media (max-width: 860px) {
  .pub-panel__grid,
  .pub-split__grid { grid-template-columns: 1fr; gap: var(--sp-32); }
  .pub-panel__text { order: -1; }           /* heading before its picture */
  .pub-hero__photo { aspect-ratio: 4 / 5; }
  .pub-wideblock__photo { aspect-ratio: 4 / 5; }
  .pub-card { left: 4%; bottom: 4%; width: min(18rem, 88%); }
}

@media (max-width: 640px) {
  .pub-hero__cta { width: 100%; }
  .pub-close { padding-block: var(--sp-56); }
  .pub-close__cta { width: 100%; }
}

/* ---- Korean page only (ko/solutions/publishers.html, §4.1.2) ----------
   Card content is the app's English UI (lang="en" on the card's rows), so
   it keeps the Latin setting and the cards match the EN heights. */
:lang(ko) .pub-card p:lang(en) { line-height: var(--lh-body); word-break: normal; }
:lang(ko) .pub-note { line-height: var(--lh-ko-body); word-break: keep-all; }
/* KO lines keep the house `p { text-wrap: pretty }` (§4.2); phrase groups (.pub-nowrap) handle the Hangul breaks. */
/* Two beats, one per line, at every width ("읽은 걸," / "이제 말해요."; "책장에서" / "교실까지."). */
.pub-beat { display: block; white-space: nowrap; }
/* 2026-10-14: on phones the longer beats ("말하기와 쓰기까지.", "학습 앱도 제안하세요.") are
   wider than the column at headline size, so they wrap there; Korean keep-all
   still breaks only between words. */
@media (max-width: 480px) { .pub-beat { white-space: normal; } }
.pub-faq { padding-bottom: var(--sp-64); }   /* 2026-10-10: new FAQ before the #start panel */