/* ==========================================================================
   VATECH India — software detail pages (software-detail.php)

   Loads AFTER assets/css/product-bento.css, which supplies the whole editorial
   grammar (.pb-sec / .pb-h1..h3 / .pb-lead / .pb-head / .pb-chips / .pb-cta /
   .pb-specs / .pb-viewer / .pb-gallery / .pb-crumbs / .pb-back). Every selector
   in that file is scoped to body.bento-page, which software-detail.php also
   carries, so all of it applies here unchanged.

   This file holds only what software needs and hardware does not:
     §1  page furniture   .sw-hero .sw-shot .sw-logo .sw-platforms
                          .sw-integrations .sw-reqs .sw-videos
     §2  media overrides  UI screenshots want contain, not the cover-crop the
                          hardware cut-outs want
     §3  Clever Dent      a scoped palette for the one sub-brand title

   Every colour goes through a token, per assets/css/custom.css. The one
   exception is §3, which IS the token definitions.
   ========================================================================== */


/* ==========================================================================
   §1  PAGE FURNITURE
   ========================================================================== */

/* ---- Hero ---------------------------------------------------------------
   Not .pb-sec: this is the first band under a sticky header, and .pb-sec's
   clamp(72px, 9vw, 128px) of top padding leaves the h1 stranded. */
body.sw-page .sw-hero {
  padding: clamp(28px, 4vw, 48px) 0 clamp(52px, 7vw, 88px);
  background:
    radial-gradient(900px 380px at 88% -10%, rgba(var(--accent-rgb), .10), transparent 62%),
    linear-gradient(180deg, var(--bg) 0%, var(--mist) 100%);
  border-bottom: 1px solid var(--line);
}

body.sw-page .sw-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

body.sw-page .sw-hero-copy .pb-h1 { margin-top: .1em; }
body.sw-page .sw-hero-copy .pb-lead { max-width: 34ch; }

/* Clever Dent's wordmark. Height-capped rather than width-capped: the source is
   143x34, and letting it stretch to a column width would blow it up 4x. */
body.sw-page .sw-logo {
  display: block;
  height: 30px;
  width: auto;
  margin-bottom: 18px;
}

/* ---- Hero screenshot ----------------------------------------------------
   Deliberately NOT .pb-media.is-product, which is tuned for transparent
   hardware cut-outs. A UI capture wants a frame that reads as a screen: a
   surface ground, a hairline, and contain so nothing is cropped away. The
   sources range from a 1000x1000 key visual to a 745x592 app capture, so the
   aspect ratio is fixed here and the image sits inside it. */
body.sw-page .sw-shot {
  margin: 0;
  padding: clamp(14px, 2vw, 24px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow-md);
  aspect-ratio: 4 / 3;
  display: grid;
  place-items: center;
  overflow: hidden;
}
body.sw-page .sw-shot img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 10px;
}

/* ---- Platform pills -----------------------------------------------------
   Neutral, not accent: these are facts about where the software runs, not a
   claim. Same shape as .pb-chips, one step quieter. */
body.sw-page .sw-platforms {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
body.sw-page .sw-platforms li {
  font-family: var(--nav-font);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 14px;
}

/* ---- "What it does" split + At-a-glance card ----------------------------
   The section used to be one .pb-narrow column with the integration pills
   stranded full-width beneath it, which left the right half of the band empty.
   Copy stays left for reading order; every fact moves into a card on the right.

   align-items:start, not stretch: the card should end where its content ends
   rather than growing to match a long overview paragraph. No position:sticky —
   main.css puts overflow:clip on every <section>, which kills sticky
   descendants. */
body.sw-page .sw-about {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(32px, 4.5vw, 72px);
  align-items: start;
}
body.sw-page .sw-about-copy .pb-h2 { margin-top: .1em; }
body.sw-page .sw-about-copy .pb-body { margin-top: 1.2em; max-width: 46ch; }

body.sw-page .sw-aside {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
  padding: clamp(20px, 2.2vw, 28px);
  display: flex;
  flex-direction: column;
  gap: clamp(18px, 2vw, 24px);
}

/* ---- Video header (Clever Dent only) ----
   Pulled to the card's edges so it reads as a header rather than an inset
   thumbnail, and only its bottom corners stay square. */
body.sw-page .sw-aside-video {
  position: relative;
  display: block;
  margin: calc(-1 * clamp(20px, 2.2vw, 28px));
  margin-bottom: 0;
  border-radius: 19px 19px 0 0;
  overflow: hidden;
  background: var(--mist);
  text-decoration: none;
}
body.sw-page .sw-aside-video img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  /* cover, because hqdefault is 4:3 and the bars have to go. */
  object-fit: cover;
  transition: transform .4s ease;
}
body.sw-page .sw-aside-video:hover img,
body.sw-page .sw-aside-video:focus-visible img { transform: scale(1.04); }
/* The site badge is 78px — too heavy over a card-sized thumbnail. */
body.sw-page .sw-aside-video .video-play span { width: 54px; height: 54px; font-size: 1.4rem; }
body.sw-page .sw-aside-video:hover .video-play span { transform: scale(1.08); }
body.sw-page .sw-aside-video-cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 26px 16px 12px;
  font-family: var(--nav-font);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(to top, rgba(0, 0, 0, .62), transparent);
}
body.sw-page .sw-aside-video:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

