/* GC Split Carousel — content column beside a smooth image carousel. */

.gc-sc {
  --gc-sc-bg: #ffffff;
  --gc-sc-eyebrow: #3D82B3;
  --gc-sc-heading: #14212B;
  --gc-sc-heading2: #5BA7DB;
  --gc-sc-body: #5A6B75;
  --gc-sc-item-lead: #14212B;
  --gc-sc-item-text: #5A6B75;
  --gc-sc-marker: #5BA7DB;
  --gc-sc-media-bg: #EAF3FA;
  --gc-sc-arrow-bg: rgba(255, 255, 255, 0.82);
  --gc-sc-arrow: #14212B;
  --gc-sc-arrow-hbg: #5BA7DB;
  --gc-sc-arrow-h: #ffffff;
  --gc-sc-dot: #5BA7DB;
  --gc-sc-bg2: #EAF3FA;
  --gc-sc-bg-angle: 135deg;
  --gc-sc-gap: 56px;
  --gc-sc-ratio: 0.95;
  --gc-sc-radius: 18px;
  background: var(--gc-sc-bg);
  box-sizing: border-box;
}
.gc-sc--full { width: 100vw; margin-left: calc(50% - 50vw); max-width: 100vw; }
/* Content full width: remove the inner grid cap (the actual gutter source). */
.gc-sc--full-content .gc-sc-grid { max-width: none; }

/* Background variants. */
.gc-sc--bg-none { background: transparent; }
.gc-sc--bg-gradient {
  background: linear-gradient(var(--gc-sc-bg-angle), var(--gc-sc-bg), var(--gc-sc-bg2));
}
.gc-sc--bg-fade {
  background: linear-gradient(to bottom, var(--gc-sc-bg) 0%, var(--gc-sc-bg2) 100%);
}

.gc-sc *,
.gc-sc *::before,
.gc-sc *::after { box-sizing: border-box; }

.gc-sc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gc-sc-gap);
  align-items: center;
  max-width: var(--gc-container, 1312px);
  margin: 0 auto;
}

/* Media placement via source order + explicit ordering. */
.gc-sc--media-right .gc-sc-content { order: 1; }
.gc-sc--media-right .gc-sc-media   { order: 2; }
.gc-sc--media-left  .gc-sc-content { order: 2; }
.gc-sc--media-left  .gc-sc-media   { order: 1; }

/* --- Content --- */
.gc-sc-eyebrow {
  display: inline-block;
  font-family: var(--gc-font-body, 'Inter', system-ui, sans-serif);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gc-sc-eyebrow);
  margin-bottom: 16px;
}

.gc-sc-title {
  font-family: var(--gc-font-heading, 'Manrope', system-ui, sans-serif);
  font-weight: 800;
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  line-height: 1.1;
  margin: 0 0 22px;
  letter-spacing: -0.01em;
}

.gc-sc-title-1,
.gc-sc-title-2 { display: block; }
.gc-sc-title-1 { color: var(--gc-sc-heading); }
.gc-sc-title-2 { color: var(--gc-sc-heading2); }

.gc-sc-body {
  font-family: var(--gc-font-body, 'Inter', system-ui, sans-serif);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--gc-sc-body);
  margin: 0 0 28px;
}

.gc-sc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.gc-sc-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  font-family: var(--gc-font-body, 'Inter', system-ui, sans-serif);
  font-size: 0.98rem;
  line-height: 1.55;
  color: var(--gc-sc-item-text);
}

.gc-sc-marker {
  color: var(--gc-sc-marker);
  font-size: 0.72rem;
  line-height: 1.9;
  transform: translateY(1px);
  flex: none;
}

.gc-sc-item-lead {
  color: var(--gc-sc-item-lead);
  font-weight: 700;
  font-style: italic;
}

.gc-sc-item-body { display: block; }

/* --- Media / carousel --- */
.gc-sc-media {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.gc-sc-viewport {
  position: relative;
  overflow: hidden;
  border-radius: var(--gc-sc-radius);
  background: var(--gc-sc-media-bg);
  aspect-ratio: var(--gc-sc-ratio);
  box-shadow: var(--gc-shadow-card, 0 18px 48px rgba(20, 33, 43, 0.12));
}

.gc-sc-track {
  display: flex;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.gc-sc-slide {
  flex: 0 0 100%;
  min-width: 0;
  height: 100%;
}

.gc-sc-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* --- Arrows --- */
.gc-sc-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: none;
  background: var(--gc-sc-arrow-bg);
  color: var(--gc-sc-arrow);
  display: grid;
  place-items: center;
  cursor: pointer;
  z-index: 2;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 6px 18px rgba(20, 33, 43, 0.18);
  transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease;
}

.gc-sc-arrow--prev { left: 16px; }
.gc-sc-arrow--next { right: 16px; }

.gc-sc-arrow:hover {
  background: var(--gc-sc-arrow-hbg);
  color: var(--gc-sc-arrow-h);
}
.gc-sc-arrow--prev:hover { transform: translateY(-50%) translateX(-2px); }
.gc-sc-arrow--next:hover { transform: translateY(-50%) translateX(2px); }

.gc-sc-arrow:focus-visible {
  outline: 2px solid var(--gc-sc-arrow-hbg);
  outline-offset: 3px;
}

.gc-sc-arrow svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.gc-sc-arrow--next svg { transform: scaleX(-1); }

/* --- Dots --- */
.gc-sc-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
}

.gc-sc-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: color-mix(in srgb, var(--gc-sc-dot) 32%, transparent);
  cursor: pointer;
  transition: background 0.2s ease, width 0.2s ease;
}

.gc-sc-dot[aria-current="true"] {
  background: var(--gc-sc-dot);
  width: 24px;
  border-radius: 4px;
}

.gc-sc-single .gc-sc-arrow,
.gc-sc-single .gc-sc-dots { display: none; }

/* --- Responsive --- */
@media (max-width: 860px) {
  .gc-sc-grid { grid-template-columns: 1fr; gap: 36px; }
  .gc-sc--media-left .gc-sc-content,
  .gc-sc--media-right .gc-sc-content { order: 1; }
  .gc-sc--media-left .gc-sc-media,
  .gc-sc--media-right .gc-sc-media { order: 2; }
}

@media (max-width: 640px) {
  .gc-sc { --gc-sc-gap: 28px; --gc-sc-ratio: 1.6; --gc-sc-radius: 14px; }
  .gc-sc-grid { gap: var(--gc-sc-gap); }
  .gc-sc-eyebrow { font-size: 11px; letter-spacing: .04em; margin-bottom: 10px; }
  .gc-sc-title { font-size: clamp(1.45rem, 5.4vw, 1.6rem); margin-bottom: 14px; }
  .gc-sc-body { font-size: 14.5px; line-height: 1.55; margin-bottom: 18px; }
  .gc-sc-list { gap: 12px; }
  .gc-sc-item { gap: 10px; font-size: 14.5px; line-height: 1.5; }
  .gc-sc-media { gap: 12px; }
  .gc-sc-arrow { display: none; }
  .gc-sc-dot { position: relative; }
  .gc-sc-dot::after { content: ""; position: absolute; inset: -16px -4px; }
}

@media (max-width: 480px) {
  .gc-sc { --gc-sc-gap: 22px; --gc-sc-ratio: 1.7; }
  .gc-sc-title { font-size: 1.45rem; }
}

@media (prefers-reduced-motion: reduce) {
  .gc-sc-track { transition: none; }
}