/* ======================================================================
   MRHG — Astra Handy Skin
   Purpose: Make MRHG Media Containers look like Handy cards in Astra.
   Scope: Front-end only. No opinionated typography—lets Astra control fonts.
   Customize brand colors via CSS variables below.
   ====================================================================== */
:root{
  --mrhg-ink:#1b1f24;
  --mrhg-muted:#6b7280;
  --mrhg-bg:#ffffff;
  --mrhg-border:#e9ecf1;
  --mrhg-accent:#0b63f6;   /* primary */
  --mrhg-accent-ink:#ffffff;
  --mrhg-soft:#f7f8fa;     /* light band */
  --mrhg-radius:16px;
  --mrhg-shadow:0 2px 10px rgba(0,0,0,.04);
  --mrhg-shadow-lg:0 10px 30px rgba(0,0,0,.12);
}

/* ---------- Utility wrappers (drop these into Gutenberg Groups or Elementor Sections) ---------- */
.mhg-wrap{max-width:1200px;margin-inline:auto;padding:clamp(16px,2vw,24px);}
.mhg-section{padding:clamp(40px,6vw,80px) 0;}
.mhg-muted{background:var(--mrhg-soft);}

/* ---------- Grid system (matches Handy feel) ---------- */
.mhg-grid{display:grid;gap:clamp(12px,2vw,20px);}
.mhg-cols-1{grid-template-columns:1fr}
.mhg-cols-2{grid-template-columns:repeat(2,1fr)}
.mhg-cols-3{grid-template-columns:repeat(3,1fr)}
.mhg-cols-4{grid-template-columns:repeat(4,1fr)}
.mhg-cols-5{grid-template-columns:repeat(5,1fr)}
.mhg-cols-6{grid-template-columns:repeat(6,1fr)}
@media (max-width:1024px){.mhg-cols-4,.mhg-cols-5,.mhg-cols-6{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.mhg-cols-2,.mhg-cols-3,.mhg-cols-4,.mhg-cols-5,.mhg-cols-6{grid-template-columns:1fr}}

/* ---------- Card base (used by Media Containers shortcode output) ---------- */
.mrhg-cont{position:relative;background:var(--mrhg-bg);border:1px solid var(--mrhg-border);
  border-radius:var(--mrhg-radius);overflow:hidden;box-shadow:var(--mrhg-shadow);
  transition:transform .12s ease, box-shadow .12s ease;}
.mrhg-cont:hover{transform:translateY(-2px);box-shadow:var(--mrhg-shadow-lg);}
.mrhg-cont .mrhg-cont-img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:#f3f4f6}

/* ---------- Caption + CTA ---------- */
.mrhg-cont-caption{padding:14px 16px}
.mrhg-cont-title{margin:0 0 6px 0;font-size:1.05rem;line-height:1.3;color:var(--mrhg-ink)}
.mrhg-cont-btn{display:inline-flex;align-items:center;gap:8px;margin-top:8px;padding:12px 14px;
  border-radius:12px;background:var(--mrhg-accent);color:var(--mrhg-accent-ink);
  text-decoration:none;font-weight:700;border:0;box-shadow:none}
.mrhg-cont-btn:hover{filter:brightness(1.05)}

/* ---------- Full-card link overlay (clickable card) ---------- */
.mrhg-cont-link{position:absolute;inset:0;z-index:1}

/* ---------- Handy-style variants ---------- */
/* Overlay caption variant: add class .mhg-overlay on the shortcode container */
.mhg-overlay .mrhg-cont{color:#fff}
.mhg-overlay .mrhg-cont-caption{position:absolute;left:0;right:0;bottom:0;
  background:linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,0) 55%); color:#fff;}
.mhg-overlay .mrhg-cont-title{color:#fff}

/* Minimal tile (image + title on hover) */
.mhg-minimal .mrhg-cont-caption{display:none}
.mhg-minimal .mrhg-cont:hover .mrhg-cont-caption{display:block;position:absolute;left:0;right:0;bottom:0;
  padding:10px 12px;background:linear-gradient(to top, rgba(0,0,0,.45), rgba(0,0,0,0) 60%);}
.mhg-minimal .mrhg-cont-title{color:#fff}

/* Pill button for "See all" / filter controls */
.mhg-pill{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border-radius:999px;
  border:1px solid var(--mrhg-border);background:var(--mrhg-bg)}

/* ---------- Bands for "How it works" style ---------- */
.mhg-how .mhg-step{display:flex;gap:12px;align-items:flex-start}
.mhg-how .mhg-icon{width:40px;height:40px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  border-radius:10px;border:1px solid var(--mrhg-border);background:var(--mrhg-bg)}

/* ---------- Astra niceties ---------- */
.ast-container .mhg-wrap{max-width:1200px;padding-inline:clamp(16px,2vw,24px)}
.ast-container .mhg-section{padding:clamp(40px,6vw,80px) 0}
/* Remove double padding when using Elementor sections */
.elementor-section .mhg-wrap{padding-inline:0}

/* ---------- Badges / trust strip ---------- */
.mhg-trust{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:center}
.mhg-trust li{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:12px;
  background:var(--mrhg-bg);border:1px solid var(--mrhg-border)}