/* ---- Fact rows (the three trust chips) ---- */
body.sw-page .sw-aside-facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
body.sw-page .sw-aside-facts li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: .93rem;
  line-height: 1.45;
  color: var(--ink);
}
body.sw-page .sw-aside-facts i {
  flex: none;
  margin-top: .15em;
  font-size: 1.02rem;
  color: var(--accent);
}

/* ---- Labelled pill rows ---- */
body.sw-page .sw-aside-row {
  padding-top: clamp(16px, 1.8vw, 22px);
  border-top: 1px solid var(--line);
}
body.sw-page .sw-aside-label {
  display: block;
  margin-bottom: 10px;
  font-family: var(--nav-font);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}
body.sw-page .sw-pills {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
body.sw-page .sw-pills li {
  font-size: .84rem;
  color: var(--ink-soft);
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 5px 13px;
}
body.sw-page .sw-aside-tel {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-variant-numeric: tabular-nums;
}
body.sw-page .sw-aside-tel a {
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}
body.sw-page .sw-aside-tel a:hover { text-decoration: underline; }

/* ---- Requirement groups -------------------------------------------------
   One group renders exactly like product.php's spec table. Two or more sit
   side by side above 992px, which is the case data/software.php is shaped for
   (server/client tiers, and Clever Dent's deployment/imaging split). */
body.sw-page .sw-reqs { display: grid; gap: clamp(28px, 4vw, 48px); }
@media (min-width: 992px) {
  body.sw-page .sw-reqs.is-split { grid-template-columns: 1fr 1fr; }
}
body.sw-page .sw-req-group .pb-h3 { margin: 0 0 14px; }
body.sw-page .sw-req-group .pb-specs { margin-top: 0; }

/* ---- Video band ---------------------------------------------------------
   .vtile comes from custom.css; only the grid and the tile height are new.
   auto-fit rather than a fixed column count: EzDent-i ships two clips and
   Ez3D-i five, and a hardcoded 2-up would leave a hole in the odd row. */
body.sw-page .sw-videos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(14px, 1.6vw, 22px);
}
/* 16:9, matching the source clips exactly, so .vtile-video's cover crops
   nothing. The homepage tiles are full-bleed cinematic bands and set a height
   instead; these sit inside .container and are framed like the other cards. */
body.sw-page .sw-vtile {
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow .25s ease, transform .25s ease;
}
body.sw-page .sw-vtile:hover,
body.sw-page .sw-vtile:focus-within {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}


/* The hub's three anchors, linked from the nav and from r2.html.
   (.sw-hub-shot, the frame the hub cards use, is in custom.css — index.php's
   software band uses it too, and that page does not load this file.) */
#cleverdent, #ezdent, #ez3d { scroll-margin-top: 96px; }


/* ==========================================================================
   §2  MEDIA OVERRIDES

   The two carousels/stages this page borrows were built for hardware renders —
   transparent cut-outs and 16:9 poster art, both of which want cover. A UI
   screenshot cropped to fill loses the toolbar it was captured for.
   ========================================================================== */

/* Gallery slides: fix the box, contain the capture on a neutral ground. */
body.sw-page .pb-gallery .swiper-slide a {
  display: block;
  aspect-ratio: 16 / 10;
  background: var(--mist);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
body.sw-page .pb-gallery .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10px;
}

