@charset "UTF-8";
/*!
 * e4g-styles — blog part
 *
 * GENERATED by tools/split_css.py. Do not edit.
 * Edit assets/css/e4g-styles.css and run the release script, which rebuilds
 * these. Loads after core.css on the blog index, post archives and single posts.
 */
/* ==== BLOG ==== */ .single-post .wp-picture img,article.blog-post .wp-picture.blog-hover-zoom{border-radius:20px}
.content-grid2 .meta-post-timeline{display:none}
.global-post-template-large .single-post-large-wrapper .post-heading .meta-post,.global-post-template-large .single-post-large-wrapper .post-heading .meta-post .views-count,.global-post-template-large .single-post-large-wrapper .post-heading .meta-post a{display:none}
/* ==== BLOG LISTING — CARDS ==== */
/* Isotope lays these out absolutely after measuring each card, so a rule that
   changes a card's height after that leaves them overlapping. Everything here
   is parse-time, nothing transitions height, and the hover lift uses transform,
   which does not take part in layout. */
/* The article keeps the width Isotope lays out against and carries the gutter
   as padding; the inner div is the card you can see. Doing it the other way
   round left the cards almost edge to edge, because any margin on the article
   would have come out of the column Isotope had already measured.
   box-sizing is pinned because the padding must not widen the column. */
.blog-masonry article.blog-post{box-sizing:border-box!important;padding:0 12px 26px!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;overflow:visible!important}
.blog-masonry article.blog-post>div{position:relative;background:var(--e4g-panel)!important;border:1px solid var(--e4g-line)!important;border-radius:16px!important;overflow:hidden!important;transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease}
.blog-masonry article.blog-post:hover>div{border-color:rgba(233,117,16,.55)!important;box-shadow:0 10px 28px rgba(0,0,0,.45)!important;transform:translateY(-3px)}
/* The card's own radius now clips the image, so the image's 20px corners from
   the BLOG section above would show as a gap inside the corner. */
.blog-masonry .wp-picture,.blog-masonry .wp-picture.blog-hover-zoom{margin:0!important;border-radius:0!important;overflow:hidden!important}
.blog-masonry .wp-picture img{display:block;width:100%!important;height:auto!important;aspect-ratio:16/9;object-fit:cover;border-radius:0!important}
.blog-masonry .grid-post-body{padding:16px 18px 18px!important}
.blog-masonry .post-heading{margin:0 0 10px!important;padding:0!important;border:0!important}
.blog-masonry .post-heading h2{margin:0!important;font-size:17px!important;line-height:1.5!important}
/* Two lines, so the excerpts start on a common baseline across a row. The
   masonry is free to keep the cards different heights below that. */
.blog-masonry .post-heading h2 a{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:var(--e4g-text)!important;font-weight:700!important}
.blog-masonry .post-heading h2 a:hover{color:var(--e4g-accent)!important}
/* overflow:hidden from the clamp would clip an outline drawn outside the box. */
.blog-masonry .post-heading h2 a:focus-visible{outline:2px solid var(--e4g-accent)!important;outline-offset:-2px!important}
.blog-masonry .content-article{color:var(--e4g-muted)!important;font-size:13.5px!important;line-height:1.85!important}
.blog-masonry .more-button{display:inline-block;margin:12px 0 0}
/* ==== BLOG LISTING — IMAGE HOVER ==== */
.blog-masonry .blog-mask{background:linear-gradient(180deg,rgba(16,23,34,0),rgba(16,23,34,.8))!important}
.blog-masonry .blog-mask .btn-read-more{color:var(--e4g-text)!important;font-weight:700!important;letter-spacing:.04em}
.blog-masonry .blog-mask .shape{fill:transparent;stroke:var(--e4g-accent);stroke-width:2}
/* ==== BLOG PAGINATION ==== */
/* The markup is nav.pagination-cubic > ul.page-numbers > li > a|span. The list
   itself carries the page-numbers class, the numbered links carry `inactive`,
   and only the current page and Next carry page-numbers. Styling that class on
   its own therefore boxed the list and missed every number, which is why the
   numbers kept the theme's pale borders. */
