/**
 * home.css — CJIP Home page-scoped stylesheet (kredoly-methodology.md R14).
 * Emitted C3.2. C3.2-fix10 (v0.2.16) section-head font: Unbounded->Golos: leadmag layout moved to NATIVE home.json container
 * settings (flex-row/space-between/center/gap + copy _flex_size:grow); page CSS keeps only
 * band/wrap/typography/button-width. C3.2-fix5 (v0.2.11): reverted to CLASS selectors for section/inner
 * containers. Container _css_classes now render via the cjip-container-classes
 * mu-plugin (the widget-strip removal had suppressed them; ids were a band-aid).
 *
 * HOUSE SPLIT: icon-box + button visuals are pinned in home.json (K-011/K-016);
 * this sheet is bands + layout + native heading/text typography + hover states.
 * D1: hero/trust/cta bands are self-styled by their widgets — not painted here.
 */

/* §1 hero / §2 trust / §7 cta — pass-through (widgets own their bands, D1). */

/* §3 courses-teaser — white band. */
.cjip-sec-home-courses-teaser{
  background:var(--color-white);
  padding-block:var(--cjip-rhythm,80px);
}
/* §5 how-condensed — paper band. */
.cjip-sec-home-how-condensed{
  background:var(--color-paper);
  padding-block:var(--cjip-rhythm,80px);
}

/* "More" text-link — visuals pinned on the Button widget; position + hover here. */
.cjip-more{ margin-block-start:48px; }
.cjip-more .elementor-button{ transition:color .2s ease; }
.cjip-more .elementor-button .elementor-button-icon{
  transition:transform .2s ease;   /* SoT arrow nudge on hover */
}
.cjip-more .elementor-button:hover .elementor-button-icon{ transform:translateX(4px); }

/* §4 audience — sky band; native heading + Icon-Box ×4. */
.cjip-sec-home-audience{
  background:var(--color-sky);
  padding-block:var(--cjip-rhythm,80px);
}
.cjip-home-audience-inner{
  max-width:var(--cjip-wrap,1200px);
  margin-inline:auto;
  padding-inline:clamp(16px,5vw,32px);
}
.cjip-audience-title .elementor-heading-title{
  font-family:var(--font-body);
  font-weight:700;
  font-size:1.875rem;
  line-height:1.2;
  color:var(--color-azure-deep);
  text-align:center;
  margin:0 0 64px;
}
/* R4 grid: 1 → 2 → 4 col. Section-scoped so it outranks .e-con{display:flex}. */
.cjip-sec-home-audience .cjip-home-audience-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
}
@media(min-width:640px){ .cjip-sec-home-audience .cjip-home-audience-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1024px){ .cjip-sec-home-audience .cjip-home-audience-grid{ grid-template-columns:repeat(4,1fr); } }
.cjip-audience-tile{ height:100%; }
.cjip-audience-tile .elementor-icon-box-wrapper{
  height:100%;
  background:var(--color-white);
  border-radius:12px;
  box-shadow:0 1px 3px color-mix(in srgb,var(--color-ink) 10%,transparent);
  padding:24px;
  transition:box-shadow .2s ease;   /* subtle lift on hover */
}
.cjip-audience-tile .elementor-icon-box-wrapper:hover{
  box-shadow:0 4px 14px color-mix(in srgb,var(--color-ink) 14%,transparent);
}

/* §6 lead-magnet — azure band.
   LAYOUT IS NATIVE (home.json / C3.2-fix7): parent .cjip-home-leadmag is flex-row
   (mobile column) with space-between + center + 40px gap set in container settings;
   .cjip-home-leadmag-copy grows via _flex_size. Elementor emits those flex rules, so
   page CSS no longer fights --flex-direction. This sheet owns band, wrap, typography,
   copy alignment, and the button column width ONLY. */
.cjip-sec-home-lead-magnet{
  background:var(--color-azure);
  padding-block:var(--cjip-rhythm,80px);
}
/* wrap only — flex axis/gap/justify/align live in home.json container settings. */
.cjip-sec-home-lead-magnet .cjip-home-leadmag{
  max-width:var(--cjip-wrap,1200px);
  margin-inline:auto;
  padding-inline:clamp(16px,5vw,32px);
}
/* copy column: grow is native; this owns text alignment only. */
/* min-width:0 lets the copy column shrink so the long subtitle can't overflow the row. */
.cjip-sec-home-lead-magnet .cjip-home-leadmag-copy{ text-align:center; min-width:0; }
@media(min-width:768px){
  .cjip-sec-home-lead-magnet .cjip-home-leadmag-copy{ text-align:left; flex:0 1 50%; }
}
.cjip-leadmag__title .elementor-heading-title{
  font-family:var(--font-body);
  font-weight:700;
  font-size:clamp(1.875rem,4vw,2.25rem);
  line-height:1.15;
  color:var(--color-white);
  margin:0;
}
.cjip-leadmag__sub,
.cjip-leadmag__sub p{
  color:var(--color-sky);
  font-size:1.125rem;   /* React text-lg */
  line-height:1.6;
  margin:0;
}
@media(min-width:640px){
  .cjip-leadmag__sub,
  .cjip-leadmag__sub p{ font-size:1.25rem; }  /* React sm:text-xl */
}
/* button column — the ~1/3 right column. Parent axis is native; width is visual polish. */
.cjip-sec-home-lead-magnet .cjip-leadmag__btn{ width:100%; }
@media(min-width:768px){
  .cjip-sec-home-lead-magnet .cjip-leadmag__btn{ flex:0 1 33.333%; width:auto; }
}
.cjip-leadmag__btn .elementor-button{
  width:100%;
  min-height:56px;
  font-size:1.125rem;
  border-radius:6px;   /* React rounded-md */
  box-shadow:0 10px 15px -3px color-mix(in srgb,var(--color-ink) 12%,transparent),
             0 4px 6px -4px color-mix(in srgb,var(--color-ink) 12%,transparent); /* shadow-lg */
  transition:background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.cjip-leadmag__btn .elementor-button:hover{
  background:color-mix(in srgb,var(--color-gold) 90%,transparent);
  transform:translateY(-1px);
}