/* ==== INSIDER LIBRARY — MOCKUP-PERFECT OVERRIDES ==== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Poppins:wght@700&display=swap');

#insider-library { --teal:#008577; --orange:#FF6801; --yellow:#FFAE00; --dark:#006157; --light:#FFF6EB; --text:#333; --white:#fff; }
#insider-library, #insider-library * { box-sizing: border-box; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; }

#insider-library.container {
  max-width: 1200px;
  padding: 48px 24px;
}
#insider-library h2 {
  font-family: Poppins, Inter, sans-serif;
  font-weight: 700;
  font-size: 2.25rem;
  text-align: center;
  margin: 0 0 8px;
  color: var(--text);
}
#insider-library .section-intro {
  text-align: center;
  color: #555;
  max-width: 700px;
  margin: 0 auto 40px;
}

/* Grid like mockup: large left card + 2x2 on right */
#insider-library .insider-library-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: auto;
  gap: 32px;
}

/* ---------- Large Feature Card ---------- */
#insider-library .large-card {
  grid-column: 1/2;
  grid-row: 1/3;
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 5px 15px rgba(0,0,0,.10);
  background: #e9ecef;
}
#insider-library .large-card img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
#insider-library .large-card-content {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 28px;
  background: linear-gradient(to top, rgba(0,0,0,0.88) 20%, rgba(0,0,0,0.40) 55%, transparent 85%);
  color: var(--white);
}
#insider-library .large-card-content h3 {
    color: white;
    font-weight: 700;
  margin: 0 0 8px;
  font-size: 1.8rem;
  font-family: Poppins, Inter, sans-serif;
}
#insider-library .large-card-content p { margin: 0 0 8px; }
#insider-library .view-now-link {
  font-weight: 700;
  color: var(--yellow);
  text-decoration: none;
}

/* ---------- Right 2x2 Small Cards ---------- */
#insider-library .small-card-grid {
  grid-column: 2/3;
  grid-row: 1/3;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
#insider-library .small-card {
  background: var(--white);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0,0,0,.08);
  transition: transform .25s ease, box-shadow .25s ease;
}
#insider-library .small-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,.12);
}

/* Image area matches mockup aspect & rounded top corners */
#insider-library .small-card-image-container { position: relative; }
#insider-library .small-card-image-container img {
  width: 100%;
  height: 210px;               /* mockup-like height */
  object-fit: cover;
  display: block;
  border-radius: 16px 16px 0 0;
}

/* Gated overlay (lock) identical to mockup */
#insider-library .gated-overlay {
  position: absolute; inset: 0;
  background: rgba(0,97,87,0.85);
  color: var(--white);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: 16px;
}

/* Content block */
#insider-library .small-card-content {
  padding: 18px 20px 16px;
  text-align: center;
}
#insider-library .small-card-content h4 {

  font-family: Poppins, Inter, sans-serif;
  font-size: 1.05rem;
  margin: 0 0 6px;
  color: var(--text);
}
#insider-library .small-card-content p {
  margin: 0 0 14px;
  font-size: .95rem;
  color: #666;
}

.gated-overlay h4 {
    margin-top: 5px;
    color: white;
}

/* Buttons: pill, no wrapping, correct hover */
#insider-library .btn {
  display: inline-block;
  padding: 10px 18px;
  border-radius: 50px;
  border: 2px solid transparent;
  text-decoration: none;
  font-weight: 700;
  font-size: .95rem;
  line-height: 1;
  white-space: nowrap;           /* <<< prevents vertical wrapping */
  cursor: pointer;
  transition: transform .15s ease, background-color .15s ease, color .15s ease;
}
#insider-library .btn-primary { background: var(--orange); color: var(--white); }
#insider-library .btn-primary:hover { background: var(--yellow); color: var(--text); transform: translateY(-2px); }
#insider-library .btn-secondary { background: transparent; color: var(--teal); border-color: var(--teal); }
#insider-library .btn-secondary:hover { background: var(--teal); color: var(--white); transform: translateY(-2px); }

