/* GrandLiga long-form Guide / Legal Insight article layout — 2026-08-20 */
.gl-article {
    --gl-article-navy: #19374e;
    --gl-article-dark: #12273a;
    --gl-article-teal: #238174;
    --gl-article-teal-dark: #196960;
    --gl-article-muted: #677584;
    --gl-article-line: #d8e0e8;
    --gl-article-soft: #f6f9fb;
    --gl-article-white: #ffffff;
    --gl-article-shadow: 0 10px 30px rgba(18, 39, 58, 0.06);
    position: relative;
    padding-bottom: 18px;
    color: var(--gl-article-dark);
    background: var(--gl-article-soft);
    font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.gl-article * { box-sizing: border-box; }

.gl-article-shell {
    width: min(1200px, calc(100% - 40px));
    margin: 0 auto;
}

/* ---------- Breadcrumbs ---------- */
.gl-article-breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    min-height: 46px;
    padding: 12px 2px 10px;
    color: #718091;
    font-size: 13px;
    line-height: 1.35;
}
.gl-article-breadcrumbs a {
    color: #52677a;
    text-decoration: none;
}
.gl-article-breadcrumbs a:hover { color: var(--gl-article-teal-dark); text-decoration: underline; }
.gl-article-breadcrumbs > span[aria-hidden="true"] { color: #aab5bf; }

/* ---------- Hero ---------- */
.gl-article-hero {
    display: grid;
    grid-template-columns: minmax(0, 52%) minmax(0, 48%);
    min-height: 330px;
    overflow: hidden;
    border: 1px solid #e3e9ee;
    border-radius: 28px;
    background: #fff;
    box-shadow: var(--gl-article-shadow);
}

.gl-article-hero-copy {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 40px 28px 36px 42px;
}

.gl-article-badge {
    align-self: flex-start;
    margin-bottom: 15px;
    padding: 6px 11px;
    border: 1px solid #c9e2de;
    border-radius: 999px;
    background: #edf8f6;
    color: var(--gl-article-teal-dark);
    font-size: 11px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.gl-article .gl-article-hero h1 {
    margin: 0;
    padding: 0;
    color: var(--gl-article-dark);
    font-size: clamp(38px, 3.25vw, 46px);
    line-height: 1.1;
    font-weight: 750;
    letter-spacing: -0.035em;
    text-transform: none;
}

.gl-article-summary {
    max-width: 64ch;
    margin: 17px 0 0;
    color: #344a5f;
    font-size: 17px;
    line-height: 1.58;
    font-weight: 400;
}

.gl-article-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px 22px;
    margin-top: 24px;
    color: #5f7182;
    font-size: 13px;
    line-height: 1.35;
}
.gl-article-meta-item { display: inline-flex; align-items: center; gap: 7px; }
.gl-article-meta svg,
.gl-article-popular-meta svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex: 0 0 auto;
}

.gl-article-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.gl-article-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 30px;
    padding: 5px 11px;
    border: 1px solid #e3e9ee;
    border-radius: 999px;
    background: #f4f7f9;
    color: #4d6174;
    font-size: 12px;
    line-height: 1;
    font-weight: 600;
}
.gl-article-chip img { display: block; width: 22px; height: 16px; object-fit: cover; border-radius: 2px; }

.gl-article-hero-image {
    position: relative;
    min-width: 0;
    min-height: 330px;
    margin: 0;
    background: #eef5f8;
}
.gl-article-hero-image::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0 auto 0 0;
    width: 16%;
    background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,.84) 32%, rgba(255,255,255,0) 100%);
    pointer-events: none;
}
.gl-article-hero-image img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 330px;
    object-fit: cover;
    object-position: center;
}

/* ---------- Main reading area ---------- */
.gl-article-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 315px;
    gap: 22px;
    align-items: start;
    margin-top: 20px;
}

.gl-article-content-card,
.gl-article-popular--desktop {
    border: 1px solid #e2e8ed;
    border-radius: 24px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(18,39,58,.045);
}

.gl-article-content-card {
    min-width: 0;
    padding: 34px 42px 42px;
}

.gl-article-copy {
    color: #263b4d;
    font-size: 18px;
    line-height: 1.7;
    font-weight: 400;
}

.gl-article-copy > * { max-width: 72ch; }
.gl-article-copy > .alignwide,
.gl-article-copy > .alignfull,
.gl-article-copy > .wp-block-table,
.gl-article-copy > table { max-width: 100%; }

