/**
 * Blog section fixes - ClickUp 86d44dez0 (CL038-DEV21 / REQ-86d449drm), 2026-08-25.
 *
 * FILENAME IS "-r2" ON PURPOSE. The first cut shipped as kwdup-blog.css and went live for ~4 hours
 * before the spacing fixes in section 4 were written. Static is served `max-age=31536000`, so every
 * browser that loaded a page in that window had the old bytes pinned until 2027 - replacing the file
 * in place would have fixed the edge and left real users on the broken spacing. A new name has no
 * cached history. Same reason applies to the NEXT edit: if this sheet has been live long enough to
 * matter, ship -r3 rather than overwriting. The old kwdup-blog.min.css files were deleted.
 *
 * HAND-PLACED IN pub/static - THIS SOURCE FILE IS NEVER COMPILED OR DEPLOYED.
 * Magento\Framework\App\View\Asset\Publisher::publish() returns early when the target already
 * exists (vendor/magento/framework/App/View/Asset/Publisher.php:55), so setup:static-content:deploy
 * will neither overwrite nor regenerate the four deployed copies at
 *   pub/static/frontend/Magneto/{kjest,kjestrtl}/{en_US,ar_SA}/css/kwdup-blog.min.css
 * Editing THIS file alone therefore ships nothing - copy the minified bytes across by hand, or
 * `rm` the four .min.css files first. (styles-{m,l}.min.css are diverged from their LESS the same
 * way - see the shrink-in-place work of 2026-08-17.)
 *
 * WHY A SEPARATE SHEET AND NOT AN EDIT TO styles-m/styles-l:
 *   both served styles-m.min.css files were hand-shrunk in place and no longer match their LESS,
 *   so a static-content:deploy is off the table; and Magefan's own blog-custom.css has been served
 *   as 0 bytes with max-age=31536000 since 2026-08-17, so filling it would leave every returning
 *   visitor on the empty cached copy until 2027. A NEW filename has no cached history.
 *
 * WHY media="screen" ON THE <css> TAG (see Magefan_Blog/layout/blog_css.xml):
 *   Magento groups head assets by their exact attribute set and renders groups in creation order
 *   (View/Asset/GroupedCollection.php:108). No other sheet uses media="screen", so this one gets a
 *   group of its own that renders LAST - after styles-l.min.css (media="screen and (min-width:768px)")
 *   and print.min.css. That is what lets every rule below win on plain source order instead of a
 *   pile of !important. Do not remove that attribute.
 *
 * NOTE: mfblog/developer/css_settings/include_all_pages defaults to 1, so Magefan's observer adds
 * the blog_css handle to EVERY frontend page - this sheet is render-blocking site-wide. Keep it
 * small, and keep every selector anchored to a .blog-* / .cms-index-index body class.
 */

/* ------------------------------------------------------------------ *
 * 1. Homepage blog block on mobile.
 *
 * styles-m blanked it at <=767px so a `.mobile-blog` variant could take over, but that markup was
 * deleted from the widget template long ago and nothing replaced it, so phones got an empty <div>.
 * The wrapper is already display:block (a 4-class rule outranks the 3-class display:none); only the
 * heading and the list itself are hidden, the list with !important.
 *
 * No template or Owl change is needed - the init in Magefan_Blog/templates/widget/recent.phtml
 * already declares `0: {items: 1}`, and the nav arrows inherit the same owl-theme styling they use
 * on desktop.
 * ------------------------------------------------------------------ */
@media only screen and (max-width: 767px) {
    .cms-index-index .post-list-wrapper.blog-widget-recent.home-blog {
        display: block;
    }

    .cms-index-index .post-list-wrapper.blog-widget-recent .home-catsec {
        display: block;
    }

    .cms-index-index .post-list-wrapper.blog-widget-recent ul.post-list.clearfix {
        display: block !important; /* beats styles-m's `display: none !important` */
    }
}

/*
 * ...and clear the floats in the section above it.
 *
 * The "why kawader" section is a row of `div.onesection` elements floated left, and their parent
 * `.main-oneofsttaic` has no rules at all - so it computed to height 0 and the floats hung up to
 * 486px below where the section claimed to end. While the blog block was hidden nobody saw it; once
 * it renders, the floats pushed the heading's line box down and opened ~510px of dead space above
 * "المدونة" on the Arabic mobile homepage.
 *
 * `display: flow-root` gives the holder a block formatting context, so it contains its own floats.
 * Preferred over `overflow: hidden` (which would clip) and over an `::after` clearfix (generated
 * content this theme would then have to protect from its dead-CSS crawler). Measured effect: holder
 * 0 -> 486px on AR mobile, 0 -> ~390px on both desktops; section height, blog position and total
 * page height all unchanged, so this corrects the box model without moving anything.
 *
 * This belongs in the theme LESS and IS mirrored there (kjest + kjestrtl `_extend.less`), but LESS
 * is not compiled on this box any more - see this file's header. The copy here is what actually
 * ships.
 *
 * An earlier revision worked around this with `clear: both` on the blog wrapper. That is redundant
 * now the floats are contained (verified: blog top identical with `clear: none`), so it was removed
 * rather than left as a second, misleading explanation of the same bug.
 */
.whykawadaer-section-home .main-oneofsttaic {
    display: flow-root;
}

