/* about-us-carousel.css
   Full-card hover swap (dark front -> red back), no 3D transforms,
   safe for horizontal-scroll JS. Mobile touch optional panel-open support.
*/

/* ---- VARIABLES (mobile-first) ---- */
:root {
  --card-w: 286.8478px;
  --card-h: 174px;
  --card-radius: 0;
  --card-padding: 22px;
  --card-bg: #2b2b2b;
  /* dark front */
  --card-accent: #E5383B;
  /* red back */
  --card-title-fs: 1.25rem;
  --card-svg-w: 35.25px;
  --card-svg-top: 16.4px;
  --card-svg-right: 18px;
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  :root {
    --card-w: 311.5761px;
    --card-h: 189px;
    --card-title-fs: 1.35rem;
    --card-svg-w: 38.35px;
    --card-svg-top: 17.8px;
    --card-svg-right: 20px;
  }
}

/* small/medium laptop */
@media (min-width: 1024px) and (max-width: 1439px) {
  :root {
    --card-w: 340px;
    --card-h: 206px;
    --card-title-fs: 1.45rem;
    --card-svg-w: 42px;
    --card-svg-top: 18.5px;
    --card-svg-right: 22px;
  }
}

/* standard laptop 1440-1599 */
@media (min-width: 1440px) and (max-width: 1599px) {
  :root {
    --card-w: 410px;
    --card-h: 250px;
    --card-title-fs: 1.65rem;
    --card-svg-w: 50px;
    --card-svg-top: 22px;
    --card-svg-right: 26px;
  }
}

/* large desktop 1600-1919 */
@media (min-width: 1600px) and (max-width: 1919px) {
  :root {
    --card-w: 440px;
    --card-h: 270px;
    --card-title-fs: 1.7rem;
    --card-svg-w: 54px;
    --card-svg-top: 24px;
    --card-svg-right: 28px;
  }
}

/* desktop 1920-2499 (exact numbers provided) */
@media (min-width: 1920px) and (max-width: 2499px) {
  :root {
    --card-w: 455px;
    --card-h: 276px;
    --card-title-fs: 1.8rem;
    --card-svg-w: 55.915157382613444px;
    --card-svg-top: 26px;
    --card-svg-right: 30px;
  }
}

/* xl 2500+ */
@media (min-width: 2500px) {
  :root {
    --card-w: 520px;
    --card-h: 320px;
    --card-title-fs: 2rem;
    --card-svg-w: 68px;
    --card-svg-top: 30px;
    --card-svg-right: 36px;
  }
}

/* -----------------------------------
   Carousel track (keeps compatibility with horizontal-scroll plugin)
   ----------------------------------- */
#products_horiz_container_outer,
#products_horiz_container_inner {
  position: relative;
  overflow: hidden;
  width: 100%;
}

#products_horiz_container {
  display: flex;
  gap: clamp(18px, 2.4vw, 36px);
  padding: 0 !important;
  margin: 0;
  list-style: none;
  align-items: center;
  /* vertical centering of cards */
  /* IMPORTANT: no transform on this element; plugin manages transforms */
}

/* slide item (plugin expects inline flex items) */
#products_horiz_container li,
.carousel__slide,
.service-slide {
  flex: 0 0 auto;
  display: inline-block;
  vertical-align: top;
}

/* ---- CARD LAYOUT ---- */
.service-card {
  width: var(--card-w);
  height: var(--card-h);
  border-radius: var(--card-radius);
  position: relative;
  overflow: hidden;
  /* full-cover swap */
  box-shadow: 0 8px 22px rgba(10, 10, 10, 0.08);
  background: transparent;
  -webkit-tap-highlight-color: transparent;
  will-change: opacity;
  /* performance hint */
}

/* both states use full-cover faces */
.service-card__face {
  position: absolute;
  inset: 0;
  border-radius: var(--card-radius);
  box-sizing: border-box;
  padding: var(--card-padding);
  display: flex;
}

/* FRONT (default) */
.service-card__face--front {
  background: var(--card-bg);
  color: #fff;
  align-items: flex-end;
  /* keeps title bottom-left like figma */
  justify-content: flex-start;
  z-index: 2;
  opacity: 1;
  transition: opacity .28s ease-in-out;
}

/* Title on front (bottom-left) */
.service-card__title {
  color: var(--card-accent);
  font-weight: 700;
  font-size: var(--card-title-fs);
  line-height: 1.06;
  margin: 0;
  z-index: 3;
}

/* svg — anchored top-right */
.service-card__svg {
  position: absolute;
  top: var(--card-svg-top);
  right: var(--card-svg-right);
  width: var(--card-svg-w);
  height: auto;
  pointer-events: none;
  z-index: 4;
}