.gl-article-copy p { margin: 0 0 20px; }
.gl-article-copy p:last-child { margin-bottom: 0; }
.gl-article-copy h2,
.gl-article-copy h3,
.gl-article-copy h4 {
    color: var(--gl-article-dark);
    text-transform: none;
    letter-spacing: -0.015em;
}
.gl-article-copy h2 {
    margin: 50px 0 16px;
    padding: 0;
    font-size: 29px;
    line-height: 1.25;
    font-weight: 750;
}
.gl-article-copy h3 {
    margin: 36px 0 13px;
    padding: 0;
    font-size: 22px;
    line-height: 1.3;
    font-weight: 700;
}
.gl-article-copy h4 {
    margin: 28px 0 11px;
    padding: 0;
    font-size: 19px;
    line-height: 1.35;
    font-weight: 700;
}
.gl-article-copy h2:first-child,
.gl-article-copy h3:first-child { margin-top: 0; }
.gl-article-copy ul,
.gl-article-copy ol { margin: 0 0 22px; padding-left: 1.35em; }
.gl-article-copy li { margin: 0 0 8px; }
.gl-article-copy a { color: var(--gl-article-teal-dark); text-decoration: underline; text-underline-offset: 2px; }
.gl-article-copy a:hover { text-decoration-thickness: 2px; }
.gl-article-copy strong,
.gl-article-copy b { color: #1c3448; font-weight: 700; }
.gl-article-copy blockquote {
    margin: 28px 0;
    padding: 20px 24px;
    border-left: 4px solid var(--gl-article-teal-dark);
    border-radius: 0 14px 14px 0;
    background: #f7fbfb;
    color: #344a5f;
    font-weight: 500;
}
.gl-article-copy img { max-width: 100%; height: auto; }
.gl-article-copy figure { max-width: 100%; }
.gl-article-copy table {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
    line-height: 1.5;
}
.gl-article-copy th,
.gl-article-copy td { padding: 12px 14px; border: 1px solid #dce4ea; text-align: left; vertical-align: top; }
.gl-article-copy th { background: #f3f7f9; color: var(--gl-article-dark); font-weight: 700; }

.gl-article-important {
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 12px;
    max-width: 72ch;
    margin: 24px 0 30px;
    padding: 17px 18px;
    border: 1px solid #d6e7e4;
    border-radius: 14px;
    background: #f4faf9;
    color: #3d5366;
    font-size: 14px;
    line-height: 1.55;
}
.gl-article-important strong { color: var(--gl-article-dark); }
.gl-article-important-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-top: 1px;
    border-radius: 50%;
    background: var(--gl-article-teal-dark);
    color: #fff;
    font-size: 14px;
    line-height: 1;
    font-weight: 800;
    font-family: Georgia, serif;
}

.gl-article-read-more { display: none; }

/* ---------- Popular sidebar ---------- */
.gl-article-popular--desktop { padding: 20px 16px 16px; overflow: hidden; }
.gl-article-popular h2 {
    margin: 0;
    padding: 0;
    color: var(--gl-article-dark);
    font-size: 18px;
    line-height: 1.25;
    font-weight: 750;
    text-transform: none;
}
.gl-article-popular-list { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.gl-article-popular-card {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 11px;
    min-width: 0;
    padding: 13px 12px;
    border: 1px solid #e5ebef;
    border-radius: 14px;
    background: #fff;
    color: var(--gl-article-dark);
    text-decoration: none;
    box-shadow: 0 4px 12px rgba(18,39,58,.035);
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.gl-article-popular-card[hidden] { display: none !important; }
.gl-article-popular-card:hover {
    border-color: #c9dcd8;
    box-shadow: 0 7px 18px rgba(18,39,58,.07);
    transform: translateY(-1px);
}
.gl-article-popular-flag { display: flex; align-items: flex-start; justify-content: center; padding-top: 2px; }
.gl-article-popular-flag img { display: block; width: 30px; height: 22px; border-radius: 3px; object-fit: cover; }
.gl-article-popular-dot { display: block; width: 10px; height: 10px; margin-top: 6px; border-radius: 50%; background: var(--gl-article-teal); }
.gl-article-popular-copy { min-width: 0; }
.gl-article-popular-copy strong {
    display: block;
    color: #1d3549;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 700;
    text-transform: none;
}
.gl-article-popular-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 7px 12px;
    margin-top: 8px;
    color: #738191;
    font-size: 11px;
    line-height: 1.25;
}
.gl-article-popular-meta > span { display: inline-flex; align-items: center; gap: 4px; }
.gl-article-popular-meta svg { width: 13px; height: 13px; }
.gl-article-popular--mobile { display: none; }

/* ---------- Reviews: same component as homepage ---------- */
.gl-article .gl-article-reviews.reviews {
    margin: 58px 0 0;
    padding: 0;
    background: transparent;
}
.gl-article .gl-article-reviews.reviews > .wrapper {
    max-width: none;
    padding: 0;
}
.gl-article .gl-article-reviews.reviews h2.title {
    color: var(--gl-article-navy);
}

/* ---------- Homepage Upload Case component ---------- */
.gl-article .gl-article-cta-section.gl-home-about {
    margin: 34px 0 0;
    padding: 0;
    background: transparent;
}
.gl-article .gl-article-cta-section > .wrapper { max-width: none; padding: 0; }
.gl-article .gl-article-case-cta.block_form {
    max-width: none;
    width: 100%;
    height: auto;
    min-height: 154px;
    margin: 0;
    padding: 30px 36px 30px 44px;
}

/* ---------- Legal Insights end CTA ---------- */
.gl-article-insights-cta {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 28px;
    align-items: center;
    margin-top: 36px;
    padding: 30px 34px;
    border: 1px solid #cfe1de;
    border-radius: 22px;
    background: #f7fcfb;
    box-shadow: 0 8px 22px rgba(18,39,58,.04);
}
.gl-article .gl-article-insights-cta h2 {
    margin: 0;
    padding: 0;
    color: var(--gl-article-dark);
    font-size: 27px;
    line-height: 1.2;
    font-weight: 750;
    text-transform: none;
}
.gl-article-insights-cta p { margin: 9px 0 0; color: var(--gl-article-muted); font-size: 15px; line-height: 1.55; }
.gl-article-insights-cta > a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 52px;
    padding: 13px 24px;
    border-radius: 999px;
    background: var(--gl-article-teal-dark);
    color: #fff;
    font-size: 13px;
    line-height: 1.2;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}
.gl-article-insights-cta > a:hover { background: #135b53; }

.gl-article-all-guides {
    display: inline-flex;
    margin-top: 14px;
    color: var(--gl-article-teal-dark);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
}
.gl-article-all-guides:hover { text-decoration: underline; }

@media (max-width: 1100px) {
    .gl-article-shell { width: min(1040px, calc(100% - 28px)); }
    .gl-article-hero { grid-template-columns: minmax(0, 1fr) minmax(350px, .78fr); }
    .gl-article-main-grid { grid-template-columns: minmax(0, 1fr) 290px; gap: 18px; }
    .gl-article-content-card { padding: 30px 32px 38px; }
}

@media (max-width: 900px) {
    .gl-article-hero { grid-template-columns: minmax(0, 1fr) 42%; }
    .gl-article-hero-copy { padding-left: 30px; }
    .gl-article-main-grid { grid-template-columns: minmax(0, 1fr) 270px; }
    .gl-article-popular-card { grid-template-columns: 30px minmax(0,1fr); padding: 11px 9px; }
    .gl-article-popular-flag img { width: 28px; height: 20px; }
}

@media (max-width: 767px) {
    .gl-article {
        padding-top: 0;
        padding-bottom: 46px;
        background: #fff;
    }
    .gl-article-shell { width: calc(100% - 24px); }
    .gl-article-breadcrumbs {
        min-height: 38px;
        padding: 10px 2px 8px;
        gap: 5px;
        overflow: hidden;
        flex-wrap: nowrap;
        white-space: nowrap;
        font-size: 10px;
    }
    .gl-article-breadcrumbs > * { flex: 0 0 auto; }
    .gl-article-breadcrumbs > *:last-child { overflow: hidden; text-overflow: ellipsis; }

    .gl-article-hero {
        display: flex;
        flex-direction: column;
        min-height: 0;
        border-radius: 20px;
        box-shadow: 0 7px 20px rgba(18,39,58,.055);
    }
    .gl-article-hero-copy { padding: 24px 17px 17px; }
    .gl-article-badge { margin-bottom: 11px; padding: 5px 8px; font-size: 9px; }
    .gl-article .gl-article-hero h1 {
        font-size: 30px;
        line-height: 1.13;
        letter-spacing: -0.025em;
    }
    .gl-article-summary {
        display: none;
    }
    .gl-article-meta {
        gap: 9px 13px;
        margin-top: 16px;
        font-size: 10.5px;
    }
    .gl-article-meta svg { width: 14px; height: 14px; }
    .gl-article-chips { margin-top: 13px; gap: 6px; }
    .gl-article-chip { min-height: 26px; padding: 4px 9px; font-size: 10px; }
    .gl-article-chip img { width: 19px; height: 14px; }
    .gl-article-hero-image {
        order: 2;
        min-height: 0;
        margin: 0 14px 14px;
        overflow: hidden;
        border-radius: 14px;
        aspect-ratio: 16 / 9;
    }
    .gl-article-hero-image::before { display: none; }
    .gl-article-hero-image img { min-height: 0; height: 100%; object-fit: cover; }

    .gl-article-main-grid { display: block; margin-top: 14px; }
    .gl-article-content-card {
        padding: 0;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }
    .gl-article-copy {
        position: relative;
        max-height: 510px;
        overflow: hidden;
        padding: 0 3px;
        font-size: 15px;
        line-height: 1.62;
        transition: max-height .28s ease;
    }
    .gl-article-copy::after {
        content: "";
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        height: 92px;
        background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 84%);
        pointer-events: none;
    }
    .gl-article-content-card.is-expanded .gl-article-copy { max-height: none; overflow: visible; }
    .gl-article-content-card.is-expanded .gl-article-copy::after { display: none; }
    .gl-article-copy p { margin-bottom: 18px; }
    .gl-article-copy h2 { margin-top: 40px; font-size: 24px; }
    .gl-article-copy h3 { margin-top: 31px; font-size: 20px; }
    .gl-article-copy h4 { font-size: 18px; }
    .gl-article-copy table { min-width: 620px; font-size: 15px; }
    .gl-article-copy .wp-block-table,
    .gl-article-copy figure.wp-block-table { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .gl-article-important {
        grid-template-columns: 24px 1fr;
        gap: 10px;
        margin: 20px 0 24px;
        padding: 14px;
        font-size: 13px;
    }
    .gl-article-important-icon { width: 22px; height: 22px; font-size: 13px; }
    .gl-article-read-more {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin: 8px 0 0 2px;
        padding: 8px 0;
        border: 0;
        background: transparent;
        color: var(--gl-article-teal-dark);
        font: inherit;
        font-size: 13px;
        line-height: 1.2;
        font-weight: 700;
        cursor: pointer;
    }
    .gl-article-content-card.is-expanded .gl-article-read-more > span:last-child { transform: rotate(180deg); }

    .gl-article-popular--desktop { display: none; }
    .gl-article-popular--mobile {
        display: block;
        margin-top: 28px;
        padding: 0 2px;
    }
    .gl-article-popular--mobile h2 { font-size: 18px; }
    .gl-article-popular--mobile .gl-article-popular-list { gap: 8px; margin-top: 12px; }
    .gl-article-popular--mobile .gl-article-popular-card {
        grid-template-columns: 32px minmax(0,1fr);
        padding: 11px 10px;
        border-radius: 12px;
    }
    .gl-article-popular-copy strong { font-size: 13px; }
    .gl-article-popular-meta { margin-top: 6px; font-size: 10px; }

    .gl-article .gl-article-reviews.reviews {
        margin-top: 42px;
        margin-bottom: 0;
    }
    .gl-article .gl-article-reviews.reviews > .wrapper { padding: 0; }
    .gl-article .gl-article-reviews.reviews h2.title { padding-bottom: 20px; }

    .gl-article .gl-article-cta-section.gl-home-about {
        margin-top: 30px;
        padding: 0;
    }
    .gl-article .gl-article-case-cta.block_form {
        min-height: 0;
        padding: 22px 17px;
        border-radius: 18px;
    }

    .gl-article-insights-cta {
        grid-template-columns: 1fr;
        gap: 17px;
        margin-top: 32px;
        padding: 23px 18px;
        border-radius: 18px;
    }
    .gl-article .gl-article-insights-cta h2 { font-size: 22px; }
    .gl-article-insights-cta p { font-size: 14px; }
    .gl-article-insights-cta > a { width: 100%; min-height: 50px; }
}

@media (max-width: 479px) {
    .gl-article-shell { width: calc(100% - 20px); }
    .gl-article .gl-article-hero h1 { font-size: 28px; }
    .gl-article-hero-copy { padding: 22px 14px 15px; }
    .gl-article-meta { gap: 8px 11px; }
    .gl-article-copy { font-size: 15px; line-height: 1.62; }
}

/* ---------- Stage refinements after first live QA — 2026-08-20b ---------- */

/* Use the actual fixed-header height instead of stacking the legacy main.site
   padding with an additional article offset. JS updates the custom property after
   the header has rendered; the fallback keeps the first paint sensible. */
.gl-article {
    --gl-article-header-offset: 120px;
    padding-top: var(--gl-article-header-offset);
}
.gl-article-shell {
    padding-top: 0;
}

/* Keep the page surface continuous through the footer contacts section. */
body.grandliga-longform-article,
body.grandliga-longform-article #wrapper,
body.grandliga-longform-article section#link-contacts.gl-contacts {
    background: #f6f9fb;
}
body.grandliga-longform-article section#link-contacts.gl-contacts {
    margin-top: 0 !important;
    padding-top: 14px !important;
}

/* Hero must grow naturally for long country/jurisdiction titles. */
.gl-article-hero {
    height: auto;
    min-height: 320px;
    align-items: stretch;
}
.gl-article .gl-article-hero h1 {
    max-width: 100%;
    font-size: clamp(35px, 2.85vw, 42px);
    line-height: 1.10;
    text-wrap: balance;
    overflow-wrap: anywhere;
}
.gl-article .gl-article-hero--title-long h1 {
    font-size: clamp(33px, 2.55vw, 39px);
}
.gl-article .gl-article-hero--title-xlong h1 {
    font-size: clamp(31px, 2.3vw, 36px);
    line-height: 1.12;
}
.gl-article-hero-copy {
    justify-content: center;
    padding-top: 36px;
    padding-bottom: 34px;
}
.gl-article-hero-image {
    min-height: 320px;
    align-self: stretch;
}
.gl-article-hero-image::before {
    width: 30%;
    background: linear-gradient(90deg,
        #fff 0%,
        rgba(255,255,255,.98) 12%,
        rgba(255,255,255,.90) 28%,
        rgba(255,255,255,.62) 50%,
        rgba(255,255,255,.28) 72%,
        rgba(255,255,255,0) 100%);
}
.gl-article-hero-image img {
    min-height: 320px;
}

/* Country flag fallback when a specific SVG is not present in an older stage theme. */
.gl-article-flag-emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    font-size: 18px;
    line-height: 1;
}
.gl-article-popular-flag .gl-article-flag-emoji {
    min-width: 30px;
    font-size: 21px;
}

