/* ===== Two-Column Card Carousels (vanilla, two sliders) ===== */
/* All comments in English, scoped to this module root */

.two-column-two-cards {
  background: var(--twocol-bg);
  padding-block: clamp(40px, 6vw, 80px);
  padding-inline: clamp(24px, 6vw, 80px);

  /* Layout/size tokens */
  --col-max: 560px;        /* max width per column carousel */
  --card-max: 500px;       /* max width for the card inside a slide */
  --nav-icon-size: 20px;   /* > and < icon size for arrow buttons */
}

/* Inner wrapper */
.two-column-two-cards .twocol__inner {
  max-width: 1200px;
  margin-inline: auto;
  display: grid;
  row-gap: clamp(16px, 3vw, 32px);
}

/* Top content */
.two-column-two-cards .twocol__top { text-align: center; }
.two-column-two-cards .twocol__title { margin: 0; line-height: 1.2; }
.two-column-two-cards .twocol__subtitle {
  margin-top: .5rem;
  font-size: 18px;
  line-height: 1.6;
  font-weight: 400;
  color: #333;
}

/* Two columns (stack on mobile) */
.two-column-two-cards .twocol__cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--twocol-gap, 32px);
  align-items: stretch;
}
@media (min-width: 768px) {
  .two-column-two-cards .twocol__cols { grid-template-columns: 1fr 1fr; }
}

/* Column titles */
.two-column-two-cards .col__title {
  margin: 0 0 16px 0;
  line-height: 1.3;
  color: var(--card-title);
  text-align: center;
  font-size: 24px !important;
}

/* === Carousel container (one per column) === */
.two-column-two-cards .carousel {
  position: relative;
  width: 100%;
  max-width: var(--col-max);
  margin: 0 auto;                /* center carousel in its column */
  /* Keep horizontal overflow hidden but allow vertical to show box-shadows */
  overflow-x: hidden;
  overflow-y: visible;
  /* Pad vertically so shadows never look clipped */
  padding-block: 12px;
  outline: none;
  /* Touch: allow vertical page scroll; we handle horizontal swipes */
  touch-action: pan-y;
}

/* Disable unwanted text/image selection while dragging */
.two-column-two-cards .carousel,
.two-column-two-cards .carousel * {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
.two-column-two-cards .carousel img {
  -webkit-user-drag: none;
}

/* Horizontal track */
.two-column-two-cards .carousel-track {
  display: flex;
  align-items: stretch;
  will-change: transform;
  transform: translateX(0px);
  transition: transform 400ms ease;
}

/* One-up layout (always one card visible) */
.two-column-two-cards .carousel-slide {
  flex: 0 0 100%;
  max-width: 100%;
  display: flex;
  align-items: stretch;
  justify-content: center;
}

/* Card */
.two-column-two-cards .card {
  display: flex;
  flex-direction: column;
  justify-content: center;     /* vertical centering */
  align-items: center;
  width: 100%;
  max-width: var(--card-max);
  padding: 1.75em;
  border-radius: 10px;
  text-align: center;
  box-sizing: border-box;
  background: var(--card-bg);
  color: #47525A;
  border: 1px solid var(--card-border);
  box-shadow: 0 4px 12px rgba(16, 24, 40, 0.12);
  margin-inline: auto;
}

/* Card media & text */
.two-column-two-cards .card__image {
  width: 120px; height: 120px; object-fit: contain;
  display: block; margin: 0 auto 14px;
}
.two-column-two-cards .card__title {
  font-size: 20px; color: var(--card-title);
  margin: 8px 0 6px; line-height: 1.3;
}
.two-column-two-cards .card__text { font-size: 18px; line-height: 1.6; }

/* Clean rich text spacing */
.two-column-two-cards .card__text > *:first-child { margin-top: 0; }
.two-column-two-cards .card__text > *:last-child  { margin-bottom: 0; }

/* === Navigation arrows (circular buttons) === */
.two-column-two-cards .carousel-next,
.two-column-two-cards .carousel-prev {
  position: absolute;
  top: 50%; transform: translateY(-50%);
  z-index: 50;                    /* keep on top of card content */
  color: var(--arrow-color);
  background-color: var(--arrow-bg);
  border: 1px solid rgba(16, 24, 40, 0.08);
  border-radius: 50%;
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 16px rgba(16, 24, 40, 0.12);
  transition: box-shadow .18s ease, background-color .18s ease, transform .18s ease;
  cursor: pointer;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent; /* better touch feedback */
}
.two-column-two-cards .carousel-prev { left: 8px; }
.two-column-two-cards .carousel-next { right: 8px; }

/* Desktop/trackpad: real hover only */
@media (hover: hover) and (pointer: fine){
  .two-column-two-cards .carousel-next:hover,
  .two-column-two-cards .carousel-prev:hover{
    background-color: #f6f9fc;
    box-shadow: 0 10px 22px rgba(16, 24, 40, 0.16);
  }
}

/* Touch devices: neutralize sticky hover and use :active */
@media (hover: none){
  .two-column-two-cards .carousel-next:hover,
  .two-column-two-cards .carousel-prev:hover{
    /* neutralize hover visual on touch */
    background-color: var(--arrow-bg);
    box-shadow: 0 6px 16px rgba(16, 24, 40, 0.12);
  }
  .two-column-two-cards .carousel-next:active,
  .two-column-two-cards .carousel-prev:active{
    transform: translateY(-50%) scale(0.96);
    box-shadow: 0 8px 18px rgba(16, 24, 40, 0.14);
  }
}

/* Keyboard accessibility */
.two-column-two-cards .carousel-next:focus-visible,
.two-column-two-cards .carousel-prev:focus-visible{
  outline: 2px solid var(--arrow-color);
  outline-offset: 2px;
}

/* Replace chevron borders with text icons ">" and "<" */
.two-column-two-cards .carousel-prev::after,
.two-column-two-cards .carousel-next::after {
  /* Reset any previous chevron border styles */
  border: 0 !important;
  width: auto; height: auto;
  transform: none !important;

  /* Text-based icon */
  content: '';
  font-size: var(--nav-icon-size);
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  font-family: inherit;
}
.two-column-two-cards .carousel-prev::after { content: '<'; }
.two-column-two-cards .carousel-next::after { content: '>'; }

/* RTL support: flip icons when direction is rtl */
[dir="rtl"] .two-column-two-cards .carousel-prev::after { content: '>'; }
[dir="rtl"] .two-column-two-cards .carousel-next::after { content: '<'; }

/* === Pagination dots === */
.two-column-two-cards .carousel-dots {
  position: relative;
  margin-top: 14px;
  text-align: center;
}
.two-column-two-cards .carousel-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #d7dde5;
  display: inline-block;
  margin: 0 4px;
  border: 0;
  cursor: pointer;
}
.two-column-two-cards .carousel-dot.is-active { background: var(--arrow-color); }

