/* ==========================================================================
   home.css : the home page (from the Phase 1 comp home/assets/home.css), identical to the live home
   except for the one block the client replaced (the poster and the text of the coming book).
   Loaded after base.css (tokens, header, footer) on the front page only.
   Live look kept except the new-book block (Change 9: ink bold heading, dark body as the author's screenshot): teal tagline, one deep-red and one blue button.
   Body grey is #5E5E5E (live #7A7A7A fails 4.5:1 on the paper); the tagline stays the live teal.
   RTL: logical properties only; the poster takes the first (right-hand) column, the text the second.
   ========================================================================== */

main.home { --home-w: 1060px; }

/* ---------- the new-book block ---------- */
.home-new { width: min(var(--home-w), 100% - 2 * var(--gutter)); margin-inline: auto; padding-block: 56px 44px; }
.home-new-grid {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  column-gap: 56px;
  align-items: start;
}
.home-poster { grid-column: 1; grid-row: 1; }
.home-poster img {
  display: block; width: 100%; height: auto;
  border-radius: var(--r-panel);
  box-shadow: var(--shadow-raise);
}
.home-new-text { grid-column: 2; grid-row: 1; padding-block-start: 4px; max-width: 62ch; }
.home-new-title {
  font: 700 clamp(1.75rem, 1vw + 1.4rem, 2.125rem)/1.3 var(--font-heading);   /* bold as the author's screenshot (Change 9); Yehuda CLM like every heading (Change 21) */
  color: var(--ink);   /* the ink teal of the author's screenshot (Change 9) */
  margin-block-end: 18px;
  text-wrap: balance;
}
.home-new-text p { font-size: var(--t-body); line-height: 1.75; color: var(--text); text-wrap: pretty; }   /* dark and set as tight as the author's screenshot (Change 9): 10:1 on the paper; pretty keeps a last line from being one word */
.home-new-text p + p { margin-block-start: .8em; }
/* the three questions: bold as the author's screenshot, the weight only (same face, size, colour and leading) */
.home-new-text .home-new-questions { font-weight: 700; }

@media (min-width: 900px) {
  /* the flowing text (Change 9) is shorter than the poster: it sits at the poster's middle, not abandoned at its top */
  .home-new-text { align-self: center; }
}

/* ---------- tagline and the two live buttons ---------- */
.home-lead { padding-block: 40px 72px; text-align: center; }
/* The line «כי בכל סיפור יש פלפלת...» (Change 21, the owner: «תעשה אותו בצורה מעוצבת עם הפונט Noot»): set in Noot, one line on a desktop and even lines on a phone, in the leaf green of the logo
   (--leaf, Change 22: «להחליף את "כי בכל סיפור יש" בצבע של העלה בלוגו») with the brand word «פלפלת» and its dots in the site's plum (inc/typography.php wraps them; a line without that word is simply all green).
   Large text (24px and up): the leaf green is 4.3:1 on the paper, the plum 5.7:1. Change 22 («להקטין את הסלוגן»): 28px on a phone to 40px from a wide screen (it was 34 to 56); Change 23 («תקטין עוד קצת»):
   25px on a phone to 34px from 1333px wide, and never under 24px, the size from which 3:1 is the floor. */
.home-tagline {
  width: min(var(--home-w), 100% - 2 * var(--gutter)); margin-inline: auto;
  font: 400 clamp(1.5625rem, 1.5vw + 0.875rem, 2.125rem)/1.2 var(--font-slogan);
  color: var(--leaf);
  text-wrap: balance;
}
.home-tagline-word { color: var(--plum); }
.home-actions {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 16px;
  width: min(var(--home-w), 100% - 2 * var(--gutter)); margin: 28px auto 0;   /* the page's own side gutters: on a phone the two buttons never touch the screen's edges (the owner's note, Change 12) */
}
.home-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 150px; min-height: 48px; padding: 0 28px;
  border-radius: var(--r-control);
  color: #fff; text-decoration: none;
  font: 700 1.25rem/1.15 var(--font-display);
  box-shadow: 0 3px 8px -2px rgba(0, 0, 0, .35);
  transition: background-color var(--dur-state, 200ms) var(--ease-standard, ease), box-shadow var(--dur-feedback, 120ms) var(--ease-standard, ease);
}
.home-btn:hover, .home-btn:focus-visible { color: #fff; box-shadow: 0 5px 12px -3px rgba(0, 0, 0, .4); }
.home-btn-books { background: #279636; }   /* the live site's green (its «שליחה» button), the owner's colour (Change 16). White on it 3.8:1: AA for large text, and the label is 20px bold */
.home-btn-books:hover, .home-btn-books:focus-visible { background: #1E7A2E; }   /* 5.4:1 */
.home-btn-meet { background: var(--blue); }
.home-btn-meet:hover, .home-btn-meet:focus-visible { background: var(--link); }
.home-new-text .home-new-cta { margin-block-start: 22px; }
.home-btn-order { background: var(--add); color: var(--add-text); }
.home-btn-order:hover, .home-btn-order:focus-visible { background: var(--add-hover); color: var(--add-text); }   /* after .home-btn:hover (white text): dark text on the sky stays 5.2:1 */

/* ---------- reflow ---------- */
@media (max-width: 899px) {
  .home-new { padding-block: 32px 32px; }
  .home-new-grid { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
  .home-new-text { grid-column: 1; grid-row: 1; justify-self: center; width: 100%; max-width: 32em; }   /* under 75 characters a line on a tablet */
  .home-poster { grid-column: 1; grid-row: 2; width: min(100%, 440px); justify-self: center; }
}
@media (max-width: 599px) {
  .home-lead { padding-block: 24px 56px; }
  .home-btn { min-width: 0; flex: 1 1 140px; max-width: 220px; }
}