/* =================================================================
   TAMIL ASTROLOGY ARCHIVE — SHARED ARTICLE TEMPLATE STYLES
   Path: tamil-astrology/css/tamil-astrology.css
   Used by: every page inside the tamil-astrology/ folder
   (horary-in-astrology.html, kp-astrology-horary-chart-technique.html,
   and all future archive pages placed in this folder)

   This file styles the common article template shared across this
   whole folder (hero band, article typography, highlight box,
   example cards, rules list, bridge box). Do NOT duplicate this
   into a new file per page — add new pages' markup using these
   same classes so every page updates together from one place.

   Nav bar + footer styling still comes from the shared root files:
   ../css/ownstyle.css and ../css/nav-premium.css
   ================================================================= */

/* Tamil-friendly webfont, scoped to this page's content only */
.art-hero-band,
.art-content-section {
  font-family: 'Noto Sans Tamil', 'Noto Sans', system-ui, sans-serif;
}

/* -----------------------------------------------------------------
   1. HERO INTRO BAND (purple gradient, sits below photo+carousel row)
   ----------------------------------------------------------------- */

.art-hero-band {
  background: linear-gradient(135deg, #f3e8ff 0%, #fbeaf1 100%);
  padding: 48px 20px 52px;
  text-align: center;
  position: relative;
  overflow: hidden;
}

.art-eyebrow {
  display: inline-block;
  background: #7c3aed;
  color: #ffffff;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 6px 18px;
  border-radius: 50px;
  margin-bottom: 16px;
  letter-spacing: 0.3px;
}

.art-hero-band h1 {
  font-size: 2.1rem;
  font-weight: 800;
  color: #2e1065;
  margin-bottom: 14px;
  line-height: 1.35;
}

.art-hero-lead {
  font-size: 1.08rem;
  font-weight: 500;
  color: #4a4066;
  max-width: 760px;
  margin: 0 auto;
  line-height: 1.8;
}

/* -----------------------------------------------------------------
   2. MAIN CONTENT SECTION
   ----------------------------------------------------------------- */

.art-content-section {
  background: #ffffff;
  padding: 56px 20px;
}

.art-content {
  max-width: 800px;
  margin: 0 auto;
}

.art-content h2 {
  font-size: 1.5rem;
  font-weight: 800;
  color: #2e1065;
  margin: 46px 0 18px;
  padding: 12px 18px;
  background: #f5f1fb;
  border-left: 5px solid #7c3aed;
  border-radius: 8px;
  line-height: 1.4;
}

.art-content h2:first-child { margin-top: 0; }

.art-content h3 {
  font-size: 1.18rem;
  font-weight: 700;
  color: #4d0079;
  margin: 28px 0 12px;
}

.art-content p {
  font-size: 1.04rem;
  color: #3a3752;
  line-height: 1.95;
  margin-bottom: 18px;
  text-align: left;
}

.art-content strong {
  color: #2e1065;
}

/* -----------------------------------------------------------------
   3. HIGHLIGHT / EXAMPLE CALLOUT BOX
   ----------------------------------------------------------------- */

.art-highlight {
  background: #f5f1fb;
  border-left: 4px solid #7c3aed;
  border-radius: 10px;
  padding: 22px 24px;
  margin: 24px 0 30px;
}

.art-highlight-label {
  display: inline-block;
  font-size: 0.82rem;
  font-weight: 800;
  color: #7c3aed;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

.art-highlight p {
  margin-bottom: 12px;
  color: #3a3752;
}

.art-highlight p:last-child { margin-bottom: 0; }

/* -----------------------------------------------------------------
   4. EXAMPLE QUESTIONS GRID
   ----------------------------------------------------------------- */

.art-example-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin: 22px 0 34px;
}

.art-example-card {
  background: #f8f6ff;
  border: 1px solid #e4d9fa;
  border-radius: 16px;
  padding: 16px 20px;
  font-size: 0.98rem;
  color: #3a3752;
  line-height: 1.6;
  font-weight: 500;
}

/* -----------------------------------------------------------------
   5. RULES LIST
   ----------------------------------------------------------------- */

.art-rules {
  background: #fff7ed;
  border: 2px solid #fdba74;
  border-radius: 14px;
  padding: 30px 26px;
  margin: 24px 0 10px;
  counter-reset: art-rule;
}

.art-rules-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: #c2410c;
  margin-bottom: 18px;
}

.art-rule {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 16px;
  counter-increment: art-rule;
}

.art-rule:last-child { margin-bottom: 0; }

