/* =============================================================
   HOSPED INNER PAGES CSS — hosped-child/assets/css/hosped-inner.css
   Styles for: event detail, service, portfolio, blog pages.
   hosped-main.css must load before this file.
   ============================================================= */

/* ===== INNER PAGE BODY RESET ===== */
/* Navbar is always scrolled/solid on inner pages */
body.hosped-inner #mainNav {
    background: rgba(255,255,255,.97) !important;
    backdrop-filter: blur(16px);
    box-shadow: 0 1px 0 rgba(11,31,27,.08), var(--shadow-sm);
    padding: .65rem 0;
}

/* ===== PAGE HERO BANNER ===== */
.page-hero {
    background: var(--evergreen);
    padding: 7rem 0 3.5rem;
    position: relative;
    overflow: hidden;
}
.page-hero::before {
    content: '';
    position: absolute; inset: 0;
    background-image: radial-gradient(circle, rgba(163,255,18,.06) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
}
.page-hero-blob {
    position: absolute; top: -80px; right: -100px;
    width: 500px; height: 500px; pointer-events: none;
    background: radial-gradient(ellipse at center, rgba(0,156,27,.15) 0%, transparent 70%);
}
.page-hero-eyebrow {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: .7rem; font-weight: 700; letter-spacing: .22em;
    text-transform: uppercase; color: var(--lime-dark);
    margin-bottom: .85rem;
}
.page-hero-eyebrow::before { content: ''; display: block; width: 20px; height: 2px; background: var(--lime-dark); }
.page-hero-title {
    font-family: var(--font-display); font-weight: 900;
    font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.15;
    color: var(--white); margin-bottom: 1rem;
}
.page-hero-title .accent { color: var(--lime-dark); }
.page-hero-meta {
    display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem;
}
.page-hero-badge {
    display: inline-flex; align-items: center; gap: .4rem;
    background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.15);
    border-radius: 50px; padding: .3rem .9rem;
    font-size: .78rem; font-weight: 500; color: rgba(255,255,255,.85);
}
.page-hero-badge i { color: var(--lime-dark); font-size: .8rem; }

/* ===== BREADCRUMB ===== */
.hosped-breadcrumb {
    font-size: .78rem; color: rgba(255,255,255,.45);
    margin-bottom: 1.25rem; display: flex; align-items: center; gap: .4rem;
}
.hosped-breadcrumb a { color: rgba(255,255,255,.45); text-decoration: none; transition: color .2s; }
.hosped-breadcrumb a:hover { color: var(--lime-dark); }
.hosped-breadcrumb .sep { color: rgba(255,255,255,.25); }
.hosped-breadcrumb .current { color: rgba(255,255,255,.7); }

/* ===== INNER PAGE LAYOUT ===== */
.inner-content { padding: 4rem 0 5rem; background: var(--white); }

/* ===== EVENT DETAIL ===== */
.event-detail-image {
    width: 100%; max-height: 460px; object-fit: cover;
    border-radius: var(--radius-lg); margin-bottom: 2rem;
    box-shadow: var(--shadow-lg);
}
.event-info-card {
    background: var(--white); border: 1px solid var(--gray-200);
    border-radius: var(--radius); padding: 1.75rem;
    box-shadow: var(--shadow-md); position: sticky; top: 6rem;
}
.event-info-title {
    font-family: var(--font-display); font-weight: 800;
    font-size: 1.05rem; color: var(--evergreen); margin-bottom: 1.25rem;
    padding-bottom: .75rem; border-bottom: 1px solid var(--gray-200);
}
.event-info-row {
    display: flex; align-items: flex-start; gap: .75rem;
    margin-bottom: 1rem; font-size: .88rem; color: var(--gray-600);
}
.event-info-row i { color: var(--green); font-size: 1rem; flex-shrink: 0; margin-top: .1rem; }
.event-info-row strong { display: block; font-weight: 700; color: var(--evergreen); font-size: .82rem; margin-bottom: .1rem; }
.btn-register-lg {
    display: block; width: 100%; text-align: center;
    background: var(--green); color: var(--white);
    font-family: var(--font-display); font-weight: 700; font-size: .95rem;
    padding: .9rem; border-radius: var(--radius-sm);
    text-decoration: none; transition: all .25s; margin-top: 1.25rem;
}
.btn-register-lg:hover { background: var(--green-dark); color: var(--white); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,156,27,.3); }
.btn-wa-consult {
    display: block; width: 100%; text-align: center;
    background: transparent; color: var(--gray-600);
    font-family: var(--font-display); font-weight: 600; font-size: .85rem;
    padding: .75rem; border-radius: var(--radius-sm);
    border: 1.5px solid var(--gray-200);
    text-decoration: none; transition: all .25s; margin-top: .6rem;
}
.btn-wa-consult:hover { border-color: var(--green); color: var(--green); }

