/* Subul Real Estate — blog post + policies layer (loaded after pages.css). Owned by lane T4.
   Reference: Post AR/EN.dc.html (article 1240 / 760 head / 1fr 300px body, sticky aside) and
   Policies AR/EN.dc.html (720 intro, 260px 1fr grid, sticky side nav, 760 measure).
   Tokens: --gold2 → --re-accent-text (D9), --gold → --accent, --gold-soft → --accent-soft,
   --card → --surface, --bg2 → --bg-2. Logical properties; EN mirrors through dir/lang. */

:lang(ar) .re-post-page,
:lang(ar) .re-legal {
    font-family: 'IBM Plex Sans Arabic', sans-serif;
}

:lang(en) .re-post-page,
:lang(en) .re-legal {
    font-family: 'IBM Plex Sans', sans-serif;
}

/* ========================================================================== */
/* Blog post                                                                 */
/* ========================================================================== */

.re-post-page {
    color: var(--ink);
}

.re-post-page__wrap {
    padding-block: 64px 0;
}

/* Back link: 13px ink2, gold hairline grows from the start edge on hover (reference [data-ul]). */
.re-post-page__back {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--ink-2);
    font-size: 13px;
    text-decoration: none;
}

.re-post-page__back::after {
    position: absolute;
    inset-inline: 0;
    bottom: -3px;
    height: 1px;
    background: var(--accent);
    content: '';
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .35s cubic-bezier(.2, .7, .2, 1);
}

[dir="ltr"] .re-post-page__back::after {
    transform-origin: left;
}

.re-post-page__back:hover {
    color: var(--re-accent-text);
}

.re-post-page__back:hover::after {
    transform: scaleX(1);
}

/* The arrow points back to the listing: → in RTL, ← in LTR (reference scaleX(calc(-1 * var(--flip)))). */
.re-post-page__back-icon {
    display: block;
    flex: 0 0 auto;
}

[dir="ltr"] .re-post-page__back-icon {
    transform: scaleX(-1);
}

.re-post-page__head {
    max-width: 760px;
    margin-block: 28px 0;
    margin-inline: auto;
}