/* Closing legal-information notice: full reading-column width and no unused gap. */
.gl-article-important {
    width: 100%;
    max-width: 100% !important;
    margin: 34px 0 0;
}

/* Prevent an uninitialised review image/slide from flashing at full size during reload. */
.gl-article-reviews .reviews-slider-container .swiper:not(.swiper-initialized) {
    visibility: hidden;
    opacity: 0;
}
.gl-article-reviews .reviews-slider-container .swiper.swiper-initialized {
    visibility: visible;
    opacity: 1;
    transition: opacity .15s ease;
}

@media (max-width: 1100px) {
    .gl-article-hero { grid-template-columns: minmax(0, 55%) minmax(0, 45%); }
    .gl-article .gl-article-hero h1 { font-size: clamp(33px, 3.5vw, 40px); }
    .gl-article .gl-article-hero--title-long h1 { font-size: clamp(31px, 3.25vw, 37px); }
    .gl-article .gl-article-hero--title-xlong h1 { font-size: clamp(29px, 3vw, 34px); }
}

@media (max-width: 767px) {
    .gl-article {
        --gl-article-header-offset: 205px;
        padding-bottom: 10px;
        background: #f6f9fb;
    }
    .gl-article-shell {
        width: calc(100% - 24px);
        padding-top: 0;
    }
    body.grandliga-longform-article section#link-contacts.gl-contacts {
        margin-top: 0 !important;
        padding-top: 8px !important;
    }

    .gl-article-hero {
        min-height: 0;
    }
    .gl-article .gl-article-hero h1,
    .gl-article .gl-article-hero--title-long h1 {
        font-size: 28px;
        line-height: 1.13;
    }
    .gl-article .gl-article-hero--title-xlong h1 {
        font-size: 26px;
        line-height: 1.15;
    }

    /* On phones show the complete source image, never crop it and never expose
       the figure background as a grey strip at the bottom. */
    .gl-article-hero-image {
        min-height: 0;
        aspect-ratio: auto;
        background: #fff;
        line-height: 0;
    }
    .gl-article-hero-image img {
        display: block;
        width: 100%;
        height: auto !important;
        min-height: 0;
        max-height: none;
        object-fit: contain;
        object-position: center;
    }

    .gl-article-important {
        width: 100%;
        max-width: none !important;
        margin: 28px 0 0;
    }

    .gl-article-read-more {
        margin-top: 10px;
        font-size: 15.5px;
        line-height: 1.25;
        gap: 8px;
    }
    .gl-article-all-guides {
        margin-top: 12px;
        padding: 8px 0;
        font-size: 15.5px;
        line-height: 1.25;
    }
}