/* Auto-hide controls when 0/1 slide (JS toggles .no-nav) */
.two-column-two-cards .no-nav .carousel-next,
.two-column-two-cards .no-nav .carousel-prev,
.two-column-two-cards .no-nav .carousel-dots { display: none !important; }

/* Accessibility focus for the carousel region */
.two-column-two-cards .carousel:focus-visible {
  outline: 2px solid var(--arrow-color);
  outline-offset: 4px;
}

/* 1) Hide pagination dots entirely */
.two-column-two-cards .carousel-dots { display: none !important; }

/* 2) No visible scrollbars, keep vertical room for shadows */
.two-column-two-cards .carousel{
  overflow-x: hidden;
  overflow-y: visible;
  padding-block: var(--shadow-pad, 24px);        /* extra vertical room so shadows aren't clipped */
}

/* >>> Adjustable tokens <<< */
.two-column-two-cards {
  --card-min-h: 240px;   /* min height for each card */
}
.two-column-two-cards .carousel{
  --shadow-pad: 28px;    /* vertical air so shadow never clips */
}

/* Replace container parts (no scrollbars) */
.two-column-two-cards .carousel{
  position: relative;
  width: 100%;
  max-width: var(--col-max);
  margin: 0 auto;
  overflow: hidden;                /* hide scrollbars */
  padding-block: var(--shadow-pad);/* enough room for shadow */
  outline: none;
  touch-action: pan-y;
}

/* Cards: apply min height */
.two-column-two-cards .card {
  min-height: var(--card-min-h);
}

/* --- Stop horizontal overflow for this module only --- */
.two-column-two-cards{
  position: relative;
  overflow-x: hidden;              /* broad fallback */
}
@supports (overflow: clip){
  .two-column-two-cards{ overflow-x: clip; }  /* avoid scroll but still paint edges */
}

/* Allow grid/flex children to actually shrink within container */
.two-column-two-cards .twocol__inner,
.two-column-two-cards .twocol__cols,
.two-column-two-cards .twocol__col,
.two-column-two-cards .carousel,
.two-column-two-cards .carousel-track,
.two-column-two-cards .carousel-slide{
  min-width: 0;                    /* key to avoid extra width */
}

/* Carousel should not exceed its column width */
.two-column-two-cards .carousel{
  width: 100%;
  max-width: var(--col-max);
  margin-inline: auto;
  overflow-x: hidden;
  overflow-y: visible;             /* keep vertical shadows visible */
  padding-block: var(--shadow-pad, 28px);
}

/* Prevent giant gaps on phones if theme pads too much */
@media (max-width: 767.98px){
  .two-column-two-cards .twocol__cols{ gap: min(var(--twocol-gap, 32px), 24px); }
}

