/* =========================================================
   علِّمنا — Public Layout System V1.73
   غيّر القيمتين أدناه فقط لتعديل عرض الواجهة العامة كاملة.
========================================================= */
:root {
    --public-layout-max-width: 1400px;
    --public-layout-gutter: 18px;

    /*
     * الرئيسية وصفحات التجارب تحتاج Rails أوسع بعد اعتماد معيار القراءة R7.
     * هذا العرض خاص بهما فقط، ولا يغيّر الإدارة أو البزنس أو بقية الواجهة العامة.
     */
    --public-community-layout-max-width: 1500px;

    /* توافق مع المكونات الأقدم التي تستخدم الأسماء السابقة. */
    --public-container-width: var(--public-layout-max-width);
    --public-container-padding: var(--public-layout-gutter);
}

/* الحاوية الخارجية الموحدة لكل صفحات الموقع العامة. */
.public-header-inner,
.public-home-shell,
.eco-invitations-page,
.public-search-page,
.public-discover-page,
.public-settings-page,
.public-profile-page.public-detail-page,
.public-profile-edit-page.public-detail-page,
.public-business-page.public-detail-page,
.public-product-page.public-detail-page,
.public-post-page.public-detail-page,
.public-recommend-shell,
.order-page,
.invoice-page {
    width: min(
        var(--public-layout-max-width),
        calc(100% - (var(--public-layout-gutter) * 2))
    );
    max-width: none;
    margin-inline: auto;
}

/* شريط النطاقات في الرئيسية يلتزم بنفس حدود الحاوية بلا تمدد جانبي. */
.public-home-shell > .public-scope-bar {
    width: 100%;
    margin-inline: 0;
    padding-inline: 0;
}

/* صفحات الموضوع تستخدم العرض العام؛ العمود الأوسط يحدد عرض القراءة. */

@media (max-width: 780px) {
    :root {
        --public-layout-gutter: 12px;
    }
}

/* =========================================================
   V1.74.5.1 — محاذاة الـ Rails مع حدود الحاوية العامة
   تبقى قيمة العرض من --public-layout-max-width أعلاه فقط.
========================================================= */
@media (min-width: 1251px) {
    /*
     * الرئيسية + صفحة التجربة/الموضوع فقط:
     * نسمح لهما بالاستفادة من عرض أكبر حتى تتنفس البطاقات الجانبية بعد تكبير الخطوط.
     * العمود الأوسط يبقى 760px كحد قراءة؛ الزيادة تذهب للـRail اليمين واليسار.
     * لا يطبّق هذا على الإدارة أو البزنس أو صفحات الملف/النشاط الأخرى.
     */
    .public-home-shell,
    .public-post-page.public-detail-page {
        width: min(
            var(--public-community-layout-max-width),
            calc(100% - (var(--public-layout-gutter) * 2))
        );
        max-width: none;
    }

    .public-home-layout,
    .public-post-layout {
        width: 100%;
        grid-template-columns:
            minmax(250px, 1fr)
            minmax(0, 760px)
            minmax(280px, 1fr);
        justify-content: stretch;
    }

    .public-home-right-rail,
    .public-home-rail {
        width: 100%;
    }
}

/* =========================================================
   R19.16.58 — Home header outer alignment
   Align the logo/account outer edges with the 3-column home layout.
   Home uses --public-community-layout-max-width (1500px) on desktop,
   while the global header normally uses --public-layout-max-width (1400px).
========================================================= */
@media (min-width: 1251px) {
    body:has(.public-home-shell) .public-header-inner {
        width: min(
            var(--public-community-layout-max-width),
            calc(100% - (var(--public-layout-gutter) * 2))
        );
        max-width: none;
    }
}

/* R19.17.26 — match the experience/post header to the homepage.
   Home previously expanded its header to the community container width,
   whereas post details kept the global 1400px width: the site logo and
   profile image consequently jumped when navigating between the two. */
@media (min-width: 1251px) {
    body:has(.public-post-page.public-detail-page) .public-header-inner {
        width: min(
            var(--public-community-layout-max-width),
            calc(100% - (var(--public-layout-gutter) * 2))
        );
        max-width: none;
    }
}

/* Discovery analytics adds 24px above every sponsor section. Home resets
   that margin for the first sponsor; do the same inside experience details
   so the sponsor card starts level with the latest-explorers card. */
@media (min-width: 781px) {
    .public-post-layout > .public-home-rail > .public-home-discovery-section:first-child {
        margin-top: 0 !important;
    }
}


/* R19.17.28 — Account pages: same outer edges as the homepage/header.
   Only the named public account areas are widened; do not change the
   internal checkout grid or the responsive presentation of the site. */
@media (min-width: 1251px) {
    body:has(:is(
        .public-profile-page.public-detail-page,
        .public-profile-edit-page.public-detail-page,
        .private-likes-page,
        .order-page,
        .eco-messages-page,
        .eco-invitations-page,
        .public-settings-page,
        .develop-shell
    )) .public-header-inner,
    .public-profile-page.public-detail-page,
    .public-profile-edit-page.public-detail-page,
    .private-likes-page,
    .order-page,
    .eco-messages-page,
    .eco-invitations-page,
    .public-settings-page,
    .public-home-shell.develop-shell {
        width: min(
            var(--public-community-layout-max-width),
            calc(100% - (var(--public-layout-gutter) * 2))
        );
        max-width: none;
        margin-inline: auto;
    }
}

/* Tablet/mobile: keep the shared responsive outer container rather than the
   old page-specific 820/980/1180px ceilings or extra page-specific gutters. */
@media (max-width: 1250px) {
    .private-likes-page,
    .eco-messages-page,
    .eco-invitations-page {
        width: min(
            var(--public-layout-max-width),
            calc(100% - (var(--public-layout-gutter) * 2))
        );
        max-width: none;
        margin-inline: auto;
    }
}

/* Editing the profile must not remain trapped in an inner 980px wrapper
   after its parent is widened. Do not change its field-column breakpoints. */
.public-profile-edit-page > .public-profile-edit-shell {
    width: 100%;
    max-width: none;
}

/* Develop used an additional 18px horizontal inset on desktop even though
   its parent shell already uses the global gutter. */
@media (min-width: 781px) {
    .public-home-shell.develop-shell {
        padding-inline: 0;
    }
}