/* ==========================================================================
   Helthro Skeleton Loading System  —  skeleton.css
   Boneyard-philosophy: skeletons mirror real component layouts exactly.
   Load globally; classes are namespaced hb-sk-* to avoid collisions.
   ========================================================================== */

/* ── Keyframe ──────────────────────────────────────────────────────────── */
@keyframes hb-sk-shimmer {
    0%   { background-position: -800px 0; }
    100% { background-position:  800px 0; }
}

/* ── Base primitive ────────────────────────────────────────────────────── */
/*
   Any element with .hb-sk gets the shimmer gradient.
   Modifiers control shape/size. Compose them in HTML.
*/
.hb-sk {
    display: block;
    background: linear-gradient(
        90deg,
        #e4e7e6 25%,
        #eff1f0 50%,
        #e4e7e6 75%
    );
    background-size: 1600px 100%;
    animation: hb-sk-shimmer 1.7s ease-in-out infinite;
    border-radius: 3px;
}

/* Dark-mode skeleton */
html[data-theme="dark"] .hb-sk {
    background: linear-gradient(
        90deg,
        #1e2a2c 25%,
        #243032 50%,
        #1e2a2c 75%
    );
    background-size: 1600px 100%;
}

/* ── Shape modifiers ────────────────────────────────────────────────────── */
.hb-sk--circle  { border-radius: 50%; }
.hb-sk--rounded { border-radius: 8px; }
.hb-sk--pill    { border-radius: 20px; }

/* ── Width / height helpers ─────────────────────────────────────────────── */
.hb-sk--full    { width: 100%; }
.hb-sk--w-75    { width: 75%; }
.hb-sk--w-60    { width: 60%; }
.hb-sk--w-40    { width: 40%; }
.hb-sk--w-30    { width: 30%; }

.hb-sk--h-text  { height: 14px; }     /* single line of body text */
.hb-sk--h-sm    { height: 12px; }     /* small label / meta */
.hb-sk--h-title { height: 22px; }     /* heading line */
.hb-sk--h-btn   { height: 34px; }     /* button */

/* ── Spacing utilities (between skeleton lines) ─────────────────────────── */
.hb-sk + .hb-sk  { margin-top: 8px; }
.hb-sk--mt-4     { margin-top: 4px; }
.hb-sk--mt-12    { margin-top: 12px; }
.hb-sk--mt-16    { margin-top: 16px; }
.hb-sk--mt-20    { margin-top: 20px; }

/* =========================================================================
   COMPONENT SKELETONS
   Each block mirrors the layout of its real counterpart.
   ========================================================================= */

/* ── 1. Hero Feature Skeleton ───────────────────────────────────────────── */
/*
   Mirrors: .hb-hero__feature (min-height 440px, flex column, dark bg image)
   Structure: eyebrow top, title + author bottom
*/
.hb-sk-hero-feature {
    min-height: 440px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 24px;
    background: #1c2b2e;
    border-radius: 0;
    overflow: hidden;
}

/* Top eyebrow row */
.hb-sk-hero-feature__eyebrow {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* Bottom content block */
.hb-sk-hero-feature__body { }

.hb-sk-hero-feature__title {
    height: 44px;
    width: 80%;
    background: rgba(255,255,255,0.12);
    background-size: 1600px 100%;
    animation: hb-sk-shimmer 1.7s ease-in-out infinite;
    border-radius: 3px;
    margin-bottom: 12px;
}

.hb-sk-hero-feature__title--line2 {
    height: 44px;
    width: 60%;
    background: rgba(255,255,255,0.12);
    background-size: 1600px 100%;
    animation: hb-sk-shimmer 1.7s ease-in-out infinite;
    animation-delay: 0.05s;
    border-radius: 3px;
    margin-bottom: 20px;
}

.hb-sk-hero-feature__author {
    display: flex;
    align-items: center;
    gap: 12px;
}

.hb-sk-hero-feature__avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    flex-shrink: 0;
    background: rgba(255,255,255,0.15);
    background-size: 1600px 100%;
    animation: hb-sk-shimmer 1.7s ease-in-out infinite;
}

