/* QFFD Annual Report 2024 — Responsive Styles */
@media screen and (min-width: 1600px) {
  .bars-wrapper {
    height: 600px !important;
  }
}

@media (max-width: 1300px) {
  .core_max {
    max-width: 70%;
  }

  .hero-title {
    font-size: 44px;
  }

  .hero-subtitle {
    font-size: 34px;
  }

  .glass-card {
    padding: 18px;
  }

  .container {
    max-width: calc(100% - 401px);
    margin-left: 100px;
    max-height: 100svh;
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .container::-webkit-scrollbar {
    display: none;
  }

  .chairman-container {
    margin-left: 300px !important;
  }

  img.chairman {
    width: 400px;
  }

  .director {
    height: 555px;
  }

  .disbursements-title,
  .medium-title {
    font-size: 28px;
  }

  .red_text {
    font-size: 18px;
  }

  .flex_row h4 {
    font-size: 18px;
  }

  .disbursements-total-value,
  .flex_row h3 {
    font-size: 26px;
  }

  .country_button a,
  .country_button h6 {
    font-size: 14px;
  }

  .country_name {
    font-size: 22px;
  }

  .mena-card-title {
    font-size: 20px;
  }

  .mena-sector-detailed {
    padding: 10px;
  }

  .disbursements-side-card {
    gap: 12px;
  }

  .graph-container {
    padding: 0 28px 50px;
    margin-top: 20px;
  }

  .centered-container {
    width: unset;
    margin-left: 100px;
    margin-right: 290px;
  }

  .core_card {
    padding: 16px 10px;
  }

  .core_card img {
    margin-bottom: 0;
  }

  .core_card h2 {
    font-size: 18px;
  }

  .core_card p {
    font-size: 14px;
    line-height: 1.4;
  }

  .cat_card_new h3 {
    font-size: 16px;
    margin-bottom: 0;
  }

  .category h4 {
    padding: 12px;
    font-size: 16px;
  }

  .mena-card-icon svg {
    width: 80px;
    height: 80px;
  }

  .agreements-container {
    margin-bottom: 50px;
  }
}

@media screen and (max-width: 768px) {

  /* Reset fixed scaling */
  html,
  body {
    overflow: auto !important;
    height: auto !important;
  }

  .page-scaler {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    transform: none !important;
    left: 0 !important;
    top: 0 !important;
  }

  .page-wrapper {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 100vh;
  }

  /* Header adjustments */
  .header-toolbar {
    height: 70px;
    background: rgba(0, 0, 0, 0.8) !important;
  }

  .header-logo {
    left: 20px !important;
  }

  .header-logo img {
    width: 120px !important;
  }

  /* Sidenav as Mobile Menu */
  .sidenav {
    position: fixed !important;
    top: 0;
    right: -100% !important;
    /* Start off-screen */
    width: 85% !important;
    height: 100vh !important;
    height: 100dvh !important;
    background: rgba(0, 0, 0, 0.95) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: right 0.4s ease-in-out !important;
    z-index: 1000 !important;
  }

  .sidenav:not(.collapsed) {
    right: 0 !important;
  }

  .sidenav.collapsed {
    right: -100% !important;
    width: 85% !important;
    /* Keep width same for animation consistency */
  }

  .sidenav-hamburger {
    position: absolute !important;
    top: 0;
    right: 0;
    z-index: 1001 !important;
    height: 70px !important;
  }

  .sidenav-menu {
    padding-top: 80px !important;
  }

  .menu-item {
    width: 100% !important;
  }

  .dropdown-item {
    width: 100% !important;
  }

  /* Container & Content */
  .container {
    margin-left: 0 !important;
    padding: 90px 20px 40px !important;
    width: 100% !important;
    max-width: 100% !important;
    right: 0 !important;
    bottom: unset !important;
  }

  .large-title {
    font-size: 32px !important;
  }

  .medium-title {
    font-size: 28px !important;
    text-align: center;
  }

  .red_text {
    text-align: center;
  }

  /* Specific Layouts */
  .vision-mission-cards>div {
    width: 100% !important;
  }

  .category_grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 15px !important;
  }

  /* Flagship (3 items): 2 columns, last odd item spans full width centered */
  .flagship_container .category_grid> :last-child:nth-child(odd) {
    grid-column: 1 / span 2;
    justify-self: center;
    width: 50%;
  }

  .container.flagship_container {
    height: fit-content;
  }

  .partner_grid {
    grid-template-columns: repeat(2, 1fr) !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .agreements-container {
    flex-direction: column !important;
    align-items: center !important;
    gap: 20px !important;
    padding: 20px !important;
  }

  .table-side {
    width: 100% !important;
  }

  .details-grid {
    grid-template-columns: 1fr !important;
  }

  .disbursements-header {
    flex-direction: column !important;
    gap: 15px;
  }

  .disbursements-total-wrap {
    text-align: center !important;
    width: 100%;
  }

  .disbursements-card {
    padding: 20px !important;
  }

  .country-row,
  .country-total {
    max-width: 100% !important;
  }

  .country-grid {
    grid-template-columns: 1fr !important;
  }

  .prev_arrow {
    bottom: auto !important;
    top: 15px !important;
    left: auto !important;
    right: 70px !important;
    background: #000 !important;
    border-radius: 4px !important;
    padding: 6px 14px !important;
    z-index: 100 !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    height: 40px !important;
    box-sizing: border-box;
  }

  .prev_arrow .prev-desktop {
    display: none !important;
  }

  .prev_arrow .prev-mobile {
    width: 20px !important;
    height: 20px !important;
    display: block !important;
  }

  .prev_arrow::after {
    content: attr(data-mobile-text);
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    display: block;
    line-height: 1;
    font-family: inherit;
  }

  .prev_arrow[data-mobile-text=""]::after,
  .prev_arrow:not([data-mobile-text])::after {
    display: none;
  }

  .prev_arrow .thumb-preview {
    display: none !important;
  }

  .scroll-down svg {
    display: none !important;
  }

  .scroll-down {
    bottom: 18px;
  }

  .info-block.no-icon .info-text {
    text-align: center;
  }

  .scrollable {
    height: auto !important;
    padding: 0;
    scrollbar-width: none;
    overflow: hidden;
  }

  /* Hero Section (Index) */
  .hero-text-wrap {
    position: relative !important;
    right: 0 !important;
    bottom: 0 !important;
    padding: 0 20px;
    padding-top: 65vh;
  }

  .hero-title {
    font-size: 28px !important;
    white-space: normal !important;
  }

  .hero-subtitle {
    font-size: 20px !important;
    white-space: normal !important;
  }

  .hero-accent-line {
    position: relative !important;
    margin: 15px auto 0 !important;
    width: 80% !important;
    right: auto !important;
    bottom: auto !important;
  }

  /* Chairman / Director General Message — mobile layout */
  img.chairman,
  img.director {
    display: none !important;
  }

  .for_mobile_screen {
    display: block !important;
  }

  .container.chairman-container {
    margin: 0 !important;
    padding: 0 !important;
    height: 100svh !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .chairman-title {
    font-size: 22px !important;
    margin: 0 !important;
    padding: 80px 20px 16px !important;
    flex-shrink: 0;
  }

  .chairman-content {
    flex: 1 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .chairman-scroll-area {
    flex: 1 !important;
    overflow-y: auto !important;
    padding: 0 20px 30px !important;
  }

  .chairman-signature {
    position: relative !important;
    bottom: auto !important;
    padding-bottom: 30px !important;
    padding-inline: 20px !important;
  }

  .page-bg img {
    position: relative !important;
    width: 100% !important;
    max-width: 300px !important;
    display: block !important;
    margin: 20px auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
  }

  .chairman-signature {
    padding-bottom: 40px !important;
  }

  .statistics_types {
    flex-direction: column !important;
    align-items: center !important;
    width: 100%;
    max-width: 100%;
    /* reset the desktop absolute-centering (left/top:50% + translate) so the
       column sits in normal flow instead of being shoved off to the right */
    position: relative;
    left: 0;
    top: 0;
    transform: none;
    gap: 22px;
    /* Start the column BELOW the fixed header and cap its height to the space
       that's left — so the scroll area lives entirely under the header and the
       cards can never slide up behind it. (No fixed 100svh height.) */
    margin-top: calc(var(--header-h) + 16px);
    max-height: calc(100svh - var(--header-h) - 36px);
    justify-content: start;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-width: none;
    padding: 0 0 24px;
  }

  .statistics_types::-webkit-scrollbar {
    display: none;
  }

  .statistics_types div {
    width: 100% !important;
    max-width: 300px !important;
    flex: 0 0 auto !important;
  }

  .centered-container {
    width: 90% !important;
  }

  .cor_grid {
    grid-template-columns: 1fr 1fr;
  }

  .core_max {
    max-width: 98% !important;
  }

  .disbursements-tabs-wrap {
    flex-wrap: nowrap;
    overflow: auto;
  }

  .region-pill {
    flex-shrink: 0;
  }

  .disbursements-side-card {
    float: none;
    min-width: 100%;
    width: 100%;
  }

  .mena-card-active,
  .mena-sector-detailed {
    gap: 16px;
    padding: 16px;
    border-radius: 16px;
  }

  .mena-card-title {
    font-size: 20px;
  }

  .mena-card-amount {
    font-size: 16px;
  }

  .mena-sector-link,
  .mena-sector-simple {
    padding: 18px 20px;
    font-size: 16px;
    border-radius: 14px;
  }

  .director {
    position: relative;
    height: auto;
    width: 100%;
    display: block;
    margin: 0 auto;
  }

  img.chairman {
    position: relative;
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
  }

  .partner_grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto;
    height: auto;
  }

  .partner_img {
    padding: 20px;
  }

  /* Reset the 3-column desktop borders for the 2-column mobile grid. The desktop
     rules use `:not(:nth-child(3n))` / `:nth-child(-n+6)` (specificity 0,2,0), so
     the reset must match that specificity to win — `:nth-child(n)` does, and being
     later in the cascade it overrides cleanly. (logical props so RTL mirrors) */
  .partner_img:nth-child(n) {
    border-inline-end: none;
    border-bottom: 1px solid #D9D9D9;
  }

  /* vertical divider: right edge of the left column only */
  .partner_img:nth-child(odd) {
    border-inline-end: 1px solid #D9D9D9;
  }

  /* uniform logo height so cells read consistently regardless of logo ratio */
  .partner_img img {
    max-height: 56px;
  }

  .partners h2 {
    margin: 40px 0;
  }

  .nav-close-mobile {
    display: block !important;
    position: absolute;
    top: 25px;
    right: 25px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1005;
  }

  [dir="rtl"] .nav-close-mobile {
    right: auto;
    left: 25px;
  }

  .bottom_aligned_container {
    top: unset !important;
    bottom: 0 !important;
    height: fit-content !important;
  }

  .white_to_right {
    background: linear-gradient(270deg, rgba(255, 255, 255, 0) -49.32%, rgba(255, 255, 255, 0.7) 58.3%);
  }


  .sidenav-hamburger .lang-toggle {
    display: none !important;
  }

  .lang-toggle-mobile {
    display: flex !important;
    position: absolute;
    top: 25px;
  }

  [dir="rtl"] .lang-toggle-mobile {
    right: auto;
    left: 70px;
  }
}

@media screen and (max-width: 600px) {

  .canvas-container {
    width: 300px !important;
    height: 225px !important;
  }

  #agreementsCanvas {
    width: 300px !important;
    height: 225px !important;
  }

  .legend-wrap {
    flex-wrap: wrap;
    gap: 15px !important;
  }

  .about-card-wrapper {
    max-width: 100%;
  }
}

@media (max-width: 480px) {

  /* The grid stays 2 columns on mobile (enforced with !important higher up), so
     the old `grid-template-columns: 1fr` was dead and `border-inline-end: none`
     wiped the column divider. Keep the smaller padding but let the 2-column grid
     lines (set in the max-width:768 block) show — including the vertical one. */
  .partner_img {
    padding: 16px;
  }

  /* Uniform logo sizing so every cell reads at a consistent visual height
     regardless of the logo's own aspect ratio. */
  .partner_img img {
    max-width: 80%;
    max-height: 52px;
  }

  .disbursements-title,
  .medium-title {
    font-size: 16px !important;
  }

  .mena-card-title {
    font-size: 18px;
  }

  .mena-card-amount {
    font-size: 15px;
  }

  .mena-sector-link,
  .mena-sector-simple {
    font-size: 15px;
    padding: 16px;
  }

  .mena-card-icon img {
    width: 50px;
    height: 50px;
  }

  .thumb-preview {
    display: none;
  }

  .container {
    height: 100%;
    justify-content: space-between;
  }

  .centered-container {
    margin: auto;
  }

  .large-title {
    font-size: 24px;
  }

  .text {
    font-size: 14px;
  }

  .sidenav {
    width: 60% !important;
  }

  .large-title.chairman-title {
    font-weight: 600;
    font-size: 20px !important;
    text-align: center;
  }

  .card {
    max-width: 90%;
  }

  .top-row {
    flex-direction: column;
  }

  .total-label {
    text-align: left;
  }

  .info-amount,
  .title {
    font-size: 18px;
  }

  .bar-name {
    transform: rotate(270deg);
    margin-top: 0px;
    padding-right: 60px;
    text-align: right;
  }

  .about-card {
    max-height: calc(100svh - 180px);
  }

  /* Arabic only: on mobile each bar-val is rotated to read vertically and the
     rotated text's far end (the "$" glyph) hangs ~text-width/2 past the
     baseline. For tall bars that put the "$" under the bar's top edge and
     clip it in RTL rendering. Shift the whole label upward so even the
     longest amount clears the bar with room to spare. English keeps the
     original 8px gap. */
  [dir="rtl"] .bar-val {
    margin-bottom: 36px !important;
  }

  .bar-group.animated .bar-val {
    transform: translateY(0) rotate(-90deg);
  }

  .country_lists {
    flex-wrap: nowrap;
    justify-content: start;
    overflow: auto;
  }

  .graph-container {
    padding: 100px 14px 110px;
    margin-top: 20px;
  }

  .static_map {
    max-width: 100%;
  }

  .mena-sector-item {
    min-height: 50px;
  }

  .map_container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100vh;
  }

  .prev_arrow::after {
    display: none;
    content: none;
  }

  [dir="rtl"] {

    .container.chairman-container,
    .container {
      margin-right: 0 !important;
    }

    .scrollable {
      padding-left: 0px !important;
    }

    .container.development {
      right: 0 !important;
    }

    .statistics_types {
      padding-left: 0 !important;
      padding-right: 0;
    }
  }
}

