/* ==========================================================================
   iPressly v2 — Homepage CSS
   ALL colors use CSS variables — override from Customizer → Colors
   --hp-orange  = Homepage Accent Color (Customizer → Colors → Homepage Accent)
   --hp-text    = Body Text Color
   --hp-border  = derived border
   --hp-bg      = Body Background
   NO hardcoded hex colors below this line.
   ========================================================================== */

/* ── Section wrapper ─────────────────────────────────────────────────────── */
.hp-section { padding: 2.5rem 0; background: var(--hp-bg) }
.hp-section + .hp-section { border-top: 1px solid var(--hp-border) }

/* ── Section header row ──────────────────────────────────────────────────── */
.hp-sec-head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 1.375rem;
}
.hp-sec-title {
    font-size: 1.25rem; font-weight: 700; color: var(--hp-text); margin: 0;
}
.hp-view-more {
    display: inline-flex; align-items: center;
    font-size: .8rem; font-weight: 600; color: var(--hp-orange);
    border: 1.5px solid var(--hp-orange); border-radius: 99px;
    padding: .3rem .9rem; white-space: nowrap; transition: all .15s;
}
.hp-view-more:hover { background: var(--hp-orange); color: var(--stf-body-bg) }

/* ── HERO ────────────────────────────────────────────────────────────────── */
.hp-hero {
    position: relative; min-height: 600px;
    display: flex; align-items: flex-end; overflow: hidden;
}
.hp-hero__bg {
    position: absolute; inset: 0;
    background-size: cover; background-position: center;
}
.hp-hero__gradient {
    position: absolute; inset: 0;
    background: linear-gradient(90deg,
        rgba(0,0,0,.82) 0%,
        rgba(0,0,0,.55) 55%,
        rgba(0,0,0,.08) 100%
    );
}
.hp-hero__wrap {
    position: relative; z-index: 2; width: 100%;
    display: grid; grid-template-columns: 1fr 340px; gap: 1.5rem;
    padding: 4rem 0 3.5rem; align-items: end;
}
@media(max-width:880px) {
    .hp-hero__wrap { grid-template-columns: 1fr }
    .hp-trending-card { display: none }
}
.hp-hero__content { color: #fff }
.hp-hero__badge {
    display: inline-block; background: var(--hp-orange); color: #fff;
    font-size: .68rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .6px; padding: .2rem .55rem; border-radius: 4px; margin-bottom: .75rem;
}
.hp-hero__title {
    font-size: clamp(1.5rem, 3vw, 2.25rem); font-weight: 800;
    line-height: 1.2; color: #fff; margin-bottom: .75rem;
}
.hp-hero__title a { color: #fff }
.hp-hero__title a:hover { opacity: .9 }
.hp-hero__excerpt {
    font-size: .9rem; color: rgba(255,255,255,.8); line-height: 1.6;
    margin-bottom: 1rem; max-width: 560px;
}
.hp-hero__meta {
    display: flex; align-items: center; gap: .5rem;
    font-size: .78rem; color: rgba(255,255,255,.75); flex-wrap: wrap;
}
.hp-hero__avatar { border-radius: 50%; width: 26px; height: 26px; flex-shrink: 0 }
.hp-hero__author { color: #fff; font-weight: 600 }
.hp-hero__author:hover { opacity: .85 }
.hp-hero__sep { opacity: .4 }

/* ── TRENDING PANEL ─────────────────────────────────────────────────────── */
.hp-trending-card {
    background: var(--hp-bg); border-radius: 16px; overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,.18); align-self: stretch;
}
.hp-trending-card__hd {
    padding: 1rem 1.125rem; border-bottom: 1px solid var(--hp-border);
    font-size: .95rem; font-weight: 800; color: var(--hp-text);
}
.hp-trending-card__list { list-style: none; margin: 0; padding: 0 }
.hp-trending-card__item { border-bottom: 1px solid var(--hp-border) }
.hp-trending-card__item:last-child { border-bottom: none }
.hp-trending-card__link {
    display: flex; gap: .625rem; padding: .75rem 1rem;
    color: var(--hp-text); transition: background .1s;
}
.hp-trending-card__link:hover { background: var(--stf-surface) }
.hp-trending-card__thumb {
    width: 56px; height: 42px; object-fit: cover;
    border-radius: 6px; flex-shrink: 0;
}
.hp-trending-card__thumb-ph {
    width: 56px; height: 42px; background: var(--hp-border);
    border-radius: 6px; flex-shrink: 0;
}
.hp-trending-card__info { flex: 1; min-width: 0 }
.hp-trending-card__ttl {
    font-size: .78rem; font-weight: 700; line-height: 1.3; color: var(--hp-text);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; margin-bottom: .2rem;
}
.hp-trending-card__link:hover .hp-trending-card__ttl { color: var(--hp-orange) }
.hp-trending-card__meta {
    display: flex; align-items: center; gap: .3rem;
    font-size: .67rem; color: var(--stf-muted);
}
.hp-trending-card__av { border-radius: 50%; width: 14px; height: 14px; flex-shrink: 0 }
.hp-trending-card__author { font-weight: 600; color: var(--hp-text); font-size: .67rem }
.hp-trending-card__vm {
    display: block; text-align: center; padding: .75rem;
    font-size: .8rem; font-weight: 700; color: var(--hp-orange);
    background: var(--hp-orange-light); border-top: 1px solid var(--hp-border);
    transition: all .15s;
}
.hp-trending-card__vm:hover { background: var(--hp-orange); color: #fff }

/* ── MARKET UPDATES ─────────────────────────────────────────────────────── */
.hp-market { background: var(--stf-surface); padding: 2.5rem 0 }
.hp-market__grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem;
}
@media(max-width:768px) { .hp-market__grid { grid-template-columns: 1fr } }

.hp-mkt-col {
    background: var(--hp-bg); border-radius: var(--hp-radius);
    border: 1px solid var(--hp-border); overflow: hidden;
}
.hp-mkt-col__hd {
    padding: .875rem 1rem;
    border-bottom: 3px solid var(--hp-orange);
    display: flex; justify-content: space-between; align-items: center;
}
.hp-mkt-col__ttl { font-size: .9rem; font-weight: 800; color: var(--hp-text); margin: 0 }
.hp-mkt-col__ttl a { color: var(--hp-text) }
.hp-mkt-col__ttl a:hover { color: var(--hp-orange) }
.hp-mkt-col__badge {
    font-size: .6rem; font-weight: 700; text-transform: uppercase;
    background: var(--hp-orange-light); color: var(--hp-orange);
    border: 1px solid var(--hp-orange); border-radius: 99px; padding: .1rem .45rem;
    opacity: .6;
}
.hp-mkt-list { list-style: none; margin: 0; padding: 0 }
.hp-mkt-item { border-bottom: 1px solid var(--hp-border) }
.hp-mkt-item:last-child { border-bottom: none }
.hp-mkt-item__link {
    display: flex; gap: .625rem; padding: .75rem 1rem;
    color: var(--hp-text); align-items: center; transition: background .1s;
}
.hp-mkt-item__link:hover { background: var(--hp-orange-light) }
.hp-mkt-item__thumb {
    width: 54px; height: 40px; object-fit: cover;
    border-radius: 6px; flex-shrink: 0;
}
.hp-mkt-item__thumb-ph {
    width: 54px; height: 40px; background: var(--hp-border);
    border-radius: 6px; flex-shrink: 0;
}
.hp-mkt-item__body { flex: 1; min-width: 0 }
.hp-mkt-item__ttl {
    font-size: .8rem; font-weight: 600; line-height: 1.3; color: var(--hp-text);
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; margin-bottom: .15rem;
}
.hp-mkt-item__link:hover .hp-mkt-item__ttl { color: var(--hp-orange) }
.hp-mkt-item__author { font-size: .68rem; color: var(--stf-muted) }
.hp-mkt-item__arrow {
    font-size: .875rem; color: var(--stf-border); flex-shrink: 0; transition: all .15s;
}
.hp-mkt-item__link:hover .hp-mkt-item__arrow { color: var(--hp-orange); transform: translateX(2px) }

/* ── VIDEO / SHORT STORY ────────────────────────────────────────────────── */
.hp-video { padding: 2.5rem 0 }
.hp-video__grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem;
}
@media(max-width:768px) { .hp-video__grid { grid-template-columns: 1fr } }

.hp-vid-card { border-radius: var(--hp-radius); overflow: hidden; background: var(--hp-bg) }
.hp-vid-card__media {
    position: relative; display: block;
    aspect-ratio: 4/5; overflow: hidden; background: var(--stf-nav-bg);
}
.hp-vid-card__img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .25s;
}
.hp-vid-card__media:hover .hp-vid-card__img { transform: scale(1.03) }
.hp-vid-card__ph {
    width: 100%; height: 100%;
    background: linear-gradient(160deg, var(--hp-orange) 0%, var(--stf-negative) 100%);
}
.hp-vid-card__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top,
        var(--hp-orange) 0%,
        color-mix(in srgb, var(--hp-orange) 85%, transparent) 30%,
        color-mix(in srgb, var(--hp-orange) 30%, transparent) 55%,
        transparent 75%
    );
    padding: 1rem;
    display: flex; flex-direction: column; justify-content: flex-end;
}
.hp-vid-card__tags {
    display: flex; gap: .35rem; margin-bottom: .4rem; flex-wrap: wrap; align-items: center;
}
.hp-vid-card__duration, .hp-vid-card__cat {
    font-size: .62rem; font-weight: 700; color: rgba(255,255,255,.9);
    background: rgba(0,0,0,.25); padding: .12rem .4rem; border-radius: 3px;
}
.hp-vid-card__cat { background: rgba(255,255,255,.2) }
.hp-vid-card__ttl {
    font-size: .95rem; font-weight: 800; color: #fff; line-height: 1.25;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.hp-vid-card__play {
    position: absolute; bottom: 1rem; right: 1rem;
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(255,255,255,.95); border: none; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: var(--hp-orange); transition: transform .15s; flex-shrink: 0;
}
.hp-vid-card__play:hover { transform: scale(1.1) }
.hp-vid-card__play svg { width: 16px; height: 16px; margin-left: 2px }
.hp-vid-card__author {
    display: flex; align-items: center; gap: .625rem;
    padding: .875rem 1rem; border-top: 1px solid var(--hp-border);
}
.hp-vid-card__av { border-radius: 50%; width: 36px; height: 36px; flex-shrink: 0 }
.hp-vid-card__av-ph {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--hp-orange); display: flex; align-items: center;
    justify-content: center; color: #fff; font-size: .85rem; font-weight: 700; flex-shrink: 0;
}
.hp-vid-card__name { display: block; font-size: .82rem; font-weight: 700; color: var(--hp-text) }
.hp-vid-card__name:hover { color: var(--hp-orange) }
.hp-vid-card__role { font-size: .72rem; color: var(--stf-muted) }