@media (max-width: 479px) {
    .gl-article-shell {
        width: calc(100% - 20px);
        padding-top: 0;
    }
    .gl-article .gl-article-hero h1,
    .gl-article .gl-article-hero--title-long h1 { font-size: 28px; }
    .gl-article .gl-article-hero--title-xlong h1 { font-size: 25px; }
}


/* ---------- Stage refinements v3 — 2026-08-20c ---------- */
@media (min-width: 1111px) {
    .gl-article-hero { grid-template-columns: minmax(0, 52%) minmax(0, 48%); }
}
@media (min-width: 768px) {
    .gl-article-hero-image img { object-position: center center; }
}


/* ---------- Mobile header-gap correction — 2026-08-20c ----------
   JS computes the exact remaining distance below the live header. Start from
   zero on mobile so the old 120px fallback can never be counted a second time. */
@media (max-width: 767px) {
    .gl-article {
        --gl-article-header-offset: 0px;
        padding-top: var(--gl-article-header-offset);
    }
}

/* ---------- Stage refinements v6 — compact mobile hero top inset ---------- */
.gl-article-geo-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    font-size: 16px;
    line-height: 1;
}

@media (max-width: 767px) {
    /* Keep the Guide / Legal Insight badge close to the top edge of the hero card. */
    .gl-article-hero-copy {
        padding-top: 10px !important;
    }
    .gl-article-badge {
        margin-bottom: 10px;
    }
    .gl-article-geo-icon {
        font-size: 15px;
    }
}