.hb-sk-hero-feature__author-name {
    height: 13px;
    width: 120px;
    background: rgba(255,255,255,0.12);
    background-size: 1600px 100%;
    animation: hb-sk-shimmer 1.7s ease-in-out infinite;
    border-radius: 3px;
}

/* Eyebrow pill on dark bg */
.hb-sk-hero-feature__pill {
    height: 26px;
    width: 80px;
    border-radius: 3px;
    background: rgba(255,255,255,0.12);
    background-size: 1600px 100%;
    animation: hb-sk-shimmer 1.7s ease-in-out infinite;
}

/* ── 2. Teaser Card Skeleton ────────────────────────────────────────────── */
/*
   Mirrors: .hb-teaser-card (padding 22px, has h3, p, cta link)
*/
.hb-sk-teaser {
    padding: 22px 20px;
    border-bottom: 1px solid #dde2db;
}

.hb-sk-teaser:last-child { border-bottom: 0; }

html[data-theme="dark"] .hb-sk-teaser {
    border-bottom-color: #2a3a3d;
}

.hb-sk-teaser__title-a {
    height: 16px;
    width: 90%;
    margin-bottom: 6px;
}

.hb-sk-teaser__title-b {
    height: 16px;
    width: 70%;
    margin-bottom: 14px;
}

.hb-sk-teaser__line  { height: 12px; width: 100%; margin-bottom: 6px; }
.hb-sk-teaser__line2 { height: 12px; width: 85%;  margin-bottom: 14px; }
.hb-sk-teaser__cta   { height: 12px; width: 80px; }

/* ── 3. Trending List Item Skeleton ─────────────────────────────────────── */
/*
   Mirrors: .hb-trending__item (flex row: rank + text)
   Note: .hb-trending__list has overflow:hidden; items sit inside it.
*/
.hb-sk-trending-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(0,0,0,0.07);
}

.hb-sk-trending-item:last-child { border-bottom: 0; }

html[data-theme="dark"] .hb-sk-trending-item {
    border-bottom-color: rgba(255,255,255,0.06);
}

.hb-sk-trending-item__rank {
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 50%;
}

.hb-sk-trending-item__body { flex: 1; min-width: 0; }
.hb-sk-trending-item__title { height: 14px; width: 90%; margin-bottom: 6px; }
.hb-sk-trending-item__meta  { height: 11px; width: 55%; }

/* ── 4. Article Detail Modal Skeleton ───────────────────────────────────── */
/*
   Mirrors: .hb-news-detail layout inside the modal dialog
*/
.hb-sk-detail {
    padding: 0;
}

.hb-sk-detail__kicker {
    height: 18px;
    width: 90px;
    margin-bottom: 16px;
}

.hb-sk-detail__title-a { height: 30px; width: 95%; margin-bottom: 10px; }
.hb-sk-detail__title-b { height: 30px; width: 75%; margin-bottom: 22px; }

.hb-sk-detail__meta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
}

.hb-sk-detail__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    flex-shrink: 0;
}

.hb-sk-detail__author-name { height: 12px; width: 110px; }
.hb-sk-detail__date        { height: 12px; width: 80px; }
.hb-sk-detail__readtime    { height: 12px; width: 65px; }

.hb-sk-detail__hero {
    width: 100%;
    height: 280px;
    margin-bottom: 22px;
    border-radius: 4px;
}

.hb-sk-detail__para   { height: 13px; width: 100%; margin-bottom: 8px; }
.hb-sk-detail__para-b { height: 13px; width: 92%;  margin-bottom: 8px; }
.hb-sk-detail__para-c { height: 13px; width: 97%;  margin-bottom: 8px; }
.hb-sk-detail__para-d { height: 13px; width: 80%;  margin-bottom: 22px; }

