.horoscope-date { margin-bottom: 8px; }
.horoscope-panel { min-width: 0; }
.horoscope-nav { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.horoscope-nav-button { padding: 8px 14px; font-size: 13px; }
.horoscope-nav-button.is-disabled { opacity: .4; pointer-events: none; box-shadow: none; }
.horoscope-grid { display: grid; grid-template-columns: 1fr; gap: 9px; min-width: 0; }
.horoscope-grid > * { min-width: 0; }
.horoscope-card { display: grid; grid-template-columns: 72px minmax(0, 1fr); grid-template-areas: "icon heading" "content content"; align-items: start; gap: 10px 16px; min-width: 0; padding: var(--card-padding-top) var(--card-padding-x) var(--card-padding-bottom); }
.horoscope-sign-icon { flex: 0 0 72px; width: 72px; height: 72px; color: var(--navy); }
.horoscope-sign-icon { grid-area: icon; }
.horoscope-card-heading { grid-area: heading; align-self: center; }
.horoscope-sign-icon svg { display: block; width: 100%; height: 100%; }
.horoscope-sign-icon circle { fill: var(--gold-bright); stroke: var(--navy); stroke-width: 3; }
.horoscope-sign-icon text { fill: var(--navy); font-family: Georgia, serif; font-size: 38px; }
.horoscope-card-content { grid-area: content; min-width: 0; overflow-wrap: anywhere; }
.horoscope-card h2 { font-family: var(--font-display); font-size: 24px; line-height: 1.1; color: var(--navy); }
.horoscope-dates, .horoscope-theme { font-family: var(--font-label); font-size: 13px; color: var(--navy); text-transform: uppercase; letter-spacing: .05em; }
.horoscope-card-content > p { font-size: 15px; }
@media (min-width: 720px) { .horoscope-grid { grid-template-columns: 1fr 1fr; } }