/* ==========================================================================
   Imkon Finans — home page (owner: home agent)
   Loaded only on templates/core/home.html via {% block extra_head %}.
   Builds on the tokens and classes in site.css (see SPEC.md "Class API").
   Order: hero → band → application/calculator → advantages → MKT dark block
   → products → stats → news → join.
   ========================================================================== */

/* ---------- 1. Hero ---------- */
.home-hero {
  --hero-visual-h: 250px;
  position: relative;
  overflow: hidden;
  background: var(--hero-grad);
  padding-top: 28px;
}
@media (min-width: 576px) {
  .home-hero { --hero-visual-h: 320px; padding-top: 40px; }
}
@media (min-width: 992px) {
  .home-hero { --hero-visual-h: 560px; padding-top: 0; }
}
@media (min-width: 1200px) {
  .home-hero { --hero-visual-h: 590px; }
}

/* Stack all slides in one grid cell: the carousel keeps the height of the
   tallest slide, so the page below never jumps while slides change. */
.home-hero .carousel-inner { display: grid; }
.home-hero .carousel-item {
  display: block;
  grid-area: 1 / 1;
  float: none;
  margin-right: 0;
  visibility: hidden;
}
.home-hero .carousel-item.active,
.home-hero .carousel-item-next,
.home-hero .carousel-item-prev { visibility: visible; }

.hero-copy {
  text-align: center;
  padding-bottom: 52px;                 /* room for the dots on small screens */
}
@media (min-width: 992px) {
  .hero-copy { text-align: left; padding-block: 40px 96px; }
}

.hero-title {
  font-size: clamp(2.25rem, 1.1rem + 3.2vw, 3.5rem);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.02em;
  color: var(--ink);
  margin: 0 0 .75rem;
  text-wrap: balance;
}
.hero-sub {
  font-size: clamp(1.125rem, 1rem + .4vw, 1.25rem);
  font-weight: 500;
  color: var(--text);
  margin: 0 0 1.5rem;
}
.hero-feature {
  display: inline-flex;
  align-items: center;
  gap: .9rem;
  max-width: 480px;
  margin: 0 0 2rem;
  text-align: left;
  font-weight: 500;
  color: var(--text);
  line-height: 1.45;
}
.home-hero .hero-feature-icon {
  background: #fff;
  box-shadow: 0 4px 18px rgba(53, 48, 250, .14);
  font-size: 1.25rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem 1.75rem;
}
@media (min-width: 992px) {
  .hero-actions { justify-content: flex-start; }
}

