/* ============================================================
   AI SUMMARY CARD — ai-summary.css
   Brahmajnana | astrologershankarprasad.in

   Standalone stylesheet for render_ai_summary() output.
   Imported by style.css — do not duplicate in main sheet.

   Design: Celestial Glow Theme
   • Background: white → light cream gradient
   • Top border: animated maroon→gold→maroon flow (4px)
   • Bullets: 2-col grid desktop, 1-col mobile
   • Typography: Poppins label style (caps, letter-spaced)
   • Performance: no JS, pure CSS, < 3KB unminified
   • CLS prevention: no dynamic height shifts
============================================================ */

/* ── CSS VARIABLES (inherit from :root, fallbacks defined) ── */
.ais-card {
  --ais-bg-start:    #ffffff;
  --ais-bg-end:      #fff9f0;
  --ais-border:      var(--gold-lt, #fde8c0);
  --ais-maroon:      var(--maroon, #800000);
  --ais-gold:        var(--gold,   #F5A623);
  --ais-text:        var(--dark,   #1A1A1A);
  --ais-muted:       var(--muted,  #777);
  --ais-sf:          var(--sf,     #E8620A);
  --ais-radius:      14px;
  --ais-pad:         24px;
  --ais-shadow-base: 0 10px 30px rgba(232, 98, 10, 0.05);
  --ais-shadow-hover:0 15px 40px rgba(232, 98, 10, 0.12);
}

/* ── CARD WRAPPER ── */
.ais-card {
  background: linear-gradient(145deg, var(--ais-bg-start), var(--ais-bg-end));
  border: 1px solid var(--ais-border);
  border-radius: var(--ais-radius);
  padding: var(--ais-pad);
  position: relative;
  margin: 20px 0;
  box-shadow: var(--ais-shadow-base);
  overflow: hidden;                     /* clips the ::before glow bar */
  /* CLS prevention: no height transition, only transform + shadow */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /* Reserve minimum height so card doesn't shift layout on render */
  min-height: 140px;
  contain: layout style;               /* CSS containment — isolate reflows */
}

.ais-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--ais-shadow-hover);
}

/* ── ANIMATED TOP BORDER (Celestial Glow) ── */
.ais-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(
    90deg,
    var(--ais-maroon) 0%,
    var(--ais-gold)   40%,
    var(--ais-maroon) 80%,
    var(--ais-gold)   100%
  );
  background-size: 200% auto;
  animation: aisGlow 4s linear infinite;
  /* GPU layer — prevents main thread repaints */
  will-change: background-position;
  transform: translateZ(0);
}

@keyframes aisGlow {
  0%   { background-position:   0% center; }
  100% { background-position: 200% center; }
}

/* ── HEADING ROW ── */
.ais-heading-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.ais-label {
  color: var(--ais-gold);
  font-size: 1rem;
  line-height: 1;
  flex-shrink: 0;
}

.ais-heading-text {
  font-family: 'Poppins', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--ais-maroon);
  text-transform: uppercase;
  letter-spacing: 1.3px;
  background: rgba(128, 0, 0, 0.05);
  padding: 4px 12px;
  border-radius: 20px;
  line-height: 1.4;
  /* Prevent text overflow on narrow screens */
  word-break: break-word;
  overflow-wrap: break-word;
}

/* ── SUMMARY PARAGRAPH ── */
.ais-summary {
  font-family: 'Poppins', sans-serif;
  font-size: 0.93rem;
  line-height: 1.8;
  color: var(--ais-text);
  margin: 0 0 14px 0;
}

.ais-summary strong { color: var(--ais-text); }
.ais-summary a      { color: var(--ais-sf); font-weight: 600; }
.ais-summary a:hover { text-decoration: underline; }

/* ── BULLET GRID ── */
.ais-bullets {
  list-style: none;
  padding: 0;
  margin: 0 0 14px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;   /* 2-col desktop */
  gap: 10px 20px;
}

.ais-bullet-item {
  display: flex;
  align-items: flex-start;
  gap: 7px;
  font-family: 'Poppins', sans-serif;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--ais-muted);
}

.ais-bullet-item strong {
  color: var(--ais-text);
  font-weight: 600;
}

.ais-dot {
  color: var(--ais-gold);
  font-size: 0.85rem;
  flex-shrink: 0;
  margin-top: 2px;
}

/* ── VERIFIED FOOTER LINE ── */
.ais-footer {
  padding-top: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  font-family: 'Poppins', sans-serif;
  font-size: 0.73rem;
  color: var(--ais-muted);
  line-height: 1.6;
}

.ais-footer strong { color: var(--ais-text); }
.ais-footer a       { color: var(--ais-sf); font-weight: 600; }
.ais-footer a:hover  { text-decoration: underline; }

/* ── PLACEMENT HELPER CLASSES ── */

/* Use .ais-card--service on service pages for tighter top margin */
.ais-card--service {
  margin: 16px 0 28px 0;
}

/* Use .ais-card--location on location pages */
.ais-card--location {
  margin: 16px 0 32px 0;
}

/* Use .ais-card--compact for sidebar or narrow columns */
.ais-card--compact {
  padding: 18px 20px;
  min-height: 0;
}

.ais-card--compact .ais-bullets {
  grid-template-columns: 1fr;      /* always 1-col in compact mode */
}

.ais-card--compact .ais-heading-text {
  font-size: 0.66rem;
}

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .ais-bullets {
    grid-template-columns: 1fr;    /* stack to 1-col on mobile */
  }

  .ais-card {
    padding: 18px 16px;
    margin: 16px 0;
  }

  .ais-heading-text {
    font-size: 0.68rem;
    letter-spacing: 1px;
  }

  .ais-summary {
    font-size: 0.88rem;
  }
}

@media (max-width: 480px) {
  .ais-card {
    border-radius: 10px;
  }

  .ais-bullet-item {
    font-size: 0.82rem;
  }
}

/* ── PRINT STYLES ── */
@media print {
  .ais-card {
    box-shadow: none;
    border: 1px solid #ccc;
  }
  .ais-card::before {
    animation: none;
    background: #800000;
  }
}