/* Event body content */
.event-body { font-size: .95rem; line-height: 1.85; color: var(--gray-600); }
.event-body h2, .event-body h3 { font-family: var(--font-display); font-weight: 700; color: var(--evergreen); margin: 2rem 0 .75rem; }
.event-body h2 { font-size: 1.35rem; }
.event-body h3 { font-size: 1.1rem; }
.event-body p { margin-bottom: 1.2rem; }
.event-body ul, .event-body ol { padding-left: 1.5rem; margin-bottom: 1.2rem; }
.event-body li { margin-bottom: .4rem; }
.event-body blockquote { border-left: 3px solid var(--green); padding-left: 1.25rem; margin: 1.5rem 0; font-style: italic; color: var(--gray-600); }

/* ===== SERVICE DETAIL ===== */
.service-hero-icon {
    width: 72px; height: 72px; background: rgba(163,255,18,.15);
    border-radius: 18px; display: flex; align-items: center; justify-content: center;
    font-size: 2rem; color: var(--lime-dark); margin-bottom: 1.5rem;
}
.service-body { font-size: .95rem; line-height: 1.85; color: var(--gray-600); }
.service-body h2, .service-body h3 { font-family: var(--font-display); font-weight: 700; color: var(--evergreen); margin: 2rem 0 .75rem; }
.service-body h2 { font-size: 1.35rem; }
.service-body h3 { font-size: 1.1rem; }
.service-body p { margin-bottom: 1.2rem; }
.service-body ul { padding-left: 1.5rem; margin-bottom: 1.2rem; }
.service-body li { margin-bottom: .5rem; }

.service-checklist { list-style: none; padding: 0; margin: 0 0 1.5rem; }
.service-checklist li {
    display: flex; align-items: flex-start; gap: .6rem;
    padding: .6rem 0; border-bottom: 1px solid var(--gray-200);
    font-size: .88rem; color: var(--gray-600);
}
.service-checklist li:last-child { border-bottom: none; }
.service-checklist li i { color: var(--green); font-size: 1rem; flex-shrink: 0; margin-top: .1rem; }

.service-cta-card {
    background: linear-gradient(135deg, var(--green) 0%, var(--green-dark) 100%);
    border-radius: var(--radius-lg); padding: 2rem;
    position: sticky; top: 6rem;
}
.service-cta-card .cta-title { font-family: var(--font-display); font-weight: 800; font-size: 1.1rem; color: var(--white); margin-bottom: .75rem; }
.service-cta-card .cta-sub  { font-size: .85rem; color: rgba(255,255,255,.75); line-height: 1.65; margin-bottom: 1.5rem; }