@media (max-width: 479px) {
    .gl-article-hero-copy {
        padding-top: 9px !important;
    }
}

/* ==========================================================================
   GrandLiga Guide / Legal Insight — sidebar layout safeguard v30
   2026-08-22

   The PHP template still renders the Popular block as the second child of
   .gl-article-main-grid. These explicit desktop rules prevent legacy/later
   styles from collapsing that two-column reading grid and moving Popular
   Guides / Popular Legal Insights below the article.
   ========================================================================== */

@media screen and (min-width: 768px) {
    .gl-article .gl-article-main-grid {
        display: grid !important;
        align-items: start !important;
        grid-auto-flow: row !important;
    }

    .gl-article .gl-article-main-grid > .gl-article-content-card {
        grid-column: 1 !important;
        grid-row: 1 !important;
        min-width: 0 !important;
    }

    .gl-article .gl-article-main-grid > .gl-article-popular--desktop {
        display: block !important;
        grid-column: 2 !important;
        grid-row: 1 !important;
        align-self: start !important;
        width: auto !important;
        max-width: none !important;
        margin: 0 !important;
    }

    .gl-article .gl-article-popular--mobile {
        display: none !important;
    }
}

@media screen and (min-width: 1101px) {
    .gl-article .gl-article-main-grid {
        grid-template-columns: minmax(0, 1fr) 315px !important;
        gap: 22px !important;
    }
}