.hero-call {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  color: var(--ink);
  text-decoration: none;
  text-align: left;
}
.hero-call__icon {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line-strong);
  color: var(--brand);
  font-size: 1.1rem;
  transition: background-color .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.hero-call__text small {
  display: block;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--muted);
  line-height: 1.25;
}
.hero-call__text strong {
  display: block;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
  white-space: nowrap;
}
.hero-call:hover .hero-call__icon {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.hero-call:hover strong { color: var(--brand); }

/* Right side: an indigo arch that the slide image stands on */
.hero-visual {
  position: relative;
  height: var(--hero-visual-h);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.hero-arch {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: min(92%, calc(var(--hero-visual-h) * .84));
  height: calc(var(--hero-visual-h) * .9);
  transform: translateX(-50%);
  border-radius: 999px 999px 0 0;
  /* Light stage: the slide art is full-colour and made for a light ground */
  background: linear-gradient(180deg, #FFFFFF 0%, rgba(255, 255, 255, .92) 55%, rgba(255, 255, 255, .45) 100%);
  box-shadow: 0 30px 80px rgba(53, 48, 250, .10);
}
.hero-arch::before {                      /* thin indigo contour */
  content: "";
  position: absolute;
  inset: -18px -18px 0;
  border: 2px solid rgba(53, 48, 250, .14);
  border-bottom: 0;
  border-radius: inherit;
}
.home-hero .hero-photo {
  position: relative;
  z-index: 1;
  display: block;
  width: auto;
  max-width: 100%;
  max-height: calc(var(--hero-visual-h) * .86);
  object-fit: contain;
  object-position: bottom;
}
.home-hero .hero-photo--art { max-height: 78%; margin-bottom: 6%; }

/* Dots: centred above the image on small screens, under the copy from lg */
.home-hero .hero-dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(var(--hero-visual-h) + 6px);
  z-index: 3;
  margin: 0;
  gap: 0;
  justify-content: center;
}
@media (min-width: 992px) {
  .home-hero .hero-dots {
    right: auto;
    bottom: 44px;
    margin-left: -7px;                  /* align the first visible dot with the text */
    justify-content: flex-start;
  }
}
.home-hero .hero-dots [data-bs-target] {
  box-sizing: content-box;              /* 10px dot, 24px hit area */
  border: 7px solid transparent;
  background-clip: padding-box;
}
.home-hero .hero-dots { align-items: center; }
/* Pause / play for the auto-advancing slides (WCAG 2.2.2) */
.home-hero .hero-pause {
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  margin-left: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--line-field);
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1;
  transition: color .15s var(--ease), border-color .15s var(--ease);
}
.home-hero .hero-pause:hover { color: var(--brand); border-color: var(--brand); }

/* ---------- 2. Statement band ---------- */
.home-band p {
  max-width: 1040px;
  margin: 0 auto;
}

/* ---------- 3. Application + calculator ---------- */
.loan-card,
.loan-flash {
  max-width: 1120px;
  margin-inline: auto;
}
.loan-flash:empty { display: none; }
.loan-flash .alert { margin-bottom: 1.5rem; }

.loan-tabs { margin-bottom: clamp(1.25rem, 1rem + 1vw, 2rem); }
.loan-tabs { flex-wrap: nowrap; }
.loan-tabs .bi { font-size: 1.05rem; }
@media (max-width: 575.98px) {
  /* one row on phones: drop the icons, tighten the padding */
  .loan-tabs .nav-link { padding-inline: .6rem; font-size: .9375rem; }
  .loan-tabs .bi { display: none; }
}

.loan-fields,
.loan-sliders {
  display: grid;
  gap: 1rem;
}
/* Server-side validation errors: red outline on the invalid field (errors only) */
.home-apply .field-card:has([aria-invalid="true"]) { border-color: #dc3545; }
.home-apply .field-card:has([aria-invalid="true"]):focus-within { box-shadow: 0 0 0 4px rgba(220, 53, 69, .2); }
.home-apply .field-card .form-control,
.home-apply .field-card .form-select { font-size: 1.0625rem; }

.slider-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .25rem .75rem;
  margin-bottom: .4rem;
}
.slider-label {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin: 0;
  font-size: .875rem;
  font-weight: 500;
  color: var(--muted);
}
.slider-label .bi { color: var(--brand); font-size: 1.05rem; }
@media (max-width: 575.98px) {
  .slider-head { flex-direction: column; align-items: flex-start; }
}
.home-apply .range-value { font-variant-numeric: tabular-nums; }

@media (min-width: 992px) {
  /* Both columns end on the same line */
  #tab-ariza .loan-sliders { height: 100%; grid-auto-rows: 1fr; }
  #tab-calc .loan-sliders { height: 100%; grid-template-rows: auto 1fr 1fr; }
  .home-apply .slider-card {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
}

.loan-submit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.loan-note {
  display: flex;
  align-items: center;
  gap: .65rem;
  margin: 0;
  max-width: 560px;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--muted);
}
.loan-note .bi { color: var(--brand); font-size: 1.35rem; flex: 0 0 auto; }
.loan-btn { min-width: 260px; }
@media (max-width: 575.98px) {
  .loan-btn { width: 100%; min-width: 0; }
}

/* Calculator result panel */
.calc-result {
  --focus-color: #fff;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 1rem + 1.2vw, 2rem);
  border-radius: var(--r-lg);
  color: #fff;
  background: linear-gradient(150deg, var(--brand) 0%, var(--brand-deep) 58%, #4A15A6 100%);
  box-shadow: 0 18px 40px rgba(53, 48, 250, .22);
}
.calc-result__ghost {
  position: absolute;
  top: -.2em;
  right: -.06em;
  z-index: -1;
  font-size: 220px;
  font-weight: 800;
  line-height: 1;
  color: rgba(255, 255, 255, .08);
  pointer-events: none;
  user-select: none;
}
.calc-result__label {
  font-size: .9375rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .85);
}
.calc-result__value {
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  margin: .25rem 0 1.25rem;
}
.calc-result__rows {
  margin: 0 0 1rem;
  border-top: 1px solid rgba(255, 255, 255, .22);
}
.calc-result__rows > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .22);
}
.calc-result__rows dt { font-weight: 500; color: rgba(255, 255, 255, .85); }
.calc-result__rows dd {
  margin: 0;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.calc-result__note {
  margin: 0 0 1.25rem;
  font-size: .8125rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, .82);
}
.calc-result .btn-light-brand {
  margin-top: auto;
  white-space: normal;
  text-align: center;
}

/* ---------- 4. Advantages ---------- */
.adv-row {
  max-width: 1040px;
  margin-inline: auto;
}
.home-adv .icon-tile { min-height: 164px; }
.home-adv .icon-tile > svg { width: 44px; height: 44px; }
.home-adv .icon-tile > span { font-weight: 600; color: var(--ink); }

/* ---------- 5. MKT today (dark block) ---------- */
.home-mkt { padding-block: clamp(56px, 3rem + 3.5vw, 104px); }
.home-mkt .dark-block-title { margin-bottom: 1.75rem; }
.mkt-list {
  max-width: 560px;
  gap: 1rem;
  font-size: 1.0625rem;
  font-weight: 500;
  color: rgba(255, 255, 255, .9);
}
.mkt-cta { margin-top: 2.25rem; }
.mkt-art {
  display: block;
  width: 100%;
  max-width: 380px;
  height: auto;
  margin-inline: auto;
}
@media (min-width: 768px) {
  .mkt-art { max-width: 520px; }
}
@media (min-width: 992px) {
  .mkt-art { max-width: 560px; margin-right: 0; }
}

/* ---------- 6. Products ---------- */
.products-more {
  text-align: center;
  padding-top: clamp(1.75rem, 1.2rem + 1.4vw, 2.5rem);
}

/* ---------- 7. Stats ---------- */
.stats-row {
  max-width: 1040px;
  margin-inline: auto;
}
.stat-item {
  text-align: center;
  padding: 1.75rem 1.25rem;
}
.stat-item + .stat-item { border-top: 1px solid var(--line); }
@media (min-width: 768px) {
  .stat-item + .stat-item { border-top: 0; border-left: 1px solid var(--line-strong); }
}
.stat-icon {
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  border-radius: var(--r);
  background: var(--brand-soft);
  color: var(--brand);
}
.stat-icon svg { width: 44px; height: 44px; }
.home-stats .stat-value { margin-top: 0; }
.stat-unit {
  margin: .2rem 0 .5rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--muted);
}
.stat-title {
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ink);
}

/* ---------- 8. News ---------- */
.home-news .c-card__title { font-size: 1.125rem; }
.news-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 2.5rem;
}

/* ---------- 9. Join ---------- */
.join-icon {
  display: block;
  width: 88px;
  height: 88px;
  margin: 0 auto 1.5rem;
}
.home-join .section-lead { margin-bottom: 2rem; }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero-call__icon { transition: none; }
}