/* v1.8.45 — Blog hero full-bleed correction. Only the blog route.
   The previous release clipped the Elementor full-bleed hero inside a boxed
   ancestor, leaving an empty stripe on one physical side of the viewport. */

/* Keep horizontal overflow at the document boundary, not on the boxed
   ancestors containing the full-width hero. */
html:has(body.asbm-blog-route) { overflow-x: clip; }
body.asbm-blog-route { max-width: 100%; overflow-x: clip; }

/* Elementor containers that actually contain this hero must let the
   viewport-wide breakout render outside their boxed content area.
   :has() keeps this off all other site components and pages. */
@supports selector(:has(*)) {
  body.asbm-blog-route .elementor-element:has(.acdh-template-blog_archive),
  body.asbm-blog-route .e-con:has(.acdh-template-blog_archive),
  body.asbm-blog-route .elementor-widget-wrap:has(.acdh-template-blog_archive) {
    overflow: visible;
    overflow-x: visible;
  }
}

/* Restore the original widget's symmetric breakout instead of imposing
   max-width:100% (which forces clipping inside its old Elementor column). */
body.asbm-blog-route .acdh-template-blog_archive.acdh-blog-full-bleed {
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
}
body.asbm-blog-route .acdh-template-blog_archive .acdh-template-shell {
  box-sizing: border-box;
  width: min(var(--acdh-blog-content-max, 1440px), 100%);
  max-width: 100%;
  min-width: 0;
}
body.asbm-blog-route .acdh-template-blog_archive .acdh-template-media,
body.asbm-blog-route .acdh-template-blog_archive .acdh-template-content {min-width:0;}

/* English Blog desktop: copy on the LEFT, portrait on the RIGHT.
   The AliClick widget can output an explicit media-left layout state. Override
   BOTH the grid track widths and item order so they cannot disagree. Arabic
   and other pages keep the existing widget layout untouched. */
@media (min-width:1025px) {
  html[lang^="en"] body.asbm-blog-route .acdh-template-blog_archive .acdh-template-shell {
    direction: ltr;
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--acdh-blog-media-width));
  }
  html[lang^="en"] body.asbm-blog-route .acdh-template-blog_archive .acdh-template-content {
    order: 1;
    grid-column: 1;
    grid-row: 1;
    direction: ltr;
    text-align: left;
    justify-self: start;
  }
  html[lang^="en"] body.asbm-blog-route .acdh-template-blog_archive .acdh-template-media {
    order: 2;
    grid-column: 2;
    grid-row: 1;
  }
  /* The native preview uses a separate grid, and follows the same placement. */
  body.asbm-blog-route .asbm[dir="ltr"] .asbm-hero-content > :first-child {
    grid-column: 1;
    grid-row: 1;
    direction: ltr;
    text-align: left;
  }
  body.asbm-blog-route .asbm[dir="ltr"] .asbm-hero-content > .asbm-person {
    grid-column: 2;
    grid-row: 1;
  }
}
/* No horizontal scrolling from the native search or card tracks. */
body.asbm-blog-route .asbm-hero,
body.asbm-blog-route .asbm-hero-content {max-width:100%;min-width:0;}


/* RC12: Public Blog ONLY — keep the hero gradient behind the fixed header.
   Header height is measured by native-chrome.js; the widget shell owns safe
   clearance. Do not modify the portrait position or desktop grid tracks. */
body.asbm-blog-route .acdh-template-blog_archive .acdh-template-shell {
  padding-top: calc(var(--acdh-blog-block-pad, 36px) + var(--asbm-blog-header-safe, 0px));
}

/* The widget may be configured as mobile-row or media-first in Elementor.
   Override its responsive grid STATE rather than moving/transforming columns. */
@media (max-width: 767px) {
  body.asbm-blog-route .acdh-template-blog_archive .acdh-template-shell,
  body.asbm-blog-route .acdh-blog-layout-state.acdh-blog-mobile-row .acdh-template-blog_archive .acdh-template-shell,
  body.asbm-blog-route .acdh-blog-layout-state.acdh-blog-mobile-stack .acdh-template-blog_archive .acdh-template-shell {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    height: auto;
    gap: var(--acdh-blog-gap, 24px);
  }
  body.asbm-blog-route .acdh-template-blog_archive .acdh-template-content,
  body.asbm-blog-route .acdh-blog-layout-state .acdh-template-blog_archive .acdh-template-content {
    grid-column: 1 / -1;
    grid-row: 1;
    order: 1 !important;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    justify-self: stretch;
  }
  body.asbm-blog-route .acdh-template-blog_archive .acdh-template-media,
  body.asbm-blog-route .acdh-blog-layout-state .acdh-template-blog_archive .acdh-template-media {
    grid-column: 1 / -1;
    grid-row: 2;
    order: 2 !important;
    width: 100%;
    min-width: 0;
    justify-self: center;
  }
  body.asbm-blog-route .acdh-template-blog_archive[dir="rtl"] .acdh-template-content {
    direction: rtl;
    text-align: right;
  }
  body.asbm-blog-route .acdh-template-blog_archive[dir="ltr"] .acdh-template-content {
    direction: ltr;
    text-align: left;
  }
}

/* RC13: Public Blog desktop only. The hero background continues behind the
   fixed header; increase INNER top clearance for both the copy and portrait
   together. The portrait is bottom-aligned in the original AliClick grid, so
   do not transform or reposition the image independently. Mobile unchanged. */
@media (min-width: 1025px) {
  body.asbm-blog-route .acdh-template-blog_archive .acdh-template-shell,
  body.asbm-blog-route .acdh-template-blog_archive.acdh-under-header .acdh-template-shell {
    padding-top: calc(var(--acdh-blog-block-pad, 36px) + var(--asbm-blog-header-safe, 0px) + 110px);
  }
}