/* ==========================================================================
   THE PROJECT MBBS - HOMEPAGE, HERO & COORDINATE BLUEPRINT GRID
   ========================================================================== */

/* ==========================================================================
   ORIGINAL BLUEPRINT GRID LINES ACROSS HOMEPAGE (MATCHING BACKUP FILE)
   Exact 80px 80px distance layout with elegant edge mask
   ========================================================================== */
#view-home {
  position: relative !important;
  isolation: isolate !important;
}

#view-home::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background-size: 80px 80px !important;
  background-position: left top !important;
  display: block !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%) !important;
  mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%) !important;
}

/* Light & Navy Theme: backup transparency (0.028) dimmed 20% -> 0.022 */
.theme-navy #view-home::before,
.theme-light #view-home::before,
html[data-portal-theme="light"] #view-home::before,
.app.theme-light #view-home::before,
.app.theme-navy #view-home::before {
  background-image:
    linear-gradient(rgba(18, 45, 53, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18, 45, 53, 0.022) 1px, transparent 1px) !important;
  background-size: 80px 80px !important;
}

/* Dark Theme: backup dark transparency (0.02) dimmed 20% -> 0.016 */
.theme-dark #view-home::before,
html[data-portal-theme="dark"] #view-home::before,
.app.theme-dark #view-home::before {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.016) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.016) 1px, transparent 1px) !important;
  background-size: 80px 80px !important;
}

/* Seamless Hero: no card borders, no backgrounds, full grid visibility */
.public-hero,
.public-hero .hero,
#view-home .public-hero,
#view-home .public-hero .hero {
  background: transparent !important;
  background-image: none !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  position: relative !important;
  overflow: visible !important;
}

/* Ambient Curved Line removed for ultra-clean modern aesthetic */
.landing-atmosphere,
.ambient-curve,
.landing-graph {
  display: none !important;
}

.public-hero .hero-copy,
.public-hero .hero-cta-wrap,
.public-hero .hero-scope,
.public-hero .hero-highlight {
  position: relative !important;
  z-index: 2 !important;
}

/* Open study space -> Button (Theme Gradient) - ONLY on Landing */
.landing-access {
  display: none !important;
}

.landing .landing-access,
.app.landing .landing-access {
  background: linear-gradient(135deg, #f43f5e, #8b5cf6) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 18px rgba(244, 63, 94, 0.35) !important;
  padding: 9px 18px !important;
  border-radius: 999px !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  transition: transform 0.2s, box-shadow 0.2s !important;
}

.landing .landing-access:hover,
.app.landing .landing-access:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 22px rgba(244, 63, 94, 0.45) !important;
}

.app:not(.landing) .landing-access,
body:not(.landing) .landing-access {
  display: none !important;
}

/* Hero Highlight box matching CTA button widths */
.hero-highlight {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 297px;
  max-width: 100%;
  box-sizing: border-box !important;
  margin: 6px 0 20px;
  padding: 8px 16px;
  border-radius: 10px;
  border-left: 3px solid #f43f5e;
  background: linear-gradient(90deg, rgba(244, 63, 94, 0.10), rgba(139, 92, 246, 0.08));
}
.hero-highlight .highlight-star { display: none !important; }
.hero-highlight .highlight-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.hero-highlight .highlight-content span {
  font-size: 13px;
  font-weight: 650;
  line-height: 1.35;
  color: var(--ink);
  white-space: nowrap;
}
.hero-highlight .highlight-content strong {
  color: #f43f5e;
  font-weight: 800;
}
.hero-highlight .highlight-content small {
  font-size: 11.5px;
  color: var(--muted);
  font-weight: 500;
  white-space: nowrap;
}
.hero-cta-wrap{display:block}
.hero-scope{margin-top:14px;font-size:15px;font-weight:700;letter-spacing:.2px;color:var(--ink)}
.hero-scope strong{color:#f43f5e;font-weight:800}
.type-caret{display:inline-block;width:2px;height:1.05em;background:#f43f5e;margin-left:3px;vertical-align:-3px;animation:scopeBlink 1s steps(1) infinite}
@keyframes scopeBlink{50%{opacity:0}}
.hero-scope strong{color:var(--ink);font-weight:750}