/* tvc-editorial.css — layout for the TriVision Creative editorial comparison posts.
 *
 * Typography and colour are INHERITED from the site's own post template
 * (Inter 300 body, 600 headings, link #132a79, Astra globals). Nothing here
 * sets a font-family or a brand colour, so the posts read as native blog posts
 * and the package's unverified provisional grayscale proof is not reproduced.
 *
 * SCOPE: the dynamic single-post template (parts/single-skeleton.php) renders
 * the body inside .elementor-widget-theme-post-content, NOT .entry-content —
 * scoping to .entry-content alone matches nothing and the comparison grid
 * collapses to one column. Both are targeted via :is().
 *
 * Two package constraints are encoded here:
 *  1. Comparison rows render as labelled wrapping CARDS at every breakpoint —
 *     a desktop table must not be squeezed onto a phone or have its buyer
 *     questions dropped.
 *  2. Portfolio images keep their full frame: contained, never cropped, because
 *     cropping could remove client identity the rights note requires be visible.
 */

:is(.elementor-widget-theme-post-content, .entry-content) .tvc-lede{
  font-size:1.15em; line-height:1.55; color:var(--ast-global-color-3,#334155);
  margin:0 0 1.4em;
}

/* ---- figures ----------------------------------------------------------- */
:is(.elementor-widget-theme-post-content, .entry-content) .tvc-fig{ margin:2em 0; }
:is(.elementor-widget-theme-post-content, .entry-content) .tvc-fig img{
  display:block; width:100%; height:auto;      /* full frame, no crop */
  background:var(--ast-global-color-4,#f9fafb);
}
:is(.elementor-widget-theme-post-content, .entry-content) .tvc-fig figcaption{
  font-size:.78em; line-height:1.5; margin-top:.7em;
  color:var(--ast-global-color-8,#94a3b8);
}
/* design mockups read as artwork; documentary photographs need no frame */
:is(.elementor-widget-theme-post-content, .entry-content) .tvc-fig--mockup img{
  border:1px solid var(--ast-global-color-6,#e2e8f0);
}

/* ---- comparison cards -------------------------------------------------- */
:is(.elementor-widget-theme-post-content, .entry-content) .tvc-cards{
  list-style:none; margin:1.8em 0; padding:0;
  display:grid; gap:1rem;
  grid-template-columns:repeat(auto-fit,minmax(265px,1fr));
}
:is(.elementor-widget-theme-post-content, .entry-content) .tvc-cards>li{
  margin:0; list-style:none;
}
:is(.elementor-widget-theme-post-content, .entry-content) .tvc-card{
  height:100%;
  border:1px solid var(--ast-global-color-6,#e2e8f0);
  border-top:3px solid var(--ast-global-color-0,#046bd2);
  padding:1.15rem 1.25rem 1.25rem;
  background:#fff;
}
:is(.elementor-widget-theme-post-content, .entry-content) .tvc-card__name{
  margin:0 0 .75rem; font-size:1.05em; line-height:1.3;
}
:is(.elementor-widget-theme-post-content, .entry-content) .tvc-card dl{ margin:0; }
:is(.elementor-widget-theme-post-content, .entry-content) .tvc-card dl>div + div{
  margin-top:.7rem; padding-top:.7rem;
  border-top:1px solid var(--ast-global-color-6,#e2e8f0);
}
:is(.elementor-widget-theme-post-content, .entry-content) .tvc-card dt{
  font-size:.68em; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ast-global-color-8,#94a3b8); margin:0 0 .25rem;
}
:is(.elementor-widget-theme-post-content, .entry-content) .tvc-card dd{
  margin:0; font-size:.92em; line-height:1.5;
  color:var(--ast-global-color-3,#334155);
}
/* the first card is TriVision's own row — the article discloses that TriVision
   publishes this comparison and appears in it, so tint it as the publisher */
:is(.elementor-widget-theme-post-content, .entry-content) .tvc-cards>li:first-child .tvc-card{
  background:var(--ast-global-color-4,#f9fafb);
}

@media (max-width:600px){
  :is(.elementor-widget-theme-post-content, .entry-content) .tvc-cards{
    grid-template-columns:1fr;
  }
  :is(.elementor-widget-theme-post-content, .entry-content) .tvc-fig{ margin:1.5em 0; }
}