/* HP-03: astrocartography home page (common/astro_home). Only what the home page styles lack. */

.ah-hero { padding: 120px 0 72px; min-height: 0; }
.ah-h1 { font-size: 34px; line-height: 1.1; overflow-wrap: break-word; }
@media (min-width: 480px) { .ah-h1 { font-size: 40px; } }
@media (min-width: 768px) { .ah-h1 { font-size: 60px; } }
/* HP-05: on desktops each of the two H1 lines stays on one line in all 9 languages (longest — UA, 1476px at 72px) */
@media (min-width: 1024px) { .ah-h1 { font-size: clamp(40px, 4.4vw, 64px); } }

/* Calculator slot: keeps the first screen from jumping while astro_calc.js mounts */
.ah-calc { scroll-margin-top: 96px; }
.ah-calc-mount { min-height: 320px; }
.ah-calc-mount:empty {
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .08);
  backdrop-filter: blur(12px);
}

.ah-chips { list-style: none; padding: 0; margin-left: 0; }

/* 40 lines: 10 planets, 2 → 3 → 5 columns */
.ah-planets { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 768px) { .ah-planets { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
@media (min-width: 1200px) { .ah-planets { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.ah-planets > div { padding: 20px 16px; }
.ah-glyph { font-size: 44px; line-height: 1; margin-bottom: 12px; font-family: "Segoe UI Symbol", "DejaVu Sans", "Noto Sans Symbols", sans-serif; }
.ah-angle-code { font-size: 32px; font-weight: 700; line-height: 1; margin-bottom: 12px; letter-spacing: .04em; }

.ah-step-num { width: 56px; height: 56px; border-radius: 9999px; display: flex; align-items: center; justify-content: center; font-size: 24px; font-weight: 700; }

.ah-note { display: flex; gap: 24px; align-items: flex-start; }
.ah-note-icon, .ah-why-icon { font-size: 40px; line-height: 1; flex-shrink: 0; }
.ah-why-icon { margin-bottom: 16px; }
@media (max-width: 767px) { .ah-note { flex-direction: column; gap: 16px; } }

.ah-prose p + p { margin-top: 16px; }

/* Example table; on phones every row becomes a card */
.ah-table-wrap {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .15);
  background: rgba(255, 255, 255, .05);
}
.ah-table { width: 100%; border-collapse: collapse; color: #fff; font-size: 16px; }
.ah-table th, .ah-table td { padding: 16px 20px; text-align: left; vertical-align: top; }
.ah-table thead th { font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .06); }
.ah-table tbody tr + tr { border-top: 1px solid rgba(255, 255, 255, .1); }
.ah-table tbody th { font-weight: 700; color: #fcd34d; white-space: nowrap; }
@media (max-width: 767px) {
  .ah-table thead { display: none; }
  .ah-table, .ah-table tbody, .ah-table tr, .ah-table th, .ah-table td { display: block; width: 100%; }
  .ah-table tbody tr { padding: 16px 0; }
  .ah-table tbody th { font-size: 20px; padding: 0 20px 8px; }
  .ah-table td { padding: 4px 20px; display: flex; gap: 12px; }
  .ah-table td::before { content: attr(data-label); flex: 0 0 120px; color: rgba(255, 255, 255, .6); font-size: 14px; }
}

.ah-list { list-style: none; padding: 0; margin-left: 0; text-align: left; }
.ah-list li + li { margin-top: 16px; }

.ah-all-reports { color: #fcd34d; }
.ah-all-reports:hover, .ah-all-reports:focus { color: #fde68a; text-decoration: underline; }

/* HP-06b: sections alternate two flat tones one palette step around the page background (cosmic-900):
   lighter cosmic-800 and darker cosmic-950, so neighbours never merge. The purple banners keep their own colours;
   the sections holding the "17+ Years" and final-call cards get a tone like the rest. Same padding top and bottom everywhere. */
#what-is-astrocartography, #planetary-lines, #how-it-works, #birth-time, #example, #relocation-report,
#why-astroliq, #products, #expertise, #feedbacks, #home_section_faq, #final-cta { padding-top: 80px; padding-bottom: 80px; }
@media (max-width: 767px) {
  #what-is-astrocartography, #planetary-lines, #how-it-works, #birth-time, #example, #relocation-report,
  #why-astroliq, #products, #expertise, #feedbacks, #home_section_faq, #final-cta { padding-top: 56px; padding-bottom: 56px; }
}
.dark #what-is-astrocartography, .dark #how-it-works, .dark #example,
.dark #why-astroliq, .dark #expertise, .dark #home_section_faq { background: #1e293b; }
.dark #planetary-lines, .dark #birth-time,
.dark #products, .dark #feedbacks, .dark #final-cta { background: #020617; }
/* HP-08: cards on the lighter cosmic-800 sections sat on their own colour — one step darker (cosmic-900);
   border and shadow unchanged, cards on the darker sections stay cosmic-800. */
.dark #what-is-astrocartography .dark\:bg-cosmic-800, .dark #how-it-works .dark\:bg-cosmic-800, .dark #example .dark\:bg-cosmic-800,
.dark #why-astroliq .dark\:bg-cosmic-800, .dark #expertise .dark\:bg-cosmic-800, .dark #home_section_faq .dark\:bg-cosmic-800 { background-color: #0f172a; }