/**
 * H-News Builder — Widget Styles
 * @package HNewsBuilder
 */

/* ── Variables ── */
:root {
  --hnb-accent:   var(--hn-accent, #C8102E);
  --hnb-dark:     var(--hn-charcoal, #1a1a2e);
  --hnb-bg:       var(--color-bg, #fff);
  --hnb-bg-alt:   var(--color-bg-alt, #f8f8f8);
  --hnb-border:   var(--color-border, #e8e8e8);
  --hnb-text:     var(--color-text, #333);
  --hnb-muted:    var(--color-text-muted, #888);
  --hnb-radius:   var(--radius-md, 8px);
  --hnb-shadow:   var(--shadow-md, 0 4px 20px rgba(0,0,0,.08));
  --hnb-font-ui:  var(--font-ui, 'DM Sans', sans-serif);
  --hnb-font-h:   var(--font-display, 'Playfair Display', serif);
  --hnb-t:        .2s ease;
}

/* ════════════ SECTION HEADER ════════════ */
.hnb-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--hnb-accent);
}
.hnb-section-title {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--hnb-font-h);
  font-size: 1.1rem; font-weight: 700;
  margin: 0; color: var(--hnb-text);
}
.hnb-section-title__bar { width: 4px; height: 20px; border-radius: 2px; flex-shrink: 0; }
.hnb-view-all {
  font-family: var(--hnb-font-ui);
  font-size: .75rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .06em;
  color: var(--hnb-accent); text-decoration: none;
  white-space: nowrap;
}

/* ════════════ CARDS ════════════ */
.hnb-card { background: var(--hnb-bg); border-radius: var(--hnb-radius); overflow: hidden; transition: box-shadow var(--hnb-t), transform var(--hnb-t); }
.hnb-card:hover { box-shadow: var(--hnb-shadow); transform: translateY(-2px); }

.hnb-card__img-wrap { display: block; position: relative; overflow: hidden; }
.hnb-card__img { width: 100%; object-fit: cover; display: block; transition: transform .4s ease; }
.hnb-card__img-wrap:hover .hnb-card__img { transform: scale(1.04); }
.hnb-card__img-wrap--sm { width: 100px; flex-shrink: 0; aspect-ratio: 4/3; }

.hnb-card__cat {
  position: absolute; top: 10px; left: 10px;
  display: inline-block; padding: 3px 10px;
  font-family: var(--hnb-font-ui); font-size: .65rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
  color: #fff; border-radius: 3px;
}
.hnb-card__body { padding: 14px 16px; }
.hnb-card__title { font-family: var(--hnb-font-h); font-size: .95rem; font-weight: 700; margin: 0 0 8px; line-height: 1.35; }
.hnb-card__title a { color: var(--hnb-text); text-decoration: none; }
.hnb-card__title a:hover { color: var(--hnb-accent); }
.hnb-card__title--sm { font-size: .88rem; }
.hnb-card__excerpt { font-size: .83rem; color: var(--hnb-muted); line-height: 1.6; margin: 0 0 10px; }
.hnb-card__meta { display: flex; align-items: center; gap: 6px; font-family: var(--hnb-font-ui); font-size: .74rem; color: var(--hnb-muted); }
.hnb-card__date { font-family: var(--hnb-font-ui); font-size: .74rem; color: var(--hnb-muted); }
.hnb-card__cat-text { font-family: var(--hnb-font-ui); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--hnb-accent); display: block; margin-bottom: 4px; }
.hnb-dot { opacity: .4; }

/* Numbered card */
.hnb-card--numbered { display: flex; gap: 14px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--hnb-border); border-radius: 0; }
.hnb-card--numbered:last-child { border-bottom: none; }
.hnb-card--numbered:hover { transform: none; box-shadow: none; }
.hnb-card__number { font-family: var(--hnb-font-h); font-size: 1.8rem; font-weight: 900; color: var(--hnb-border); line-height: 1; flex-shrink: 0; width: 36px; }

/* Horizontal card */
.hnb-card--horizontal { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--hnb-border); border-radius: 0; }
.hnb-card--horizontal:last-child { border-bottom: none; }
.hnb-card--horizontal:hover { transform: none; box-shadow: none; }
.hnb-card--horizontal .hnb-card__body { padding: 0; flex: 1; min-width: 0; }

/* ════════════ GRIDS ════════════ */
.hnb-posts-grid         { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; }
.hnb-posts-grid.hnb-posts-grid--1 { grid-template-columns: 1fr; }
.hnb-posts-grid.hnb-posts-grid--2 { grid-template-columns: repeat(2,1fr); }
.hnb-posts-grid.hnb-posts-grid--4 { grid-template-columns: repeat(4,1fr); }
.hnb-posts-grid--3 { grid-template-columns: repeat(3,1fr); }
.hnb-posts-list  { display: flex; flex-direction: column; }
.hnb-posts-numbered { display: flex; flex-direction: column; }

.hnb-masonry { columns: 3; gap: 20px; }
.hnb-masonry .hnb-card { break-inside: avoid; margin-bottom: 20px; }

/* ════════════ MAGAZINE LAYOUTS ════════════ */
.hnb-magazine { display: grid; grid-template-columns: 1fr 300px; gap: 24px; }
.hnb-magazine__main .hnb-card__img-wrap { aspect-ratio: 16/9; }
.hnb-magazine__side { display: flex; flex-direction: column; }

.hnb-mag-a { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.hnb-mag-a__main { grid-row: span 2; }
.hnb-mag-a__main .hnb-card__img-wrap { aspect-ratio: 3/4; }
.hnb-mag-a__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.hnb-mag-b { display: grid; grid-template-columns: 1fr 280px; gap: 20px; }
.hnb-mag-b__mains { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hnb-mag-b__list { display: flex; flex-direction: column; border-left: 1px solid var(--hnb-border); padding-left: 20px; }

.hnb-mag-c {}
.hnb-mag-c__hero { margin-bottom: 20px; }
.hnb-mag-c__grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }

/* ════════════ FEATURED POST ════════════ */
.hnb-featured {
  position: relative; min-height: 320px;
  background: var(--hnb-dark) center/cover no-repeat;
  border-radius: var(--hnb-radius); overflow: hidden;
  display: flex; align-items: flex-end;
}
.hnb-featured__overlay { inset: 0; position: absolute; background: linear-gradient(to top, rgba(0,0,0,.85) 0%, transparent 60%); }
.hnb-featured__body { position: relative; z-index: 1; padding: 28px; }
.hnb-featured__title { font-family: var(--hnb-font-h); font-size: 1.5rem; color: #fff; margin: 0 0 10px; line-height: 1.25; }
.hnb-featured__title a { color: inherit; text-decoration: none; }
.hnb-featured__excerpt { font-size: .875rem; color: rgba(255,255,255,.75); margin: 0; }

/* ════════════ CAROUSEL ════════════ */
.hnb-carousel { position: relative; overflow: hidden; border-radius: var(--hnb-radius); }
.hnb-carousel__track { display: flex; transition: transform .4s ease; }
.hnb-carousel__slide { flex: 0 0 100%; }
.hnb-carousel__prev, .hnb-carousel__next {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(0,0,0,.5); color: #fff; border: none;
  font-size: 1.2rem; cursor: pointer; display: flex;
  align-items: center; justify-content: center; transition: background var(--hnb-t);
}
.hnb-carousel__prev { left: 12px; }
.hnb-carousel__next { right: 12px; }
.hnb-carousel__prev:hover, .hnb-carousel__next:hover { background: var(--hnb-accent); }
.hnb-carousel__dots { display: flex; justify-content: center; gap: 6px; padding: 10px; }
.hnb-carousel__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--hnb-border); border: none; cursor: pointer; transition: background var(--hnb-t); }
.hnb-carousel__dot.is-active { background: var(--hnb-accent); }

/* ════════════ TABBED POSTS ════════════ */
.hnb-tabbed {}
.hnb-tabbed__tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 16px; border-bottom: 2px solid var(--hnb-border); }
.hnb-tabbed__tab {
  padding: 8px 16px; background: transparent; border: none;
  font-family: var(--hnb-font-ui); font-size: .78rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; color: var(--hnb-muted);
  cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px;
  transition: all var(--hnb-t);
}
.hnb-tabbed__tab.is-active, .hnb-tabbed__tab:hover { color: var(--hnb-accent); border-bottom-color: var(--hnb-accent); }
.hnb-tabbed__panel { display: none; }
.hnb-tabbed__panel.is-active { display: block; }

