/* ===========================================================================
   Component — Picture / Media Wrappers
   ---------------------------------------------------------------------------
   إصلاح <picture> elements: تأكيد أن الـ wrapper يأخذ كامل الـ container
   بدلاً من inline display الافتراضي.

   📦 داخل @layer components (cascade مُدار بالـ layer order)
   📛 لا !important — لا تعارض مع parent (selectors فريدة للابن)
   ============================================================================ */
@layer components {


/* (1) Media wrappers — relative positioned containers */
:where(
    .hp-hero__main-media,
    .hp-hero__secondary-media,
    .hp-cat__lead-media,
    .hp-cat__item-media,
    .hp-trending__item-media,
    .hp-video__item-media,
    .hp-picks__card-media,
    .hp-mostread__item-media,
    .article-header__hero,
    .article-related__media,
    .article-related__item-media,
    .author-articles__card-media,
    .adn-media
) {
    position: relative;
    overflow: hidden;
    display: block;
}


/* (2) <picture> داخل media wrapper — يأخذ كامل الـ container */
:where(
    .hp-hero__main-media,
    .hp-hero__secondary-media,
    .hp-cat__lead-media,
    .hp-cat__item-media,
    .hp-trending__item-media,
    .hp-video__item-media,
    .hp-picks__card-media,
    .hp-mostread__item-media,
    .article-header__hero,
    .article-related__media,
    .article-related__item-media,
    .author-articles__card-media,
    .adn-media
) picture {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    position: absolute;
    inset: 0;
}


/* (3) <img> — object-fit cover */
:where(
    .hp-hero__main-media,
    .hp-hero__secondary-media,
    .hp-cat__lead-media,
    .hp-cat__item-media,
    .hp-trending__item-media,
    .hp-video__item-media,
    .hp-picks__card-media,
    .hp-mostread__item-media,
    .article-header__hero,
    .article-related__media,
    .article-related__item-media,
    .author-articles__card-media,
    .adn-media
) img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}


/* (4) Fallback عام لأي wrapper بـ classnames تنتهي بـ -media */
:where([class*="-media"], [class*="__media"]) picture {
    display: block;
    inline-size: 100%;
    block-size: 100%;
}


} /* end @layer components */