/* Related services */
.related-service-card {
    background: var(--gray-50); border: 1px solid var(--gray-200);
    border-radius: var(--radius); padding: 1.25rem;
    transition: all .25s; text-decoration: none; display: block;
}
.related-service-card:hover { border-color: rgba(0,156,27,.25); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.related-service-icon { width: 40px; height: 40px; background: var(--green-pale); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; color: var(--green); margin-bottom: .75rem; }
.related-service-title { font-family: var(--font-display); font-weight: 700; font-size: .88rem; color: var(--evergreen); margin-bottom: .3rem; }
.related-service-desc  { font-size: .78rem; color: var(--gray-600); line-height: 1.5; }

/* Service card "view detail" button */
.btn-service-detail {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .78rem; font-weight: 700; color: var(--green);
    text-decoration: none; margin-top: .75rem; transition: gap .2s;
}
.btn-service-detail:hover { gap: .6rem; color: var(--green-dark); }

/* ===== PORTFOLIO DETAIL ===== */
.portfolio-hero-image {
    width: 100%; max-height: 500px; object-fit: cover;
    border-radius: var(--radius-lg); margin-bottom: 2rem;
    box-shadow: var(--shadow-lg);
}
.portfolio-result-card {
    background: var(--green); border-radius: var(--radius);
    padding: 1.5rem; margin-bottom: 1.5rem; color: var(--white);
}
.portfolio-result-card .result-label { font-size: .72rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: rgba(255,255,255,.7); margin-bottom: .5rem; }
.portfolio-result-card .result-value { font-family: var(--font-display); font-weight: 900; font-size: 1.6rem; color: var(--white); line-height: 1; }
.portfolio-result-card .result-desc  { font-size: .8rem; color: rgba(255,255,255,.75); margin-top: .3rem; }

.portfolio-meta-card {
    background: var(--white); border: 1px solid var(--gray-200);
    border-radius: var(--radius); padding: 1.5rem;
    box-shadow: var(--shadow-sm); margin-bottom: 1.25rem;
}
.portfolio-meta-row { display: flex; gap: .75rem; margin-bottom: .85rem; font-size: .85rem; }
.portfolio-meta-row:last-child { margin-bottom: 0; }
.portfolio-meta-row i { color: var(--orange); font-size: 1rem; flex-shrink: 0; margin-top: .1rem; }
.portfolio-meta-row strong { display: block; font-size: .72rem; font-weight: 700; color: var(--gray-400); text-transform: uppercase; letter-spacing: .08em; margin-bottom: .1rem; }
.portfolio-meta-row span { color: var(--evergreen); font-weight: 500; }

.portfolio-body { font-size: .95rem; line-height: 1.85; color: var(--gray-600); }
.portfolio-body h2, .portfolio-body h3 { font-family: var(--font-display); font-weight: 700; color: var(--evergreen); margin: 2rem 0 .75rem; }
.portfolio-body h2 { font-size: 1.3rem; }
.portfolio-body h3 { font-size: 1.05rem; }
.portfolio-body p { margin-bottom: 1.2rem; }
.portfolio-body ul { padding-left: 1.5rem; margin-bottom: 1.2rem; }
.portfolio-body li { margin-bottom: .4rem; }
.portfolio-body blockquote { border-left: 3px solid var(--orange); padding-left: 1.25rem; margin: 1.5rem 0; font-style: italic; }

.category-badge-orange {
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
    color: var(--orange); background: var(--orange-pale); border-radius: 50px; padding: .25rem .85rem;
    margin-bottom: 1rem;
}

/* ===== BLOG — ARCHIVE / INDEX ===== */
.blog-search-bar {
    background: var(--white); border: 1px solid var(--gray-200);
    border-radius: 50px; padding: .5rem .5rem .5rem 1.25rem;
    display: flex; align-items: center; gap: .5rem;
    box-shadow: var(--shadow-sm); margin-bottom: 2.5rem;
}
.blog-search-bar input {
    flex: 1; border: none; outline: none; font-family: var(--font-body);
    font-size: .9rem; color: var(--evergreen); background: transparent;
}
.blog-search-bar input::placeholder { color: var(--gray-400); }
.blog-search-bar button {
    background: var(--green); color: var(--white); border: none;
    border-radius: 50px; padding: .55rem 1.25rem;
    font-family: var(--font-display); font-weight: 700; font-size: .82rem;
    cursor: pointer; transition: background .2s; display: flex; align-items: center; gap: .4rem;
}
.blog-search-bar button:hover { background: var(--green-dark); }

.blog-card {
    background: var(--white); border: 1px solid var(--gray-200);
    border-radius: var(--radius); overflow: hidden;
    transition: all .3s ease; height: 100%;
    display: flex; flex-direction: column; box-shadow: var(--shadow-sm);
}
.blog-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: rgba(0,156,27,.2); }
.blog-card-img { width: 100%; height: 210px; object-fit: cover; display: block; transition: transform .4s; }
.blog-card:hover .blog-card-img { transform: scale(1.03); }
.blog-card-img-wrap { overflow: hidden; }
.blog-card-body { padding: 1.5rem; flex: 1; display: flex; flex-direction: column; }
.blog-card-cats { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .75rem; }
.blog-card-cat  { font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--green); background: var(--green-pale); border-radius: 50px; padding: .2rem .65rem; text-decoration: none; }
.blog-card-cat:hover { background: var(--green); color: var(--white); }
.blog-card-title { font-family: var(--font-display); font-weight: 700; font-size: 1.02rem; color: var(--evergreen); line-height: 1.4; margin-bottom: .6rem; text-decoration: none; display: block; flex: 1; }
.blog-card-title:hover { color: var(--green); }
.blog-card-excerpt { font-size: .83rem; color: var(--gray-600); line-height: 1.65; margin-bottom: 1rem; }
.blog-card-meta { display: flex; align-items: center; justify-content: space-between; font-size: .75rem; color: var(--gray-400); margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--gray-200); }
.blog-card-meta-left { display: flex; align-items: center; gap: .5rem; }
.blog-card-author-img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.blog-read-more { color: var(--green); font-weight: 600; font-size: .78rem; text-decoration: none; display: flex; align-items: center; gap: .3rem; transition: gap .2s; }
.blog-read-more:hover { gap: .5rem; }