/* ════════════ VTICKER ════════════ */
.hnb-vticker { overflow: hidden; height: 200px; }
.hnb-vticker__list { list-style: none; margin: 0; padding: 0; animation: vticker-scroll 8s linear infinite; }
.hnb-vticker__list:hover { animation-play-state: paused; }
.hnb-vticker__item { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--hnb-border); font-size: .875rem; }
.hnb-vticker__item a { color: var(--hnb-text); text-decoration: none; }
.hnb-vticker__item a:hover { color: var(--hnb-accent); }
.hnb-vticker__item span { font-size: .72rem; color: var(--hnb-muted); flex-shrink: 0; margin-left: 8px; }
@keyframes vticker-scroll { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-50%)} }

/* ════════════ TIMELINE ════════════ */
.hnb-timeline { position: relative; padding-left: 24px; }
.hnb-timeline::before { content:''; position:absolute; left:7px; top:0; bottom:0; width:2px; background:var(--hnb-border); }
.hnb-timeline__item { position: relative; margin-bottom: 24px; }
.hnb-timeline__dot { position: absolute; left: -24px; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--hnb-accent); border: 2px solid var(--hnb-bg); }
.hnb-timeline__date { font-family: var(--hnb-font-ui); font-size: .72rem; color: var(--hnb-accent); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 4px; }
.hnb-timeline__content h4 { margin: 0; font-size: .9rem; }
.hnb-timeline__content h4 a { color: var(--hnb-text); text-decoration: none; }
.hnb-timeline__content h4 a:hover { color: var(--hnb-accent); }

