/* =========================
   Local fonts (Inter)
   ========================= */
   @font-face {
    font-family: 'inter-reg';
    src: url('../fonts/Inter_24pt-Regular.ttf') format('truetype');
    font-display: swap;
  }
  @font-face {
    font-family: 'inter-medium';
    src: url('../fonts/Inter_24pt-Medium.ttf') format('truetype');
    font-display: swap;
  }
  @font-face {
    font-family: 'inter-semi-bold';
    src: url('../fonts/Inter_24pt-SemiBold.ttf') format('truetype');
    font-display: swap;
  }
  @font-face {
    font-family: 'inter-bold';
    src: url('../fonts/Inter_24pt-Bold.ttf') format('truetype');
    font-display: swap;
  }
  
  /* =========================
     Trade Services Carousel
     ========================= */
  .tsc {
    --gap: 35px;                  /* keep this in sync with .tsc-track gap */
    --radius: 14px;
    --peek: 56px;                 /* JS sets from data-peek */
    --visible: 3;                 /* JS sets from data-visible */
    --overlay: rgba(15,23,43,0.55);
    --hover-tint: rgba(211,137,69,0.92);
    position: relative;
  
    /* set base font for the component */
    font-family: 'inter-reg', Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    font-weight: 400;
  }
  
  /* Arrows */
  .tsc-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 92px;
    height: 92px;
    border-radius: 999px;
    border: none;
    background: #D38945;
    box-shadow: 0 8px 22px rgba(0,0,0,.15);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
  }
  .tsc-prev { left: -8px; }
  .tsc-next { right: 8px; }
  .tsc-arrow-ico { font-size: 0px; line-height: 1; }
  
  /* Hideable prev state (JS toggles .is-hidden when index = 0) */
  .tsc-arrow.is-hidden{
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  
  /* Custom arrow graphics */
  .tsc-prev:after {
    content: '';
    position: absolute;
    width: 17px;
    height: 34px;
    background: url('/wp-content/uploads/2025/10/carousel-arrow-left.png') no-repeat center / contain;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .tsc-next:after {
    content: '';
    position: absolute;
    width: 17px;
    height: 34px;
    background: url('/wp-content/uploads/2025/10/carousel-arrow-right.png') no-repeat center / contain;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  
/* Viewport & Track */
.tsc-viewport {
  position: relative;                 /* anchor overlay */
  overflow: hidden;
  padding-right: var(--peek);
  margin-right: calc(var(--peek) * -1);
}

.tsc-track {
  display: flex;
  gap: var(--gap);
  transition: transform .4s ease;
  will-change: transform;
}
  
  /* Right-edge blur/fade to hint more content */
  .tsc-viewport::after{
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: calc(var(--peek) + 95px);    /* a bit wider for a softer look */
    z-index: 2;                         /* above cards, below arrows */
    pointer-events: none;
    max-height: 590px;
    /* pure white wash that fades left */
    background: linear-gradient(
      to left,
      rgba(255,255,255,0.95) 0%,
      rgba(255,255,255,0.88) 30%,
      rgba(255,255,255,0.70) 55%,
      rgba(255,255,255,0.00) 95%
    );

  /* optional softening — remove if you don't want it */
  -webkit-backdrop-filter: blur(0px);
  backdrop-filter: blur(0px);
}

  
  /* Card */
  .tsc-card {
    flex: 0 0 calc((100% - (var(--gap) * (var(--visible) - 1))) / var(--visible));
    border-radius: var(--radius);
    overflow: hidden;
    background: #0f172b;
    position: relative;
    min-height: 590px;
    max-width: 490px;
  }
  
  /* Media + overlays */
  .tsc-media { position: absolute; inset: 0; }
  .tsc-media img {
    width: 100%; height: 100%; object-fit: cover;
    filter: grayscale(100%);
    transition: filter .3s ease, transform .5s ease;
  }
  
  /* base darkening gradient (always on) */
  .tsc-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.25) 0%, var(--overlay) 100%);
    pointer-events: none;
  }
  
  /* expanding orange tint from bottom-center */
  .tsc-media::after{
    content:"";
    position:absolute; inset:0;
    background: var(--hover-tint);
    clip-path: circle(0% at 50% 85%);   /* origin near bottom-center */
    opacity: 0.95;
    transition: clip-path .55s ease, opacity .35s ease;
    pointer-events:none;
  }
  .tsc-card:hover .tsc-media::after{
    clip-path: circle(150% at 50% 85%);
    opacity: 1;
  }
  
  /* image hover */
  .tsc-card:hover .tsc-media img { filter: grayscale(0%); transform: scale(1.02); }
  
  /* Content */
  .tsc-content {
    position: absolute; inset: 0;
    display: flex; flex-direction: column; justify-content: flex-end;
    padding: 28px;
    color: #fff;
  }
  
  /* Title: Inter Bold + smooth lift */
  .tsc-title h3{
    margin: 0 0 14px;
    color: #fff;
    font-family: 'inter-bold', Inter, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    font-size: 30px;
    line-height: 1.2;
    font-weight: 700;
    transition: transform .35s ease;
  }
  .tsc-card:hover .tsc-title h3{ transform: translateY(-6px); }
  
  /* CTA: smooth reveal without jump */
  .tsc-btn {
    display: block;
    background: #0f172b;
    color: #fff;
    border-radius: 10px;
    font-size: 18px;
    text-decoration: none;
    width: fit-content;
    max-height: 0;               /* collapsed */
    padding: 0 16px;             /* keep width stable while collapsed */
    opacity: 0;
    overflow: hidden;
    transform: translateY(6px);
    transition:
      max-height .35s ease,
      padding .35s ease,
      opacity .30s ease,
      transform .35s ease,
      background .2s ease;
  }
  .tsc-card:hover .tsc-btn {
    max-height: 56px;            /* target height */
    padding: 12px 16px;          /* animates in smoothly */
    opacity: 1;
    transform: translateY(0);
    margin-top: 30px;
  }
  .tsc-btn:hover { background: #111a36; }

  /* Static mode (when items <= visible) */
.tsc.tsc--static .tsc-viewport::after { display: none; }
.tsc.tsc--static .tsc-arrow { display: none; }
/* When there are exactly 3 cards, space them across the row */
.tsc.tsc--exact-3 .tsc-track {
  justify-content: space-between;
}


/* (optional) center the last row nicely if it ever wraps in future layouts */
/* .tsc.tsc--static .tsc-track { justify-content: space-between; } */

  
/* Responsive */
@media (max-width: 1024px) {
  .tsc { --visible: 3; --peek: 56px; } /* desktop tablet-landscape stays 3 */
}

/* ≤770px: show 2 cards */
@media (max-width: 770px) {
  .tsc { --visible: 2; --peek: 40px; }
  .tsc-prev { left: -6px; }
  .tsc-next { right: 6px; }
}

/* ≤500px: show 1 card */
@media (max-width: 500px) {
  .tsc { --visible: 1; --peek: 24px; }
  .tsc-card { min-height: 320px; max-width: none; }
  .tsc-arrow { width: 56px; height: 56px; } /* optional: smaller arrows on phones */
}