/* Filter tabs */
.blog-filter-tabs { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 2rem; }
.blog-filter-tab {
    padding: .4rem 1rem; border-radius: 50px; font-size: .8rem; font-weight: 600;
    border: 1.5px solid var(--gray-200); background: var(--white); color: var(--gray-600);
    cursor: pointer; transition: all .2s; text-decoration: none;
}
.blog-filter-tab:hover, .blog-filter-tab.active { background: var(--green); border-color: var(--green); color: var(--white); }

/* Pagination */
.hosped-pagination { display: flex; gap: .5rem; justify-content: center; margin-top: 3rem; }
.hosped-pagination a, .hosped-pagination span {
    width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-sm); font-size: .85rem; font-weight: 600;
    border: 1.5px solid var(--gray-200); color: var(--gray-600); text-decoration: none; transition: all .2s;
}
.hosped-pagination a:hover { border-color: var(--green); color: var(--green); }
.hosped-pagination .current { background: var(--green); border-color: var(--green); color: var(--white); }

/* ===== BLOG — SINGLE POST ===== */
.article-hero-image { width: 100%; max-height: 480px; object-fit: cover; border-radius: var(--radius-lg); margin-bottom: 2.5rem; box-shadow: var(--shadow-lg); }
.article-cats { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: 1rem; }
.article-cat  { font-size: .65rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--green); background: var(--green-pale); border-radius: 50px; padding: .2rem .65rem; text-decoration: none; }
.article-cat:hover { background: var(--green); color: var(--white); }

.article-title { font-family: var(--font-display); font-weight: 900; font-size: clamp(1.6rem, 3.5vw, 2.4rem); line-height: 1.2; color: var(--evergreen); margin-bottom: 1rem; }
.article-meta { display: flex; flex-wrap: wrap; gap: 1rem; font-size: .8rem; color: var(--gray-400); margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--gray-200); }
.article-meta-item { display: flex; align-items: center; gap: .4rem; }
.article-meta-item i { color: var(--green); }
.article-author-img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }

/* Article body typography */
.article-body { font-size: 1rem; line-height: 1.9; color: var(--gray-600); }
.article-body h2 { font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; color: var(--evergreen); margin: 2.5rem 0 .85rem; padding-top: .5rem; }
.article-body h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; color: var(--evergreen); margin: 2rem 0 .65rem; }
.article-body h4 { font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--evergreen); margin: 1.5rem 0 .5rem; }
.article-body p { margin-bottom: 1.4rem; }
.article-body ul, .article-body ol { padding-left: 1.6rem; margin-bottom: 1.4rem; }
.article-body li { margin-bottom: .5rem; }
.article-body blockquote { background: var(--green-pale); border-left: 4px solid var(--green); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 1.25rem 1.5rem; margin: 2rem 0; font-style: italic; color: var(--green-dark); }
.article-body blockquote p { margin-bottom: 0; }
.article-body img { max-width: 100%; border-radius: var(--radius-sm); margin: 1rem 0; }
.article-body a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.article-body a:hover { color: var(--green-dark); }
.article-body strong { font-weight: 700; color: var(--evergreen); }
.article-body code { background: var(--gray-100); color: var(--evergreen); font-size: .87em; padding: .1em .4em; border-radius: 4px; font-family: monospace; }
.article-body pre { background: var(--evergreen); color: var(--lime-dark); padding: 1.5rem; border-radius: var(--radius-sm); overflow-x: auto; margin-bottom: 1.4rem; }
.article-body pre code { background: none; color: inherit; padding: 0; }