/* ════════════ CATEGORY GRID ════════════ */
.hnb-cat-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.hnb-cat-card { position: relative; aspect-ratio: 4/3; border-radius: var(--hnb-radius); overflow: hidden; background: var(--hnb-accent) center/cover no-repeat; text-decoration: none; }
.hnb-cat-card__overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.7) 0%, transparent 60%); display: flex; flex-direction: column; justify-content: flex-end; padding: 14px; }
.hnb-cat-card__overlay span { color: #fff; font-family: var(--hnb-font-h); font-size: .9rem; font-weight: 700; }
.hnb-cat-card__overlay small { color: rgba(255,255,255,.6); font-size: .72rem; font-family: var(--hnb-font-ui); }

/* Cat box */
.hnb-cat-box__header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 3px solid var(--hnb-accent); }
.hnb-cat-box__header h3 { margin: 0; font-size: 1rem; font-family: var(--hnb-font-h); }
.hnb-cat-box__header a { font-size: .75rem; color: var(--hnb-accent); text-decoration: none; font-family: var(--hnb-font-ui); font-weight: 600; }

/* Cat tabs */
.hnb-cat-tabs__nav { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 16px; }
.hnb-cat-tabs__btn {
  padding: 6px 14px; border-radius: 20px;
  font-family: var(--hnb-font-ui); font-size: .76rem; font-weight: 600;
  border: 1px solid var(--hnb-border); background: transparent;
  color: var(--hnb-muted); cursor: pointer; transition: all var(--hnb-t);
}
.hnb-cat-tabs__btn.is-active,.hnb-cat-tabs__btn:hover { background: var(--hnb-accent); border-color: var(--hnb-accent); color: #fff; }

/* ════════════ AUTHORS ════════════ */
.hnb-author-box { display: flex; gap: 16px; align-items: flex-start; padding: 20px; background: var(--hnb-bg-alt); border-radius: var(--hnb-radius); border: 1px solid var(--hnb-border); }
.hnb-author-box__avatar { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.hnb-author-box__name { font-family: var(--hnb-font-h); font-size: 1rem; font-weight: 700; color: var(--hnb-text); text-decoration: none; display: block; margin-bottom: 6px; }
.hnb-author-box__bio { font-size: .85rem; color: var(--hnb-muted); margin: 0 0 8px; }
.hnb-author-box__link { font-family: var(--hnb-font-ui); font-size: .75rem; font-weight: 600; color: var(--hnb-accent); text-decoration: none; }

.hnb-authors-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; }
.hnb-author-mini { display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; padding: 16px 8px; border-radius: var(--hnb-radius); border: 1px solid var(--hnb-border); }
.hnb-author-mini img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; }
.hnb-author-mini a { font-size: .85rem; font-weight: 600; color: var(--hnb-text); text-decoration: none; }
.hnb-author-mini small { font-size: .72rem; color: var(--hnb-muted); }