.art-rule::before {
  content: counter(art-rule);
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #ea580c;
  color: #ffffff;
  font-weight: 800;
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.art-rule p {
  color: #7c2d12;
  font-size: 0.98rem;
  line-height: 1.7;
  margin: 0;
}

/* -----------------------------------------------------------------
   6. BRIDGE TO NEXT ARTICLE
   ----------------------------------------------------------------- */

.art-bridge {
  background: #faf7ff;
  border: 2px dashed #c9b3ef;
  border-radius: 12px;
  padding: 24px 22px;
  margin: 36px 0 10px;
  text-align: center;
}

.art-bridge p {
  margin-bottom: 14px;
  color: #4d0079;
  font-weight: 600;
}

.art-bridge a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #7c3aed;
  color: #ffffff;
  font-weight: 700;
  font-size: 0.95rem;
  padding: 12px 26px;
  border-radius: 50px;
  text-decoration: none;
  transition: background 0.2s;
}

.art-bridge a:hover { background: #5b21b6; color: #ffffff; }

/* -----------------------------------------------------------------
   RESPONSIVE
   ----------------------------------------------------------------- */

@media (max-width: 600px) {
  .art-hero-band h1 { font-size: 1.5rem; }
  .art-hero-lead { font-size: 0.98rem; }
  .art-content h2 { font-size: 1.28rem; }
  .art-content p { font-size: 1rem; line-height: 1.85; }
  .art-rules { padding: 24px 18px; }
}

/* =================================================================
   STYLE VARIANTS SET 2
   Used by: kp-astrology-in-tamil.html
   Same brand family (purple/gold), different treatment for variety
   across articles. Existing classes above are untouched.
   ================================================================= */

/* Heading style: underline accent instead of background band */
.art-h2-line {
  font-size: 1.5rem;
  font-weight: 800;
  color: #2e1065;
  margin: 46px 0 18px;
  padding-bottom: 12px;
  border-bottom: 3px solid #c8973a;
  line-height: 1.4;
}

.art-h2-line:first-child { margin-top: 0; }

/* Checklist style (questions this page answers) */
.art-checklist {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 20px 0 30px;
}

.art-check-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #f7fbfa;
  border: 1px solid #cfe8e2;
  border-radius: 10px;
  padding: 12px 18px;
  font-size: 0.98rem;
  font-weight: 600;
  color: #1f4f47;
}

.art-check-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #0d9488;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 800;
}

/* Note box (informational, distinct from purple highlight / orange rules).
   Neutral gray, not teal-green — a humble clarifying note isn't a
   "success" message, so green's positive connotation was the wrong signal. */
.art-note {
  background: #f5f5f7;
  border-left: 4px solid #8b8b96;
  border-radius: 10px;
  padding: 20px 22px;
  margin: 22px 0 30px;
}

.art-note-label {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 800;
  color: #5a5a66;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.art-note p {
  margin-bottom: 0;
  color: #3a3a44;
}

/* Dasavarga list — simple clean chips, no card/bar treatment */
.art-varga-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px;
  margin: 20px 0 30px;
}

.art-varga-item {
  background: #faf8fd;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 0.95rem;
  color: #3a3752;
  line-height: 1.5;
}

.art-varga-item strong {
  color: #4d0079;
  font-weight: 700;
}

/* Quick facts list (city / date / time breakdown) */
.art-quickfacts {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 18px 0 24px;
  padding: 16px 20px;
  background: #fffaf0;
  border-radius: 10px;
  border: 1px solid #e6c47e;
}

.art-quickfacts div {
  font-size: 0.98rem;
  color: #5a4a2b;
}

.art-quickfacts strong {
  color: #8a5a00;
  font-weight: 700;
}

/* Case study box (Ramesh & Suresh chart comparison) */
.art-case-study {
  background: #fffaf0;
  border: 2px solid #e6c47e;
  border-radius: 14px;
  padding: 26px;
  margin: 26px 0 30px;
}

.art-case-label {
  display: inline-block;
  background: #c8973a;
  color: #ffffff;
  font-size: 0.8rem;
  font-weight: 800;
  padding: 5px 16px;
  border-radius: 50px;
  margin-bottom: 16px;
  letter-spacing: 0.3px;
}

.art-case-images {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 18px;
}

.art-case-images figure {
  margin: 0;
}

.art-case-images img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  border: 1px solid #e6c47e;
  display: block;
}

.art-case-caption {
  text-align: center;
  font-size: 0.9rem;
  font-weight: 700;
  color: #8a5a00;
  margin-top: 8px;
}

.art-case-study p {
  color: #5a4a2b;
  margin-bottom: 12px;
}

.art-case-study p:last-child { margin-bottom: 0; }

/* Pull quote (closing KP definition) */
.art-pullquote {
  text-align: center;
  font-size: 1.2rem;
  font-weight: 700;
  color: #2e1065;
  font-style: italic;
  max-width: 640px;
  margin: 34px auto;
  padding-top: 20px;
  border-top: 3px solid #7c3aed;
  line-height: 1.7;
}

@media (max-width: 600px) {
  .art-h2-line { font-size: 1.28rem; }
  .art-case-study { padding: 18px; }
  .art-pullquote { font-size: 1.05rem; }
}