/* Tags */
.article-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--gray-200); }
.article-tag { font-size: .75rem; font-weight: 600; color: var(--gray-600); background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 50px; padding: .25rem .85rem; text-decoration: none; transition: all .2s; }
.article-tag:hover { background: var(--green-pale); border-color: var(--green); color: var(--green); }

/* Share bar */
.share-bar { display: flex; align-items: center; gap: .75rem; margin-top: 2rem; padding: 1.25rem 1.5rem; background: var(--gray-50); border-radius: var(--radius); }
.share-bar-label { font-size: .8rem; font-weight: 700; color: var(--gray-600); margin-right: .25rem; }
.share-btn { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; text-decoration: none; font-size: .9rem; transition: all .2s; }
.share-btn.wa  { background: #25D366; color: var(--white); }
.share-btn.li  { background: #0A66C2; color: var(--white); }
.share-btn.tw  { background: #1DA1F2; color: var(--white); }
.share-btn.cp  { background: var(--gray-200); color: var(--gray-800); }
.share-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }

/* ===== SIDEBAR ===== */
.sidebar { position: sticky; top: 6rem; }
.sidebar-widget { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius); padding: 1.5rem; margin-bottom: 1.5rem; box-shadow: var(--shadow-sm); }
.sidebar-widget-title { font-family: var(--font-display); font-weight: 700; font-size: .88rem; color: var(--evergreen); margin-bottom: 1.1rem; padding-bottom: .65rem; border-bottom: 2px solid var(--green-pale); }
.sidebar-widget-title::first-letter { color: var(--green); }

/* Sidebar search */
.sidebar-search { display: flex; gap: .5rem; }
.sidebar-search input { flex: 1; border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm); padding: .55rem .85rem; font-size: .85rem; outline: none; font-family: var(--font-body); transition: border-color .2s; }
.sidebar-search input:focus { border-color: var(--green); }
.sidebar-search button { background: var(--green); color: var(--white); border: none; border-radius: var(--radius-sm); padding: .55rem .85rem; cursor: pointer; font-size: .9rem; transition: background .2s; }
.sidebar-search button:hover { background: var(--green-dark); }

/* Sidebar categories */
.sidebar-cats { list-style: none; padding: 0; margin: 0; }
.sidebar-cats li { border-bottom: 1px solid var(--gray-200); }
.sidebar-cats li:last-child { border-bottom: none; }
.sidebar-cats a { display: flex; justify-content: space-between; align-items: center; padding: .55rem 0; font-size: .85rem; color: var(--gray-600); text-decoration: none; transition: color .2s; }
.sidebar-cats a:hover { color: var(--green); }
.sidebar-cats .count { background: var(--green-pale); color: var(--green-dark); font-size: .7rem; font-weight: 700; padding: .1rem .5rem; border-radius: 50px; }

/* Sidebar latest posts */
.sidebar-post { display: flex; gap: .75rem; padding: .65rem 0; border-bottom: 1px solid var(--gray-200); text-decoration: none; }
.sidebar-post:last-child { border-bottom: none; padding-bottom: 0; }
.sidebar-post-img { width: 64px; height: 64px; border-radius: var(--radius-sm); object-fit: cover; flex-shrink: 0; }
.sidebar-post-img-placeholder { width: 64px; height: 64px; border-radius: var(--radius-sm); background: var(--green-pale); display: flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--green); font-size: 1.2rem; }
.sidebar-post-title { font-family: var(--font-display); font-weight: 700; font-size: .82rem; color: var(--evergreen); line-height: 1.4; margin-bottom: .25rem; transition: color .2s; }
.sidebar-post:hover .sidebar-post-title { color: var(--green); }
.sidebar-post-date { font-size: .72rem; color: var(--gray-400); }

