/* =========================================================
   WHY CHOOSE US — .cg-why-us-v2
   Elementor widget. A scoped port of the "why choose us" section
   from the reference build (D:/Raghesh/Color Graphics/new —
   index.html `<section class="cg-why-us">` plus the
   "WHY CHOOSE US — cg-why-us" block of assets/css/style.css).

   Only the section-specific rules are ported. Everything the
   section leans on already ships globally with this theme, with
   the same values as the reference, so it is reused rather than
   redefined (no duplicate design system):
     - tokens.css : --n-0 --n-25 --n-600 --n-950,
                    --accent-100 --accent-300 --accent-500,
                    --border-subtle, --font-mono
     - style.css  : --font-display, and the .cg-container helper

   `.cg-min0` (min-width:0) is global in the theme too, but is
   inlined into the scoped rule below so the widget never depends
   on a global utility class existing.

   Breakpoints are the reference's own 1239px / 999px — which are
   also this theme's header/footer breakpoints — not Elementor's
   generic ones. A fourth band at 767px is added ONLY so the
   administrator can set tablet-portrait and phone column counts
   separately; both default to 1, so an untouched widget renders
   exactly what the reference does.

   THE CARD GRID BORDERS. The reference draws the hairline grid as
   border-top + border-left on the container plus border-right +
   border-bottom on every cell — which only works at zero gap and
   for a full final row. Here each cell carries a complete border
   and is pulled back by 1px, so adjacent borders overlap into the
   same single hairline. At the default zero gap that is pixel-wise
   identical to the reference, and it degrades correctly for any
   card count and for any gap the administrator sets (cards simply
   separate into individually bordered boxes).
   ========================================================= */

.cg-why-us-v2 {
  position: relative;
  /* Content-driven height: padding and the grid decide how tall this
     gets. No fixed heights and no overflow clipping anywhere in this
     file, so longer copy always makes the section taller. */
  /*
   * Outer padding. ONE declaration per side, resolved in order of how
   * specific the intent is: the Padding control (--cg-wu2-pad-*) first, then
   * the older Top/Bottom sliders (--cg-wu2-pad-top/-bottom), then the
   * design's own value. Nothing competes on specificity, so with every
   * control left alone the numbers below are what render.
   *
   * The design has no horizontal padding of its own: the side gutter belongs
   * to .cg-container. 0 keeps that true until someone asks otherwise.
   */
  padding-top: var(--cg-wu2-pad-t, var(--cg-wu2-pad-top, 128px));
  padding-right: var(--cg-wu2-pad-r, 0px);
  padding-bottom: var(--cg-wu2-pad-b, var(--cg-wu2-pad-bottom, 128px));
  padding-left: var(--cg-wu2-pad-l, 0px);
  background: var(--cg-wu2-bg, var(--n-25));
  color: var(--n-950);
}
@media (max-width: 999px) {
  .cg-why-us-v2 {
    padding-top: var(--cg-wu2-pad-t, var(--cg-wu2-pad-top, 72px));
    padding-bottom: var(--cg-wu2-pad-b, var(--cg-wu2-pad-bottom, 72px));
  }
}

.cg-why-us-v2 *,
.cg-why-us-v2 *::before,
.cg-why-us-v2 *::after { box-sizing: border-box; }

/* Editor-only placeholder when nothing is configured. */
.cg-why-us-v2__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 160px;
  padding: 40px 20px;
  font-family: var(--font-mono);
  font-size: 13px;
  text-align: center;
  color: var(--n-600);
  border: 1px dashed var(--border-subtle);
}

/* ---------------------------------------------------------
   INTRO
   --------------------------------------------------------- */

.cg-why-us-v2__head {
  display: grid;
  grid-template-columns:
    minmax(0, var(--cg-wu2-col-left, 57fr))
    minmax(0, var(--cg-wu2-col-right, 43fr));
  column-gap: var(--cg-wu2-head-gap, 80px);
  row-gap: 28px;
  align-items: center;
}
@media (max-width: 1239px) {
  .cg-why-us-v2__head { column-gap: var(--cg-wu2-head-gap, 48px); }
}
@media (max-width: 999px) {
  .cg-why-us-v2__head { grid-template-columns: 1fr; column-gap: 0; }
}