/* ── Scroll-section build breakpoints ── */
@media (max-width: 1100px) {
  .container {
    margin-left: 64px;
    max-width: calc(100% - 360px);
  }

  .centered-container {
    width: calc(100% - 420px);
  }

  .vision-mission-cards {
    left: 64px;
  }

  .header-logo {
    left: 64px;
  }

  .hero-text-wrap {
    right: var(--sidenav-gutter);
    bottom: 150px;
  }
}

@media (max-width: 768px) {
  :root {
    --sidenav-w: 84vw;
  }

  /* keep snap — sections are fixed height, long content scrolls internally */
  .deck {
    scroll-snap-type: y mandatory;
  }

  .sec {
    height: 100svh;
    overflow: hidden;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  .header-logo {
    left: 20px;
  }

  .header-logo img {
    width: 150px;
  }

  .container,
  .centered-container {
    margin: 0 20px;
    width: auto;
    max-width: none;
    padding-top: 96px;
    padding-bottom: 24px;
  }

  /* tall sections: make the scroll container fill & scroll internally */
  .container[data-scroll],
  .centered-container[data-scroll] {
    max-height: 100svh;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .container[data-scroll]::-webkit-scrollbar,
  .centered-container[data-scroll]::-webkit-scrollbar {
    display: none;
  }

  /* Hide every inner scrollbar on mobile — covers the leadership messages
     (.chairman-scroll-area), category-detail pages and any other data-scroll
     region whose class the rule above didn't catch. */
  [data-scroll]::-webkit-scrollbar,
  .scrollable::-webkit-scrollbar,
  .details-list-wrap::-webkit-scrollbar {
    display: none;
  }

  [data-scroll],
  .scrollable,
  .details-list-wrap {
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .cor_grid {
    grid-template-columns: 1fr;
  }

  .core_max {
    max-width: 100%;
  }

  .vm-card {
    width: auto;
    max-width: calc(100vw - 40px);
  }

  .vision-mission-cards {
    position: static;
    transform: none;
    padding-top: 96px;
    padding-bottom: 96px;
  }

  .hero-text-wrap {
    left: 20px;
    right: 20px;
    bottom: 110px;
    text-align: left;
  }

  .hero-title,
  .hero-subtitle {
    white-space: normal;
  }

  .scroll-down {
    font-size: 14px;
  }

  .sidenav {
    transform: translateX(100%);
    width: var(--sidenav-w);
    max-width: 360px;
  }

  .sidenav.open {
    transform: translateX(0);
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.5);
  }

  .nav-close-mobile {
    display: flex;
    background: none;
    border: 0;
    cursor: pointer;
    margin-left: auto;
  }
}

@media (min-width: 769px) {
  .mobile-bar {
    display: none;
  }
}

/* Hide the floating mobile open-menu button while the sidenav drawer is open
   (mobile uses the .open class to toggle the drawer; .collapsed is desktop-
   only). On Arabic the drawer's close (X) sits on the left and .mobile-bar
   is on the right so they're naturally separated; in LTR both sit at the
   right edge and would overlap without this rule. */
@media (max-width: 768px) {
  html:has(.sidenav.open) .mobile-bar {
    display: none;
  }
}

/* Thematic categories grid (two rows) is top-aligned and, on desktop, otherwise
   unbounded — so on short viewports its second row runs under the fixed
   "Scroll down to continue" cue. Bound it to the viewport so it scrolls
   internally (like tall sections do on mobile) and reserve bottom room so the
   last row always clears the cue. Shared by index.html + index-ar.html. */
@media (min-width: 769px) {
  section[data-nav="thematic-categories"] .container[data-scroll] {
    max-height: 100svh;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 120px;
  }

  section[data-nav="thematic-categories"] .container[data-scroll]::-webkit-scrollbar {
    display: none;
  }
}

/* Core Values (6-card grid) and Strategic Objectives (5 stacked cards) are
   top-aligned and tall. On SHORT desktop viewports — small laptops, or high-DPI
   panels at 150–200% scale where the effective height is well under 800px — their
   content runs under the fixed "Scroll down to continue" cue. Only on those short
   screens, bound the scroll container to the viewport so it scrolls internally and
   reserve bottom room so nothing sits under the cue. Tall screens are untouched. */
@media (min-width: 769px) and (max-height: 820px) {

  section[data-nav="core"] .centered-container[data-scroll],
  section[data-nav="strategic"] .container[data-scroll] {
    max-height: 100svh;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 96px;
  }

  section[data-nav="core"] .centered-container[data-scroll]::-webkit-scrollbar,
  section[data-nav="strategic"] .container[data-scroll]::-webkit-scrollbar {
    display: none;
  }
}

/* Signed Agreements: the donut canvas is drawn (by JS) at a fixed 480px wide, so
   when the sidenav opens and squeezes the chart column below that, the donut and
   its outer labels overflow into the entity list. Let the canvas scale with its
   column instead — the chart's click hit-testing already derives its scale from
   the rendered size, so interaction still maps correctly. (!important overrides
   the inline width/height the script sets on the element.) */
@media (min-width: 1025px) {
  #overlay-signed #agreementsCanvas {
    width: 100% !important;
    height: auto !important;
    max-width: 480px !important;
    display: block;
    margin: 0 auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    transition: opacity 0.3s ease;
    transform: none;
  }

  .cor_grid .core_card,
  .core_max .glass-card {
    opacity: 1;
    animation: none !important;
  }

  .deck {
    scroll-behavior: auto;
  }
}

/* ── Overlay: mobile layout fixes ── */
@media (max-width: 768px) {
  .tsec .container {
    position: relative !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    right: auto !important;
    left: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    padding: 96px 20px 80px !important;
    box-sizing: border-box !important;
    text-align: left !important;
    /* Sit above the decorative anim_line (z-index:0 on mobile). Static
       positioning would otherwise drop the desktop z-index:10 stacking. */
    z-index: 10;
  }


  /* slides without an inner .scrollable (overview / first story) scroll their
     own container on mobile so long text isn't clipped on short screens */
  .tsec .container[data-scroll] {
    height: 100svh !important;
    max-height: 100svh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior: contain;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .tsec .container[data-scroll]::-webkit-scrollbar {
    display: none;
  }

  .tsec .scrollable {
    height: calc(100svh - 176px) !important;
    padding: 0 !important;
    /* override the global `.scrollable { overflow:hidden }` mobile rule so the
       last slide's content can actually be scrolled by touch */
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    overscroll-behavior: contain;
  }
}

@media (max-width: 768px) {

  /* Flagship Initiatives: title sits at the bottom with a left margin
     (overrides the generic .container mobile rule that pins it to the top). */
  section[data-nav="flagship"] .container {
    top: auto !important;
    bottom: 56px !important;
    left: 0 !important;
    right: 0 !important;
    height: auto !important;
    padding: 0 28px !important;
  }

  .category h4 {
    font-size: 12px;
  }

  /* Our Partners: paginate one panel per screen on mobile too (matches desktop)
     so a swipe steps panels and then cleanly exits to the prev/next section —
     no long nested scroll that traps back-navigation. */
  /* Our Partners on mobile: drop the tabbed pagination — show every panel
     stacked and let the section scroll normally. overscroll-behavior:contain
     stops momentum from leaking up to the deck when the user reaches the
     bottom of the logos grid (which was snapping the deck to an earlier
     section). Partners is the last section — there's nowhere to scroll to. */
  .partners-sec .container.partners {
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .partners-sec .ppanel {
    display: block !important;
  }

  /* Mobile shows the consolidated International panel; the 3 split desktop
     panels are hidden so the user sees a single grid of all 27 logos. */
  .partners-sec .ppanel.intl-desktop-only {
    display: none !important;
  }

  .partners-sec .partner_grid {
    height: auto !important;
  }

  /* Disbursements by Sector on mobile: the card is taller than the slide, so
     let it scroll (it's absolutely-centred on desktop) instead of clipping the
     donut + legend. Donut scales down to fit the narrow card. */
  #overlay-sectors .chart_container {
    position: static;
    transform: none;
    width: 100%;
    max-height: 100svh;
    overflow-y: auto;
    padding: 92px 12px 48px;
  }

  #overlay-sectors .canvas-wrap {
    width: 76vw;
    height: 76vw;
    max-width: 300px;
    max-height: 300px;
    margin: 16px auto;
  }

  /* Reference mobile layout: stack as title → donut → total → legend, with the
    total centred below the chart (instead of the desktop top-right corner). */
  #overlay-sectors .card {
    display: flex;
    flex-direction: column;
  }

  #overlay-sectors .top-row {
    display: contents;
  }

  #overlay-sectors .top-row>div:first-child {
    order: 1;
  }

  /* title + subtitle */
  #overlay-sectors .chart-area {
    order: 2;
  }

  #overlay-sectors .total-block {
    order: 3;
    align-items: center;
    margin-top: 10px;
  }

  #overlay-sectors .total-label,
  #overlay-sectors .total-val {
    text-align: center;
  }

  #overlay-sectors .legend {
    order: 4;
    margin-top: 18px;
  }

  /* ── Mobile page backgrounds ──
     Portrait-optimised art per section, swapped in over the desktop inline
     `background-image`. !important is required to beat that inline style. */
  .bg-home {
    background-image: url('../assets/mobile-bg/home.webp') !important;
  }

  .bg-about {
    background-image: url('../assets/mobile-bg/about.webp') !important;
  }

  .bg-vision {
    background-image: url('../assets/mobile-bg/vision.webp') !important;
  }

  .bg-core {
    background-image: url('../assets/mobile-bg/core.webp') !important;
  }

  .bg-strategic {
    background-image: url('../assets/mobile-bg/strategic.webp') !important;
  }

  .bg-statistics {
    background-image: url('../assets/mobile-bg/statistics.webp') !important;
  }

  /* Thematic / flagship overlays — portrait bg per crossfade slide. Slide 1 is
     the overview; slide 2+ are story slides (the -2 image carries to any
     further slides). Single-slide overlays use one image for all .tbg. */
  #overlay-economic .tbg:nth-child(1) {
    background-image: url('../assets/mobile-bg/economic.webp') !important;
  }

  #overlay-economic .tbg:nth-child(n+2) {
    background-image: url('../assets/mobile-bg/economic-2.webp') !important;
  }

  #overlay-education .tbg:nth-child(1) {
    background-image: url('../assets/mobile-bg/education.webp') !important;
  }

  #overlay-education .tbg:nth-child(n+2) {
    background-image: url('../assets/mobile-bg/education-2.webp') !important;
  }

  #overlay-health .tbg:nth-child(1) {
    background-image: url('../assets/mobile-bg/health.webp') !important;
  }

  #overlay-health .tbg:nth-child(n+2) {
    background-image: url('../assets/mobile-bg/health-2.webp') !important;
  }

  #overlay-relief .tbg {
    background-image: url('../assets/mobile-bg/relief.webp') !important;
  }

  #overlay-sports .tbg {
    background-image: url('../assets/mobile-bg/sports.webp') !important;
  }

  #overlay-scholarships .tbg {
    background-image: url('../assets/mobile-bg/scholarship.webp') !important;
  }

  #overlay-women-conflict .tbg {
    background-image: url('../assets/mobile-bg/wicz.webp') !important;
  }
}


@media(max-width:480px) {

  .partners-title {
    font-size: 24px;
  }

  .line {
    transform: scale(0.6);
  }

  .economic-line {
    left: -24px;
    top: 100px;
  }

  .climate-line {
    top: 100px;
  }

  .anim_line.relief-line {
    left: -40px;
    top: 100px;
  }

  .anim_line.health-line {
    top: 73px;
    left: -25px;
  }

  .vision-line svg {
    max-width: 90%;
  }

  [dir="rtl"] .thematic-line {
    right: auto !important;
    left: 33px !important;
}
}