/* Sidebar tags */
.sidebar-tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.sidebar-tag { font-size: .75rem; font-weight: 600; color: var(--gray-600); background: var(--gray-50); border: 1px solid var(--gray-200); border-radius: 50px; padding: .2rem .75rem; text-decoration: none; transition: all .2s; }
.sidebar-tag:hover { background: var(--green-pale); border-color: var(--green); color: var(--green); }

/* Sidebar CTA */
.sidebar-cta-card { background: linear-gradient(135deg, var(--green) 0%, var(--green-dark) 100%); border-radius: var(--radius); padding: 1.5rem; text-align: center; }
.sidebar-cta-card .cta-icon { font-size: 2rem; color: rgba(255,255,255,.8); margin-bottom: .75rem; }
.sidebar-cta-card .cta-title { font-family: var(--font-display); font-weight: 800; font-size: .95rem; color: var(--white); margin-bottom: .5rem; }
.sidebar-cta-card .cta-sub   { font-size: .8rem; color: rgba(255,255,255,.7); margin-bottom: 1.1rem; line-height: 1.55; }
.sidebar-cta-card a { display: block; background: var(--white); color: var(--green-dark); font-family: var(--font-display); font-weight: 700; font-size: .82rem; padding: .65rem; border-radius: var(--radius-sm); text-decoration: none; transition: all .2s; }
.sidebar-cta-card a:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.15); }

/* Related articles */
.related-articles { background: var(--gray-50); padding: 4rem 0; border-top: 1px solid var(--gray-200); }
.related-articles .section-title { font-size: 1.5rem; }

/* ===== RESPONSIVE INNER PAGES ===== */
@media (max-width: 991px) {
    .event-info-card, .service-cta-card, .sidebar { position: static; }
    .page-hero { padding: 6rem 0 2.5rem; }
}
@media (max-width: 767px) {
    .article-title { font-size: 1.5rem; }
    .page-hero-title { font-size: 1.7rem; }
    .blog-filter-tabs { gap: .35rem; }
    .blog-filter-tab { font-size: .75rem; padding: .35rem .75rem; }
}

/* ===== ARCHIVE TAB BAR (Event toggle: Mendatang/Selesai) ===== */
.archive-tab-bar {
    display: flex;
    gap: .5rem;
    margin-bottom: 2.5rem;
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    padding: .35rem;
    width: fit-content;
}
.archive-tab {
    display: flex; align-items: center; gap: .5rem;
    padding: .65rem 1.4rem;
    border-radius: calc(var(--radius) - 4px);
    font-family: var(--font-display);
    font-weight: 700; font-size: .88rem;
    text-decoration: none; color: var(--gray-600);
    transition: all .25s;
}
.archive-tab:hover { color: var(--green); background: var(--white); }
.archive-tab.active {
    background: var(--green);
    color: var(--white);
    box-shadow: var(--shadow-sm);
}
.tab-count {
    background: rgba(255,255,255,.25);
    border-radius: 50px;
    padding: .05rem .5rem;
    font-size: .75rem;
    font-weight: 700;
}
.archive-tab:not(.active) .tab-count { background: var(--gray-200); color: var(--gray-600); }

/* Past event card subtle muted look */
.event-card-past { opacity: .82; }
.event-past-badge {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: .65rem; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: var(--gray-600);
    background: var(--gray-100); border-radius: 50px;
    padding: .2rem .65rem; margin-bottom: .5rem; margin-left: .35rem;
}

/* ===== TRUSTED CLIENTS SECTION (homepage) ===== */
.client-tab-nav {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
    border-bottom: 2px solid var(--gray-200);
    padding-bottom: 0;
}
.client-tab-btn {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .65rem 1.25rem;
    font-family: var(--font-display); font-weight: 700; font-size: .85rem;
    color: var(--gray-600); background: transparent; border: none;
    border-bottom: 2px solid transparent; margin-bottom: -2px;
    cursor: pointer; transition: all .25s;
}
.client-tab-btn:hover { color: var(--green); }
.client-tab-btn.active { color: var(--green); border-bottom-color: var(--green); }