.etheme-pagination.articles-pagination{margin:34px 0 0!important;padding:26px 0 0!important;border-top:1px solid var(--e4g-line)!important}
.etheme-pagination .pagination-cubic ul.page-numbers{display:flex!important;flex-wrap:wrap!important;align-items:center!important;justify-content:center!important;gap:8px!important;margin:0!important;padding:0!important;list-style:none!important;background:none!important;border:0!important}
.etheme-pagination .pagination-cubic li{margin:0!important;padding:0!important;list-style:none!important;background:none!important;border:0!important}
.etheme-pagination .pagination-cubic li>a,.etheme-pagination .pagination-cubic li>span{display:inline-flex!important;align-items:center;justify-content:center;gap:6px;min-width:42px;height:42px;margin:0!important;padding:0 14px!important;background:var(--e4g-panel)!important;border:1px solid var(--e4g-line)!important;border-radius:12px!important;color:var(--e4g-text)!important;font-size:14px!important;font-weight:700!important;line-height:1!important;transition:background-color .18s ease,border-color .18s ease,color .18s ease}
.etheme-pagination .pagination-cubic li>a:hover{background:rgba(233,117,16,.12)!important;border-color:var(--e4g-accent)!important;color:var(--e4g-accent)!important}
.etheme-pagination .pagination-cubic li>span.current,.etheme-pagination .pagination-cubic li>.current{background:linear-gradient(135deg,#e97510,#ff9838)!important;border-color:var(--e4g-accent)!important;color:#101722!important;box-shadow:0 0 14px rgba(233,117,16,.45)!important}
.etheme-pagination .pagination-cubic li>a.next,.etheme-pagination .pagination-cubic li>a.prev{padding:0 18px!important;font-weight:800!important;letter-spacing:.03em}
/* Sits after the numbers on screen even though it comes first in the markup,
   so it is left where the theme puts it and only recoloured. */
.etheme-pagination .et_count-posts{margin:14px 0 0!important;color:var(--e4g-muted)!important;font-size:13px!important;text-align:center!important}
/* ==== SINGLE POST — TITLE BLOCK ==== */
/* The theme paints a backstretch image behind this block at a negative
   z-index, so nothing here sets a background that would cover it. */
/* .post-heading is also the wrapper of every related-post card's title on
   this page, so the block is picked out by the h1 only the page title has. */
.single-post .post-heading:has(>.container>h1){padding:44px 0 30px!important;text-align:center;border-bottom:1px solid var(--e4g-line)!important}
.single-post .post-heading:has(>.container>h1) h1{color:var(--e4g-text)!important;max-width:900px;margin:0 auto 14px!important;font-size:32px!important;font-weight:800!important;line-height:1.4!important}
.single-post .post-categories{margin:0 0 14px!important}
.single-post .post-categories a{display:inline-block;padding:5px 14px;background:rgba(233,117,16,.14)!important;border:1px solid rgba(233,117,16,.45)!important;border-radius:999px!important;color:var(--e4g-accent)!important;font-size:12px!important;font-weight:700!important;letter-spacing:.06em;text-transform:uppercase}
.single-post .post-heading:has(>.container>h1) .meta-post{color:var(--e4g-muted)!important;font-size:13px!important}
.single-post .post-heading:has(>.container>h1) .meta-post a{color:var(--e4g-text)!important;font-weight:600!important}
.single-post .meta-divider{margin:0 8px;color:var(--e4g-line)!important}
.single-post article.post-single>.post-header .wp-picture{margin:0 0 26px!important;border-radius:16px!important;overflow:hidden!important}
.single-post article.post-single>.post-header .wp-picture img{display:block;width:100%!important;height:auto!important;border-radius:16px!important}
/* ==== SINGLE POST — TAGS ==== */
/* The tags are separated by literal ", " text nodes. Collapsing the container's
   font size hides those without hiding the pills, and avoids flex turning each
   comma into an item of its own. */
.single-tags{margin:28px 0 0!important;padding:18px 0 0!important;border-top:1px solid var(--e4g-line)!important;font-size:0!important;line-height:0}
.single-tags>span{display:inline-block;margin:0 10px 8px 0;color:var(--e4g-muted)!important;font-size:12px!important;line-height:1.6;font-weight:700!important;letter-spacing:.06em;text-transform:uppercase}
.single-tags a[rel=tag]{display:inline-block;margin:0 8px 8px 0;padding:5px 12px;background:var(--e4g-panel)!important;border:1px solid var(--e4g-line)!important;border-radius:999px!important;color:var(--e4g-text)!important;font-size:12.5px!important;line-height:1.6}
.single-tags a[rel=tag]:hover{border-color:var(--e4g-accent)!important;color:var(--e4g-accent)!important}
/* ==== SINGLE POST — PREVIOUS AND NEXT ==== */
.posts-navigation{display:flex!important;flex-wrap:wrap!important;gap:14px!important;margin:26px 0 0!important}
.posts-navigation .posts-nav-btn{flex:1 1 260px!important;margin:0!important;padding:14px!important;background:var(--e4g-panel)!important;border:1px solid var(--e4g-line)!important;border-radius:14px!important}
.posts-navigation .posts-nav-btn:hover{border-color:rgba(233,117,16,.5)!important}
.posts-navigation .post-title{color:var(--e4g-text)!important;font-size:14px!important;font-weight:700!important;line-height:1.5!important}
.posts-navigation .post-title:hover{color:var(--e4g-accent)!important}
.posts-navigation img{border-radius:10px!important}
/* ==== SINGLE POST — RELATED ==== */
.related-posts>h3,.related-posts>h2{margin:0 0 16px!important;padding:0 0 10px!important;border-bottom:1px solid var(--e4g-line)!important;font-size:15px!important;font-weight:800!important;letter-spacing:.05em;text-transform:uppercase}
.related-posts article.blog-post{background:var(--e4g-panel)!important;border:1px solid var(--e4g-line)!important;border-radius:14px!important;overflow:hidden!important}
.related-posts article.blog-post .wp-picture{margin:0!important;border-radius:0!important}
.related-posts article.blog-post .wp-picture img{display:block;width:100%!important;height:auto!important;aspect-ratio:16/9;object-fit:cover;border-radius:0!important}
.related-posts .grid-post-body,.related-posts .post-heading{padding:0 14px!important}
.related-posts .post-heading{padding-top:14px!important;padding-bottom:14px!important;margin:0!important}
.related-posts .post-heading a{color:var(--e4g-text)!important;font-size:14.5px!important;font-weight:700!important;line-height:1.5!important}
.related-posts .post-heading a:hover{color:var(--e4g-accent)!important}
/* ==== BLOG — MOBILE ==== */
@media(max-width:768px){.single-post .post-heading:has(>.container>h1){padding:28px 0 20px!important}
.single-post .post-heading:has(>.container>h1) h1{font-size:23px!important;line-height:1.45!important}
.single-post article.post-single>.post-header .wp-picture,.single-post article.post-single>.post-header .wp-picture img{border-radius:12px!important}
.blog-masonry .grid-post-body{padding:14px!important}
.blog-masonry .post-heading h2{font-size:16px!important}
.blog-masonry article.blog-post{padding:0 8px 18px!important}
.etheme-pagination .pagination-cubic li>a,.etheme-pagination .pagination-cubic li>span{min-width:38px;height:38px;padding:0 12px!important;font-size:13px!important}}
@media(prefers-reduced-motion:reduce){.blog-masonry article.blog-post>div,.etheme-pagination .pagination-cubic li>a,.etheme-pagination .pagination-cubic li>span{transition:none!important}
.blog-masonry article.blog-post:hover>div{transform:none!important}}
/* ==== BLOG LISTING — CARD BODY RHYTHM ==== */
/* The excerpt is a bare text node with the read-more anchor immediately after
   it, so the anchor runs on from the last words and finishes in a different
   spot on every card. Making it a block puts it on its own line everywhere.
   The text also reads centred, which is hard work for a three-line excerpt.
   `start` rather than `left` so the Arabic posts align right and the English
   ones left without a second rule. */
.blog-masonry .grid-post-body,.blog-masonry .post-heading,.blog-masonry .post-heading h2,.blog-masonry .post-heading h2 a,.blog-masonry .content-article{text-align:start!important}
.blog-masonry .content-article>.more-button{display:block!important;margin:14px 0 0!important}
.blog-masonry .read-more{display:inline-block;padding:8px 16px!important;background:transparent!important;border:1px solid var(--e4g-line)!important;border-radius:999px!important;color:var(--e4g-accent)!important;font-size:12.5px!important;font-weight:700!important;letter-spacing:.05em;text-transform:uppercase}
.blog-masonry .more-button:hover .read-more{background:rgba(233,117,16,.12)!important;border-color:var(--e4g-accent)!important}
/* The BUTTONS section gives .read-more a sliding underline and an arrow that
   sat outside the pill. */
.blog-masonry .read-more:before,.blog-masonry .read-more:after{display:none!important}
/* ==== BLOG LISTING — DATE CHIP ==== */
/* The theme's date block is hidden outright by the BLOG section above. On a
   guide-heavy blog the date is worth showing, so it comes back as a chip over
   the image, where it costs no height and cannot change what Isotope measured.
   Its containing block is the card div, which is positioned in the CARDS
   section above. */
.blog-masonry .meta-post-timeline{display:block!important;position:absolute!important;top:10px;inset-inline-start:10px;z-index:2;padding:6px 10px!important;margin:0!important;background:rgba(16,23,34,.86)!important;border:1px solid var(--e4g-line)!important;border-radius:10px!important;text-align:center!important;line-height:1.15!important}
.blog-masonry .meta-post-timeline .time-day{display:block;color:var(--e4g-accent)!important;font-size:16px!important;font-weight:800!important}
.blog-masonry .meta-post-timeline .time-mon{display:block;color:var(--e4g-muted)!important;font-size:10.5px!important;font-weight:700!important;letter-spacing:.08em;text-transform:uppercase}