/* ==========================================================================
   iPressly v2 — Homepage CSS
   Precisely matching reference design:
   orange accent #f97316, white bg, clean cards, 4-col grids
   ========================================================================== */

/* ── Accent color override for homepage (orange) ────────────────────────── */
:root {
    --hp-orange: #f97316;
    --hp-orange-dark: #ea6c0a;
    --hp-orange-light: #fff7ed;
    --hp-text: #111827;
    --hp-text-2: #6b7280;
    --hp-border: #e5e7eb;
    --hp-bg: #ffffff;
    --hp-radius: 12px;
}

/* ── Section wrapper ─────────────────────────────────────────────────────── */
.hp-section { padding: 2.5rem 0; background: #fff }
.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: #fff }

/* ── HERO ────────────────────────────────────────────────────────────────── */
.hp-hero {
    position: relative; min-height: 480px;
    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: 3rem 0 2.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 card panel */
.hp-trending-card {
    background: #fff; border-radius: 16px; overflow: hidden;
    box-shadow: 0 4px 24px rgba(0,0,0,.18); align-self: center;
}
.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 #f3f4f6 }
.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: #fafafa }
.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: #e5e7eb;
    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(--hp-text-2);
}
.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: #fff8f1; border-top: 1px solid var(--hp-border);
    transition: background .1s;
}
.hp-trending-card__vm:hover { background: var(--hp-orange); color: #fff }

/* ── MARKET UPDATES (3-col category lists) ───────────────────────────────── */
.hp-market { background: #f9fafb; 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: #fff; 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: #fff7ed; color: var(--hp-orange);
    border: 1px solid #fed7aa; border-radius: 99px; padding: .1rem .45rem;
}
.hp-mkt-list { list-style: none; margin: 0; padding: 0 }
.hp-mkt-item { border-bottom: 1px solid #f3f4f6 }
.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: #fffaf7 }
.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: #e5e7eb;
    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(--hp-text-2) }
.hp-mkt-item__arrow {
    font-size: .875rem; color: #d1d5db; 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: #fff }
.hp-vid-card__media {
    position: relative; display: block;
    aspect-ratio: 4/5; /* portrait-ish like reference */
    overflow: hidden; background: #1e293b;
}
.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, #f97316 0%, #dc2626 100%);
}
/* Orange gradient overlay on bottom half */
.hp-vid-card__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(to top,
        rgba(249,115,22,1) 0%,
        rgba(249,115,22,.85) 30%,
        rgba(249,115,22,.3) 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;
}
/* Play button — white circle, orange icon, bottom-right of image */
.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 }
/* Author row — OUTSIDE the card image, below */
.hp-vid-card__author {
    display: flex; align-items: center; gap: .625rem;
    padding: .875rem 1rem; border-top: 1px solid #f3f4f6;
}
.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(--hp-text-2) }

/* ── 4-COL CATEGORY CARD GRID (Press Release / Market Research / Reviews / Interviews) */
.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: #fff;
    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) }

/* Image area */
.hp-cat-card__media {
    position: relative; display: block;
    aspect-ratio: 16/9; overflow: hidden; background: #1e293b;
}
.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, #f97316 0%, #dc2626 100%);
}
/* External link icon — top-right of image */
.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: #374151; opacity: 0; transition: opacity .15s;
    text-decoration: none;
}
.hp-cat-card__media:hover .hp-cat-card__ext { opacity: 1 }
/* Category badge — bottom-left of image, orange pill */
.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;
}
/* Date — overlaid or just below */
.hp-cat-card__date-over {
    position: absolute; top: .5rem; left: .5rem;
    font-size: .62rem; color: rgba(255,255,255,.85);
    background: rgba(0,0,0,.35); padding: .1rem .4rem; border-radius: 3px;
}

/* Card body */
.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(--hp-text-2); white-space: nowrap; line-height: 1.3;
    text-align: right;
}
.hp-cat-card__time { display: block; font-size: .58rem; color: #9ca3af }
.hp-cat-card__ttl {
    font-size: .85rem; font-weight: 700; line-height: 1.35; color: var(--hp-text);
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
    margin: 0;
}
.hp-cat-card__ttl a { color: var(--hp-text) }
.hp-cat-card__ttl a:hover { color: var(--hp-orange) }

/* ── LEGACY SECTION STYLES (kept for existing sections) ──────────────────── */
.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),#1e293b); 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 }