.re-post-page__meta {
    margin: 0;
    color: var(--re-accent-text);
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.re-post-page__title {
    margin-block: 16px 20px;
}

.re-post-page__lede {
    margin: 0;
    color: var(--ink-2);
    font-size: 19px;
    line-height: 1.9;
}

.re-post-page__cover {
    margin-block: 40px;
    aspect-ratio: 21 / 9;
    max-width: 100%;
    overflow: hidden;
    border-radius: 8px;
    background: var(--bg-2);
}

.re-post-page__cover img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.re-post-page__body {
    display: grid;
    max-width: 1100px;
    margin-inline: auto;
    grid-template-columns: 1fr 300px;
    gap: 56px;
    align-items: start;
}

.re-post-page__prose {
    display: flex;
    flex-direction: column;
    gap: 20px;
    font-size: 17px;
    line-height: 1.9;
}

.re-post-page__prose p,
.re-post-page__prose ul,
.re-post-page__prose ol,
.re-post-page__prose blockquote {
    margin: 0;
}

.re-post-page__prose h2,
.re-post-page__prose h3 {
    margin: 0;
    color: var(--ink);
    font-weight: 500;
    letter-spacing: 0;
}

.re-post-page__prose h2 {
    font-size: 32px;
    line-height: 1.15;
}

.re-post-page__prose h3 {
    font-size: 20px;
    line-height: 1.2;
}

.re-post-page__prose ul,
.re-post-page__prose ol {
    padding-inline-start: 24px;
}

.re-post-page__prose blockquote {
    border-inline-start: 2px solid var(--accent);
    padding-inline-start: 20px;
    color: var(--ink-2);
}

.re-post-page__prose figure {
    margin: 0;
}

.re-post-page__prose img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.re-post-page__prose a {
    color: var(--re-accent-text);
}

/* Author + share row */
.re-post-page__author {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-block-start: 12px;
    border-block-start: 1px solid var(--line);
    padding-block-start: 20px;
    color: var(--ink-2);
    font-size: 14px;
}

.re-post-page__team {
    display: flex;
    align-items: center;
    gap: 10px;
}

.re-post-page__share {
    display: flex;
    height: 38px;
    align-items: center;
    gap: 8px;
    padding-block: 0;
    padding-inline: 14px;
    border: 1px solid var(--line);
    border-radius: 4px;
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    font: inherit;
    font-size: 13px;
    transition: border-color .25s, color .25s;
}

.re-post-page__share:hover {
    border-color: var(--accent);
    color: var(--re-accent-text);
}

.re-post-page__share svg {
    flex: 0 0 auto;
}

/* Sticky aside: key takeaways card + full-width consult button */
.re-post-page__aside {
    position: sticky;
    top: 96px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.re-post-page__points {
    padding-block: 24px;
    padding-inline: 24px;
}

.re-post-page__points-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 0;
    color: var(--ink-2);
    font-size: 14px;
    line-height: 1.7;
    list-style: none;
}

.re-post-page__points-list li {
    display: flex;
    gap: 10px;
}

.re-post-page__points-list svg {
    flex: 0 0 auto;
    margin-block-start: 3px;
    color: var(--re-accent-text);
}

.re-post-page__cta {
    width: 100%;
}

/* Related posts: plain section on --bg, margin 104, gap 28 */
.re-post-page__related {
    margin-block-start: 104px;
}

.re-post-page__grid {
    gap: 28px;
}

.re-post-page :focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* ========================================================================== */
/* Policies (privacy / terms / cookies)                                      */
/* ========================================================================== */

.re-w--re-legal-nav {
    margin-block-start: 80px;
    /* Reference section carries no bottom padding (Policies AR.dc.html); the footer's own 104px top margin spaces it. */
    color: var(--ink);
}

.re-legal__intro {
    max-width: 720px;
}

.re-legal__title {
    margin-block: 0 16px;
}

.re-legal__updated {
    margin: 0;
    color: var(--ink-2);
    font-size: 17px;
    line-height: 1.9;
}

.re-legal__grid {
    display: grid;
    margin-block-start: 48px;
    grid-template-columns: 260px 1fr;
    gap: 48px;
    align-items: start;
}

.re-legal__nav {
    position: sticky;
    top: 96px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 15px;
}

.re-legal__link {
    border-radius: 4px;
    padding-block: 10px;
    padding-inline: 14px;
    color: var(--ink);
    text-decoration: none;
    transition: background .25s, color .25s;
}

.re-legal__link:hover,
.re-legal__link[aria-current="page"] {
    background: var(--accent-soft);
    color: var(--re-accent-text);
}

.re-legal__contact {
    margin-block-start: 20px;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding-block: 16px;
    padding-inline: 16px;
    color: var(--ink-2);
    font-size: 13px;
    line-height: 1.7;
}

.re-legal__contact a {
    color: var(--re-accent-text);
    text-decoration: none;
}

.re-legal__contact a:hover {
    color: var(--accent);
}

.re-legal__content {
    display: flex;
    max-width: 760px;
    flex-direction: column;
    gap: 56px;
    font-size: 16px;
    line-height: 1.9;
}

.re-legal__policy {
    scroll-margin-top: 100px;
}

.re-legal__head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-block-end: 18px;
}

.re-legal__text {
    display: flex;
    flex-direction: column;
    gap: 14px;
    color: var(--ink);
}

.re-legal__text p,
.re-legal__text ul,
.re-legal__text ol {
    margin: 0;
}

.re-legal__text ul,
.re-legal__text ol {
    padding-inline-start: 24px;
}

.re-legal__text a {
    color: var(--re-accent-text);
}

/* ========================================================================== */
/* EN: reference L.lh = 1.7 on running text (headings via .re-h* + en.css)   */
/* ========================================================================== */

:lang(en) .re-post-page__lede,
:lang(en) .re-post-page__prose,
:lang(en) .re-legal__updated,
:lang(en) .re-legal__content {
    line-height: 1.7;
}

:lang(en) .re-post-page__prose h2,
:lang(en) .re-post-page__prose h3 {
    font-family: 'Cormorant Garamond', serif;
}

:lang(en) .re-post-page__prose h2 {
    font-size: 38px;
}

:lang(en) .re-post-page__prose h3 {
    font-size: 24px;
}

/* ========================================================================== */
/* ≤ 900: reference [data-g] → 1 column, [data-side] static, [data-h1] 34px  */
/* ========================================================================== */

@media (max-width: 900px) {
    .re-post-page__body,
    .re-legal__grid {
        grid-template-columns: 1fr;
    }

    .re-post-page__aside,
    .re-legal__nav {
        position: static;
    }
}

@media (max-width: 640px) {
    .re-post-page__author {
        flex-wrap: wrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    .re-post-page__back::after,
    .re-post-page__share,
    .re-legal__link {
        transition: none;
    }
}