@media screen and (min-width: 901px) and (max-width: 1100px) {
    .gl-article .gl-article-main-grid {
        grid-template-columns: minmax(0, 1fr) 290px !important;
        gap: 18px !important;
    }
}

@media screen and (min-width: 768px) and (max-width: 900px) {
    .gl-article .gl-article-main-grid {
        grid-template-columns: minmax(0, 1fr) 270px !important;
        gap: 18px !important;
    }
}

/* Preserve the intended mobile architecture. */
@media screen and (max-width: 767px) {
    .gl-article .gl-article-main-grid {
        display: block !important;
    }

    .gl-article .gl-article-popular--desktop {
        display: none !important;
    }

    .gl-article.gl-article--guide .gl-article-popular--mobile {
        display: block !important;
    }
}

/* ==========================================================================
   GrandLiga Guide / Legal Insight — approved embedded Popular layout v31
   2026-08-22

   Restores the previously approved behavior:
   - Popular is inside the white article card, not a separate right-hand card;
   - maximum 4 Popular items are rendered by PHP;
   - text flows beside Popular only for the panel's own height;
   - after the panel ends, article text returns to the full card width;
   - Legal Insight has no Popular block on mobile;
   - Guide mobile keeps its existing compact Popular Guides block.
   ========================================================================== */

@media screen and (min-width: 768px) {
    .gl-article .gl-article-main-grid {
        display: block !important;
        width: 100% !important;
        margin-top: 20px !important;
    }

    .gl-article .gl-article-main-grid > .gl-article-content-card {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        min-width: 0 !important;
    }

    .gl-article .gl-article-content-card::after {
        content: "";
        display: block;
        clear: both;
    }

    .gl-article
    .gl-article-content-card
    > .gl-article-popular--desktop.gl-article-popular--embedded {
        display: block !important;
        float: right !important;
        width: 292px !important;
        max-width: 34% !important;
        margin: 0 0 24px 24px !important;
        padding: 20px 16px 16px !important;
        overflow: visible !important;
        border: 1px solid #e2e8ed !important;
        border-radius: 18px !important;
        background: #fff !important;
        box-shadow: 0 6px 18px rgba(18,39,58,.045) !important;
    }

    .gl-article .gl-article-copy {
        width: 100% !important;
        max-width: none !important;
    }

    .gl-article .gl-article-copy > * {
        max-width: none !important;
    }

    /*
     * The Important notice closes the text flow after the embedded rail,
     * so the final disclaimer uses the full article width.
     */
    .gl-article .gl-article-important {
        clear: both !important;
    }

    .gl-article .gl-article-popular--mobile {
        display: none !important;
    }
}

@media screen and (min-width: 768px) and (max-width: 980px) {
    .gl-article
    .gl-article-content-card
    > .gl-article-popular--desktop.gl-article-popular--embedded {
        width: 270px !important;
        max-width: 38% !important;
        margin-left: 20px !important;
    }
}

