/* Full-width custom blog page */
body.page-template-template-custom-blog .website-wrapper,
body.page-template-template-custom-blog .main-page-wrapper,
body.page-template-template-custom-blog .site-content,
body.page-template-template-custom-blog .container,
body.page-template-template-custom-blog .container-fluid,
body.page-template-template-custom-blog .row,
body.page-template-template-custom-blog .content-layout-wrapper,
body.page-template-template-custom-blog .site-content-row {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
}

/* Main blog wrapper */
.khashab-blog-page {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    background: #f7f0e7;
    color: #2f1b12;
    font-family: Georgia, "Times New Roman", serif;
}

.khashab-blog-page,
.khashab-blog-page * {
    box-sizing: border-box;
    font-family: Georgia, "Times New Roman", serif;
}

/* Full-width hero */
.khashab-blog-hero {
    width: 100%;
    min-height: 620px;
    margin: 0;
    padding: 60px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
}

/* Scrollable hero content */
.khashab-blog-hero-content {
    width: min(620px, 100%);
    max-height: 420px;
    overflow-y: auto;
    padding: 42px;
    background: rgba(247, 240, 231, 0.94);
    border: 1px solid #d8c7b6;
    border-radius: 10px;
    color: #2f1b12;
}

/* Full-width posts section */
.khashab-blog-posts-section {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 56px 3%;
    background: #f7f0e7;
}

/* Three-column grid across the available width */
.khashab-blog-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}

/* Cards */
.khashab-blog-card {
    width: 100%;
    min-width: 0;
    padding: 34px;
    background: #f7f0e7;
    border: 1px solid #d8c7b6;
    border-radius: 10px;
    color: #2f1b12;
}

/* Keep links in the same color family */
.khashab-blog-page a,
.khashab-blog-page a:visited {
    color: #2f1b12;
}

.khashab-blog-category,
.khashab-blog-page a:hover {
    color: #a35f2c;
}
.khashab-blog-panel {
	padding:
		clamp(32px, 4vw, 64px)
		clamp(20px, 4vw, 70px)
		clamp(40px, 5vw, 80px);
}
/* Tablet */
@media (max-width: 1024px) {
    .khashab-blog-hero {
        min-height: 520px;
        padding: 40px;
    }

    .khashab-blog-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Mobile */
@media (max-width: 767px) {
    .khashab-blog-hero {
        min-height: 500px;
        padding: 20px;
        align-items: flex-end;
    }

    .khashab-blog-hero-content {
        width: 100%;
        max-height: 320px;
        padding: 26px 22px;
    }

    .khashab-blog-posts-section {
        padding: 30px 16px;
    }

    .khashab-blog-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .khashab-blog-card {
        padding: 26px 22px;
    }
}

.khashab-blog-hero {
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	width: 100%;
	min-height: clamp(480px, 68vh, 760px);
	margin: 0;
	padding:
		clamp(60px, 7vw, 110px)
		clamp(24px, 4vw, 72px)
		clamp(170px, 18vw, 260px);

	background-color: #F7F0E7;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

.khashab-blog-hero.has-hero-image {
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

.khashab-blog-hero.has-hero-fallback {
	background-image: none;
	background-color: #F7F0E7;
}

/* Make hero text larger, bolder, and clearer */

.khashab-blog-hero__content {
	width: min(720px, 100%);
	padding: clamp(28px, 3.2vw, 48px);
	background: rgba(247, 240, 231, 0.16);
	border: 1px solid rgba(247, 240, 231, 0.34);
	box-shadow: 0 18px 48px rgba(47, 27, 18, 0.10);
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
}

.khashab-blog-hero__eyebrow {
	margin-bottom: 18px;
	font-size: clamp(15px, 1.2vw, 19px);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0.04em;
	color: #2F1B12;
}

.khashab-blog-hero__title {
	max-width: 850px;
	font-size: clamp(56px, 6.5vw, 100px);
	font-weight: 700;
	line-height: 0.98;
	letter-spacing: -0.035em;
	color: #2F1B12;
	text-shadow: none;
}

.khashab-blog-hero__intro {
	max-width: 760px;
	margin-top: 28px;
	font-size: clamp(20px, 1.7vw, 26px);
	font-weight: 600;
	line-height: 1.55;
	color: #2F1B12;
}

.khashab-blog-hero__intro p {
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
}