/* ============================================================
   MUSEF - THEME x LANGUAGE PREVIEW
   Sits in the home page Languages section, under the four
   language cards.

   Colours come from the Elementor palette that section already
   declares (--ink, --line, --paper, --orange-deep, --radius,
   --font-sans), each with a Musef token as fallback so the
   block still looks right if it is ever rendered elsewhere.
   ============================================================ */

.msf-gal{
  margin-top:40px;
  padding-top:34px;
  border-top:1px solid var(--line, var(--msf-line, #ECE3D1));
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
}

.msf-gal__title{
  margin:0 0 4px;
  /* --font-serif is an Elementor global variable, declared on :root by the
     kit stylesheet. It is what the home page's own heading classes read,
     so naming it here keeps this title in step with them automatically.
     The literal list is only the fallback for rendering outside that
     page, where the variable does not exist. */
  font-family:var(--font-serif, 'Montserrat', 'Poppins', 'Amiri', 'Noto Sans Gujarati', sans-serif);
  font-size:clamp(1.15rem, 2.2vw, 1.5rem);
  font-weight:700;
  color:var(--ink, var(--msf-ink, #211A14));
  text-align:center;
}

/* ---- the two button rows ---- */

.msf-gal__group{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  margin:0;
}

/* The buttons only do something once the script has run, so they stay
   out of the way until then; the caption under the frame still says
   what is on screen. */
.msf-gal__group{ display:none; }
.msf-js .msf-gal__group{ display:flex; }

.msf-gal__pill{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin:0;
  padding:9px 18px;
  min-height:var(--msf-tap, 44px);
  font-family:var(--font-sans, var(--msf-font, sans-serif));
  font-size:.85rem;
  font-weight:700;
  line-height:1.4;
  color:var(--ink, var(--msf-ink, #211A14));
  background:transparent;
  border:1.5px solid var(--line, var(--msf-line, #ECE3D1));
  border-radius:999px;
  cursor:pointer;
  transition:color .18s ease, background-color .18s ease, border-color .18s ease;
}

.msf-gal__pill:hover:not([disabled]){
  border-color:var(--orange-deep, var(--msf-accent, #D8511C));
}

.msf-gal__pill.is-on{
  color:#fff;
  background:var(--orange-deep, var(--msf-accent, #D8511C));
  border-color:var(--orange-deep, var(--msf-accent, #D8511C));
}

.msf-gal__pill:focus-visible{
  outline:2px solid var(--orange-deep, var(--msf-accent, #D8511C));
  outline-offset:3px;
}

.msf-gal__pill[disabled]{
  cursor:default;
  opacity:.55;
}

.msf-gal__soon{
  font-size:.66rem;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  padding:3px 8px;
  border-radius:999px;
  color:var(--ink-soft, var(--msf-muted, #6E6155));
  background:rgba(0,0,0,.06);
  white-space:nowrap;
}

/* ---- the frame ---- */

.msf-gal__stage{
  width:100%;
  max-width:860px;
  margin:6px 0 0;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.msf-gal__img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:16 / 9;
  object-fit:cover;
  border-radius:8px;
  background:#0B0B0D;
}

/* The swap is a new file over the wire, so the old frame is held until
   the new one paints rather than flashing the backdrop. */
.msf-gal__img.is-loading{ opacity:.55; }
.msf-gal__img{ transition:opacity .2s ease; }

.msf-gal__cap{
  margin:0;
  font-family:var(--font-sans, var(--msf-font, sans-serif));
  font-size:.85rem;
  color:var(--ink-soft, var(--msf-muted, #6E6155));
  text-align:center;
}

@media (max-width:600px){
  .msf-gal{ margin-top:30px; padding-top:26px; }
  .msf-gal__pill{ padding:8px 14px; font-size:.8rem; }
  .msf-gal__soon{ font-size:.6rem; padding:2px 6px; }
}

@media (prefers-reduced-motion:reduce){
  .msf-gal__pill,
  .msf-gal__img{ transition:none; }
}

/* The hero button jumps here. The header is sticky, so the landing point is
   pushed down clear of it, otherwise the gallery's heading arrives underneath. */
.msf-gal{
  scroll-margin-top:calc(var(--msf-r1, 108px) + 20px);
}