/* TVLN Reviews – Frontend v3.5.0 */
.tvln-module {
  --accent: var(--tvln-accent, #D4AF37);
  --bg: var(--tvln-bg, #ffffff);
  --text: var(--tvln-text, #0F172A);
  --muted: #64748B;
  --line: #E5E7EB;
  --radius: 14px;
  --shadow: 0 6px 20px rgba(2,6,23,0.06);
  --cards-per-view: 1;
  position: relative; width: 100%; color: var(--text); background: var(--bg);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans";
}

.tvln-header {
  display:grid; grid-template-columns: 1fr auto; align-items:center; gap:8px 16px;
  padding:12px 6px 16px; border-bottom:1px solid var(--line);
}
.tvln-title { margin:0 0 0; font-weight:700; font-size: clamp(1.2rem, 2vw, 1.6rem); grid-column:1 / -1; }
.tvln-address { color:var(--muted); font-size:.95rem; grid-column:1 / 2; }
.tvln-agg { display:flex; align-items:center; gap:10px; white-space:nowrap; grid-column:2 / 3; justify-self:end; }
.tvln-stars { display:inline-flex; gap:2px; vertical-align:middle; }
.tvln-stars .star { width:18px; height:18px; fill: var(--accent); }
.tvln-stars .star--empty { opacity:.28; }
.muted { color:var(--muted); }

@media (max-width:640px){
  .tvln-header { grid-template-columns: 1fr; }
  .tvln-agg { grid-column:1; justify-self:start; }
  .tvln-address { grid-column:1; }
}

.tvln-slider { position:relative; width:100%; padding:14px 0 18px; }
.tvln-viewport { overflow:hidden; width:100%; }
.tvln-track { display:flex; will-change:transform; transform:translateX(0); }

.tvln-card { flex:0 0 calc(100% / var(--cards-per-view)); padding:0 8px; outline:none; }
.tvln-card-inner { background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); padding:16px 16px 18px; height:100%; display:flex; flex-direction:column; transition:transform .25s ease; }
.tvln-card:hover .tvln-card-inner, .tvln-card:focus .tvln-card-inner { transform: translateY(-2px); }

.tvln-card-top { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:10px; }
.tvln-badge { display:inline-block; border:1px solid var(--line); color:var(--muted); padding:2px 8px; border-radius:999px; font-size:.78rem; }
.tvln-author { display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.tvln-avatar { width:32px; height:32px; border-radius:50%; object-fit:cover; border:1px solid var(--line); }
.tvln-name { margin:0 0 2px; font-size:1rem; font-weight:600; }
.tvln-meta { color:var(--muted); font-size:.9rem; }
.tvln-body { flex-grow: 0; position:relative; }
.tvln-body p { margin:8px 0 0; line-height:1.55; font-size:.96rem; }
.tvln-readmore a { text-decoration:none; color:#1f2937; border-bottom:1px dotted #9ca3af; }
.tvln-readmore a:hover { border-bottom-style:solid; }

/* Nav arrows outside */
.tvln-nav { position:absolute; top:50%; transform:translateY(-50%); width:36px; height:36px; border-radius:999px; border:1px solid var(--line); background:#fff; display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow); cursor:pointer; transition:transform .15s ease, box-shadow .15s ease, opacity .2s ease; z-index:2; opacity:.95; }
.tvln-nav:hover { transform: translateY(-50%) scale(1.04); box-shadow: 0 8px 26px rgba(2,6,23,0.10); }
.tvln-prev { left:-14px; } .tvln-next { right:-14px; }
@media (max-width:980px){ .tvln-prev{ left:-10px; } .tvln-next{ right:-10px; } }
@media (max-width:640px){ .tvln-prev{left:-8px;} .tvln-next{right:-8px;} .tvln-nav{width:28px;height:28px;} }

@media (min-width:768px){ .tvln-module { --cards-per-view: 2; } }
@media (min-width:981px){ .tvln-module { --cards-per-view: 4; } }

/* Compact variant: no -webkit-line-clamp; use measured max-height + gradient */
.tvln-compact .tvln-card-inner { padding:12px 12px 14px; }
.tvln-compact .tvln-name { font-size:.95rem; }
.tvln-compact .tvln-meta { font-size:.85rem; }
.tvln-compact .tvln-stars .star { width:16px; height:16px; }
.tvln-compact .tvln-body { margin-top:4px; flex-grow:1; margin-bottom: var(--tvln-gap, 10px); }
.tvln-compact .tvln-card-inner:not(.is-expanded) .tvln-body {
  max-height: var(--tvln-collapsed-h, 132px);
  overflow: hidden;
}
.tvln-compact .tvln-card-inner:not(.is-expanded) .tvln-body::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:48px;
  background: linear-gradient(180deg, rgba(255,255,255,0), var(--bg) 70%);
  pointer-events:none;
}
.tvln-compact .tvln-card-inner.is-expanded .tvln-body{
  max-height: none;
}
/* Equal-height desktop only */
@media (min-width:981px){ .tvln-compact .tvln-card-inner { min-height: 210px; } }
@media (max-width:980px){ .tvln-compact .tvln-card-inner { min-height: unset; } }
.tvln-compact .tvln-more { --navy: var(--tvln-navy, #0B1F44); align-self:flex-start; margin-top:auto; font-size:.88rem; padding:6px 12px; border-radius:8px; border:1px solid var(--navy); color:#fff; background:var(--navy); cursor:pointer; }
.tvln-compact .tvln-more:hover { filter: brightness(1.05); }

/* Full list */
.tvln-list-wrap { --accent: var(--tvln-accent, #D4AF37); --bg: var(--tvln-bg, #fff); --text: var(--tvln-text, #0F172A); --navy: var(--tvln-navy, #0B1F44); color:var(--text); background: var(--bg); }
.tvln-list { display:grid; gap:16px; margin-top:18px; align-items:stretch; }
.tvln-item { background:#fff; border:1px solid var(--navy); border-radius:14px; box-shadow: var(--shadow); padding:16px 16px 18px; height:100%; display:flex; flex-direction:column; }
.tvln-item-head { display:flex; align-items:start; gap:12px; justify-content:space-between; }
.tvln-item-left { display:flex; align-items:start; gap:12px; }
.tvln-item-title h3 { margin:0 0 2px; font-size:1rem; font-weight:700; }
.tvln-item .tvln-meta { display:flex; align-items:center; gap:6px; color:var(--muted); font-size:.92rem; }
.tvln-item .sep { color:#cbd5e1; }
.tvln-item-right { margin-left:auto; text-align:right; display:flex; flex-direction:column; gap:6px; align-items:flex-end; }
.tvln-when { color:var(--muted); font-size:.88rem; }
.tvln-g-link { font-size:.9rem; color:#1f2937; text-decoration:none; border-bottom:1px dotted #9ca3af; }
.tvln-g-link:hover { border-bottom-style:solid; }
.tvln-item-body { margin-top:10px; }
.tvln-item-body p { margin:10px 0 0; line-height:1.6; font-size:.97rem; }

@media (min-width:981px){
  .tvln-list { grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; }
}
@media (max-width:980px){
  .tvln-list { grid-template-columns: 1fr; grid-auto-rows: auto; }
}

/* Ticker */
.tvln-ticker { --accent: var(--tvln-accent, #D4AF37); --bg: var(--tvln-bg,#fff); --text: var(--tvln-text,#0F172A); position:relative; width:100%; background: var(--bg); }
.tvln-ticker-viewport { overflow:hidden; width:100%; }
.tvln-ticker-track { display:flex; will-change:transform; transform:translateX(0); }
.tvln-ticker-item { flex:0 0 100%; padding: 4px 8px; }
.tvln-ticker-line { display:block; font-size:14px; line-height:16px; height:34px; color:var(--text); overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.tvln-ticker .tvln-stars { gap:2px; margin-left:6px; }
.tvln-ticker .tvln-stars .star { width:14px; height:14px; fill: var(--accent); }
.tvln-ticker .name { font-weight:700; color:#1d4ed8; }
.tvln-ticker .sep { color:#cbd5e1; margin: 0 6px; }
.tvln-ticker .src { margin-left:6px; font-size:12px; color:#1f2937; text-decoration:none; border-bottom:1px dotted #9ca3af; }
.tvln-ticker .src:hover { border-bottom-style:solid; }

/* Modal */
.tvln-modal { position:fixed; inset:0; background:rgba(2,6,23,.55); display:none; align-items:center; justify-content:center; z-index:99999; }
.tvln-modal[aria-hidden="false"] { display:flex; }
.tvln-modal__panel { max-width:min(800px, 92vw); max-height:85vh; overflow:auto; background:#fff; border-radius:14px; box-shadow:0 20px 60px rgba(0,0,0,.25); padding:20px 20px 24px; color:#0F172A; }
.tvln-modal__head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.tvln-modal__title { margin:0; font-size:1.1rem; font-weight:700; }
.tvln-modal__close { background:#0B1F44; color:#fff; border:1px solid #0B1F44; padding:6px 10px; border-radius:8px; cursor:pointer; }
.tvln-modal__meta { color:#64748B; font-size:.95rem; margin-bottom:8px; }
.tvln-modal .tvln-stars .star { width:18px; height:18px; }