/* Viewer backdrops that are real screenshots (highlights_N) rather than the
   clinical photography product.php feeds the stage.

   Two changes, both following from what the source actually is:

   contain, not cover — a capture cropped to fill loses the toolbar it was taken
   for, and the sources here run 1600x900 to 1920x1080 against a stage that is
   not always that ratio. Pushed right so the pill rail does not sit on top of
   the part of the screen worth seeing.

   A LIGHT scrim, not the dark one. product-bento.css darkens the left edge at
   rgba(0,0,0,.62) plus a whole-stage rgba(0,0,0,.16)->.3 wash, which is right
   for keeping frosted glass legible over a photograph. But these pills are
   Apple greys carrying near-black ink (--pb-pill-ink) in BOTH themes, and these
   captures are light-ground UI, so the legibility problem runs the other way:
   the dark wash just turns a white screenshot muddy. Fade white in under the
   rail instead, and drop the vertical wash entirely. */
body.sw-page .pb-viewer-layer.is-ui { background: #f2f3f5; }
body.sw-page .pb-viewer-layer.is-ui .pb-viewer-bg {
  object-fit: contain;
  object-position: right center;
  padding: clamp(14px, 1.8vw, 28px);
}
body.sw-page .pb-viewer-layer.is-ui::after {
  background: linear-gradient(90deg,
    rgba(255, 255, 255, .92) 0%,
    rgba(255, 255, 255, .74) 30%,
    rgba(255, 255, 255, .28) 56%,
    rgba(255, 255, 255, 0) 78%);
}

/* Below 1200px product-bento.css moves the rail out of the image and into its
   own row underneath. Both of the rules above exist only to clear the left
   third for pills that are no longer there: the right-anchored crop now just
   throws the screenshot off-centre, and the white fade veils it for nothing. */
@media (max-width: 1199.98px) {
  body.sw-page .pb-viewer-layer.is-ui .pb-viewer-bg { object-position: center; }
  body.sw-page .pb-viewer-layer.is-ui::after        { background: none; }
}


/* ==========================================================================
   §3  CLEVER DENT PALETTE

   Clever Dent is a sub-brand with its own identity (intro.cleverdent.in), so
   its page wears its own colours. Scoped to body.sw-theme-cleverdent, which
   software-detail.php sets only for that title from a whitelisted data token.

   TWO THINGS DECIDE THE SHAPE OF THIS BLOCK:

   1. Proximity, not specificity. custom.css declares the palette on :root and
      the dark theme on html[data-bs-theme="dark"]. Custom properties inherit,
      and a declaration on <body> is nearer than either, so it wins in both
      themes. That is also why the dark block below has to target body as well:
      [data-bs-theme="dark"] body.sw-theme-cleverdent beats
      body.sw-theme-cleverdent on the same element, and must come second.

   2. var() is substituted where it is DECLARED. custom.css writes
      --brand: var(--accent), --grad-brand, --accent-color, --nav-hover-color,
      --nav-dropdown-hover-color and --dm-rail as var() references on :root, so
      they are already resolved against VATECH red by the time they inherit
      down here. Redefining --accent alone would leave .vf-submit, .vf-rail,
      .vf-card::before and ~30 main.css rules red on a teal page. Every one of
      them is therefore re-declared below. Do not prune this list.

   CONTRAST. The brand teal #00bfa5 measures 2.33:1 on white — it cannot carry
   white text and cannot be link text. custom.css already separates the roles,
   so: #1b7263 (5.8:1) is --accent, #218572 (4.5:1) is the fill that carries
   --on-fill/--on-vivid white, and #00bfa5 lives in --accent-rgb and
   --accent-soft, where it has all the presence and no contrast obligation. In
   dark mode it sits on #091413 at 7.8:1 and becomes the accent proper.
   ========================================================================== */

body.sw-theme-cleverdent {
  --accent:       #1b7263;
  --accent-hover: #155b4e;
  --accent-soft:  rgba(0, 191, 165, .12);
  --accent-vivid: #218572;
  --accent-fill:  #218572;
  --on-fill:      #ffffff;
  --on-vivid:     #ffffff;
  --accent-rgb:   0, 191, 165;

  --cta-bg:       #218572;
  --cta-fg:       #ffffff;
  --cta-fg-2:     rgba(255, 255, 255, .9);
  --cta-hover-bg: #155b4e;
  --cta-hover-fg: #ffffff;

  /* Clever Dent's own ink, #212b36, for the newsletter band and stat strips. */
  --deep:         #1d5f52;
  --deep-2:       #17453b;

  /* ---- already substituted against red on :root — must be re-declared ---- */
  --brand:        var(--accent);
  --brand-dark:   var(--accent-hover);
  --brand-soft:   var(--accent-soft);
  --grad-brand:   linear-gradient(120deg, #218572 0%, #155b4e 100%);
  --accent-color: var(--accent);
  --nav-hover-color:          var(--accent);
  --nav-dropdown-hover-color: var(--accent);
  --dm-rail:      linear-gradient(90deg, #155b4e 0%, #00bfa5 50%, #155b4e 100%);
  --dm-bleed:     rgba(0, 191, 165, .12);
  --dm-scrim:     rgba(33, 43, 54, .46);
}

[data-bs-theme="dark"] body.sw-theme-cleverdent {
  --accent:       #00bfa5;
  --accent-hover: #4fd8c4;
  --accent-soft:  rgba(0, 191, 165, .16);
  --accent-vivid: #00bfa5;
  --accent-fill:  #1c5a4e;
  --on-fill:      #ffffff;
  --on-vivid:     #06231f;
  --accent-rgb:   0, 191, 165;

  --cta-bg:       #263238;
  --cta-fg:       #00bfa5;
  --cta-fg-2:     #e7f1ec;
  --cta-hover-bg: #00bfa5;
  --cta-hover-fg: #263238;

  --deep:         #14332c;
  --deep-2:       #0d221d;

  --brand:        var(--accent);
  --brand-dark:   var(--accent-hover);
  --brand-soft:   var(--accent-soft);
  --grad-brand:   linear-gradient(120deg, #1c5a4e 0%, #14332c 100%);
  --accent-color: var(--accent);
  --nav-hover-color:          var(--accent);
  --nav-dropdown-hover-color: var(--accent);
  --dm-rail:      linear-gradient(90deg, #1c5a4e 0%, #00bfa5 50%, #1c5a4e 100%);
  --dm-bleed:     rgba(0, 191, 165, .10);
  --dm-scrim:     rgba(4, 12, 10, .62);
}

/* custom.css builds .cta-band from --accent-fill -> --accent-hover. In dark
   mode --accent-hover is a light mint, which would end the gradient under white
   text at roughly 2:1. --grad-brand is already the two-dark-stops version. */
body.sw-theme-cleverdent .cta-band { background: var(--grad-brand); }


/* ==========================================================================
   §4  ANCHOR OFFSETS + MOBILE
   ========================================================================== */

/* main.css gives <section> 72px, which the sticky header overshoots once
   .branding is counted — the same 96px correction custom.css already makes for
   the other page families. #enquire is covered there; these are new ids. */
body.sw-page #top,
body.sw-page #overview,
body.sw-page #features,
body.sw-page #videos,
body.sw-page #requirements,
body.sw-page #gallery,
body.sw-page #related { scroll-margin-top: 96px; }

@media (max-width: 991.98px) {
  body.sw-page .sw-hero-grid { grid-template-columns: 1fr; }
  /* Copy first on a phone: the screenshot is context, the name is the point. */
  body.sw-page .sw-hero-media { order: 2; }
  body.sw-page .sw-hero-copy .pb-lead { max-width: none; }
  body.sw-page .sw-about { grid-template-columns: 1fr; }
  body.sw-page .sw-about-copy .pb-body { max-width: none; }
}

@media (max-width: 575.98px) {
  body.sw-page .sw-shot { aspect-ratio: 3 / 2; border-radius: 16px; }
  body.sw-page .sw-videos { grid-template-columns: 1fr; }
  body.sw-page .sw-aside { border-radius: 18px; padding: 20px; }
  body.sw-page .sw-aside-video { margin: -20px; margin-bottom: 0; border-radius: 17px 17px 0 0; }
  /* Contained captures get small fast; give them the whole slide. */
  body.sw-page .pb-gallery .swiper-slide img { padding: 6px; }
}