/* Mobile architecture remains intentional and separate. */
@media screen and (max-width: 767px) {
    .gl-article .gl-article-main-grid {
        display: block !important;
    }

    .gl-article .gl-article-popular--desktop,
    .gl-article .gl-article-popular--desktop.gl-article-popular--embedded {
        display: none !important;
        float: none !important;
    }

    .gl-article.gl-article--legal .gl-article-popular--mobile {
        display: none !important;
    }

    .gl-article.gl-article--guide .gl-article-popular--mobile {
        display: block !important;
    }
}

/* ==========================================================================
   GrandLiga article width alignment v31.2
   Match the actual desktop Contacts .glc-shell width.
   Contacts uses 1420px from 1024px upward.
   ========================================================================== */

@media screen and (min-width: 768px) and (max-width: 1023px) {
    .gl-article .gl-article-shell {
        width: min(1290px, calc(100% - 30px)) !important;
        max-width: none !important;
    }
}

@media screen and (min-width: 1024px) {
    .gl-article .gl-article-shell {
        width: min(1420px, calc(100% - 40px)) !important;
        max-width: 1420px !important;
    }
}

/* ==========================================================================
   GrandLiga Guide — Related Legal Insights v32
   Exact-country contextual cluster, placed after article/Important and before
   client reviews.
   ========================================================================== */

.gl-article-related {
    box-sizing: border-box;
    width: 100%;
    margin: 34px 0 40px;
}

.gl-article-related *,
.gl-article-related *::before,
.gl-article-related *::after {
    box-sizing: border-box;
}

.gl-article-related-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    margin-bottom: 20px;
}

.gl-article .gl-article-related-head h2 {
    margin: 0 !important;
    color: #19374e;
    font-size: 30px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: none;
}

.gl-article-related-arrows {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto;
}

.gl-article-related-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid #d8e0e8;
    border-radius: 50%;
    background: #fff;
    color: #19374e;
    font: inherit;
    font-size: 27px;
    line-height: 1;
    cursor: pointer;
    transition: border-color .2s ease, color .2s ease, transform .2s ease;
}

.gl-article-related-arrow:hover {
    color: #238174;
    border-color: rgba(35,129,116,.5);
    transform: translateY(-1px);
}

.gl-article-related-arrow:disabled {
    opacity: .32;
    cursor: default;
    transform: none;
}

.gl-article-related-viewport {
    width: 100%;
    overflow: hidden;
    padding: 2px 2px 8px;
    margin: -2px -2px -8px;
}

.gl-article-related-track {
    display: flex;
    align-items: stretch;
    gap: 20px;
    transition: transform .35s ease;
    will-change: transform;
}

.gl-article-related-card {
    flex: 0 0 calc(
        (100% - (var(--gl-related-visible, 4) - 1) * 20px)
        / var(--gl-related-visible, 4)
    );
    min-width: 0;
    overflow: hidden;
    border: 1px solid #d8e0e8;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 7px 18px rgba(18,39,58,.055);
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.gl-article-related-card:hover {
    transform: translateY(-2px);
    border-color: rgba(35,129,116,.45);
    box-shadow: 0 13px 28px rgba(20,43,63,.10);
}

.gl-article-related-link {
    display: flex;
    flex-direction: column;
    min-height: 210px;
    height: 100%;
    padding: 19px;
    color: inherit;
    text-decoration: none !important;
}

.gl-article-related-link:hover {
    color: inherit;
}

.gl-article-related-geo {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    color: #238174;
    font-size: 12px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .035em;
    text-transform: uppercase;
}

.gl-article-related-geo .gl-insight-flag {
    display: inline-flex;
    flex: 0 0 auto;
}

.gl-article-related-geo .gl-insight-flag img {
    display: block;
    width: 24px;
    height: 18px;
    object-fit: contain;
    border-radius: 2px;
}

.gl-article-related-geo > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gl-article .gl-article-related-card h3 {
    margin: 16px 0 0 !important;
    color: #19374e;
    font-size: 18px;
    line-height: 1.34;
    font-weight: 800;
    text-transform: none;
}

.gl-article-related-meta {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: auto;
    padding-top: 18px;
    color: #677584;
    font-size: 12px;
    line-height: 1.2;
}

.gl-article-related-views {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
    color: #19374e;
    font-weight: 700;
}

.gl-article-related-views svg {
    width: 18px;
    height: 12px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
}

.gl-article-related-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 14px;
    margin-top: 17px;
}

.gl-article-related-dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #d5e0e6;
    cursor: pointer;
}

.gl-article-related-dot.is-active {
    background: #238174;
    transform: scale(1.15);
}

@media screen and (min-width: 768px) {
    .gl-article-related:not(.is-carousel) .gl-article-related-dots {
        display: none;
    }
}

