/* ═══════════════════════════════════════════════════════════════════
   Design 14: "Starter Bold" — Cinematic Full-Bleed Landing Page
   Inspired by: Soledad, JNews, flavor of Avada landing demos
   Features: Full-bleed hero with dramatic gradient, elevated card 
   system, accent color bars, lift-on-hover micro-interactions
   ═══════════════════════════════════════════════════════════════════ */

/* ── Base resets ── */
.grid-item,.grid-item a{position:relative;display:block}
.featured-post img,.grid-item img,.regular-post img{transform-origin:center center!important;transition:transform .45s cubic-bezier(.25,.46,.45,.94),opacity .3s}
.featured-post,.featured-post .featured-post-img,.featured-post a,.grid-item,.regular-post a,.regular-post-img,.screen-reader-text{overflow:hidden}
.grid-item a,.home-categories a:hover{text-decoration:none}
.grid-item a{width:100%;height:100%;display:block;color:inherit;z-index:2}
.grid-image-container,.grid-item img{width:100%;height:100%;object-fit:cover;display:block}
.grid-item .main-h2-container span,span.home-tag{font-size:10px;text-transform:uppercase;letter-spacing:.12em;font-weight:600}
span.home-tag{display:inline-block;margin-bottom:0;color:#9699a0;background:rgba(0,0,0,.04);padding:3px 8px;border-radius:4px}
.asap-padding-newspapper+.content-home-text{margin-top:2rem}

/* ── HERO GRID: Cinematic full-bleed ── */
.grid-container{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:420px 200px;grid-gap:6px;margin-bottom:2.5rem;border-radius:16px;overflow:hidden;box-shadow:0 20px 60px -15px rgba(0,0,0,.2)}
.grid-container .grid-item:first-child{grid-column:1/-1;grid-row:1}
.grid-container .grid-item:nth-child(n+2){grid-row:2}
.grid-item{border-radius:0;transition:transform .35s}
.grid-item:hover img{transform:scale(1.06)}
.grid-item a::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(180deg,transparent 30%,rgba(0,0,0,.45) 60%,rgba(0,0,0,.92) 100%);z-index:1;transition:opacity .35s}
.grid-item:hover a::before{opacity:.85}
.grid-item .main-h2-container{position:absolute;bottom:0;left:0;right:0;padding:28px 32px;z-index:3;display:flex;flex-direction:column;transform:translateY(4px);transition:transform .35s}
.grid-item:hover .main-h2-container{transform:translateY(0)}
.grid-item .main-h2-container h2{order:1;color:#fff;margin:0!important;font-size:16px;font-weight:700;line-height:1.3;letter-spacing:-.01em}
.grid-item.item-1 .main-h2-container h2{font-size:32px;letter-spacing:-.025em;line-height:1.2}
.grid-item .main-h2-container span{order:-1;color:rgba(255,255,255,.85);line-height:1;margin-bottom:10px;font-size:10px;letter-spacing:.14em}
.grid-item .main-h2-container p{order:2;color:rgba(255,255,255,.75);font-size:14px;margin-top:12px;line-height:1.55;max-width:600px}
.grid-item.item-1 .main-h2-container span{background:rgba(255,255,255,.15);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);padding:5px 12px;border-radius:6px;display:inline-block;width:fit-content}

/* ── CATEGORIES: Elevated card system ── */
.category-posts{display:flex;flex-wrap:wrap;width:100%;margin-bottom:2.5rem;justify-content:space-between;padding-bottom:0;border-bottom:none}
.home-categories-container{padding-top:.5rem;border-top:none}

