/* =========================================================================
   FEIRAN SHOWCASE — scoped Elementor widget styles
   Namespaced under .feiran-showcase-widget so it never collides with the
   host theme. Mirrors the "05 — Showcase" block on the Feiran homepage.
   ========================================================================= */

.feiran-showcase-widget{
  /* Brand tokens — overridable from the Style tab */
  --fsh-red-600:#d92231;
  --fsh-blue:#1b4fe8;
  --fsh-navy-950:#0a1024;
  --fsh-navy-900:#101a36;
  --fsh-navy-800:#172447;
  --fsh-ink-900:#101a36;
  --fsh-ink-500:#5d6478;
  --fsh-ink-400:#8a8f9c;
  --fsh-line:#e1e2e6;
  --fsh-line-strong:#cdd0d6;
  --fsh-bg-elev:#f6f7f9;
  --fsh-white:#ffffff;

  --fsh-radius:18px;
  --fsh-content-max:1320px;

  --fsh-font: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fsh-mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --fsh-easing:cubic-bezier(.2,.7,.2,1);

  font-family:var(--fsh-font);
  color:var(--fsh-ink-900);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
.feiran-showcase-widget *,
.feiran-showcase-widget *::before,
.feiran-showcase-widget *::after{ box-sizing:border-box; }

/* ---- Section shell --------------------------------------------------- */
.feiran-showcase{
  width:100%;
  background:var(--fsh-bg-elev);
  border-top:1px solid var(--fsh-line);
  border-bottom:1px solid var(--fsh-line);
}
.feiran-showcase__container{
  width:100%;
  max-width:var(--fsh-content-max);
  margin:0 auto;
}

/* ---- Section head ---------------------------------------------------- */
.feiran-showcase__head{
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:48px;
  align-items:end;
  margin-bottom:56px;
}
.feiran-showcase__eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--fsh-mono);
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--fsh-ink-500);
  margin:0;
}
.feiran-showcase__eyebrow::before{
  content:"";
  width:24px;height:1px;
  background:var(--fsh-red-600);
  opacity:.9;
}
.feiran-showcase__title{
  margin:18px 0 0;
  font-size:clamp(28px, 3vw, 44px);
  font-weight:600;
  line-height:1.05;
  letter-spacing:-0.02em;
  color:var(--fsh-ink-900);
  text-wrap:balance;
}
.feiran-showcase__lede{
  margin:0;
  font-size:17px;
  line-height:1.55;
  color:var(--fsh-ink-500);
  max-width:54ch;
  text-wrap:pretty;
}

/* ---- Grid ------------------------------------------------------------ */
.feiran-showcase__grid{
  display:grid;
  grid-template-columns:2fr 1fr;
  gap:16px;
}

