/* ═══════════════════════════════════════════════════════════════════
   Design 15: "Bento Modern" — Bento Grid Landing Page
   Inspired by: Uncode Bento Grids, Apple product pages, Notion
   Features: Asymmetric bento-box grid with varying heights,
   ultra-rounded corners, glassmorphism tags, smooth reveal hover
   ═══════════════════════════════════════════════════════════════════ */

/* ── Base ── */
.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 .5s cubic-bezier(.22,.61,.36,1)}
.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:#6b6e76;padding:4px 10px;border-radius:20px;background:rgba(0,0,0,.05);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.asap-padding-newspapper+.content-home-text{margin-top:2rem}

/* ── HERO: Bento asymmetric grid ── */
.grid-container{display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:280px 240px;grid-gap:8px;margin-bottom:2.5rem}
.grid-container .grid-item{border-radius:20px;overflow:hidden}
.grid-container .grid-item:first-child{grid-column:1/8;grid-row:1/3}
.grid-container .grid-item:nth-child(2){grid-column:8/13;grid-row:1}
.grid-container .grid-item:nth-child(3){grid-column:8/10;grid-row:2}
.grid-container .grid-item:nth-child(4){grid-column:10/13;grid-row:2}
.grid-container .grid-item:nth-child(5){display:none}

.grid-item:hover img{transform:scale(1.05)}
.grid-item a::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(180deg,transparent 40%,rgba(0,0,0,.75) 100%);z-index:1;transition:opacity .4s}
.grid-item:hover a::before{opacity:.9}
.grid-item .main-h2-container{position:absolute;bottom:0;left:0;right:0;padding:24px 28px;z-index:3;display:flex;flex-direction:column;opacity:.92;transition:opacity .35s,transform .35s;transform:translateY(2px)}
.grid-item:hover .main-h2-container{opacity:1;transform:translateY(0)}
.grid-item .main-h2-container h2{order:1;color:#fff;margin:0!important;font-size:15px;font-weight:700;line-height:1.35;letter-spacing:-.01em}
.grid-item.item-1 .main-h2-container h2{font-size:28px;letter-spacing:-.025em;line-height:1.2}
.grid-item .main-h2-container span{order:-1;color:rgba(255,255,255,.8);line-height:1;margin-bottom:8px;background:rgba(255,255,255,.12);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:5px 12px;border-radius:20px;display:inline-block;width:fit-content;font-size:10px}
.grid-item .main-h2-container p{order:2;color:rgba(255,255,255,.7);font-size:14px;margin-top:10px;line-height:1.5}

/* ── CATEGORIES: Bento cards ── */
.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:grid;grid-template-columns:1fr 1fr;margin-bottom:24px;padding:0;position:relative;border-radius:20px;overflow:hidden;background:var(--color-background-secondary,#f8f8f6);transition:box-shadow .4s}
.featured-post:hover{box-shadow:0 16px 48px -8px rgba(0,0,0,.12)}
.featured-post-img,.lastest-post-img{line-height:0;overflow:hidden;position:relative}
.featured-post-img{min-height:300px}
.featured-post img{width:100%;height:100%;object-fit:cover}
.featured-post-details{padding:36px 40px;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 14px}
.featured-post .show-extract{margin-top:0}
.featured-post .show-extract p{font-size:14px;line-height:1.65;color:#6b6e76;margin:0}

.regular-posts{width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.regular-post{display:flex;flex-direction:column;padding:0;border-radius:16px;overflow:hidden;background:var(--color-background-secondary,#f8f8f6);transition:box-shadow .4s,transform .4s}
.regular-post:hover{box-shadow:0 12px 40px -6px rgba(0,0,0,.1);transform:translateY(-3px)}
.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:200px;overflow:hidden}
.regular-post img{width:100%;height:100%;object-fit:cover}
.regular-post .post-details{padding:20px 22px;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}
.regular-post .post-details .show-extract p{font-size:13px;color:#6b6e76;margin-top:6px;line-height:1.5}

/* ── LATEST POSTS ── */
.content-area{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.article-loop{margin-bottom:0!important;border-radius:16px;overflow:hidden;background:var(--color-background-secondary,#f8f8f6);transition:box-shadow .4s,transform .4s}
.article-loop:hover{box-shadow:0 12px 40px -6px rgba(0,0,0,.1);transform:translateY(-3px)}
.article-loop a{display:flex;flex-direction:column}
.lastest-post-img{width:100%;height:200px;margin-bottom:0;overflow:hidden}
.lastest-post-img img{width:100%;height:100%;object-fit:cover}
.home-content-loop,.home-box-loop{padding:20px 22px}

/* ── 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}
.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:24px}
.home-categories h2:after{display:none}
.home-categories h2 a{display:flex;align-items:center}
.home-categories .article-loop{padding-bottom:0!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;line-height:1.6}
.home-categories .featured-post h3,.home-categories .regular-post h3,.home-categories-h2 h2 a{transition:color .2s}

/* ── RESPONSIVE ── */
@media (max-width:1024px){
.grid-container{grid-template-columns:1fr 1fr;grid-template-rows:auto}
.grid-container .grid-item:first-child{grid-column:1/-1}
.grid-container .grid-item:nth-child(3),.grid-container .grid-item:nth-child(4){grid-column:auto}
.regular-posts,.content-area{grid-template-columns:repeat(2,1fr)}
.featured-post{grid-template-columns:1fr}
}
@media (max-width:768px){
.grid-container{grid-template-columns:1fr;grid-gap:6px}
.grid-container .grid-item{min-height:220px}
.grid-container .grid-item:first-child{min-height:300px}
.grid-container .grid-item:nth-child(3),.grid-container .grid-item:nth-child(4){display:none}
.regular-posts,.content-area{grid-template-columns:1fr!important}
.grid-item.item-1 .main-h2-container h2{font-size:22px}
.featured-post,.regular-posts{width:100%;margin-bottom:1.5rem}
.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}}