/* assets/css/study-featurepanel.css
   Feature panel block for screenshot-style hero sections.
   Supports <featurepanel>, <feature>, and <iconrow>.
*/

.mk-study-shell .mk-featurepanel {
  margin: 28px 0;
  padding: 22px;
  border: 2px solid #111827;
  border-radius: 28px;
  background: #ffffff;
  box-shadow: 0 18px 36px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}

.mk-study-shell .mk-featurepanel-header {
  margin-bottom: 20px;
}

.mk-study-shell .mk-featurepanel-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(79, 70, 229, 0.10);
  color: #4338ca;
  font-size: 0.82rem;
  font-weight: 850;
}

.mk-study-shell .mk-featurepanel-header h2 {
  margin: 0;
  font-size: clamp(1.65rem, 2.4vw, 2.15rem);
  line-height: 1.08;
  letter-spacing: -0.045em;
  color: #020617;
}

.mk-study-shell .mk-featurepanel-grid {
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(360px, 1.1fr);
  gap: 22px;
  align-items: center;
}

.mk-study-shell .mk-featurepanel-image-right .mk-featurepanel-grid {
  grid-template-columns: minmax(360px, 1.1fr) minmax(320px, 0.9fr);
}

.mk-study-shell .mk-featurepanel-text-only .mk-featurepanel-grid {
  display: block;
}

.mk-study-shell .mk-featurepanel-figure {
  margin: 0;
  min-height: 280px;
  display: grid;
  place-items: center;
  padding: 22px;
  border: 2px solid #111827;
  border-radius: 28px;
  background: #ffffff;
}

.mk-study-shell .mk-featurepanel-figure img {
  max-width: 100%;
  max-height: 380px;
  object-fit: contain;
  display: block;
}

.mk-study-shell .mk-featurepanel-figure figcaption {
  margin-top: 10px;
  color: #64748b;
  font-size: 0.9rem;
  text-align: center;
}

.mk-study-shell .mk-featurepanel-text {
  padding: 4px 0;
}

.mk-study-shell .mk-featurepanel-text h3 {
  margin: 0 0 12px;
  font-size: 1.32rem;
  line-height: 1.2;
  letter-spacing: -0.03em;
  color: #020617;
}

.mk-study-shell .mk-featurepanel-copy p {
  margin: 0 0 14px;
  font-size: 1.04rem;
  line-height: 1.68;
  color: #0f172a;
}

.mk-study-shell .mk-featurepanel-copy ul,
.mk-study-shell .mk-featurepanel-copy ol {
  margin: 12px 0 0;
  padding-left: 22px;
}

.mk-study-shell .mk-featurepanel-copy li {
  margin: 8px 0;
  font-size: 1rem;
  line-height: 1.5;
  color: #1f2937;
}

.mk-study-shell .mk-featurepanel-iconrow {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 22px;
}

.mk-study-shell .mk-featurepanel-iconrow p {
  display: contents;
}