.hb-sk-detail__section-title { height: 18px; width: 140px; margin-bottom: 16px; }

/* Related articles grid inside modal */
.hb-sk-detail__related-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.hb-sk-detail__related-card {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.hb-sk-detail__related-thumb {
    width: 80px;
    height: 60px;
    flex-shrink: 0;
    border-radius: 3px;
}

.hb-sk-detail__related-body { flex: 1; min-width: 0; }
.hb-sk-detail__related-cat   { height: 10px; width: 60px; margin-bottom: 8px; }
.hb-sk-detail__related-title { height: 13px; width: 90%; margin-bottom: 6px; }
.hb-sk-detail__related-title2 { height: 13px; width: 70%; }

@media (max-width: 560px) {
    .hb-sk-detail__related-grid { grid-template-columns: 1fr; }
    .hb-sk-detail__hero { height: 180px; }
}

/* ── 5. News Feed Card Skeleton ─────────────────────────────────────────── */
/*
   Mirrors: .hb-feed-card (img top, body: kicker + title + excerpt + meta)
   Used in: latest_view.php, wellness_view.php, conditions_view.php AJAX tabs
*/
.hb-sk-feed-card {
    overflow: hidden;
    border-radius: 4px;
}

.hb-sk-feed-card__img  { width: 100%; height: 200px; border-radius: 4px 4px 0 0; }
.hb-sk-feed-card__body { padding: 16px; background: #fff; border-radius: 0 0 4px 4px; }

html[data-theme="dark"] .hb-sk-feed-card__body {
    background: #1a2628;
}

.hb-sk-feed-card__kicker { height: 11px; width: 70px; margin-bottom: 12px; }
.hb-sk-feed-card__title-a { height: 18px; width: 90%; margin-bottom: 8px; }
.hb-sk-feed-card__title-b { height: 18px; width: 65%; margin-bottom: 14px; }
.hb-sk-feed-card__line    { height: 12px; width: 100%; margin-bottom: 6px; }
.hb-sk-feed-card__line2   { height: 12px; width: 85%; margin-bottom: 14px; }
.hb-sk-feed-card__meta    { height: 11px; width: 50%; }

/* ── 6. News Item Card Skeleton ─────────────────────────────────────────── */
/*
   Mirrors the classic .item-block / .col-news grid cards from allnews_view.php
*/
.hb-sk-item-card {
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

html[data-theme="dark"] .hb-sk-item-card {
    background: #1a2628;
}

.hb-sk-item-card__thumb  { width: 100%; height: 180px; }
.hb-sk-item-card__body   { padding: 14px; }
.hb-sk-item-card__cat    { height: 11px; width: 60px; margin-bottom: 10px; }
.hb-sk-item-card__title-a { height: 16px; width: 95%; margin-bottom: 8px; }
.hb-sk-item-card__title-b { height: 16px; width: 70%; margin-bottom: 14px; }
.hb-sk-item-card__meta   { height: 11px; width: 55%; }

/* ── 7. Sidebar Block Skeleton ──────────────────────────────────────────── */
/*
   Mirrors: .hb-pick-card (img left 60×60, kicker + title right)
   Used in: home sidebar editor's picks, expert cards
*/
.hb-sk-sidebar-block {
    background: #f7f8f4;
    border: 1px solid #dde2db;
    padding: 16px;
    border-radius: 4px;
}

html[data-theme="dark"] .hb-sk-sidebar-block {
    background: #1a2628;
    border-color: #2a3a3d;
}

.hb-sk-sidebar-block__title { height: 13px; width: 120px; margin-bottom: 16px; }

.hb-sk-pick-card {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 16px;
}

.hb-sk-pick-card:last-child { margin-bottom: 0; }

.hb-sk-pick-card__thumb {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    border-radius: 3px;
}

.hb-sk-pick-card__body    { flex: 1; min-width: 0; padding-top: 2px; }
.hb-sk-pick-card__cat     { height: 10px; width: 55px; margin-bottom: 8px; }
.hb-sk-pick-card__title-a { height: 13px; width: 90%; margin-bottom: 6px; }
.hb-sk-pick-card__title-b { height: 13px; width: 65%; }

/* ── 8. Editorial Card Skeleton ─────────────────────────────────────────── */
/*
   Mirrors: .hb-editorial-card (img top half, body with kicker/title/excerpt/meta)
*/
.hb-sk-editorial-card {
    overflow: hidden;
    border-radius: 4px;
}

.hb-sk-editorial-card__img  { width: 100%; height: 220px; }
.hb-sk-editorial-card__body { padding: 20px; background: #fff; }

html[data-theme="dark"] .hb-sk-editorial-card__body {
    background: #1a2628;
}

.hb-sk-editorial-card__kicker  { height: 11px; width: 80px; margin-bottom: 12px; }
.hb-sk-editorial-card__title-a { height: 20px; width: 90%; margin-bottom: 8px; }
.hb-sk-editorial-card__title-b { height: 20px; width: 65%; margin-bottom: 14px; }
.hb-sk-editorial-card__line    { height: 12px; width: 100%; margin-bottom: 6px; }
.hb-sk-editorial-card__line2   { height: 12px; width: 80%; margin-bottom: 14px; }
.hb-sk-editorial-card__meta    { height: 11px; width: 55%; }

/* ── 9. Pagination skeleton ─────────────────────────────────────────────── */
/*
   Shows while an AJAX page load is in progress.
*/
.hb-sk-pagination {
    display: flex;
    gap: 8px;
    justify-content: center;
    padding: 20px 0;
}

.hb-sk-pagination__btn {
    width: 36px;
    height: 36px;
    border-radius: 4px;
}

/* ── 10. Load-more row skeleton ─────────────────────────────────────────── */
.hb-sk-load-more {
    height: 42px;
    width: 160px;
    margin: 24px auto 0;
    border-radius: 4px;
}

/* =========================================================================
   SKELETON WRAPPER STATES
   .hb-sk-wrap = container that alternates between skeleton and real content
   ========================================================================= */

/* Hide real content while skeleton is showing */
.hb-sk-wrap--loading > .hb-sk-wrap__content { display: none !important; }
.hb-sk-wrap--loading > .hb-sk-wrap__skeleton { display: block !important; }

/* Hide skeleton once content is ready */
.hb-sk-wrap--ready   > .hb-sk-wrap__skeleton { display: none !important; }
.hb-sk-wrap--ready   > .hb-sk-wrap__content  { display: block !important; }

/* Smooth fade-in when content appears */
.hb-sk-wrap__content { animation: hb-sk-fadeIn 0.3s ease; }

@keyframes hb-sk-fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0);   }
}

/* =========================================================================
   NEWS HERO SECTION — loading state overrides
   Replace .hb-news-loading placeholder blocks with proper skeleton HTML
   ========================================================================= */

/*
  When JS is loading, .hb-hero__feature carries .hb-news-loading.
  We reset any leftover text content styling from the old placeholder.
*/
.hb-hero__feature.hb-news-loading,
.hb-hero__teasers .hb-teaser-card.hb-news-loading,
.hb-trending__list .hb-trending__item.hb-news-loading {
    /* Strip text — skeleton elements render the visual */
    color: transparent;
    background-image: none !important;
}

/* =========================================================================
   RESPONSIVE
   ========================================================================= */

@media (max-width: 768px) {
    .hb-sk-hero-feature { min-height: 280px; }
    .hb-sk-detail__hero { height: 200px; }
    .hb-sk-feed-card__img { height: 160px; }
    .hb-sk-editorial-card__img { height: 160px; }
    .hb-sk-item-card__thumb { height: 140px; }
}