/* ==========================================================================
   iPressly v2 — Homepage (Crypto News Platform)
   Reference design: full-width hero, market updates, video cards, cat grids
   ========================================================================== */

/* ── Shared Section Styles ─────────────────────────────────────────────── */
.hp-section { padding:2rem 0 }

.hp-section__header {
    display:flex; justify-content:space-between; align-items:center;
    margin-bottom:1.25rem; gap:1rem;
}
.hp-section__title {
    font-size:1.25rem; font-weight:700; color:var(--stf-body-text);
    position:relative;
}
.hp-section__view-more {
    display:inline-flex; align-items:center; gap:.35rem;
    font-size:.78rem; font-weight:700; color:var(--stf-primary);
    white-space:nowrap; padding:.35rem .875rem;
    background:#eff6ff; border:1px solid #bfdbfe; border-radius:99px;
}
.hp-section__view-more:hover { background:var(--stf-primary); color:#fff; border-color:var(--stf-primary) }
.hp-section__view-more-outline {
    display:inline-flex; align-items:center; gap:.3rem;
    font-size:.78rem; font-weight:600; color:var(--stf-body-text);
    padding:.3rem .875rem; border:1px solid var(--stf-border); border-radius:99px;
    white-space:nowrap;
}
.hp-section__view-more-outline:hover { border-color:var(--stf-primary); color:var(--stf-primary) }

/* ── 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 top;
}
.hp-hero__bg--fallback {
    background:linear-gradient(135deg,#0f172a 0%,#1e3a5f 100%);
}
.hp-hero__overlay {
    position:absolute; inset:0;
    background:linear-gradient(to right, rgba(0,0,0,.78) 0%, rgba(0,0,0,.5) 55%, rgba(0,0,0,.1) 100%);
}
.hp-hero__inner {
    position:relative; z-index:2;
    display:grid; grid-template-columns:1fr 340px; gap:1.5rem;
    padding-top:3rem; padding-bottom:2.5rem; align-items:end; width:100%;
}
@media(max-width:900px){.hp-hero__inner{grid-template-columns:1fr}}
@media(max-width:900px){.hp-trending-panel{display:none}}

/* Hero content */
.hp-hero__content { color:#fff; max-width:600px }
.hp-hero__cat-badge {
    display:inline-block; background:var(--stf-accent); color:#1e293b;
    font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.6px;
    padding:.2rem .55rem; border-radius:3px; margin-bottom:.625rem;
}
.hp-hero__title {
    font-size:clamp(1.5rem,3vw,2.375rem); font-weight:800; line-height:1.2;
    color:#fff; margin-bottom:.625rem;
}
.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:520px;
}
.hp-hero__meta {
    display:flex; align-items:center; gap:.5rem; font-size:.76rem;
    color:rgba(255,255,255,.7); flex-wrap:wrap;
}
.hp-hero__avatar { border-radius:50%; width:24px; height:24px; flex-shrink:0 }
.hp-hero__author { color:#fff; font-weight:600 }
.hp-hero__author:hover { opacity:.85 }
.hp-hero__meta-sep { opacity:.4 }
.hp-hero__date,.hp-hero__read { opacity:.8 }

/* Trending News panel */
.hp-trending-panel {
    background:#fff; border-radius:12px; overflow:hidden;
    box-shadow:0 8px 32px rgba(0,0,0,.2); align-self:center;
}
.hp-trending-panel__header {
    padding:.875rem 1rem; background:#fff;
    border-bottom:1px solid #f1f5f9;
}
.hp-trending-panel__title {
    font-size:.95rem; font-weight:800; color:var(--stf-body-text);
}
.hp-trending-panel__list { list-style:none; margin:0; padding:0 }
.hp-trending-panel__item {
    border-bottom:1px solid #f1f5f9;
}
.hp-trending-panel__item:last-child { border-bottom:none }
.hp-trending-panel__link {
    display:flex; gap:.625rem; padding:.75rem 1rem;
    color:var(--stf-body-text); align-items:flex-start; transition:background .1s;
}
.hp-trending-panel__link:hover { background:#f8fafc }
.hp-trending-panel__thumb {
    width:56px; height:42px; object-fit:cover; border-radius:6px; flex-shrink:0;
}
.hp-trending-panel__info { flex:1; min-width:0 }
.hp-trending-panel__post-title {
    font-size:.8rem; font-weight:700; line-height:1.3; color:var(--stf-body-text);
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
    margin-bottom:.2rem;
}
.hp-trending-panel__link:hover .hp-trending-panel__post-title { color:var(--stf-primary) }
.hp-trending-panel__post-meta {
    display:flex; align-items:center; gap:.3rem; font-size:.68rem; color:var(--stf-muted);
}
.hp-trending-panel__post-avatar { border-radius:50%; width:14px; height:14px }
.hp-trending-panel__post-author { font-weight:600; color:var(--stf-body-text) }
.hp-trending-panel__view-more {
    display:block; text-align:center; padding:.75rem 1rem;
    font-size:.8rem; font-weight:700; color:var(--stf-primary);
    background:#f8fafc; border-top:1px solid #f1f5f9;
}
.hp-trending-panel__view-more:hover { background:#eff6ff }

/* ── MARKET UPDATES ────────────────────────────────────────────────────── */
.hp-market-updates { background:var(--stf-surface); padding:2rem 0; border-radius:12px; margin:0 }
.hp-market-updates .container { }
.hp-market-updates__grid {
    display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem;
}
@media(max-width:768px){ .hp-market-updates__grid{ grid-template-columns:1fr } }

.hp-market-col {
    background:#fff; border-radius:10px; border:1px solid var(--stf-border);
    overflow:hidden;
}
.hp-market-col__header {
    padding:.875rem 1rem; border-bottom:2px solid var(--stf-primary);
    display:flex; justify-content:space-between; align-items:center;
}
.hp-market-col__title {
    font-size:.9rem; font-weight:800; margin:0;
}
.hp-market-col__title a { color:var(--stf-body-text) }
.hp-market-col__title a:hover { color:var(--stf-primary) }
.hp-market-col__list { list-style:none; margin:0; padding:0 }

.hp-market-item { border-bottom:1px solid #f1f5f9 }
.hp-market-item:last-child { border-bottom:none }
.hp-market-item__link {
    display:flex; gap:.625rem; padding:.75rem 1rem;
    color:var(--stf-body-text); align-items:center; transition:background .1s;
}
.hp-market-item__link:hover { background:#f8fafc }
.hp-market-item__thumb {
    width:52px; height:40px; flex-shrink:0; border-radius:6px; overflow:hidden;
}
.hp-market-item__thumb img { width:100%; height:100%; object-fit:cover }
.hp-market-item__thumb-placeholder { width:100%; height:100%; background:var(--stf-border) }
.hp-market-item__body { flex:1; min-width:0 }
.hp-market-item__title {
    font-size:.8rem; font-weight:600; line-height:1.3; color:var(--stf-body-text);
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
    margin-bottom:.15rem;
}
.hp-market-item__link:hover .hp-market-item__title { color:var(--stf-primary) }
.hp-market-item__author { font-size:.68rem; color:var(--stf-muted) }
.hp-market-item__arrow { font-size:.875rem; color:var(--stf-muted); flex-shrink:0; transition:transform .15s }
.hp-market-item__link:hover .hp-market-item__arrow { transform:translateX(3px); color:var(--stf-primary) }

/* ── VIDEO / SHORT STORY SECTION ───────────────────────────────────────── */
.hp-video-section { padding:2.25rem 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-video-card { border-radius:12px; overflow:hidden; background:#fff; box-shadow:var(--stf-shadow) }
.hp-video-card__media {
    position:relative; display:block; aspect-ratio:16/9; overflow:hidden; background:#1e293b;
}
.hp-video-card__img { width:100%; height:100%; object-fit:cover }
.hp-video-card__img-placeholder { width:100%; height:100%; background:linear-gradient(135deg,#f97316,#dc2626) }
.hp-video-card__overlay {
    position:absolute; inset:0;
    background:linear-gradient(to top, rgba(249,115,22,.9) 0%, rgba(249,115,22,.4) 50%, transparent 100%);
    padding:1rem; display:flex; flex-direction:column; justify-content:flex-end;
}
.hp-video-card__meta-top {
    display:flex; gap:.4rem; margin-bottom:.4rem; flex-wrap:wrap;
}
.hp-video-card__duration, .hp-video-card__cat {
    font-size:.65rem; font-weight:700; color:#fff; background:rgba(0,0,0,.3);
    padding:.15rem .4rem; border-radius:3px;
}
.hp-video-card__title {
    font-size:1rem; font-weight:800; color:#fff; line-height:1.25;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.hp-video-card__play {
    position:absolute; bottom:1rem; right:1rem;
    width:40px; height:40px; border-radius:50%; border:none; cursor:pointer;
    background:#fff; color:var(--stf-accent);
    display:flex; align-items:center; justify-content:center;
    box-shadow:0 2px 8px rgba(0,0,0,.2); transition:transform .15s;
}
.hp-video-card__media:hover .hp-video-card__play { transform:scale(1.1) }
.hp-video-card__footer {
    display:flex; align-items:center; gap:.625rem; padding:.875rem 1rem;
}
.hp-video-card__author-avatar { border-radius:50%; width:36px; height:36px; flex-shrink:0 }
.hp-video-card__author-name { display:block; font-size:.82rem; font-weight:700; color:var(--stf-body-text) }
.hp-video-card__author-name:hover { color:var(--stf-primary) }
.hp-video-card__author-role { font-size:.72rem; color:var(--stf-muted) }

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

.hp-cat-card { border-radius:10px; overflow:hidden; background:#fff; border:1px solid var(--stf-border) }
.hp-cat-card__media {
    position:relative; display:block; aspect-ratio:16/10; overflow:hidden; background:#1e293b;
}
.hp-cat-card__img { width:100%; height:100%; object-fit:cover; transition:transform .2s }
.hp-cat-card__media:hover .hp-cat-card__img { transform:scale(1.03) }
.hp-cat-card__img-placeholder { width:100%; height:100%; background:linear-gradient(135deg,#f97316,#dc2626) }
.hp-cat-card__overlay {
    position:absolute; inset:0;
    background:linear-gradient(to top, rgba(0,0,0,.5) 0%, transparent 60%);
    padding:.625rem; display:flex; align-items:flex-end;
}
.hp-cat-card__badge {
    display:inline-block; background:var(--stf-accent); color:#1e293b;
    font-size:.62rem; font-weight:800; text-transform:uppercase; letter-spacing:.4px;
    padding:.15rem .4rem; border-radius:3px;
}
.hp-cat-card__external {
    position:absolute; top:.5rem; right:.5rem;
    width:24px; height:24px; background:rgba(255,255,255,.9);
    border-radius:50%; display:flex; align-items:center; justify-content:center;
    font-size:.75rem; color:var(--stf-body-text); opacity:0; transition:opacity .15s;
}
.hp-cat-card__media:hover .hp-cat-card__external { opacity:1 }
.hp-cat-card__body { padding:.75rem }
.hp-cat-card__meta-top {
    display:flex; justify-content:space-between; align-items:flex-start;
    gap:.4rem; margin-bottom:.4rem; flex-wrap:wrap;
}
.hp-cat-card__cat {
    font-size:.62rem; font-weight:700; text-transform:uppercase;
    letter-spacing:.5px; color:var(--stf-accent);
}
.hp-cat-card__date {
    font-size:.65rem; color:var(--stf-muted); text-align:right; line-height:1.3;
}
.hp-cat-card__time { display:block; font-size:.6rem }
.hp-cat-card__title {
    font-size:.85rem; font-weight:700; line-height:1.3; color:var(--stf-body-text);
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
    margin:0;
}
.hp-cat-card__title a { color:var(--stf-body-text) }
.hp-cat-card__title a:hover { color:var(--stf-primary) }

/* 2-row grid */
.hp-cat-grid__posts--2row { /* rows handled naturally by grid */ }

/* ── PRESS RELEASE (also uses 4-col) ───────────────────────────────────── */
.homepage-section.section-press-release { padding:2rem 0 }

/* ── LATEST (updates from old styles) ─────────────────────────────────── */
.homepage-section { padding:2rem 0 }
.section-title {
    font-size:1.25rem; margin-bottom:1.25rem; position:relative; padding-bottom:.35rem;
}
.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 sidebar (old) */
.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 } }

/* Featured grid */
.featured-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1.125rem }
@media(max-width:768px){ .featured-grid{ grid-template-columns:1fr } }

/* Category showcase */
.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 */
.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 */
.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 */
.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) }

/* About CTA */
.section-about-cta { background:var(--stf-surface); border-radius:var(--stf-radius) }
.about-content { max-width:680px }
.about-content .btn { margin-top:.875rem }

/* Newsletter */
.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 }