/* ==========================================================================
   GEMHUB & CO. - "Book a Free Video Call" band (.gh-vc)
   Replica of the gemhub.in homepage image-with-text section
   (Shopify section "image_with_text_qhyfUK", sections/image-with-text.liquid).
   Depends on theme.css variables: --gold-d, --teal, --teal-2, --ink, --serif,
   --accent (Jost), --ease. Append to theme.css or enqueue after it.
   ========================================================================== */

.gh-vc{
  /* gemhub.in values, mapped onto gemhubco.com tokens where one exists */
  --gh-vc-tint:rgba(184,148,62,.10);        /* rgba(var(--color-primary-accent),.1) */
  --gh-vc-radius:10px;                       /* --layout-image-border */
  --gh-vc-btn:var(--teal);                   /* gemhub.in uses navy #14223d; site primary is teal */
  --gh-vc-btn-hover:var(--teal-2);           /* gemhub.in: #0e1730 + gold border on hover */
  --gh-vc-heading:var(--teal);               /* gemhub.in: --gh-navy #14223d */
  background:#fff; color:var(--ink); padding:12px 0 8px;   /* section padding_top 12 / bottom 8 */
}
.gh-vc-inner{padding:0 16px}                 /* Shopify .page-width override: 16px gutters, full width */
.gh-vc-card{
  display:flex; flex-direction:row-reverse; flex-wrap:nowrap; align-items:center; gap:2rem;
  min-height:300px; overflow:hidden;
  background:var(--gh-vc-tint); border-radius:var(--gh-vc-radius);
}
.gh-vc-copy{
  width:50%; flex:1 1 0; min-width:0; padding:32px;
  display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center;
}
.gh-vc-title{
  font-family:var(--serif); font-weight:500; color:var(--gh-vc-heading);
  font-size:clamp(1.3rem,3vw,2.2rem); line-height:1.25; letter-spacing:.002em; margin:0 0 4px;
}
.gh-vc-desc{margin:0}
.gh-vc-desc p{
  font-family:var(--accent); font-weight:400; color:#1c1c1c;
  font-size:clamp(.9rem,1.3vw,1.05rem); line-height:1.7; margin:0 0 1em;
}
.gh-vc-desc p:last-child{margin-bottom:0}
.gh-vc-media{
  width:50%; flex:1 1 0; min-width:0; position:relative; overflow:hidden; min-height:300px; align-self:stretch;
}
.gh-vc-media img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1s ease;
}
.gh-vc-card:hover .gh-vc-media img{transform:scale(1.05)}

/* CTA: gemhub.in .ml_button.button_primary as rendered by gh-design-system.css */
.gh-vc .gh-btn.gh-vc-cta{
  margin-top:16px; background:var(--gh-vc-btn); border:1px solid var(--gh-vc-btn); color:#fff;
  font-family:var(--accent); font-size:12px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  line-height:1; padding:12px 24px; min-height:48px; border-radius:4px;
  transition:background-color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease);
}
.gh-vc .gh-btn.gh-vc-cta:hover{
  background:var(--gh-vc-btn-hover); border-color:var(--gold); color:#fff;
  transform:translateY(-1px); box-shadow:0 8px 20px rgba(13,59,62,.18);
}
.gh-vc .gh-btn.gh-vc-cta:focus-visible{outline:2px solid var(--gold); outline-offset:2px}

/* Tablet 750-989px: stacked, copy above image (gemhub.in inline mobile CSS) */
@media (max-width:989px){
  .gh-vc-card{flex-direction:column; gap:1.5rem; min-height:0}
  .gh-vc-copy,.gh-vc-media{width:100%; flex:none}
  .gh-vc-media{min-height:0; max-height:350px; align-self:auto}
  .gh-vc-media img{position:static; height:auto; max-height:350px}
}
/* Mobile <750px */
@media (max-width:749px){
  .gh-vc-card{gap:.75rem}
  .gh-vc-copy{padding:24px 20px 28px}
  .gh-vc-media{max-height:220px}
  .gh-vc-media img{max-height:220px; border-radius:8px}
  .gh-vc-title{font-size:1.2rem}
  .gh-vc-desc p{font-size:.85rem}
  .gh-vc .gh-btn.gh-vc-cta{display:flex; width:100%; max-width:320px; margin:12px auto 0}
}
@media (max-width:479px){ .gh-vc-title{font-size:1.15rem} }
@media (prefers-reduced-motion:reduce){ .gh-vc-media img,.gh-vc .gh-btn.gh-vc-cta{transition:none} .gh-vc-card:hover .gh-vc-media img{transform:none} }