/* =========================================================
   Loan Types — heading + text/arrows on top, card carousel
   below. Cards line up with the heading on the left and bleed
   off the right edge of the screen.
   ========================================================= */

.cl-loantypes__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 26px; }
.cl-loantypes__headtext { max-width: 760px; }
.cl-loantypes__heading { color: #490B66; margin: 0 0 12px; }
.cl-loantypes__sub { color: var(--cl-text); margin: 0; }

/* White glass "backing" (подложка) wrapping both arrows */
.cl-loantypes__nav {
  display: flex; gap: 10px; flex: 0 0 auto;
  padding: 7px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.7);
  -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3);
}
.cl-loantypes__arrow {
  width: 46px; height: 46px; border-radius: 50%;
  border: 0;
  background: rgba(192, 191, 208, 0.5); /* C0BFD0 @ 50% */
  color: #000;                          /* chevron icon */
  cursor: pointer; display: grid; place-items: center; transition: background 0.2s ease, opacity 0.2s ease;
}
.cl-loantypes__arrow:hover { background: rgba(192, 191, 208, 0.75); }
.cl-loantypes__arrow:disabled { opacity: 0.4; cursor: default; }
.cl-loantypes__arrow svg { width: 20px; height: 20px; }

/* Carousel below the header */
.cl-loantypes__carousel { position: relative; }
.cl-loantypes__track {
  display: flex; gap: 24px;
  /* Starling technique: the track spans from the content's left edge to the
     right edge of the screen — calc(50vw + 50%) — while .cl-container makes
     50% == half the content width. overflow:hidden clips the bleed AND keeps
     the track programmatically scrollable, so the prev/next arrows work.
     Vertical padding leaves room for the card shadow (which hidden would clip). */
  width: calc(50vw + 50%);
  overflow: hidden;
  scroll-behavior: smooth;
  padding: 6px 0 40px 0;
  scrollbar-width: none; cursor: grab;
}
.cl-loantypes__track::-webkit-scrollbar { display: none; }
/* Trailing space so the last card can scroll all the way to the left edge
   (empty room appears on its right, Starling-style). */
.cl-loantypes__track::after { content: ""; flex: 0 0 100%; }
.cl-loantypes__track.is-dragging { scroll-behavior: auto; cursor: grabbing; }

.cl-loantype {
  flex: 0 0 clamp(300px, 40%, 420px);
  box-sizing: border-box;
  background: #fff; border: 1px solid #ECECF4; border-radius: 22px; overflow: hidden;
  box-shadow: 0 14px 40px rgba(22, 4, 66, 0.06);
  display: flex; flex-direction: column;
}
.cl-loantype__media {
  background: #170442;
  aspect-ratio: 30 / 10;
  display: grid;
  place-items: center;
  padding: 24px;
}
.cl-loantype__img { max-width: 38%; max-height: 100%; object-fit: contain; }
.cl-loantype__media .cl-icon-chip { background: transparent !important; box-shadow: none !important; color: #fff !important; width: 72px; height: 72px; border-radius: 0; }
.cl-loantype__media .cl-icon { width: 56px; height: 56px; }
.cl-loantype__body { padding: 22px 26px 28px; display: flex; flex-direction: column; gap: 12px; }
.cl-loantype__title { margin: 0; text-align: center; font-size: var(--fs-h3); font-weight: 700; color: var(--cl-dark); }
.cl-loantype__desc { margin: 0; color: var(--cl-text); }
.cl-loantype__link { font-weight: 600; color: var(--cl-gold); text-decoration: none; }
.cl-loantype__link:hover { text-decoration: underline; }

/* ---------- Grid mode (scroll disabled) — DESKTOP ONLY ---------- */
/* The cards fill the container in rows instead of sliding. "Auto" fits as many
   as comfortably fit (2–3 on a normal container); 2 / 3 force that many.
   On mobile the slider is always kept, so these rules stay above 781px. */
@media (min-width: 782px) {
  .cl-loantypes.is-grid .cl-loantypes__nav { display: none; }
  .cl-loantypes.is-grid .cl-loantypes__carousel { overflow: visible; }
  .cl-loantypes.is-grid .cl-loantypes__track {
    display: grid;
    gap: 24px;
    width: 100%;
    overflow: visible;
    padding: 6px 0 40px;
    cursor: default;
  }
  .cl-loantypes.is-grid .cl-loantypes__track::after { display: none; }
  .cl-loantypes.is-grid.is-cols-auto .cl-loantypes__track {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
  }
  .cl-loantypes.is-grid.is-cols-2 .cl-loantypes__track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cl-loantypes.is-grid.is-cols-3 .cl-loantypes__track { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cl-loantypes.is-grid .cl-loantype { flex: none; }
}

@media (max-width: 781px) {
  .cl-loantypes__head { flex-direction: column; }

  /* No arrows on touch — the track is swiped natively instead. */
  .cl-loantypes__nav { display: none; }

  /* Native swipe: a normal horizontal scroller that bleeds to both edges. */
  .cl-loantypes__track {
    width: auto;
    margin-inline: calc(-1 * var(--cl-gutter));
    padding: 6px var(--cl-gutter) 28px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .cl-loantypes__track::-webkit-scrollbar { display: none; }

  .cl-loantype {
    flex-basis: 84vw;
    scroll-snap-align: center;
  }

  /* The desktop bleed spacer would leave a blank screen after the last card. */
  .cl-loantypes__track::after { display: none; }
}

/* editor */
.editor-styles-wrapper .cl-loantypes__track { width: auto; overflow-x: auto; }
.editor-styles-wrapper .cl-loantypes__track > .block-editor-block-list__block { flex: 0 0 clamp(300px, 30%, 380px); }

/* Force the section to the full viewport width. This holds even when the block
   is .alignfull inside a constrained wrapper (where its computed width would
   otherwise stay <= the content size and break the card/heading alignment).
   WordPress's own .alignfull rules use :where() (zero specificity), so this
   single class overrides them cleanly. */
.cl-loantypes {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: 0;
  padding-right: 0;
}

/* One or two cards line up side by side — but only where there is room.
   On a phone they stay a swipeable carousel like any other count. */
@media (min-width: 782px) {
  /* ---------- One or two cards: centred, no arrows ---------- */
  .cl-loantypes.is-compact .cl-loantypes__head {
    justify-content: center;
    text-align: center;
  }
  .cl-loantypes.is-compact .cl-loantypes__headtext {
    max-width: 585px;
    margin-inline: auto;
  }
  .cl-loantypes.is-compact .cl-loantypes__nav { display: none; }

  .cl-loantypes.is-compact .cl-loantypes__carousel {
    width: 100%;
    max-width: var(--cl-container);
    margin-inline: auto;
    padding-inline: var(--cl-gutter);
    box-sizing: border-box;
  }
  .cl-loantypes.is-compact .cl-loantypes__track {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    overflow: visible;
  }
  .cl-loantypes.is-compact .cl-loantypes__track::after { display: none; }
  /* One or two cards share the container width between them. */
  .cl-loantypes.is-compact .cl-loantype { flex: 1 1 0; }
}

/* ---------- Card body ---------- */
.cl-loantype__body > * { margin-block: 0; }
.cl-loantype__body > * + * { margin-top: 12px; }
/* Reset first, then space the paragraphs — a rule naming the tag would
   otherwise win over the sibling selector and flatten the gaps. */
.cl-loantype__content > * { margin-block: 0; color: var(--cl-text); }
.cl-loantype__content > * + * { margin-top: 14px; }
.cl-loantype__footnote {
  margin: 0;
  font-size: var(--fs-xsmall);
  color: var(--cl-muted);
}