/* Shared horoscope card (modules/entertainment/horoscope_card.php): news sidebar and mobile home here, the blog and
   other own sites through the feed. Scoped to .khoro and sized in px, so a host page's own type scale stays out. */
.khoro { --khoro-bg:#282337; --khoro-ink:#f6f0ff; --khoro-text:#eee7f6; --khoro-muted:#c6b7df; --khoro-line:#62576f; --khoro-gold:#e4cf9a;
    position:relative; overflow:hidden; box-sizing:border-box; padding:22px; border-radius:13px; background:var(--khoro-bg); color:var(--khoro-ink);
    font-family:inherit; line-height:1.6; text-align:left; }
.khoro *, .khoro *::before, .khoro *::after { box-sizing:border-box; }
.khoro::before { content:''; position:absolute; width:140px; height:140px; top:-80px; right:-30px; border:1px solid #817297; border-radius:50%; pointer-events:none; }
.khoro h2, .khoro h3, .khoro p { margin:0; padding:0; color:inherit; letter-spacing:0; text-transform:none; }
.khoro .khoro-eyebrow { font-size:11px; font-weight:600; color:var(--khoro-muted); }
.khoro .khoro-eyebrow span { color:var(--khoro-gold); }
.khoro .khoro-title { margin-top:6px; font-size:20px; font-weight:750; line-height:1.4; }
.khoro .khoro-date { display:block; margin-top:2px; font-size:12px; color:var(--khoro-muted); }
.khoro .khoro-signs { display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:6px; margin-top:16px; }
.khoro .khoro-sign { appearance:none; display:flex; align-items:center; justify-content:center; min-height:40px; margin:0; padding:0; border:1px solid var(--khoro-line); border-radius:8px;
    background:transparent; color:var(--khoro-ink); font:400 19px/1 'Segoe UI Symbol','Noto Sans Symbols 2','DejaVu Sans',sans-serif; cursor:pointer; box-shadow:none; transition:background-color .15s, border-color .15s; }
.khoro .khoro-sign:hover { border-color:var(--khoro-muted); background:#ffffff12; }
.khoro .khoro-sign[aria-selected="true"] { background:#f0e7fd; border-color:#f0e7fd; color:#302442; }
.khoro .khoro-sign:focus-visible { outline:3px solid var(--khoro-gold); outline-offset:2px; }
/* Every reading shares one grid cell, so the card is as tall as the longest one and nothing below it jumps when the
   reader switches signs; the others stay laid out but invisible (and out of reach of focus and screen readers).
   !important outranks Bootstrap's [hidden]{display:none!important} on the pages that load it. */
.khoro--stack { display:grid; grid-template-columns:minmax(0, 1fr); align-content:start; }
.khoro--stack .khoro-panel { grid-column:1; grid-row:2; }
.khoro .khoro-panel { margin-top:18px; }
.khoro .khoro-panel[hidden] { display:block !important; visibility:hidden; }
.khoro .khoro-panel h3 { font-size:16px; font-weight:700; line-height:1.4; color:var(--khoro-gold); }
.khoro .khoro-panel p { margin-top:8px; font-size:14px; line-height:1.85; color:var(--khoro-text); overflow-wrap:anywhere; }
.khoro .khoro-more { display:inline-block; margin-top:12px; font-size:13px; font-weight:700; color:var(--khoro-ink) !important; text-decoration:underline !important; text-underline-offset:3px; }
.khoro .khoro-more:hover { color:var(--khoro-gold) !important; }
.khoro .khoro-more:focus-visible { outline:3px solid var(--khoro-gold); outline-offset:3px; border-radius:2px; }
.khoro .khoro-sr { position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
/* Band: a full-width strip, the sign picker on the left and the reading on the right. */
.khoro--band { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); column-gap:40px; align-items:start; padding:28px 32px; }
.khoro--band .khoro-panel { grid-column:2; grid-row:1; margin-top:0; }
@media (min-width:1100px) { .khoro--band .khoro-signs { grid-template-columns:repeat(12, minmax(0, 1fr)); } }
@media (max-width:767px) {
    .khoro--band { grid-template-columns:minmax(0, 1fr); padding:22px; }
    .khoro--band .khoro-panel { grid-column:1; grid-row:2; margin-top:18px; }
}
@media (prefers-reduced-motion:reduce) { .khoro .khoro-sign { transition:none; } }