.client-panel { display: none; }
.client-panel.active { display: block; }

.client-logo-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
}
.client-logo-item {
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
}
.client-logo-box {
    width: 100%; aspect-ratio: 3/2;
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-sm);
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
    transition: all .25s;
    box-shadow: var(--shadow-sm);
}
.client-logo-box:hover {
    border-color: rgba(0,156,27,.2);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.client-logo-img {
    max-width: 100%; max-height: 64px;
    width: auto; height: auto;
    object-fit: contain;
    filter: grayscale(40%);
    transition: filter .25s;
}
.client-logo-box:hover .client-logo-img { filter: grayscale(0%); }
.client-logo-fallback {
    display: flex; flex-direction: column; align-items: center; gap: .3rem;
    color: var(--green); font-size: .85rem;
}
.client-logo-fallback i { font-size: 1.5rem; }
.client-logo-name {
    font-size: .72rem; font-weight: 600; color: var(--evergreen);
    margin-top: .4rem; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.client-logo-city { font-size: .67rem; color: var(--gray-400); }

/* ===== TRAINER CARDS ===== */
.trainer-card {
    background: var(--white);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: all .3s ease;
    height: 100%;
    display: flex; flex-direction: column;
}
.trainer-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(0,156,27,.2);
}
.trainer-photo-wrap { position: relative; overflow: hidden; }
.trainer-photo {
    width: 100%; height: 220px;
    object-fit: cover; object-position: top;
    display: block;
    transition: transform .4s ease;
}
.trainer-card:hover .trainer-photo { transform: scale(1.04); }
.trainer-photo-placeholder {
    width: 100%; height: 220px;
    background: var(--green-pale);
    display: flex; align-items: center; justify-content: center;
    color: var(--green); font-size: 3.5rem;
}
.trainer-body { padding: 1.25rem; flex: 1; display: flex; flex-direction: column; }
.trainer-title-prefix { font-size: .72rem; color: var(--green); font-weight: 700; margin-bottom: .1rem; }
.trainer-name {
    font-family: var(--font-display); font-weight: 800;
    font-size: .98rem; color: var(--evergreen); margin-bottom: .35rem;
    line-height: 1.3;
}
.trainer-position { font-size: .8rem; color: var(--orange); font-weight: 600; margin-bottom: .4rem; }
.trainer-inst { font-size: .75rem; color: var(--gray-400); margin-bottom: .75rem; display: flex; align-items: center; gap: .3rem; }
.trainer-specs { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .75rem; margin-top: auto; }
.trainer-spec-tag {
    font-size: .67rem; font-weight: 600; color: var(--green-dark);
    background: var(--green-pale); border-radius: 50px; padding: .15rem .55rem;
    transition: all .2s;
}
.trainer-spec-tag.active { background: var(--green); color: var(--white); }
.trainer-spec-tag:hover { background: var(--green); color: var(--white); }
.trainer-linkedin {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 8px;
    background: #0A66C2; color: var(--white); font-size: .9rem;
    text-decoration: none; transition: all .2s; margin-top: auto;
}
.trainer-linkedin:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(10,102,194,.35); }

/* ===== FOOTER LOGO IMG ===== */
.footer-logo-img {
    height: 36px; width: auto;
    filter: brightness(0) invert(1);
    opacity: .85;
}

/* ===== RESPONSIVE — NEW SECTIONS ===== */
@media (max-width: 1199px) {
    .client-logo-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 991px) {
    .client-logo-grid { grid-template-columns: repeat(3, 1fr); }
    .archive-tab-bar { width: 100%; }
    .archive-tab { flex: 1; justify-content: center; }
}
@media (max-width: 767px) {
    .client-logo-grid { grid-template-columns: repeat(2, 1fr); }
    .trainer-photo { height: 180px; }
    .trainer-photo-placeholder { height: 180px; }
}
@media (max-width: 480px) {
    .client-tab-btn { font-size: .78rem; padding: .55rem .85rem; }
}