.mk-study-shell .mk-featurepanel-iconrow .mk-inline-image {
  width: 56px;
  height: 56px;
  max-width: 56px !important;
  max-height: 56px !important;
  object-fit: contain;
  padding: 9px;
  border: 2px solid #111827;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}

.mk-study-shell .mk-featurepanel-soft {
  border-color: rgba(15, 23, 42, 0.18);
  background: linear-gradient(135deg, #ffffff, #f8fafc);
}

.mk-study-shell .mk-featurepanel-soft .mk-featurepanel-figure,
.mk-study-shell .mk-featurepanel-soft .mk-featurepanel-iconrow .mk-inline-image {
  border-color: rgba(15, 23, 42, 0.22);
}

.mk-study-shell .mk-featurepanel-glyph {
  background:
    radial-gradient(circle at top right, rgba(79, 70, 229, 0.08), transparent 26rem),
    #ffffff;
}

.mk-study-shell .mk-featurepanel-clinical {
  background:
    radial-gradient(circle at top right, rgba(14, 165, 233, 0.10), transparent 26rem),
    #ffffff;
}

@media (max-width: 980px) {
  .mk-study-shell .mk-featurepanel-grid,
  .mk-study-shell .mk-featurepanel-image-right .mk-featurepanel-grid {
    grid-template-columns: 1fr;
  }

  .mk-study-shell .mk-featurepanel-figure {
    min-height: 220px;
  }
}

@media (max-width: 620px) {
  .mk-study-shell .mk-featurepanel {
    padding: 16px;
    border-radius: 22px;
  }

  .mk-study-shell .mk-featurepanel-figure {
    padding: 16px;
    border-radius: 20px;
  }
}


/* v1M3: featurepanel works inside the current reader/admin preview containers too.
   Older CSS targeted only .mk-study-shell, but the new unified reader renders
   pages inside .mk-study-article / .vidya-reader-content. */
.mk-study-article .mk-featurepanel,
.mg-render-preview .mk-featurepanel,
.vidya-reader-content .mk-featurepanel {
  margin: 28px 0;
  padding: 22px;
  border: 2px solid #111827;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 18px 36px rgba(15,23,42,.06);
  overflow: hidden;
}
.mk-study-article .mk-featurepanel-header,
.mg-render-preview .mk-featurepanel-header,
.vidya-reader-content .mk-featurepanel-header { margin-bottom:20px; }
.mk-study-article .mk-featurepanel-kicker,
.mg-render-preview .mk-featurepanel-kicker,
.vidya-reader-content .mk-featurepanel-kicker {
  display:inline-flex;align-items:center;gap:8px;margin-bottom:8px;padding:5px 10px;border-radius:999px;background:rgba(79,70,229,.10);color:#4338ca;font-size:.82rem;font-weight:850;
}
.mk-study-article .mk-featurepanel-header h2,
.mg-render-preview .mk-featurepanel-header h2,
.vidya-reader-content .mk-featurepanel-header h2 { margin:0;font-size:clamp(1.65rem,2.4vw,2.15rem);line-height:1.08;letter-spacing:-.045em;color:#020617; }
.mk-study-article .mk-featurepanel-grid,
.mg-render-preview .mk-featurepanel-grid,
.vidya-reader-content .mk-featurepanel-grid { display:grid;grid-template-columns:minmax(320px,.9fr) minmax(360px,1.1fr);gap:22px;align-items:center; }
.mk-study-article .mk-featurepanel-image-right .mk-featurepanel-grid,
.mg-render-preview .mk-featurepanel-image-right .mk-featurepanel-grid,
.vidya-reader-content .mk-featurepanel-image-right .mk-featurepanel-grid { grid-template-columns:minmax(360px,1.1fr) minmax(320px,.9fr); }
.mk-study-article .mk-featurepanel-text-only .mk-featurepanel-grid,
.mg-render-preview .mk-featurepanel-text-only .mk-featurepanel-grid,
.vidya-reader-content .mk-featurepanel-text-only .mk-featurepanel-grid { display:block; }
.mk-study-article .mk-featurepanel-figure,
.mg-render-preview .mk-featurepanel-figure,
.vidya-reader-content .mk-featurepanel-figure { margin:0;min-height:280px;display:grid;place-items:center;padding:22px;border:2px solid #111827;border-radius:28px;background:#fff; }
.mk-study-article .mk-featurepanel-figure img,
.mg-render-preview .mk-featurepanel-figure img,
.vidya-reader-content .mk-featurepanel-figure img { max-width:100%;max-height:380px;object-fit:contain;display:block; }
.mk-study-article .mk-featurepanel-text h3,
.mg-render-preview .mk-featurepanel-text h3,
.vidya-reader-content .mk-featurepanel-text h3 { margin:0 0 12px;font-size:1.32rem;line-height:1.2;letter-spacing:-.03em;color:#020617; }
.mk-study-article .mk-featurepanel-copy p,
.mg-render-preview .mk-featurepanel-copy p,
.vidya-reader-content .mk-featurepanel-copy p { margin:0 0 14px;font-size:1.04rem;line-height:1.68;color:#0f172a; }
.mk-study-article .mk-featurepanel-copy ul,
.mk-study-article .mk-featurepanel-copy ol,
.mg-render-preview .mk-featurepanel-copy ul,
.mg-render-preview .mk-featurepanel-copy ol,
.vidya-reader-content .mk-featurepanel-copy ul,
.vidya-reader-content .mk-featurepanel-copy ol { margin:12px 0 0;padding-left:22px; }
.mk-study-article .mk-featurepanel-copy li,
.mg-render-preview .mk-featurepanel-copy li,
.vidya-reader-content .mk-featurepanel-copy li { margin:8px 0;font-size:1rem;line-height:1.5;color:#1f2937; }
.mk-study-article .mk-featurepanel-iconrow,
.mg-render-preview .mk-featurepanel-iconrow,
.vidya-reader-content .mk-featurepanel-iconrow { display:flex;flex-wrap:wrap;gap:14px;margin-top:22px; }
.mk-study-article .mk-featurepanel-iconrow p,
.mg-render-preview .mk-featurepanel-iconrow p,
.vidya-reader-content .mk-featurepanel-iconrow p { display:contents; }
.mk-study-article .mk-featurepanel-iconrow .mk-inline-image,
.mg-render-preview .mk-featurepanel-iconrow .mk-inline-image,
.vidya-reader-content .mk-featurepanel-iconrow .mk-inline-image { width:56px;height:56px;max-width:56px!important;max-height:56px!important;object-fit:contain;padding:9px;border:2px solid #111827;border-radius:18px;background:#fff;box-shadow:0 10px 24px rgba(15,23,42,.08); }
.mk-study-article .mk-featurepanel-glyph,
.mg-render-preview .mk-featurepanel-glyph,
.vidya-reader-content .mk-featurepanel-glyph { background:radial-gradient(circle at top right, rgba(79,70,229,.08), transparent 26rem), #fff; }
@media(max-width:980px){
  .mk-study-article .mk-featurepanel-grid,.mg-render-preview .mk-featurepanel-grid,.vidya-reader-content .mk-featurepanel-grid,
  .mk-study-article .mk-featurepanel-image-right .mk-featurepanel-grid,.mg-render-preview .mk-featurepanel-image-right .mk-featurepanel-grid,.vidya-reader-content .mk-featurepanel-image-right .mk-featurepanel-grid{grid-template-columns:1fr;}
}