/* ------------------------------------------------------------------ *
 * 2. Post listing pages - /blog, /blog/general, tag, author, search.
 *
 * `.blog-page-list` is on <body> for every one of them, so one block covers the client's points 3
 * and 5 together. Two things happen here:
 *   - the featured image is un-hidden on the blog INDEX handle, where styles-m/styles-l carry
 *     `.blog-index-index .post-ftimg-hld { display: none }`. The <img> was always in the HTML and
 *     every URL returns 200 - it was only ever hidden by CSS, which is why /blog/general showed
 *     images and /blog did not;
 *   - the image is capped at 500px instead of spanning the full column. The cap only bites on
 *     desktop; the mobile card is ~272-360px wide, so `width: 100%` already governs there and the
 *     image stays fluid without a second breakpoint.
 *
 * The cap goes on the HOLDER, not the <img> (blog-m.css keeps the img at width:100%), so the block
 * stays direction-agnostic: a block box narrower than its container sits at the inline-start edge,
 * which mirrors itself for the RTL store with no extra rules.
 * ------------------------------------------------------------------ */
.blog-page-list .post-list .post-content .post-description .post-ftimg-hld {
    display: block;
    width: 100%;
    max-width: 500px;   /* desktop cap, client-specified 2026-08-25 (was 360px) */
    margin: 0 0 15px;
}

.blog-page-list .post-list .post-content .post-description .post-ftimg-hld a {
    display: block;
    line-height: 0;
}

.blog-page-list .post-list .post-content .post-description .post-ftimg-hld img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    margin: 0;
    padding: 0;
}

/* ------------------------------------------------------------------ *
 * 3. Blog post page - the featured image fills its column and scales down.
 *
 * styles-l pins it to `body.blog-post-view .post-content .post-description .post-ftimg-hld
 * { width: 50% }` (0,4,1), which is why it rendered at ~380px inside a 766px column on desktop.
 * Mobile was already 100%. Matching that specificity is not enough on its own - the extra
 * `.post-view` here takes us to (0,5,1) so this wins outright, and it also keeps the rule off the
 * related-posts and next/prev blocks lower down the same page.
 * ------------------------------------------------------------------ */
body.blog-post-view .post-view .post-content .post-description .post-ftimg-hld {
    width: 100%;
    max-width: 100%;
    margin: 0 0 20px;
}

body.blog-post-view .post-view .post-content .post-description .post-ftimg-hld img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
}

/* ------------------------------------------------------------------ *
 * 4. Even left/right spacing.
 *
 * Two separate causes, one symptom - blog content sitting off-centre.
 *
 * (a) LISTING PAGES. The <ol class="post-list"> keeps the browser's default list indent, which UAs
 *     apply as `padding-inline-start: 40px`. blog-m.css only ever zeroed it as `padding-left: 0`,
 *     i.e. the LTR side. In the Arabic store inline-start is the RIGHT, so 40px survived there and
 *     every card was pushed 40px off the right edge while the left kept the theme's 24px - measured
 *     L39 / R79 at 390px. English was already even (L39 / R39), which is why this only ever looked
 *     broken in Arabic. Zeroing BOTH physical sides fixes RTL and is a no-op for LTR, so the rule
 *     cannot rot if a store's direction ever changes.
 *
 * (b) HOMEPAGE CAROUSEL. `.cms-home ul.post-list { margin: 0 -12px }` meets owl.carousel.css's
 *     `.owl-carousel { width: 100% }`. A definite width plus negative margins on both sides
 *     over-constrains the box, so the UA drops the inline-END margin and the whole carousel shifts
 *     12px toward inline-start - mirrored in each store, and wrong in both: AR measured L63/R39,
 *     EN L22/R46. Dropping the negative margin lets it align with its container instead. The
 *     carousel is sized by Owl at init, which runs after CSS, so item widths follow automatically.
 *
 * Not touched: on desktop the blog pages legitimately show a large gap on one side - that is the
 * 2columns-right sidebar, not a centring bug. Do not "even out" .column.main.
 * ------------------------------------------------------------------ */
.blog-page-list .post-list-wrapper .post-list {
    padding-left: 0;
    padding-right: 0;
}

.cms-index-index .post-list-wrapper.blog-widget-recent.home-blog ul.post-list {
    margin-left: 0;
    margin-right: 0;
}

/* ------------------------------------------------------------------ *
 * 5. Homepage blog cards size to their content.
 *
 * blog-m.css ships `.blog-widget-recent .post-description .post-text-hld { min-height: 150px;
 * overflow-y: auto }`, which floors every card's excerpt box at 150px and leaves dead whitespace
 * under the short ones.
 *
 * The theme ALREADY disagrees with that - mena.less carries the same selector with
 * `min-height: auto` - but it loses purely on load order: mena.min.css is emitted before
 * blog-m.min.css in <head> and the two selectors have identical specificity, so the later file wins.
 * That is why the intent was in the codebase yet had no effect. Restated here (this sheet renders
 * last) rather than by reordering the <link>s, which would move every other mena/blog-m collision
 * too.
 *
 * Scoped to .cms-index-index deliberately: the client asked for this on the home page, and
 * .blog-widget-recent is a generic Magefan widget class that could be placed on any CMS page.
 * ------------------------------------------------------------------ */
.cms-index-index .post-list-wrapper.blog-widget-recent .post-description .post-text-hld {
    min-height: auto;
}