/* BACK (hover state) - full red panel with description */
.service-card__face--back {
  background: var(--card-accent);
  color: #fff;
  align-items: center;
  /* center description like Figma */
  justify-content: flex-start;
  padding: var(--card-padding);
  z-index: 1;
  opacity: 0;
  /* hidden by default */
  transition: opacity .28s ease-in-out;
  pointer-events: none;
  /* avoid clicks when hidden */
}

/* description styling */
.service-card__desc {
  max-width: 90%;
  font-size: clamp(.92rem, 1.05vw, 1.05rem);
  line-height: 1.6;
  margin: 0;
}

/* ---- HOVER / FOCUS: FULL-SWAP ---- */
/* Desktop and hover-capable devices: show back at hover, hide front */
@media (hover: hover) {

  .service-card:hover .service-card__face--front,
  .service-card:focus-within .service-card__face--front {
    opacity: 0;
    pointer-events: none;
  }

  .service-card:hover .service-card__face--back,
  .service-card:focus-within .service-card__face--back {
    opacity: 1;
    pointer-events: auto;
  }
}

/* Accessibility: keyboard focus should also show back panel */
.service-card:focus-within .service-card__face--back {
  opacity: 1;
  pointer-events: auto;
}

/* ---- TOUCH DEVICES (optional tap-to-open with .panel-open) ---- */
@media (hover: none) and (pointer: coarse) {

  /* default: keep back hidden so drag/scroll works */
  .service-card__face--back {
    opacity: 0;
    pointer-events: none;
  }

  /* .panel-open toggled by touch script (optional) */
  .service-card.panel-open .service-card__face--back {
    opacity: 1;
    pointer-events: auto;
  }

  .service-card.panel-open .service-card__face--front {
    opacity: 0;
    pointer-events: none;
  }
}

/* ---- SMALL SCREEN LAYOUT ADJUSTMENTS ---- */
@media (max-width: 760px) {
  #products_horiz_container {
    padding: 18px 12px;
    gap: 14px;
  }

  .service-card {
    width: calc(100% - 40px);
    height: auto;
    /* let content determine height on narrow screens */
  }

  .service-card__face--front {
    min-height: 140px;
    align-items: flex-end;
  }

  .service-card__face--back {
    position: relative;
    opacity: 1;
    pointer-events: auto;
    margin-top: 10px;
    border-radius: 6px;
  }

  .service-card__svg {
    right: 14px;
    top: 12px;
  }
}


/* === Mobile: show desktop default (front visible) ===
Place at the END of about-us-carousel.css to override previous mobile rules.
This ensures mobile default = desktop default (dark front/title + svg).
*/

@media(min-width:768px) and (max-width: 900px) {
  .carousel__slide {
    max-width: unset !important;
  }
}

@media (max-width: 760px) {

  /* Reset any "mobile-first" rules that made the back visible */
  .service-card {
    width: calc(100vw - 58px);
    /* keep swipe-friendly card width, adjust if you want a different gutter */
    height: var(--card-h, auto);
    overflow: visible;
    border-radius: var(--card-radius, 6px);
  }

  /* Keep faces absolutely stacked (front visible, back hidden) — same as desktop */
  .service-card__face {
    position: absolute;
    inset: 0;
    padding: var(--service-card-padding, 22px);
    display: flex;
    box-sizing: border-box;
    border-radius: var(--card-radius, 6px);
  }

  /* FRONT: visible (same as desktop) */
  .service-card__face--front {
    display: flex;
    opacity: 1;
    pointer-events: auto;
    align-items: flex-end;
    justify-content: flex-start;
    background: var(--card-bg, #2b2b2b);
    color: #fff;
    z-index: 2;
    transition: opacity .28s ease-in-out;
  }

  /* Title remains visible */
  .service-card__title {
    display: block;
    font-size: var(--card-title-fs, 1.25rem);
    color: var(--card-accent, #E5383B);
    margin: 0;
    z-index: 3;
  }

  /* SVG top-right (same as desktop) */
  .service-card__svg {
    position: absolute;
    top: var(--card-svg-top, 16.4px);
    right: var(--card-svg-right, 18px);
    width: var(--card-svg-w, 35.25px);
    height: auto;
    z-index: 4;
  }

  /* BACK: hidden by default (same as desktop) */
  .service-card__face--back {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: var(--card-accent, #E5383B);
    color: #fff;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    transition: opacity .28s ease-in-out;
  }

  /* Hover rules will not trigger on touch devices, so we keep the back hidden.
  If you later want tap-to-open, use the optional script below which toggles .panel-open. */

  /* Horizontal track padding/gap — keep mobile friendly */
  #products_horiz_container {
    padding: 18px 12px !important;
    gap: 14px;
    align-items: center;
  }

  /* Keep scrollbar usable */
  #products_track {
    padding: 0 12px;
  }

  #products_dragBar {
    height: 8px;
    border-radius: 4px;
  }

  /* Small screen: ensure card min-height doesn't collapse */
  .service-card {
    min-height: 140px;
  }

  .carousel__slide {
    max-width: unset !important;
  }
}