/* ── CATEGORY CARD GRID ─────────────────────────────────────────────────── */
.hp-cat-sec { padding: 2.5rem 0 }
.hp-cat-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.125rem;
}
@media(max-width:960px) { .hp-cat-grid { grid-template-columns: repeat(2, 1fr) } }
@media(max-width:480px) { .hp-cat-grid { grid-template-columns: 1fr } }

.hp-cat-card {
    border-radius: var(--hp-radius); overflow: hidden;
    background: var(--hp-bg); border: 1px solid var(--hp-border);
    transition: box-shadow .15s, transform .15s;
}
.hp-cat-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); transform: translateY(-1px) }
.hp-cat-card__media {
    position: relative; display: block;
    aspect-ratio: 16/9; overflow: hidden; background: var(--stf-nav-bg);
}
.hp-cat-card__img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    transition: transform .2s;
}
.hp-cat-card__media:hover .hp-cat-card__img { transform: scale(1.04) }
.hp-cat-card__ph {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, var(--hp-orange) 0%, var(--stf-negative) 100%);
}
.hp-cat-card__ext {
    position: absolute; top: .5rem; right: .5rem;
    width: 22px; height: 22px; border-radius: 50%;
    background: rgba(255,255,255,.9);
    display: flex; align-items: center; justify-content: center;
    font-size: .7rem; color: var(--hp-text); opacity: 0; transition: opacity .15s;
    text-decoration: none;
}
.hp-cat-card__media:hover .hp-cat-card__ext { opacity: 1 }
.hp-cat-card__badge {
    position: absolute; bottom: .5rem; left: .5rem;
    background: var(--hp-orange); color: #fff;
    font-size: .6rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: .4px; padding: .15rem .5rem; border-radius: 4px;
}
.hp-cat-card__body { padding: .75rem }
.hp-cat-card__meta {
    display: flex; justify-content: space-between; align-items: flex-start;
    margin-bottom: .35rem; gap: .5rem;
}
.hp-cat-card__cat-label {
    font-size: .62rem; font-weight: 700; color: var(--hp-orange);
    text-transform: uppercase; letter-spacing: .4px;
}
.hp-cat-card__date {
    font-size: .62rem; color: var(--stf-muted); white-space: nowrap;
    line-height: 1.3; text-align: right;
}
.hp-cat-card__time { display: block; font-size: .58rem; color: var(--stf-muted) }
.hp-cat-card__ttl {
    font-size: .85rem; font-weight: 700; line-height: 1.35; color: var(--hp-text); margin: 0;
}
.hp-cat-card__ttl a { color: var(--hp-text) }
.hp-cat-card__ttl a:hover { color: var(--hp-orange) }