/* ════════════ VIDEO GRID ════════════ */
.hnb-video-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; }
.hnb-video-card { border-radius: var(--hnb-radius); overflow: hidden; background: #111; }
.hnb-video-card__thumb { position: relative; aspect-ratio: 16/9; overflow: hidden; }
.hnb-video-card__thumb img { width:100%;height:100%;object-fit:cover;opacity:.85;transition:opacity .3s,transform .4s; }
.hnb-video-card:hover .hnb-video-card__thumb img { opacity:.7; transform:scale(1.04); }
.hnb-video-card__overlay { position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.7) 0%,transparent 60%); }
.hnb-video-card__duration { position:absolute;bottom:8px;right:8px;background:rgba(0,0,0,.75);color:#fff;font-size:.7rem;font-weight:600;padding:2px 7px;border-radius:3px; }
.hnb-video-card__play { position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:50px;height:50px;border-radius:50%;background:rgba(200,16,46,.9);border:none;display:flex;align-items:center;justify-content:center;color:#fff;text-decoration:none;transition:transform .2s,background .2s; padding-left:3px; }
.hnb-video-card:hover .hnb-video-card__play { transform:translate(-50%,-50%) scale(1.1);background:var(--hnb-accent); }
.hnb-video-card__info { padding:12px 14px; }
.hnb-video-card__info h4 { margin:0 0 4px;font-family:var(--hnb-font-h);font-size:.9rem;color:var(--hnb-bg); }
.hnb-video-card__info h4 a { color:#fff;text-decoration:none; }
.hnb-video-card__info span { font-size:.74rem;color:rgba(255,255,255,.5); }

/* ════════════ PODCAST ════════════ */
.hnb-podcast-list { display:flex;flex-direction:column;gap:8px; }
.hnb-podcast-card { display:flex;align-items:center;gap:12px;padding:12px;background:var(--hnb-bg-alt);border:1px solid var(--hnb-border);border-radius:var(--hnb-radius);transition:background var(--hnb-t); }
.hnb-podcast-card:hover { background:var(--hnb-border); }
.hnb-podcast-card__cover { width:56px;height:56px;border-radius:6px;overflow:hidden;flex-shrink:0; }
.hnb-podcast-card__cover img { width:100%;height:100%;object-fit:cover; }
.hnb-podcast-card__info { flex:1;min-width:0; }
.hnb-podcast-card__ep { font-family:var(--hnb-font-ui);font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--hnb-accent);display:block;margin-bottom:3px; }
.hnb-podcast-card__info h4 { margin:0 0 2px;font-size:.875rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.hnb-podcast-card__info h4 a { color:var(--hnb-text);text-decoration:none; }
.hnb-podcast-card__info span { font-size:.72rem;color:var(--hnb-muted); }
.hnb-podcast-card__play-btn { width:34px;height:34px;border-radius:50%;background:var(--hnb-accent);border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;padding-left:2px;transition:transform .2s; }
.hnb-podcast-card__play-btn:hover { transform:scale(1.1); }

/* ════════════ GALLERY ════════════ */
.hnb-gallery-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:6px; }
.hnb-gallery-item { display:block;overflow:hidden;border-radius:4px;aspect-ratio:1/1; }
.hnb-gallery-item img { width:100%;height:100%;object-fit:cover;transition:transform .4s; }
.hnb-gallery-item:hover img { transform:scale(1.08); }

/* ════════════ SOCIAL COUNTER ════════════ */
.hnb-social-counter { display:flex;flex-direction:column;gap:8px; }
.hnb-social-btn { display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:var(--hnb-radius);text-decoration:none;transition:opacity .2s; }
.hnb-social-btn:hover { opacity:.9; }
.hnb-social-btn__info { display:flex;flex-direction:column; }
.hnb-social-btn__info strong { font-size:.95rem;color:#fff;font-weight:700; }
.hnb-social-btn__info span { font-size:.74rem;color:rgba(255,255,255,.75); }

/* ════════════ NEWSLETTER ════════════ */
.hnb-newsletter-widget { padding:20px;background:var(--hnb-bg-alt);border:1px solid var(--hnb-border);border-radius:var(--hnb-radius); }
.hnb-newsletter-widget__title { font-family:var(--hnb-font-h);font-size:1.1rem;margin:0 0 8px; }
.hnb-newsletter-form { display:flex;gap:6px;margin-top:14px;flex-wrap:wrap; }
.hnb-newsletter-form input { flex:1;min-width:180px;padding:10px 14px;border:1px solid var(--hnb-border);border-radius:6px;font-size:.875rem;background:var(--hnb-bg);color:var(--hnb-text); }
.hnb-newsletter-form button { padding:10px 20px;background:var(--hnb-accent);color:#fff;border:none;border-radius:6px;font-size:.8rem;font-weight:700;cursor:pointer;white-space:nowrap;transition:opacity .2s; }
.hnb-newsletter-form button:hover { opacity:.9; }
.hnb-nl-msg { width:100%;font-size:.8rem;margin-top:4px;padding:6px 10px;border-radius:4px; }
.hnb-nl-msg.success { background:#edfaef;color:#1a7e38; }
.hnb-nl-msg.error   { background:#fff0f0;color:#c62828; }

/* ════════════ SHARE ════════════ */
.hnb-share-widget { display:flex;gap:6px;flex-wrap:wrap; }
.hnb-share-btn { display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:6px;font-family:var(--hnb-font-ui);font-size:.76rem;font-weight:600;color:#fff;text-decoration:none;transition:opacity .2s; }
.hnb-share-btn:hover { opacity:.85; }

/* ════════════ AD ════════════ */
.hnb-ad-zone { text-align:center; }
.hnb-ad-placeholder { display:flex;align-items:center;justify-content:center;background:var(--hnb-bg-alt);border:2px dashed var(--hnb-border);border-radius:var(--hnb-radius);min-height:90px;width:100%; }
.hnb-ad-placeholder span { font-family:var(--hnb-font-ui);font-size:.78rem;color:var(--hnb-muted); }

/* ════════════ WEATHER ════════════ */
.hnb-weather-widget { padding:16px;background:linear-gradient(135deg,#1565C0,#1976D2);color:#fff;border-radius:var(--hnb-radius);text-align:center; }
.hnb-weather__city { font-family:var(--hnb-font-ui);font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;opacity:.8;margin-bottom:8px; }
.hnb-weather__main { display:flex;align-items:center;justify-content:center;gap:8px; }
.hnb-weather__temp { font-family:var(--hnb-font-h);font-size:2.5rem;font-weight:700; }
.hnb-weather__desc { font-size:.875rem;opacity:.85;margin:4px 0 10px; }
.hnb-weather__extra { display:flex;justify-content:center;gap:16px;font-size:.78rem;opacity:.7; }

/* ════════════ ABOUT ════════════ */
.hnb-about-widget { padding:20px;text-align:center; }
.hnb-about-widget__logo { max-width:160px;max-height:60px;object-fit:contain;margin-bottom:14px; }
.hnb-about-widget__name { font-family:var(--hnb-font-h);font-size:1.1rem;margin:0 0 8px; }
.hnb-about-widget__desc { font-size:.875rem;color:var(--hnb-muted);line-height:1.6;margin:0; }

/* ════════════ REVIEW ════════════ */
.hnb-review-widget { display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px;background:var(--hnb-bg-alt);border-radius:var(--hnb-radius);border:1px solid var(--hnb-border); }
.hnb-review-widget__score { font-family:var(--hnb-font-h);font-size:3rem;font-weight:900;line-height:1; }
.hnb-review-widget--excellent .hnb-review-widget__score { color:#2E7D32; }
.hnb-review-widget--good .hnb-review-widget__score { color:#1565C0; }
.hnb-review-widget--average .hnb-review-widget__score { color:#E65100; }
.hnb-review-widget--poor .hnb-review-widget__score { color:#C62828; }
.hnb-review-widget__bar { width:100%;height:8px;background:var(--hnb-border);border-radius:4px;overflow:hidden; }
.hnb-review-widget__bar div { height:100%;background:var(--hnb-accent);border-radius:4px;transition:width .6s ease; }
.hnb-review-widget__label { font-family:var(--hnb-font-ui);font-size:.74rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--hnb-muted); }

/* ════════════ TAGS ════════════ */
.hnb-tags-cloud { display:flex;flex-wrap:wrap;gap:6px; }
.hnb-tag { display:inline-block;padding:4px 12px;border:1px solid var(--hnb-border);border-radius:20px;font-family:var(--hnb-font-ui);font-size:.76rem;font-weight:500;color:var(--hnb-muted);text-decoration:none;transition:all var(--hnb-t); }
.hnb-tag:hover { background:var(--hnb-accent);border-color:var(--hnb-accent);color:#fff; }

/* ════════════ SEARCH ════════════ */
.hnb-search-widget__wrap { display:flex;border:1px solid var(--hnb-border);border-radius:6px;overflow:hidden; }
.hnb-search-widget__input { flex:1;padding:10px 14px;border:none;outline:none;font-size:.875rem;background:var(--hnb-bg);color:var(--hnb-text); }
.hnb-search-widget__btn { padding:0 14px;background:var(--hnb-accent);border:none;color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center; }

/* ════════════ TOC ════════════ */
.hnb-toc { background:var(--hnb-bg-alt);border:1px solid var(--hnb-border);border-radius:var(--hnb-radius);padding:18px 20px; }
.hnb-toc__list { list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px; }
.hnb-toc__item a { font-size:.85rem;color:var(--hnb-text);text-decoration:none;padding:2px 0;display:block; }
.hnb-toc__item a:hover { color:var(--hnb-accent); }
.hnb-toc__item--l1 { padding-left:16px; }
.hnb-toc__item--l2 { padding-left:32px; }

/* ════════════ RELATED ════════════ */
.hnb-related-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:16px; }

/* ════════════ POPUP ════════════ */
.hnb-nl-popup { position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center; }
.hnb-nl-popup__box { background:var(--hnb-bg);border-radius:var(--hnb-radius);padding:36px;max-width:480px;width:90%;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.2); }
.hnb-nl-popup__close { position:absolute;top:12px;right:16px;background:none;border:none;font-size:1.4rem;cursor:pointer;color:var(--hnb-muted); }
.hnb-nl-popup__box h3 { font-family:var(--hnb-font-h);font-size:1.4rem;margin:0 0 10px; }

/* ════════════ MINI PLAYER ════════════ */
.hnb-mini-player { display:flex;gap:12px;align-items:center;padding:14px;background:var(--hnb-bg-alt);border-radius:var(--hnb-radius);border:1px solid var(--hnb-border); }
.hnb-mini-player__thumb img { width:56px;height:56px;object-fit:cover;border-radius:6px; }
.hnb-mini-player__info strong { display:block;font-size:.875rem;margin-bottom:6px; }
.hnb-mini-player__audio { width:100%; }

/* ════════════ COUNTDOWN ════════════ */
.hnb-countdown { display:flex;gap:12px;justify-content:center;flex-wrap:wrap;padding:20px;background:var(--hnb-bg-alt);border-radius:var(--hnb-radius); }
.hnb-countdown__unit { display:flex;flex-direction:column;align-items:center;gap:4px;min-width:64px; }
.hnb-countdown__value { font-family:var(--hnb-font-h);font-size:2.5rem;font-weight:900;line-height:1;color:var(--hnb-accent); }
.hnb-countdown__unit span:last-child { font-family:var(--hnb-font-ui);font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--hnb-muted); }

/* ════════════ RESPONSIVE ════════════ */
@media (max-width: 768px) {
  .hnb-posts-grid, .hnb-posts-grid--3 { grid-template-columns: repeat(2,1fr); }
  .hnb-magazine  { grid-template-columns: 1fr; }
  .hnb-magazine__side { border-top: 1px solid var(--hnb-border); padding-top: 16px; margin-top: 4px; }
  .hnb-mag-a, .hnb-mag-b { grid-template-columns: 1fr; }
  .hnb-mag-a__main { grid-row: auto; }
  .hnb-mag-c__grid { grid-template-columns: repeat(2,1fr); }
  .hnb-video-grid { grid-template-columns: repeat(2,1fr); }
  .hnb-authors-grid { grid-template-columns: repeat(2,1fr); }
  .hnb-cat-grid { grid-template-columns: repeat(2,1fr); }
  .hnb-masonry { columns: 2; }
  .hnb-related-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .hnb-posts-grid, .hnb-posts-grid--3 { grid-template-columns: 1fr; }
  .hnb-video-grid { grid-template-columns: 1fr; }
  .hnb-gallery-grid { grid-template-columns: repeat(2,1fr); }
  .hnb-masonry { columns: 1; }
}