/* ---- Feature --------------------------------------------------------- */
.feiran-showcase__feature{
  background:var(--fsh-navy-900);
  border-radius:var(--fsh-radius);
  min-height:520px;
  position:relative;
  overflow:hidden;
  color:#fff;
  padding:36px;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  isolation:isolate;
}
.feiran-showcase__photo{
  position:absolute;inset:0;z-index:0;
  background-size:cover;
  background-position:center;
}
/* Fallback texture when no photo is set */
.feiran-showcase__feature.no-photo .feiran-showcase__photo{
  background:
    repeating-linear-gradient(120deg, rgba(255,255,255,.04) 0 18px, transparent 18px 36px),
    radial-gradient(80% 60% at 30% 30%, rgba(27,79,232,.45), transparent 60%),
    linear-gradient(180deg, var(--fsh-navy-800), var(--fsh-navy-950));
}
.feiran-showcase__scrim{
  position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg, rgba(10,16,36,.25) 0%, rgba(10,16,36,.55) 50%, rgba(10,16,36,.92) 100%);
}
.feiran-showcase__grid-overlay{
  position:absolute;inset:0;z-index:1;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(70% 60% at 70% 70%, #000, transparent);
          mask-image:radial-gradient(70% 60% at 70% 70%, #000, transparent);
}
.feiran-showcase__label{
  position:absolute;top:24px;left:24px;z-index:2;
  font-family:var(--fsh-mono);font-size:11px;
  color:rgba(255,255,255,.5);
  letter-spacing:.14em;
  text-transform:uppercase;
}
.feiran-showcase__play{
  position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);
  width:88px;height:88px;border-radius:50%;
  background:rgba(255,255,255,.92);
  color:var(--fsh-navy-900);
  display:grid;place-items:center;
  border:0;padding:0;
  box-shadow:0 30px 60px -20px rgba(0,0,0,.5);
  cursor:pointer;
  transition:transform .3s var(--fsh-easing), background .25s;
  z-index:2;
}
.feiran-showcase__play:hover{ transform:translate(-50%,-50%) scale(1.06); background:#fff; }
.feiran-showcase__play::before{
  content:"";display:block;width:0;height:0;
  border-left:18px solid currentColor;
  border-top:11px solid transparent;
  border-bottom:11px solid transparent;
  margin-left:4px;
}
.feiran-showcase__content{ position:relative; z-index:2; }
.feiran-showcase__feature-title{
  margin:0 0 10px;
  font-size:36px;
  font-weight:600;
  letter-spacing:-.02em;
  line-height:1.08;
  max-width:14ch;
  color:#fff;
}
.feiran-showcase__feature-desc{
  margin:0 0 20px;
  color:rgba(255,255,255,.72);
  font-size:15.5px;
  line-height:1.55;
  max-width:46ch;
}
.feiran-showcase__feature-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#fff;
  font-weight:500;
  font-size:15px;
  transition:gap .25s var(--fsh-easing);
}
.feiran-showcase__feature-link:hover{ gap:14px; }
.feiran-showcase__feature-link svg{ width:18px;height:18px;display:block; }

/* ---- Side cards ------------------------------------------------------ */
.feiran-showcase__side{
  display:grid;
  grid-template-rows:repeat(3,1fr);
  gap:16px;
}
.feiran-showcase-card{
  background:var(--fsh-white);
  border:1px solid var(--fsh-line);
  border-radius:14px;
  padding:22px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  transition:border-color .25s, transform .35s var(--fsh-easing);
  min-height:160px;
  color:inherit;
  text-decoration:none;
}
.feiran-showcase-card:hover{ border-color:var(--fsh-line-strong); transform:translateY(-2px); }
.feiran-showcase-card__eyebrow{
  font-family:var(--fsh-mono);font-size:11px;
  color:var(--fsh-ink-400);
  letter-spacing:.14em;
  text-transform:uppercase;
}
.feiran-showcase-card__title{
  margin:8px 0 0;
  font-size:18px;
  font-weight:600;
  letter-spacing:-.01em;
  color:var(--fsh-ink-900);
}
.feiran-showcase-card__desc{
  margin:6px 0 0;
  font-size:13.5px;
  color:var(--fsh-ink-500);
  line-height:1.5;
}

/* ---- Entrance reveal ------------------------------------------------- */
.feiran-showcase [data-fsh-reveal]{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s var(--fsh-easing), transform .7s var(--fsh-easing);
}
.feiran-showcase [data-fsh-reveal].is-in{
  opacity:1;
  transform:translateY(0);
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */
@media (max-width:980px){
  .feiran-showcase__head{
    grid-template-columns:1fr;
    gap:20px;
    margin-bottom:40px;
  }
  .feiran-showcase__grid{ grid-template-columns:1fr; }
  .feiran-showcase__feature{ min-height:420px; }
}
@media (max-width:680px){
  .feiran-showcase__feature{ padding:24px; min-height:360px; }
  .feiran-showcase__feature-title{ font-size:28px; }
  .feiran-showcase__lede{ font-size:16px; }
  .feiran-showcase__play{ width:72px;height:72px; }
}

@media (prefers-reduced-motion: reduce){
  .feiran-showcase *{
    animation:none !important;
    transition:none !important;
  }
  .feiran-showcase [data-fsh-reveal]{ opacity:1 !important; transform:none !important; }
}