/* Hamdard Blog Grid - External CSS
Place this file in: wp-content/plugins/hamdard-blog-grid/assets/hbg-styles.css
*/

.hbg-section-title{
    color: #db2628;
    font-size: 2rem;
    font-weight: 700;
}
.hbg-section-title span{
    color: #000;
}
.hbg-section-desc{
    font-size:1.2rem;
}
.hbg-wrap {
width: 90%;
margin: 0 auto;
padding: 0px 20px;
color: #000;
margin-bottom: 30px;
}


.hbg-grid {
display: grid;
gap: 22px;
grid-template-columns: repeat(12, 1fr);
grid-auto-rows: 1fr;
align-items: start;
}

.hbg-item {
background: #ffffff;
border-radius: 14px;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
overflow: hidden;
display: flex;
flex-direction: column;
min-height: 120px;
transition: transform 150ms ease;
}


.hbg-item:hover {
transform: translateY(-4px);
}


/* Slot positions to match screenshot layout. Adjust columns/rows if needed. */
.hbg-item--1 { grid-column: 1 / span 6; grid-row: 1 / span 2; }
.hbg-item--2 { grid-column: 7 / span 6; grid-row: 1 / span 1; }
.hbg-item--3 { grid-column: 7 / span 3; grid-row: 2 / span 1; }
.hbg-item--4 { grid-column: 10 / span 3; grid-row: 2 / span 1; }
.hbg-item--5 { grid-column: 10 / span 3; grid-row: 1 / span 1; }

.hbg-item--2 .hbg-media{
    float: left;
    width: 40%;
    display: block;
}

.hbg-item--2 {
    display: block;
}

.hbg-item--2 .hbg-body{
    float: left;
    width: 60%;
    display: flex;
    padding-top: 20px;
}
.hbg-item--2 .hbg-meta{
    margin-top:10px;
}

.hbg-item--3 .hbg-excerpt,
.hbg-item--3 .hbg-meta,
.hbg-item--4 .hbg-excerpt,
.hbg-item--4 .hbg-meta
{
 display: none;   
}

/* Default media wrapper */
.hbg-media { display: block; text-decoration: none; color: inherit; overflow: hidden; }
.hbg-thumbnail { width: 100%; height: auto; display: block; object-fit: cover; }
.hbg-no-thumb { height: 220px; background: #f2f2f2; display: block; }


.hbg-body { padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.hbg-title { margin: 0; font-size: 20px; line-height: 1.12; font-weight: 600; color: #000; }
.hbg-title a { color: inherit; text-decoration: none; }
.hbg-excerpt { color: #000; font-size: 16px; line-height: 1.45; }


.hbg-meta { margin-top: auto; display: flex; gap: 8px; align-items: center; }
.hbg-chip { display: inline-block; padding: 6px 10px; border-radius: 10px; background: #e9e9e9; font-size: 12px; color: #000; }


.hbg-footer { text-align: right; margin-top: -10px; }
.hbg-browse { display: inline-block; padding: 10px 18px; background: #ffffff; border-radius: 18px; box-shadow: 0 6px 18px rgba(0,0,0,0.08); text-decoration: none; color: #000;font-weight:600; }


/* Responsive rules */
@media (max-width: 1000px) {
.hbg-grid { grid-template-columns: repeat(8, 1fr); }
.hbg-item--1 { grid-column: 1 / span 8; grid-row: auto; }
.hbg-item--2 { grid-column: 1 / span 8; }
.hbg-item--3, .hbg-item--4, .hbg-item--5 { grid-column: 1 / span 4; }
}


@media (max-width: 680px) {
.hbg-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
.hbg-item--1, .hbg-item--2, .hbg-item--3, .hbg-item--4, .hbg-item--5 { grid-column: 1 / -1; }
.hbg-no-thumb { height: 160px; }
.hbg-body { padding: 14px; }
.hbg-title { font-size: 18px; }
.hbg-excerpt { font-size: 13px; }
}


@media (max-width: 420px) {
.hbg-wrap { padding: 18px 12px; }
.hbg-title { font-size: 16px; }
.hbg-excerpt { font-size: 13px; }
}


/* Utility tidy up for images inside narrow slots */
.hbg-item--1 .hbg-thumbnail { height: 100%; max-height: 420px; object-fit: cover; }
.hbg-item--2 .hbg-thumbnail { height: 310px; object-fit: cover; }
.hbg-item--3 .hbg-thumbnail, .hbg-item--4 .hbg-thumbnail, .hbg-item--5 .hbg-thumbnail { height: 165px; object-fit: cover; }


/* Accessibility focus style for keyboard users */
.hbg-item:focus-within { outline: 3px solid rgba(0,123,255,0.12); }
.hbg-browse_arrow{position: relative;top: 2px;left: 2px;font-size: 14px;}
.hbg-item--1 .hbg-body{padding:22px;}