/* With no description there is no second column, so the heading takes
   the full measure rather than being held at 57% beside dead space. */
.cg-why-us-v2__head--single { grid-template-columns: 1fr; column-gap: 0; }

.cg-why-us-v2__kicker {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--n-950);
}

.cg-why-us-v2__kicker-rule {
  display: block;
  width: var(--cg-wu2-rule-w, 34px);
  height: var(--cg-wu2-rule-h, 3px);
  margin-top: var(--cg-wu2-rule-gap, 14px);
  background: var(--cg-wu2-rule-color, var(--accent-500));
}

.cg-why-us-v2__title {
  margin: var(--cg-wu2-title-gap, 36px) 0 0;
  max-width: var(--cg-wu2-title-max, 18ch);
  font-family: var(--font-display);
  font-size: clamp(34px, 3.4vw, 54px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.035em;
  color: var(--n-950);
}
@media (max-width: 999px) {
  .cg-why-us-v2__title {
    margin-top: var(--cg-wu2-title-gap, 26px);
    font-size: clamp(28px, 7.4vw, 36px);
  }
}

/* The reference marks the accent phrase with an inline style; scoped to
   a class here so no inline style attribute is ever emitted. */
.cg-why-us-v2__accent {
  font-style: normal;
  color: var(--cg-wu2-accent, var(--accent-500));
}

/* With no kicker above it, the heading's top margin would read as stray
   whitespace at the top of the section. */
.cg-why-us-v2__title--flush { margin-top: 0; }

.cg-why-us-v2__aside {
  border-left: 1px solid var(--cg-wu2-divider, var(--border-subtle));
  padding-left: var(--cg-wu2-aside-pad, 64px);
}
@media (max-width: 1239px) {
  .cg-why-us-v2__aside { padding-left: var(--cg-wu2-aside-pad, 40px); }
}
@media (max-width: 999px) {
  /* Single column: the reference drops the rule and its indent so the
     copy starts at the gutter like everything else. */
  .cg-why-us-v2__aside { border-left-color: transparent; padding-left: 0; }
}

.cg-why-us-v2__lede {
  margin: 0;
  max-width: var(--cg-wu2-lede-max, 44ch);
  font-size: 17px;
  line-height: 1.8;
  color: var(--n-600);
  text-wrap: pretty;
}
@media (max-width: 999px) {
  .cg-why-us-v2__lede { font-size: 15px; }
}

/* ---------------------------------------------------------
   CARD GRID
   Column counts are four discrete bands rather than Elementor's own
   responsive system, so they line up exactly with the reference's
   breakpoints. Defaults: 3 / 2 / 1 / 1 — the reference's real
   behaviour (it switches to two columns at 1240px and one at 1000px,
   so an iPad landscape at 1024px genuinely shows two).
   --------------------------------------------------------- */

.cg-why-us-v2__grid {
  margin-top: var(--cg-wu2-grid-gap-top, 96px);
  display: grid;
  grid-template-columns: repeat(var(--cg-wu2-cols, 3), minmax(0, 1fr));
  column-gap: var(--cg-wu2-gap, 0px);
  row-gap: var(--cg-wu2-row-gap, 0px);
  align-items: var(--cg-wu2-align, stretch);
}
@media (max-width: 1239px) {
  .cg-why-us-v2__grid { grid-template-columns: repeat(var(--cg-wu2-cols-tl, 2), minmax(0, 1fr)); }
}
@media (max-width: 999px) {
  .cg-why-us-v2__grid {
    margin-top: var(--cg-wu2-grid-gap-top, 56px);
    grid-template-columns: repeat(var(--cg-wu2-cols-tp, 1), minmax(0, 1fr));
  }
}
@media (max-width: 767px) {
  .cg-why-us-v2__grid { grid-template-columns: repeat(var(--cg-wu2-cols-mob, 1), minmax(0, 1fr)); }
}

.cg-why-us-v2__cell {
  display: flex;
  gap: var(--cg-wu2-cell-gap, 22px);
  padding: var(--cg-wu2-cell-pad, 40px 36px 44px);
  min-height: var(--cg-wu2-cell-min-h, 0);
  border: var(--cg-wu2-border-w, 1px) solid var(--cg-wu2-border, var(--border-subtle));
  border-radius: var(--cg-wu2-radius, 0);
  background: var(--cg-wu2-cell-bg, transparent);
  /* Pull each cell back so neighbouring borders land on the same
     hairline — see the note at the top of this file. */
  margin-top: calc(-1 * var(--cg-wu2-border-w, 1px));
  margin-left: calc(-1 * var(--cg-wu2-border-w, 1px));
  text-decoration: none;
  color: inherit;
  transition: background 240ms ease, border-color 240ms ease;
}
@media (max-width: 999px) {
  .cg-why-us-v2__cell {
    gap: var(--cg-wu2-cell-gap, 18px);
    padding: var(--cg-wu2-cell-pad, 28px 20px);
  }
}

.cg-why-us-v2__cell:hover {
  background: var(--cg-wu2-cell-bg-hover, var(--n-0));
  border-color: var(--cg-wu2-border-hover, var(--cg-wu2-border, var(--border-subtle)));
}

/* Only the linked variant is interactive; a plain card is not clickable
   and must not pretend to be. */
a.cg-why-us-v2__cell { cursor: pointer; }
a.cg-why-us-v2__cell:focus-visible {
  outline: 2px solid var(--accent-500);
  outline-offset: -2px;
  position: relative;
  z-index: 1;
}

.cg-why-us-v2__icon {
  flex: 0 0 auto;
  width: var(--cg-wu2-icon-box, 60px);
  height: var(--cg-wu2-icon-box, 60px);
  border-radius: var(--cg-wu2-icon-radius, 50%);
  background: var(--cg-wu2-icon-bg, var(--accent-100));
  color: var(--cg-wu2-icon-color, var(--accent-500));
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (max-width: 999px) {
  .cg-why-us-v2__icon { width: var(--cg-wu2-icon-box, 52px); height: var(--cg-wu2-icon-box, 52px); }
}

.cg-why-us-v2__icon svg {
  display: block;
  width: var(--cg-wu2-icon-size, 24px);
  height: var(--cg-wu2-icon-size, 24px);
}
/* Elementor's icon control can emit an icon font glyph instead of an
   SVG; size it from the same control so both render identically. */
.cg-why-us-v2__icon i {
  font-size: var(--cg-wu2-icon-size, 24px);
  line-height: 1;
  font-style: normal;
}

/* min-width:0 so a long unbroken word cannot push the card wider than
   its grid track (the reference's .cg-min0 helper). */
.cg-why-us-v2__body { min-width: 0; }

.cg-why-us-v2__n-row { display: flex; align-items: center; gap: 12px; }

.cg-why-us-v2__n {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: var(--cg-wu2-n-spacing, .1em);
  color: var(--cg-wu2-n-color, var(--accent-500));
}

.cg-why-us-v2__n-rule {
  display: block;
  width: 26px;
  height: 1px;
  background: var(--cg-wu2-n-rule-color, var(--accent-300));
}

.cg-why-us-v2__cell-title {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.2;
  color: var(--n-950);
  /* A long single word wraps rather than overflowing the card. */
  overflow-wrap: anywhere;
}
@media (max-width: 999px) {
  .cg-why-us-v2__cell-title { font-size: 19px; }
}

.cg-why-us-v2__cell-desc {
  margin: 12px 0 0;
  max-width: var(--cg-wu2-desc-max, 32ch);
  font-size: 15px;
  line-height: 1.65;
  color: var(--n-600);
  text-wrap: pretty;
  overflow-wrap: anywhere;
}
@media (max-width: 999px) {
  .cg-why-us-v2__cell-desc { font-size: 14px; }
}

/* ---------------------------------------------------------
   MOTION PREFERENCES
   The hover is the only transition in the reference; it is
   shortened rather than removed so the state is still legible.
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .cg-why-us-v2__cell { transition-duration: 1ms; }
}