/* Homepage (desktop Figma: 1728 frame, hero 587px, benefits 53px, courses section, yellow vouchers). */

/* ── Hero ────────────────────────────────────────────────────────────────── */
.home-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: clamp(460px, 34vw + 120px, 640px);
  background: #787878; /* fig placeholder colour, visible until the photo loads */
  color: var(--c-white);
  overflow: hidden;
}
.home-hero--plain { background: var(--c-black); }
.home-hero > picture { display: contents; } /* knk_babovka_picture(): keep the flex hero's children as before */
.home-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.home-hero__img--babovka { object-position: 50% 85%; } /* keep the whole cake and plate when the wide hero crops the photo */
.home-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(0 0 0 / 0.72) 0%, rgb(0 0 0 / 0.45) 45%, rgb(0 0 0 / 0.1) 80%); }
@media (max-width: 767.98px) { .home-hero::after { background: linear-gradient(to top, rgb(0 0 0 / 0.8), rgb(0 0 0 / 0.35) 70%, rgb(0 0 0 / 0.25)); } .home-hero { align-items: flex-end; } }
.home-hero__content { position: relative; z-index: 1; padding-block: var(--s-16) var(--s-12); }
@media (min-width: 1200px) { .home-hero__content { padding-inline-start: calc(var(--gutter) + 6.5rem); } } /* fig: text column starts ~117px inside the container */
/* Two lines, one sentence each, never wrapped. The font scales with the viewport so both default lines fit. */
.home-hero__title { margin: var(--s-4) 0; font-size: var(--fs-section); line-height: 1.1; }
.home-hero__line { display: block; white-space: nowrap; }
.home-hero__lead { max-width: 44ch; margin-bottom: var(--s-6); font-size: var(--fs-lead); color: rgb(255 255 255 / 0.9); }

/* ── Section head: title left, text right (fig: 994px title / 339px text) ── */
.section-head { display: grid; gap: var(--s-4) var(--s-12); margin-bottom: var(--s-8); }
.section-head .display { margin-bottom: 0; }
.section-head__text { max-width: 42ch; color: var(--c-text-muted); }
.section-head__text p { margin-bottom: var(--s-4); }
@media (min-width: 1024px) {
  .section-head { grid-template-columns: 1fr minmax(280px, 340px); align-items: end; margin-bottom: var(--s-12); }
}
/* Text (and recipe category chips) under the title across the section (Lucka 2026-10-01). */
.section-head--stacked { grid-template-columns: none; }
@media (min-width: 1024px) { .section-head--stacked { grid-template-columns: none; gap: var(--s-4); align-items: start; } }
.section-head--stacked .section-head__text { max-width: none; }
.section-head--stacked p.section-head__text, .section-head--stacked .section-head__text p { max-width: 70ch; } /* chips use the full width; running text stays readable */

.section-cta { margin: var(--s-10) 0 0; text-align: center; }

/* Desktop fig cards: 460×471, radius 24, image 249px high. */
@media (min-width: 1200px) { .home-courses .card__media, .home-recipes .card__media { aspect-ratio: 460 / 249; } }

.home-recipes { background: var(--c-cream); }

/* ── Help choosing a course (WhatsApp): text + button, chat illustration beside it on wide screens ── */
.home-help__inner { display: grid; gap: var(--s-8); align-items: center; }
@media (min-width: 900px) { .home-help__inner { grid-template-columns: 1.2fr 1fr; gap: var(--s-12); } }
.home-help__title { margin-bottom: var(--s-3); font-size: var(--fs-section); }
.home-help__text { margin: 0 0 var(--s-6); max-width: 60ch; color: var(--c-text-muted); }
.home-help .btn .icon { width: 1.25em; height: 1.25em; }

.chat { display: grid; gap: var(--s-3); max-width: 420px; width: 100%; justify-self: center; padding: var(--s-4); border-radius: var(--r-card-lg); background: var(--c-cream); box-shadow: var(--shadow-md); font-size: var(--fs-small); }
.chat__head { display: flex; align-items: center; gap: var(--s-3); padding-bottom: var(--s-3); border-bottom: 1px solid var(--c-border); font-weight: 700; }
.chat__avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.chat__msg { position: relative; max-width: 85%; margin: 0; padding: var(--s-2) var(--s-3) var(--s-4); border-radius: 14px; line-height: 1.4; box-shadow: var(--shadow-sm); }
.chat__msg--out { justify-self: end; background: var(--c-yellow); border-bottom-right-radius: 4px; }
.chat__msg--in { justify-self: start; background: var(--c-white); border-bottom-left-radius: 4px; }
.chat__time { position: absolute; right: var(--s-3); bottom: 4px; font-size: 0.6875rem; color: var(--c-text-subtle); }
.chat__msg--out .chat__time { color: var(--c-grey-700); } /* subtle grey is 3.96:1 on the yellow bubble; this is 5.54:1 (axe, WCAG AA) */