/* ── LEGACY SECTIONS (Latest, Trending, Newsletter etc.) ────────────────── */
.homepage-section { padding: 2.5rem 0 }
.section-title {
    font-size: 1.2rem; margin-bottom: 1.25rem; font-weight: 700;
    position: relative; padding-bottom: .3rem;
}
.section-title::after {
    content: ''; position: absolute; bottom: 0; left: 0;
    width: 36px; height: 2px; background: var(--stf-primary); border-radius: 2px;
}
.section-header-row {
    display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem
}
.section-header-row .section-title { margin-bottom: 0 }
.view-all { font-size: .8rem; font-weight: 700; color: var(--stf-primary) }

.hero-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 1.125rem; min-height: 400px }
@media(max-width:768px) { .hero-grid { grid-template-columns: 1fr } }
.hero-main { position: relative; border-radius: var(--stf-radius); overflow: hidden }
.hero-thumb { display: block; height: 100% }
.hero-thumb img { width: 100%; height: 100%; min-height: 380px; object-fit: cover }
.hero-content {
    position: absolute; bottom: 0; left: 0; right: 0;
    padding: 1.375rem 1.25rem;
    background: linear-gradient(transparent, rgba(0,0,0,.9)); color: #fff;
}
.hero-content .badge { margin-bottom: .4rem }
.hero-content h3 { margin: .375rem 0 .4rem }
.hero-content h3 a { color: #fff; font-size: 1.375rem; line-height: 1.2 }
.hero-content p { font-size: .85rem; opacity: .85; line-height: 1.55 }
.hero-sidebar {
    background: var(--stf-body-bg); border: 1px solid var(--stf-border);
    border-radius: var(--stf-radius); display: flex; flex-direction: column; overflow: hidden;
}
.hero-sidebar-header {
    padding: .75rem 1rem; border-bottom: 2px solid var(--stf-primary); background: var(--stf-surface);
}
.hero-sidebar-label {
    font-size: .68rem; font-weight: 800; text-transform: uppercase;
    letter-spacing: 1px; color: var(--stf-primary);
}
.hero-sidebar-list { list-style: none; margin: 0; padding: 0; flex: 1; display: flex; flex-direction: column }
.hero-sidebar-item { flex: 1 }
.hero-sidebar-item + .hero-sidebar-item { border-top: 1px solid var(--stf-border) }
.hero-sidebar-link {
    display: flex; align-items: center; gap: .625rem; padding: .625rem .875rem;
    color: var(--stf-body-text); text-decoration: none; height: 100%; transition: background .1s;
}
.hero-sidebar-link:hover { background: var(--stf-surface) }
.hero-sidebar-num {
    font-size: 1.375rem; font-weight: 800; color: var(--stf-primary);
    min-width: 1.5rem; text-align: center; line-height: 1; opacity: .4;
}
.hero-sidebar-link:hover .hero-sidebar-num { opacity: 1 }
.hero-sidebar-info { flex: 1; min-width: 0 }
.hero-sidebar-title {
    font-size: .78rem; font-weight: 600; line-height: 1.3; margin: 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; color: var(--stf-body-text);
}
.hero-sidebar-link:hover .hero-sidebar-title { color: var(--stf-primary) }
.hero-sidebar-meta { font-size: .62rem; color: var(--stf-muted); margin-top: .15rem; display: block }
.featured-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.125rem }
@media(max-width:768px) { .featured-grid { grid-template-columns: 1fr } }
.category-row { margin-bottom: 1.75rem }
.category-row-title {
    font-size: 1rem; margin-bottom: .875rem; display: flex; align-items: center; gap: .5rem;
}
.category-row-title::before {
    content: ''; width: 3px; height: 1em; background: var(--stf-primary);
    border-radius: 2px; flex-shrink: 0;
}
.category-row-title a { color: var(--stf-body-text) }
.category-row-posts { display: grid; grid-template-columns: repeat(4,1fr); gap: .875rem }
@media(max-width:960px) { .category-row-posts { grid-template-columns: repeat(2,1fr) } }
@media(max-width:480px) { .category-row-posts { grid-template-columns: 1fr } }
.press-release-list { list-style: none }
.press-release-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: .625rem 0; border-bottom: 1px solid var(--stf-border);
    gap: .875rem; flex-wrap: wrap;
}
.press-release-item a { color: var(--stf-body-text); font-weight: 600; flex: 1; font-size: .875rem }
.press-release-item a:hover { color: var(--stf-primary) }
.press-date { font-size: .75rem; color: var(--stf-muted); white-space: nowrap }
.sponsored-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.125rem }
@media(max-width:768px) { .sponsored-grid { grid-template-columns: 1fr } }
.sponsored-card { border: 1px solid var(--stf-border); border-radius: var(--stf-radius); overflow: hidden }
.sponsored-card .badge-sponsored { margin: .625rem; display: inline-block }
.sponsored-card h3 { padding: 0 .625rem; font-size: .95rem }
.sponsored-card h3 a { color: var(--stf-body-text) }
.sponsor-name { display: block; padding: .375rem .625rem .625rem; font-size: .76rem; color: var(--stf-muted) }
.sponsored-disclosure { font-size: .76rem; color: var(--stf-muted); font-style: italic; margin-bottom: .875rem }
.trending-list { list-style: none }
.trending-item {
    display: flex; align-items: flex-start; gap: .875rem;
    padding: .625rem 0; border-bottom: 1px solid var(--stf-border);
}
.trending-num {
    font-size: 1.5rem; font-weight: 800; color: var(--stf-primary);
    min-width: 1.75rem; text-align: center; line-height: 1;
}
.trending-content h3 { font-size: .9rem; margin-bottom: .15rem; line-height: 1.3 }
.trending-content h3 a { color: var(--stf-body-text) }
.trending-content h3 a:hover { color: var(--stf-primary) }
.trending-content time { font-size: .7rem; color: var(--stf-muted) }
.section-about-cta { background: var(--stf-surface); border-radius: var(--stf-radius) }
.about-content { max-width: 680px }
.about-content .btn { margin-top: .875rem }
.section-newsletter {
    background: linear-gradient(135deg, var(--stf-header-bg), var(--stf-author-hero-bg-end));
    color: #fff; border-radius: var(--stf-radius);
}
.newsletter-inner { max-width: 520px; margin: 0 auto; text-align: center }
.newsletter-inner h2 { color: #fff; font-size: 1.5rem }
.newsletter-inner p { opacity: .8; margin: .4rem 0 1.125rem; font-size: .9rem }
.newsletter-form { display: flex; gap: .4rem }
.newsletter-form input {
    flex: 1; padding: .625rem .875rem;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: var(--stf-radius); font-size: .875rem; min-height: 42px;
    background: rgba(255,255,255,.1); color: #fff;
}
.newsletter-form input::placeholder { color: rgba(255,255,255,.45) }
.newsletter-form .btn {
    background: var(--stf-primary); color: #fff;
    border-color: var(--stf-primary); white-space: nowrap;
}
.newsletter-form .btn:hover { background: var(--stf-primary-dark) }
@media(max-width:480px) { .newsletter-form { flex-direction: column } }
.custom-html-section { padding: 1.375rem 0 }