/* ============================================================
   MUSEF - COMPANY CREDENTIALS
   The last block on the home page: who the company is, what it
   is recognized as, and the registration numbers a buyer can
   check for themselves.

   Colours and the wrap width come from the Elementor global
   variables the rest of the page uses, each with a Musef token
   as fallback so the block still looks right if it is ever
   rendered somewhere those are not declared.
   ============================================================ */

.msf-cred{
  background:var(--cream, #FBF6EC);
  border-top:1px solid var(--line, var(--msf-line, #ECE3D1));
  padding:clamp(48px, 6vw, 80px) 20px;
}

.msf-cred__inner{
  width:100%;
  max-width:var(--wrap, 1180px);
  margin:0 auto;
}

.msf-cred__eyebrow{
  margin:0 0 10px;
  font-family:var(--font-sans, var(--msf-font, sans-serif));
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--orange-deep, var(--msf-accent, #D8511C));
}

.msf-cred__title{
  margin:0 0 12px;
  font-family:var(--font-serif, var(--msf-font, sans-serif));
  font-size:clamp(1.6rem, 3.4vw, 2.5rem);
  font-weight:700;
  line-height:1.25;
  color:var(--ink, var(--msf-ink, #211A14));
}

.msf-cred__lede{
  margin:0 0 34px;
  max-width:46em;
  font-family:var(--font-sans, var(--msf-font, sans-serif));
  font-size:1rem;
  line-height:1.7;
  color:var(--ink-soft, var(--msf-muted, #6E6155));
}

/* ---- the two credential cards ---- */

.msf-cred__cards{
  list-style:none;
  margin:0 0 34px;
  padding:0;
  display:grid;
  /* Five certificates. auto-fit would give four across and leave the
     fifth stranded alone on its own row; three across puts it with a
     neighbour instead. Below that the columns simply fall away. */
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:18px;
}

.msf-cred__card{
  background:var(--paper, #FFFFFF);
  border:1px solid var(--line, var(--msf-line, #ECE3D1));
  border-radius:var(--radius, 16px);
  padding:24px 26px;
}

.msf-cred__mark{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:46px;
  height:46px;
  margin:0 0 14px;
  border-radius:50%;
  color:var(--orange-deep, var(--msf-accent, #D8511C));
  background:rgba(216,81,28,.08);
  background:color-mix(in srgb, var(--orange-deep, #D8511C) 8%, transparent);
}

.msf-cred__name{
  margin:0 0 6px;
  font-family:var(--font-serif, var(--msf-font, sans-serif));
  font-size:1.15rem;
  font-weight:700;
  line-height:1.3;
  color:var(--ink, var(--msf-ink, #211A14));
}

.msf-cred__what{
  margin:0;
  font-family:var(--font-sans, var(--msf-font, sans-serif));
  font-size:.92rem;
  line-height:1.6;
  color:var(--ink-soft, var(--msf-muted, #6E6155));
}

/* Only printed once there is a number to print. */
.msf-cred__ref{
  margin:10px 0 0;
  font-family:var(--font-sans, var(--msf-font, sans-serif));
  font-size:.85rem;
  font-weight:600;
  color:var(--ink, var(--msf-ink, #211A14));
}

@media (min-width:880px){
  .msf-cred__cards{ grid-template-columns:repeat(3, 1fr); }
}

/* ---- the certificate itself ----
   One certificate here is landscape and the other portrait. Given a fixed
   box they would read as a mismatch: the landscape page filling it, the
   portrait one a narrow strip adrift in the middle. So the frame has no
   width of its own - it shrinks to the page inside it - and the pages are
   matched on HEIGHT instead. Two documents at the same scale, each its own
   shape, centred. Nothing is cropped: a certificate with a corner cut off
   is worse than no certificate at all.

   max-width keeps a wide landscape page inside a narrow phone; when that
   bites, width wins and the height simply comes out shorter. ---- */

/* The stage reserves a constant height whatever shape the page inside is,
   so every card's heading starts on the same line. Without it a landscape
   certificate - capped by the column width rather than by height - sits
   shorter than a portrait one beside it and drags its text up with it. */
.msf-cred__stage{
  display:flex;
  align-items:center;
  justify-content:center;
  height:300px;
  margin:0 0 18px;
}

.msf-cred__frame{
  display:block;
  width:-moz-fit-content;
  width:fit-content;
  max-width:100%;
  max-height:100%;
  margin:0;
  border:1px solid var(--line, var(--msf-line, #ECE3D1));
  border-radius:10px;
  background:#FFFFFF;
  overflow:hidden;
  line-height:0; /* kills the inline-image gap under the page */
}

.msf-cred__scan{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:300px;
}

@media (max-width:600px){
  .msf-cred__stage{ height:240px; }
  .msf-cred__scan{ max-height:240px; }
}

/* ---- the registration numbers ---- */

.msf-cred__reg{
  margin:0;
  padding:22px 0 0;
  border-top:1px solid var(--line, var(--msf-line, #ECE3D1));
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
  gap:18px 26px;
}

.msf-cred__row{ margin:0; }

.msf-cred__dt{
  margin:0 0 3px;
  font-family:var(--font-sans, var(--msf-font, sans-serif));
  font-size:.7rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-soft, var(--msf-muted, #6E6155));
}

.msf-cred__dd{
  margin:0;
  font-family:var(--font-sans, var(--msf-font, sans-serif));
  font-size:.95rem;
  line-height:1.5;
  color:var(--ink, var(--msf-ink, #211A14));
  /* CIN and GSTIN are long unbroken strings; let them wrap rather than
     push the grid wider than the page on a phone. */
  overflow-wrap:anywhere;
}

@media (max-width:600px){
  .msf-cred__card{ padding:20px 20px; }
  .msf-cred__reg{ gap:16px 20px; }
}