/* ══════════════════════════════════════════════════════════════
   HONEY NEWS WIDGET — DOUBLE COLUMN
   ══════════════════════════════════════════════════════════════ */

.hnw-widget { box-sizing: border-box; }
.hnw-widget * { box-sizing: border-box; }

.hnw-main-title { margin: 0 0 18px; font-size: 26px; font-weight: 700; }
.hnw-main-title.hnw-align-left   { text-align: left; }
.hnw-main-title.hnw-align-center { text-align: center; }
.hnw-main-title.hnw-align-right  { text-align: right; }

/* ── Two-column layout ── */
.hnw-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}
@media (max-width: 900px) {
    .hnw-columns { grid-template-columns: 1fr; gap: 20px; }
}

.hnw-col-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 3px solid #0d1b2a;
    padding-bottom: 8px;
    margin-bottom: 14px;
}
.hnw-col-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
}
.hnw-viewall {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    background: #c0392b;
    color: #fff !important;
    padding: 4px 10px;
    border-radius: 3px;
    text-decoration: none;
    white-space: nowrap;
}
.hnw-viewall:hover { opacity: 0.85; }

.hnw-empty { color: #888; font-style: italic; }

/* ── Cards ── */
.hnw-card {
    display: flex;
    flex-direction: column;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}
.hnw-card:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }

