/* Likit Cinema — additions for the server-rendered site (keeps the owners' style.css as the base) */
.skip-link{position:absolute;left:-999px;top:8px;background:var(--gold);color:#17130a;padding:8px 12px;border-radius:6px;z-index:100;font-weight:700}
.skip-link:focus{left:12px}
.ph{display:grid;place-items:center;aspect-ratio:16/9;width:100%;background:linear-gradient(135deg,#141b22,#0b1118 60%,#2a2205);color:#f5b80099;font-weight:800;letter-spacing:3px;font-size:12px}
.ph-sm{width:92px;height:66px;aspect-ratio:auto;border-radius:6px}
.hero-image.ph{position:absolute;inset:0;height:100%;font-size:28px}
.hero-content h1 a:hover{color:var(--gold-light)}
.ai-badge{font-size:9px;font-weight:800;letter-spacing:.8px;color:#17130a;background:var(--gold);padding:3px 6px;border-radius:4px}
.ai-note{max-width:780px;margin:30px auto 10px;padding:16px 20px;border:1px solid #f5b80044;border-left:3px solid var(--gold);border-radius:9px;background:#0d1214;color:var(--text-secondary);font-size:13px;line-height:1.6}
.ai-note a{color:var(--gold)}
.container-cinema>.ai-note{max-width:none;margin:0}
.article-figure{margin:10px 0 24px}
.article-figure .article-hero{margin:0}
.article-figure figcaption{font-size:11px;color:var(--text-muted);margin-top:6px}
.article-body p{margin:0 0 18px}
.article-body a{color:var(--gold)}
.article-sources{max-width:780px;margin:26px auto 0;padding-top:16px;border-top:1px solid var(--border)}
.article-sources h2{font-size:14px;letter-spacing:1px;text-transform:uppercase;color:var(--text-muted);margin:0 0 8px}
.article-sources ul{margin:0;padding-left:18px;color:var(--text-secondary);font-size:13px}
.article-sources a:hover{color:var(--gold)}
.share-btn{background:var(--bg-card);border:1px solid var(--border);border-radius:5px;padding:7px 10px;font-size:10px;cursor:pointer;color:var(--text-primary)}
.share-btn:hover{color:var(--gold)}
.tag-row{max-width:780px;margin:18px auto 0;flex-wrap:wrap}
.pager{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:30px}
.muted{color:var(--text-muted)}.small{font-size:12px}
.static-page h1{font-size:clamp(30px,4vw,44px);letter-spacing:-1.2px;margin:0 0 20px}
.static-page .article-body{margin:0;font-size:16px}
.static-page .article-body ul{padding-left:20px}
.search-inline{display:flex;gap:8px;max-width:560px;margin:0 0 28px}
.search-inline input{flex:1;min-width:0;background:var(--bg-surface);border:1px solid var(--border);border-radius:7px;padding:12px;color:var(--text-primary)}
.search-inline .gold-button{margin:0;border:0;cursor:pointer}
.article-header .share-row{flex-wrap:wrap}
@media (max-width:640px){.hero-content{left:18px;right:18px;bottom:22px}.ai-note{font-size:12.5px}}
/* width/height attributes are kept for layout stability; let CSS decide the real height */
.article-card>img,.latest-news-item img,.article-hero{height:auto}
.article-card>img{aspect-ratio:16/9}
.latest-news-item img{aspect-ratio:92/66}
.hero-image.ph span{display:none}
.article-sources a{text-decoration:underline;text-decoration-color:#f5b80066;text-underline-offset:3px}
/* ---- v1.9: LIKIT Cinema logo (Cinema section only) ---- */
.brand-cinema{flex-direction:row;align-items:center}
.brand-cinema img{display:block;height:56px;width:auto}
.footer-brand .brand-cinema img{height:48px}
.theme-light .brand-cinema img{background:#05080c;border-radius:10px;padding:4px 8px}
@media (max-width:640px){.brand-cinema img{height:44px}}
/* ---- v1.9: Like button ---- */
.like-btn{display:inline-flex;align-items:center;gap:7px;background:var(--bg-card);border:1px solid var(--border);border-radius:999px;padding:4px 12px 4px 4px;cursor:pointer;color:var(--text-primary);font-size:12px;font-weight:700;line-height:1;transition:border-color .2s,background .2s,transform .15s}
.like-btn img{width:34px;height:34px;object-fit:contain;transition:transform .2s;filter:grayscale(.35) brightness(.9)}
.like-btn:hover{border-color:#f5b80088}
.like-btn:hover img{transform:rotate(-8deg) scale(1.06);filter:none}
.like-btn.liked{border-color:var(--gold);background:#f5b8001c;color:var(--gold)}
.like-btn.liked img{filter:none}
.like-btn.pop img{animation:likepop .45s ease}
@keyframes likepop{0%{transform:scale(1)}40%{transform:scale(1.35) rotate(-10deg)}100%{transform:scale(1)}}
.like-btn:focus-visible,.share-icon:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.like-count{min-width:1ch;font-variant-numeric:tabular-nums}
.like-sm{padding:2px 9px 2px 2px;font-size:11px;gap:4px;background:#05080ccc;backdrop-filter:blur(6px)}
.like-sm img{width:26px;height:26px}
.card-wrap{position:relative;display:flex;flex-direction:column}
.card-wrap>.article-card{flex:1}
.card-wrap>.like-sm{position:absolute;right:12px;bottom:12px;z-index:2}
.card-wrap .article-card-copy .story-meta{padding-right:70px}
.hero-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.hero-actions .like-btn{margin-top:19px;background:#05080caa;backdrop-filter:blur(6px)}
@media (prefers-reduced-motion:reduce){.like-btn.pop img,.like-btn img{animation:none;transition:none}}
/* ---- v1.9: share icons ---- */
.share-icon{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--bg-card);border:1px solid var(--border);color:var(--text-secondary);cursor:pointer;padding:0;transition:color .2s,border-color .2s,background .2s}
.share-icon svg{width:16px;height:16px;fill:currentColor}
.share-icon:hover{color:var(--gold);border-color:#f5b80088}
.share-fb:hover{color:#fff;background:#1877f2;border-color:#1877f2}
.share-x:hover{color:#fff;background:#000;border-color:#555}
.share-wa:hover{color:#fff;background:#25d366;border-color:#25d366}
.share-copy.copied{color:var(--official);border-color:var(--official)}
.share-spacer{flex:1}
.article-header .share-row{gap:8px}
.story-actions{max-width:780px;margin:22px auto 0;display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 16px;border:1px solid var(--border);border-radius:10px;background:var(--bg-surface)}
.story-actions-q{font-size:13px;font-weight:700;color:var(--text-secondary);margin-right:auto}
.story-actions .share-row{gap:8px}
.article-rail{display:none}
.article-rail-inner{position:sticky;top:20px}

/* v2.3: main likit.in brand = Lingo Kitty logo (dark text, so it sits on a white tile on the dark header) */
.brand-lk{flex-direction:row;align-items:center}
.brand-lk img{display:block;height:48px;width:auto;background:#fff;border-radius:10px;padding:3px 8px}
.footer-brand .brand-lk img{height:44px}
@media (max-width:760px){.brand-lk img{height:42px}}