@media screen and (max-width: 767px) {
    .gl-article-related {
        margin: 28px 0 34px;
    }

    .gl-article-related-head {
        margin-bottom: 15px;
    }

    .gl-article .gl-article-related-head h2 {
        font-size: 22px;
        line-height: 1.22;
    }

    .gl-article-related-arrows {
        display: none;
    }

    .gl-article-related-track {
        gap: 12px;
    }

    .gl-article-related-card {
        flex-basis: calc((100% - 12px) / 2);
    }

    .gl-article-related.gl-related-count-1 .gl-article-related-card {
        flex-basis: 100%;
    }

    .gl-article-related-link {
        min-height: 206px;
        padding: 13px;
    }

    .gl-article-related-geo {
        gap: 6px;
        font-size: 11px;
    }

    .gl-article-related-geo .gl-insight-flag img {
        width: 22px;
        height: 16.5px;
    }

    .gl-article .gl-article-related-card h3 {
        margin-top: 12px !important;
        font-size: 13px;
        line-height: 1.32;
    }

    .gl-article-related-meta {
        display: grid;
        grid-template-columns: minmax(0,1fr) minmax(0,1fr);
        position: relative;
        column-gap: 18px;
        padding-top: 13px;
        font-size: 10.5px;
    }

    .gl-article-related-sep {
        display: none;
    }

    .gl-article-related-meta > span:nth-child(3) {
        position: relative;
        padding-left: 11px;
    }

    .gl-article-related-meta > span:nth-child(3)::before {
        content: "";
        position: absolute;
        left: 0;
        top: 50%;
        width: 4px;
        height: 4px;
        border-radius: 50%;
        background: #677584;
        transform: translate(-50%, -50%);
    }

    .gl-article-related-views {
        display: none;
    }
}

/* ==========================================================================
   GrandLiga Related Legal Insights — visual + typography polish v32.1
   ========================================================================== */

.gl-article-related {
    font-family: Inter, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

html[lang^="zh"] .gl-article-related,
html[lang^="cn"] .gl-article-related {
    font-family:
        Inter,
        "PingFang SC",
        "Microsoft YaHei",
        "Noto Sans SC",
        "Source Han Sans SC",
        sans-serif !important;
}

/*
 * Neutral resting state:
 * no grey rectangular halo behind the card.
 */
.gl-article-related-card {
    box-shadow: none !important;
}

/*
 * A non-carousel group (1–4 cards) does not need horizontal clipping.
 * Let the hover shadow render naturally around the rounded card.
 */
.gl-article-related:not(.is-carousel) .gl-article-related-viewport {
    overflow: visible !important;
    padding: 0 0 16px !important;
    margin: 0 0 -16px !important;
    border-radius: 22px;
}

/*
 * Carousel mode still needs horizontal clipping, but receives vertical room
 * for the hover shadow so the bottom edge does not become a sharp rectangle.
 */
.gl-article-related.is-carousel .gl-article-related-viewport {
    padding-top: 7px !important;
    padding-bottom: 18px !important;
    margin-top: -7px !important;
    margin-bottom: -18px !important;
    border-radius: 22px;
}

@media (hover:hover) and (pointer:fine) {
    .gl-article-related-card:hover {
        border-color: rgba(35,129,116,.48) !important;
        box-shadow:
            0 12px 24px -9px rgba(20,43,63,.22),
            0 3px 9px -5px rgba(20,43,63,.14) !important;
    }
}

/* Do not leave a sticky desktop-style shadow on touch devices. */
@media (hover:none) {
    .gl-article-related-card:hover {
        transform: none !important;
        box-shadow: none !important;
    }
}

/* ==========================================================================
   GrandLiga article — Important notice typography restore v32.2
   Restores the more readable notice size after recent architecture changes.
   ========================================================================== */

.gl-article .gl-article-important {
    font-size: 15.5px !important;
    line-height: 1.58 !important;
    padding: 18px 20px !important;
}

.gl-article .gl-article-important-icon {
    width: 26px !important;
    height: 26px !important;
    font-size: 15px !important;
}

@media screen and (min-width: 768px) and (max-width: 1100px) {
    .gl-article .gl-article-important {
        font-size: 15px !important;
        line-height: 1.58 !important;
    }
}

@media screen and (max-width: 767px) {
    .gl-article .gl-article-important {
        font-size: 14.5px !important;
        line-height: 1.55 !important;
        padding: 15px 16px !important;
    }

    .gl-article .gl-article-important-icon {
        width: 24px !important;
        height: 24px !important;
        font-size: 14px !important;
    }
}


/* ==========================================================================
   Mobile ordered-list marker clearance — 2026-08-27
   Only increases the left inset for numbered lists so 10., 11., etc.
   remain inside the article content area. Typography is unchanged.
   ========================================================================== */
@media (max-width: 767px) {
    .gl-article-copy ol {
        padding-left: 2.35em;
    }
}