.hnw-card-small { flex-direction: row; gap: 12px; align-items: flex-start; }
.hnw-card-small .hnw-thumb-wrap { flex: 0 0 110px; width: 110px; }
.hnw-card-small .hnw-card-body  { flex: 1; min-width: 0; }
.hnw-card-small .hnw-excerpt    { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.hnw-thumb-wrap { position: relative; overflow: hidden; border-radius: 4px; margin-bottom: 10px; }
.hnw-card-small .hnw-thumb-wrap { margin-bottom: 0; }
.hnw-thumb-wrap img { width: 100%; height: auto; display: block; aspect-ratio: 16/10; object-fit: cover; }

.hnw-badge-likes, .hnw-badge-views {
    position: absolute; top: 8px; left: 8px;
    background: rgba(0,0,0,0.6); color: #fff;
    font-size: 11px; padding: 3px 7px; border-radius: 20px;
}
.hnw-badge-views { left: auto; right: 8px; }
.hnw-card-main .hnw-badge-likes { left: 8px; }

.hnw-share-toggle {
    position: absolute; top: 8px; right: 8px;
    width: 26px; height: 26px; line-height: 26px; text-align: center;
    background: rgba(0,0,0,0.6); color: #fff; border-radius: 50%;
    font-size: 12px; cursor: pointer;
}
.hnw-card-main .hnw-badge-views ~ .hnw-share-toggle,
.hnw-card-main .hnw-share-toggle { top: 40px; }
.hnw-share-flyout {
    position: absolute; top: 30px; right: 0;
    display: none; background: #fff; border-radius: 4px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.2); padding: 6px; white-space: nowrap; z-index: 5;
}
.hnw-share-toggle:hover .hnw-share-flyout { display: flex; gap: 6px; }
.hnw-share-flyout a {
    display: inline-block; width: 22px; height: 22px; line-height: 22px;
    text-align: center; background: #222; color: #fff !important; border-radius: 50%;
    font-size: 11px; text-decoration: none;
}

.hnw-cat-wrap { margin-bottom: 6px; }
.hnw-cat-badge {
    display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase;
    background: #eef1f4; color: #555; padding: 2px 8px; border-radius: 3px; margin-right: 4px;
}

.hnw-post-title { margin: 0 0 8px; line-height: 1.3; }
.hnw-card-main .hnw-post-title { font-size: 20px; }
.hnw-card-small .hnw-post-title { font-size: 14px; margin-bottom: 4px; }
.hnw-post-title a { color: inherit; text-decoration: none; }
.hnw-post-title a:hover { text-decoration: underline; }

/* ── Title highlight styles ── */
.hnw-hl-none a      { text-transform: none !important; letter-spacing: normal !important; }
.hnw-hl-underline a { text-transform: none !important; letter-spacing: normal !important; text-decoration: underline !important; text-underline-offset: 3px; }
.hnw-hl-marker a    { text-transform: none !important; letter-spacing: normal !important; background: linear-gradient(180deg, transparent 60%, #ffe066 60%); padding: 0 2px; }
.hnw-hl-box a       { text-transform: none !important; letter-spacing: normal !important; }
.hnw-hl-box         { border: 1.5px solid currentColor; display: inline-block; padding: 4px 10px; }
.hnw-hl-uppercase a { text-transform: uppercase !important; letter-spacing: 0.4px !important; }
.hnw-hl-lowercase a { text-transform: lowercase !important; letter-spacing: normal !important; }

/* ── Column title (Left/Right header) highlight styles ── */
.hnw-colhl-none      { text-transform: none !important; letter-spacing: normal !important; }
.hnw-colhl-underline { text-transform: none !important; letter-spacing: normal !important; text-decoration: underline !important; text-underline-offset: 3px; }
.hnw-colhl-marker     { text-transform: none !important; letter-spacing: normal !important; background: linear-gradient(180deg, transparent 60%, #ffe066 60%); padding: 0 4px; display: inline-block; }
.hnw-colhl-box        { text-transform: none !important; letter-spacing: normal !important; border: 1.5px solid currentColor; display: inline-block; padding: 4px 10px; }
.hnw-colhl-uppercase  { text-transform: uppercase !important; letter-spacing: 0.6px !important; }
.hnw-colhl-lowercase  { text-transform: lowercase !important; letter-spacing: normal !important; }

/* ── Title position: overlay-center ── */
.hnw-pos-overlay-center .hnw-thumb-wrap { position: relative; }
.hnw-overlay-title {
    position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,0.35); padding: 16px; text-align: center;
}
.hnw-overlay-title .hnw-post-title { margin: 0; }
.hnw-overlay-title .hnw-post-title a { color: #fff; }

.hnw-meta {
    display: flex; flex-wrap: wrap; gap: 10px;
    font-size: 12px; color: #777; margin-bottom: 8px;
}
.hnw-excerpt { font-size: 14px; line-height: 1.6; color: #444; margin: 0 0 8px; }
.hnw-fullpost { font-size: 14px; line-height: 1.65; }

.hnw-readmore { font-size: 12px; font-weight: 700; text-decoration: none; color: #c0392b; }
.hnw-readmore:hover { text-decoration: underline; }

/* ── Pagination ── */
.hnw-pagination {
    display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 14px;
}
.hnw-page-prev, .hnw-page-next {
    width: 30px; height: 30px; border-radius: 50%; border: 1px solid #ccc; background: #fff;
    cursor: pointer; font-size: 16px; line-height: 1;
}
.hnw-page-prev:disabled, .hnw-page-next:disabled { opacity: 0.35; cursor: not-allowed; }
.hnw-page-indicator { font-size: 12px; color: #666; }

/* ── Loading state while AJAX pagination fetches ── */
.hnw-col-body.hnw-loading { opacity: 0.4; pointer-events: none; transition: opacity 0.2s ease; }

/* ══════════════════════════════════════════════════════════════
   SCROLL ANIMATIONS — progressive enhancement
   (JS adds .hnw-js-ready to <html>; only then do animation classes
   apply, so nothing is hidden if JS is slow/blocked)
   ══════════════════════════════════════════════════════════════ */
html.hnw-js-ready .hnw-scroll-fade  .hnw-column { opacity: 0; transition: opacity 0.7s ease; }
html.hnw-js-ready .hnw-scroll-slide .hnw-column { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease, transform 0.7s ease; }
html.hnw-js-ready .hnw-scroll-zoom  .hnw-column { opacity: 0; transform: scale(0.94); transition: opacity 0.6s ease, transform 0.6s ease; }

html.hnw-js-ready .hnw-scroll-fade.hnw-in-view  .hnw-column,
html.hnw-js-ready .hnw-scroll-slide.hnw-in-view .hnw-column,
html.hnw-js-ready .hnw-scroll-zoom.hnw-in-view  .hnw-column {
    opacity: 1; transform: none;
}
.hnw-columns .hnw-column-right { transition-delay: 0.12s; }

/* ── Hover effects (applied per card) ── */
.hnw-hover-lift .hnw-card { transition: transform 0.25s ease, box-shadow 0.25s ease; }
.hnw-hover-lift .hnw-card:hover { transform: translateY(-4px); box-shadow: 0 10px 22px rgba(0,0,0,0.12); }

.hnw-hover-tilt .hnw-thumb-wrap { transition: transform 0.3s ease; transform-style: preserve-3d; }
.hnw-hover-tilt .hnw-card:hover .hnw-thumb-wrap { transform: rotate(-1.2deg) scale(1.02); }

.hnw-hover-glow .hnw-card { transition: box-shadow 0.3s ease; }
.hnw-hover-glow .hnw-card:hover { box-shadow: 0 0 0 3px rgba(192,57,43,0.25); border-radius: 6px; }

.hnw-hover-color-shift .hnw-post-title a { transition: color 0.25s ease; }
.hnw-hover-color-shift .hnw-card:hover .hnw-post-title a { color: #c0392b; }

/* ── Responsive: tablet / mobile ── */
@media (max-width: 600px) {
    .hnw-card-small { flex-direction: row; }
    .hnw-card-small .hnw-thumb-wrap { flex: 0 0 90px; width: 90px; }
    .hnw-card-main .hnw-post-title { font-size: 17px; }
    .hnw-main-title { font-size: 21px; }
}