.featured-post{width:100%;display:flex;flex-direction:row;margin-bottom:24px;padding:0;position:relative;border-radius:14px;overflow:hidden;box-shadow:0 4px 24px -4px rgba(0,0,0,.1);transition:box-shadow .35s,transform .35s}
.featured-post:hover{box-shadow:0 12px 40px -8px rgba(0,0,0,.18);transform:translateY(-3px)}
.featured-post-img,.lastest-post-img{line-height:0;overflow:hidden;position:relative;margin-bottom:0}
.featured-post-img{width:55%;min-height:280px}
.featured-post img{width:100%;height:100%;object-fit:cover}
.featured-post-details{width:45%;padding:28px 32px;display:flex;flex-direction:column;justify-content:center}
.featured-post h3{font-size:22px;font-weight:700;line-height:1.3;letter-spacing:-.02em;margin:0 0 12px}
.featured-post .show-extract{margin-top:0}
.featured-post .show-extract p{font-size:14px;line-height:1.6;color:#6b6e76;margin:0}

.regular-posts{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.regular-post{display:flex;flex-direction:column;padding:0;border-radius:12px;overflow:hidden;box-shadow:0 2px 16px -2px rgba(0,0,0,.08);transition:box-shadow .35s,transform .35s}
.regular-post:hover{box-shadow:0 10px 36px -6px rgba(0,0,0,.15);transform:translateY(-4px)}
.regular-post a{display:flex;flex-direction:column;gap:0}
.regular-post-img{line-height:0;margin-right:0}
.regular-post-img{width:100%;height:180px;overflow:hidden}
.regular-post img{width:100%;height:100%;object-fit:cover}
.regular-post .post-details{padding:18px 20px;display:flex;flex-direction:column}
.regular-post h3{font-size:16px;font-weight:700;line-height:1.35;margin:6px 0 0;letter-spacing:-.01em}

/* ── LATEST POSTS: Card grid ── */
.content-area{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.article-loop{margin-bottom:0!important;border-radius:12px;overflow:hidden;box-shadow:0 2px 16px -2px rgba(0,0,0,.08);transition:box-shadow .35s,transform .35s}
.article-loop:hover{box-shadow:0 10px 36px -6px rgba(0,0,0,.15);transform:translateY(-4px)}
.article-loop a{display:flex;flex-direction:column}
.lastest-post-img{width:100%;height:180px;margin-bottom:0;overflow:hidden}
.lastest-post-img img{width:100%;height:100%;object-fit:cover}
.home-content-loop,.home-box-loop{padding:18px 20px}

/* ── COMMON ── */
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);clip-path:inset(50%);height:1px;margin:-1px;padding:0;position:absolute;width:1px;word-wrap:normal!important}
.content-loop-design{display:grid;margin:0 auto;grid-gap:0}
.home-categories .home-categories-h2{border-top:none!important;margin-bottom:2rem!important;width:100%;border-bottom:none;position:relative;padding-left:14px}
.home-categories-h2::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:4px;height:28px;border-radius:2px;background:var(--asap-accent-color,#2563eb)}
.home-categories h2{margin-bottom:0!important;padding-bottom:0!important;padding:1.5rem 0;display:inline-block;color:#181818;letter-spacing:-.03em;font-size:22px}
.home-categories h2:after{display:none}
.the-content .home-categories h2{margin-top:0!important;margin-bottom:0!important}
.home-categories h2 a{display:flex;align-items:center}
.home-categories .article-loop{padding-bottom:0!important;margin-bottom:1.5rem!important}
.home-categories .article-loop h3{text-align:left!important;padding-left:0;margin-top:6px!important}
.home-categories .show-extract{margin-top:4px}
.home-categories .show-extract p{width:100%;text-align:left;padding-left:0;margin-bottom:0;font-size:14px;color:#6b6e76;line-height:1.55}
.home-categories .featured-post h3,.home-categories .regular-post h3,.home-categories-h2 h2 a{transition:color .2s}

/* ── RESPONSIVE ── */
@media (max-width:1024px){
.regular-posts,.content-area{grid-template-columns:repeat(2,1fr)}
.featured-post{flex-direction:column}
.featured-post-img{width:100%;min-height:220px}
.featured-post-details{width:100%}
}
@media (max-width:768px){
.grid-container{grid-template-columns:1fr;grid-template-rows:auto;border-radius:12px;box-shadow:0 10px 40px -10px rgba(0,0,0,.15)}
.grid-container .grid-item:first-child{min-height:300px}
.grid-container .grid-item:nth-child(n+2){min-height:180px}
.grid-item.item-1 .main-h2-container h2{font-size:24px}
.regular-posts,.content-area{grid-template-columns:1fr!important}
.featured-post,.regular-posts{width:100%;margin-bottom:1.5rem}
.featured-post{padding-right:0}
.regular-post{padding-left:0}
.content-loop-design{padding-top:70px!important}
.asap-padding-newspapper{padding:2rem 1.5rem}
}
@media (min-width:768px) and (max-width:1050px){.home .content-loop-design{padding-top:5rem}}