/* Meta (avatar + name + Book a Date) clean row like mockup */
#insider-library .il-video-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 20px 18px;
  margin-top: 2px;
  flex-wrap: nowrap;             /* <<< keeps button on one line */
}
#insider-library .il-leader-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  object-fit: cover; border: 2px solid #e0e0e0;
}
#insider-library .il-leader-info { display: flex; align-items: center; gap: 10px; }
#insider-library .il-name { font-weight: 700; font-size: .95rem; color: var(--text); }

/* Hover “lift” on large card too */
/* Smooth, small-card–style hover for the large (hero) card */
#insider-library .large-card {
  transition: transform .25s ease, box-shadow .25s ease;
  will-change: transform;                 /* smoother GPU compositing */
}

#insider-library .large-card:hover {
  transform: translateY(-5px);            /* same motion as small cards */
  box-shadow: 0 10px 20px rgba(0,0,0,.12);
}

/* Optional: subtle image zoom for a premium feel */
#insider-library .large-card img {
  transition: transform .4s ease;
  transform-origin: center center;
}
#insider-library .large-card:hover img {
  transform: scale(1.03);
}


/* ---------- Responsive like mockup ---------- */
@media (max-width: 992px) {
  #insider-library .insider-library-grid { grid-template-columns: 1fr; }
  #insider-library .large-card { grid-column: auto; grid-row: auto; }
  #insider-library .small-card-grid { grid-column: auto; grid-row: auto; grid-template-columns: 1fr; }
}

/* ===== Mockup modal ===== */
.ilx-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:10000;display:none;align-items:center;justify-content:center;padding:24px}
.ilx-modal{background:#fff;border-radius:16px;max-width:1100px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.35);position:relative;padding:24px}
.ilx-modal-close{position:absolute;right:14px;top:8px;background:transparent;border:0;font-size:2rem;line-height:1;cursor:pointer;color:#777}
.ilx-modal-layout{display:grid;grid-template-columns:2.5fr 1fr;gap:24px}
.ilx-video-title{font-family:Poppins,Inter,sans-serif;font-weight:700;font-size:1.5rem;margin:0 0 12px;color:#333}
.ilx-video-frame{background:#222;border-radius:12px;overflow:hidden}
.ilx-video-frame iframe{width:100%;height:52vh;border:0;display:block}
.ilx-video-placeholder{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;color:#bbb}
.ilx-video-desc{color:#444;margin:14px 0 4px}
.ilx-divider{height:1px;background:#eee;margin:16px 0}
.ilx-feedback{display:flex;align-items:center;gap:10px;font-weight:700}
.ilx-thumb{background:transparent;border:0;font-size:1.3rem;cursor:pointer}
.ilx-modal-footer{display:flex;justify-content:space-between;align-items:center;margin-top:16px}
.ilx-leader{display:flex;align-items:center;gap:10px}
.ilx-leader-avatar{width:42px;height:42px;border-radius:50%;object-fit:cover}
.ilx-leader-name{font-weight:700;color:#333}
.ilx-book{display:inline-block;padding:12px 18px;border-radius:12px;background:#FF6801;color:#fff;text-decoration:none;font-weight:700;box-shadow:0 8px 18px rgba(255,104,1,.25)}
.ilx-book:hover{background:#FFAE00;color:#333}
.ilx-modal-aside{padding-top:10px}
.ilx-aside-title{font-weight:700;color:#555;margin-bottom:10px}
.ilx-related-item{display:flex;gap:10px;align-items:center;border-radius:10px;padding:8px;cursor:pointer}
.ilx-related-item:hover{background:#f6f6f6}
.ilx-related-item.is-playing{background:#fff3e2}
.ilx-related-thumb{width:64px;height:40px;object-fit:cover;border-radius:6px;flex-shrink:0}
.ilx-related-title{font-size:.9rem;font-weight:700;color:#333;line-height:1.25}
@media (max-width: 992px){.ilx-modal-layout{grid-template-columns:1fr}.ilx-video-frame iframe{height:40vh}}