.two-column-two-cards .card,
.two-column-two-cards .card__text{
  overflow: visible !important;   /* not scroll containers */
  max-height: none;
  scrollbar-width: none;          /* Firefox: hide bar if any */
}
.two-column-two-cards .card::-webkit-scrollbar,
.two-column-two-cards .card__text::-webkit-scrollbar{
  display: none;                  /* WebKit: hide bar if any */
}

/* --- Mobile: add lateral safe area so arrows never cover text --- */
.two-column-two-cards{
  --nav-btn: 44px;   /* arrow button size (width/height) */
  --nav-gap: 8px;    /* distance from edge (matches .carousel-prev/next) */
}

/* Only on phones */
@media (max-width: 767.98px){
  /* Safe padding equals arrow width + edge gap (capped on very small screens) */
  .two-column-two-cards{
    --arrow-safe: clamp(16px, 7vw, calc(var(--nav-btn) + var(--nav-gap)));
  }

  /* Add extra padding inside the card so text never sits under the arrows */
  .two-column-two-cards .card{
    padding-left:  calc(1.75em + var(--arrow-safe));
    padding-right: calc(1.75em + var(--arrow-safe));
  }

  /* Slightly tuck arrows closer to the edges for more readable area */
  .two-column-two-cards .carousel-prev{ left: 4px; }
  .two-column-two-cards .carousel-next{ right: 4px; }
}
/* Tablet too: keep text clear of arrows */
@media (min-width: 768px) and (max-width: 1023.98px){
  .two-column-two-cards{
    /* arrow button + edge gap; un poco menor que en phone */
    --arrow-safe-tab: clamp(12px, 3.5vw, calc(var(--nav-btn) + var(--nav-gap)));
  }
  .two-column-two-cards .card{
    padding-left:  calc(1.75em + var(--arrow-safe-tab));
    padding-right: calc(1.75em + var(--arrow-safe-tab));
  }
  .two-column-two-cards .carousel-prev{ left: 6px; }
  .two-column-two-cards .carousel-next{ right: 6px; }
}
@media (min-width: 768px){
  .two-column-two-cards{
    /* ~2.5 líneas a 24px/1.3; súbelo si tus títulos llegan a 3 líneas */
    --coltitle-min: clamp(64px, 6vw, 92px);
  }
  .two-column-two-cards .col__title{
/*     min-height: var(--coltitle-min); */
    display: flex;                 /* keep text vertically centered within that block */
    justify-content: center;
    text-align: center;
  }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  .two-column-two-cards .col__title{
    min-height: var(--coltitle-min);
  }
}
/* === Make vanilla .carousel-prev/.carousel-next look like Swiper arrows === */

/* 1) Botón contenedor igual que Swiper */
.two-column-two-cards .carousel-next,
.two-column-two-cards .carousel-prev{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;

  color: #FFFFFF;                          /* icon color */
  background-color: #182D55 !important;    /* circle bg */

  border-radius: 50%;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;

  box-shadow: 0 2px 8px rgba(0,0,0,.1);
  transition: all .3s ease;
  cursor: pointer;

  border: none;
}

/* offsets iguales a Swiper */
.two-column-two-cards .carousel-prev{ left: 10px; }
.two-column-two-cards .carousel-next{ right: 10px; }

.two-column-two-cards .carousel-prev::after,
.two-column-two-cards .carousel-next::after{
  /* Sobre-escribe los '<' y '>' anteriores */
  content: '';
  font-size: 20px;                 
  line-height: 1;
}

.two-column-two-cards .carousel-prev::after{
  content: 'prev';
  font-family: swiper-icons, sans-serif;
}
.two-column-two-cards .carousel-next::after{
  content: 'next';
  font-family: swiper-icons, sans-serif;
}

@media (hover: hover) and (pointer: fine){
  .two-column-two-cards .carousel-prev:hover,
  .two-column-two-cards .carousel-next:hover{
    background-color: #0f2044 !important; 
    box-shadow: 0 10px 22px rgba(16,24,40,.16);
  }
}
.two-column-two-cards .carousel-prev:focus-visible,
.two-column-two-cards .carousel-next:focus-visible{
  outline: 2px solid #FFFFFF;
  outline-offset: 2px;
}

/* 4) RTL offsets (opcional, por si usas [dir=rtl]) */
[dir="rtl"] .two-column-two-cards .carousel-prev{ right: 10px; left: auto; }
[dir="rtl"] .two-column-two-cards .carousel-next{ left: 10px; right: auto; }

@media (hover: hover) and (pointer: fine){
  .two-column-two-cards .carousel-prev:hover,
  .two-column-two-cards .carousel-next:hover{
    background-color: #f6f9fc !important;
    box-shadow: 0 10px 22px rgba(16, 24, 40, 0.16) !important;
    color: #182D55 !important;
  }
}