/* QARAR Enterprise v26.3.141 — Responsive Finalization
 * Goal: preserve the approved desktop design while making the same hierarchy,
 * spacing and interaction geometry reliable on laptop, tablet and phones.
 * This file is intentionally loaded last and concentrates only on responsive
 * corrections; it does not redesign desktop components.
 */

/* ---------- Global fluid safety ---------- */
html,body{max-width:100%;overflow-x:hidden}
img,svg,video,canvas{max-width:100%}
iframe{max-width:100%}
main,#content,.internal-content,.section,.container{min-width:0}

@media(max-width:1100px){
  .container{width:min(100% - 32px,1240px)!important}

  /* Definitive tablet/mobile header geometry. */
  :root{--qarar-header-height:82px!important}
  .qarar-v7-header,.qarar-v7-header.is-scrolled{
    height:82px!important;min-height:82px!important;
  }
  .qarar-v7-header .header-identity-row,
  .qarar-v7-header.is-scrolled .header-identity-row,
  body.home .qarar-v7-header .header-identity-row,
  body.front-page .qarar-v7-header .header-identity-row{
    width:min(100% - 32px,1240px)!important;
    min-height:82px!important;height:82px!important;
    padding-block:4px!important;
    display:grid!important;
    grid-template-columns:68px minmax(0,1fr) 100px!important;
    align-items:center!important;column-gap:10px!important;
  }
  .qarar-v7-header .brand-lockup.qarar-emblem-lockup{
    grid-column:1!important;grid-row:1!important;
    width:64px!important;min-width:64px!important;max-width:64px!important;
    height:70px!important;min-height:0!important;
    margin:0!important;overflow:visible!important;
  }
  .qarar-v7-header .qarar-header-emblem{
    display:block!important;width:60px!important;max-width:60px!important;
    height:66px!important;max-height:66px!important;object-fit:contain!important;
  }
  .qarar-v7-header .qarar-header-brand-copy{
    grid-column:2!important;grid-row:1!important;
    width:100%!important;min-width:0!important;max-width:none!important;
    padding-inline-start:10px!important;margin:0!important;
    overflow:hidden!important;
  }
  .qarar-v7-header .qarar-header-brand-ar,
  .qarar-v7-header .qarar-header-brand-en{
    width:auto!important;max-width:100%!important;
    white-space:normal!important;overflow-wrap:normal!important;
  }
  .qarar-v7-header .qarar-header-brand-ar{font-size:12.5px!important;line-height:1.24!important}
  .qarar-v7-header .qarar-header-brand-en{font-size:10.75px!important;line-height:1.24!important}
  .qarar-v7-header .header-identity-actions{
    grid-column:3!important;grid-row:1!important;
    width:44px!important;min-width:44px!important;
    justify-self:end!important;margin:0!important;padding:0!important;border:0!important;
  }
  .qarar-v7-header .header-identity-actions .qarar-header-message,
  .qarar-v7-header .header-identity-actions .jerusalem-clock{display:none!important}
  .qarar-v7-header .menu-toggle{
    display:block!important;width:42px!important;height:42px!important;margin:0!important;
  }
  .qarar-v7-header .navigation-tools{
    position:absolute!important;top:41px!important;transform:translateY(-50%)!important;
    inset-inline-end:54px!important;z-index:1006!important;
    margin:0!important;padding:0!important;border:0!important;gap:0!important;
  }
  .qarar-v7-header .navigation-tools .lang-link{display:none!important}
  .qarar-v7-header .navigation-tools .search-toggle{width:38px!important;height:38px!important}
  .qarar-v7-header .header-navigation-row,
  .qarar-v7-header .navigation-inner{height:0!important;min-height:0!important;overflow:visible!important}
  .qarar-v7-header .primary-nav{
    top:82px!important;inset-inline:0!important;width:100%!important;
    max-height:0!important;overflow:hidden!important;
  }
  .qarar-v7-header .primary-nav.is-open{
    max-height:calc(100dvh - 82px)!important;overflow-y:auto!important;
  }
  .qarar-v7-header .primary-nav>ul,
  .qarar-v7-header .primary-nav .menu{
    width:100%!important;max-width:100%!important;
  }

  /* Internal two-column system becomes less cramped on tablet. */
  .container.internal-layout{
    --qarar-side-width:220px;
    gap:24px!important;
  }

  /* Fixed side panels in content types must not steal reading width. */
  .job-layout,.opportunity-layout{grid-template-columns:minmax(0,1fr) 320px!important;gap:24px!important}
  .job-apply,.opportunity-form-card{top:100px}
}

@media(max-width:900px){
  /* Tablet portrait: content first, navigation becomes a full-width row. */
  .container.internal-layout,
  .container.internal-layout.institutional-layout{
    display:grid!important;grid-template-columns:minmax(0,1fr)!important;
    grid-template-areas:"nav" "content"!important;
    gap:22px!important;padding-top:28px!important;
  }
  .container.internal-layout>.internal-side-column{grid-area:nav!important;max-width:none!important;width:100%!important}
  .container.internal-layout>.internal-content{grid-area:content!important;width:100%!important;min-width:0!important}
  .inner-side-column .inner-side-nav{position:static!important}

  .job-layout,.opportunity-layout{grid-template-columns:1fr!important}
  .job-apply,.opportunity-form-card{position:static!important}

  /* Common large split layouts. */
  .article-layout{grid-template-columns:1fr!important;gap:32px!important}
  .project-portal-hero,.qpp-lead-grid,.programs-observatory-feature{grid-template-columns:1fr!important}

  /* Modal/person card content: avoid horizontal compression. */
  .person-modal-inner{grid-template-columns:minmax(0,300px) minmax(0,1fr)!important}
  .person-modal-copy{padding:34px!important}
}

@media(max-width:780px){
  .container{width:min(100% - 24px,1240px)!important}

  /* Interior headings keep desktop hierarchy but with mobile scale. */
  .internal-heading{padding:28px 0 24px!important}
  .internal-heading h1,.page-hero h1,.single-hero h1{font-size:clamp(30px,8vw,42px)!important;line-height:1.3!important}
  .section-intro{margin-bottom:22px!important}
  .section-intro h2{font-size:clamp(26px,7vw,34px)!important;line-height:1.4!important}
  .identity-content,.article-content{font-size:17px!important;line-height:1.95!important}

  /* Community: two balanced cards on ordinary phones/tablets. */
  body.page-template-page-community .org-people-grid,
  body.page-template-page-community-group .org-people-grid,
  body.tax-qarar_person_group .org-people-grid,
  body.post-type-archive-qarar_person .org-people-grid,
  .people-grid{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    justify-content:center!important;gap:20px 14px!important;
  }
  .person-card{width:100%!important;max-width:none!important}
  .person-info{padding:12px 2px!important}
  .person-info strong{font-size:17px!important}

  /* Person modal turns into a single readable column. */
  .person-modal{padding:10px!important}
  .person-modal-inner{grid-template-columns:1fr!important;min-height:0!important;margin:2vh auto!important}
  .person-modal-media{max-height:390px!important}
  .person-modal-copy{padding:26px 22px 30px!important}
  .person-modal-copy h2{font-size:30px!important}

  /* Forms and actions should fit without horizontal scrolling. */
  input,select,textarea,button{max-width:100%}
  .qarar-public-form,.job-form{min-width:0}
  .opportunity-facts{display:grid!important;grid-template-columns:1fr 1fr!important}
  .opportunity-facts span{min-width:0!important}

  /* Advertising becomes vertical rather than squeezing copy. */
  .qarar-ad-slide{grid-template-columns:1fr!important;min-height:0!important}
  .qarar-ad-slide__image{min-height:190px!important;max-height:260px!important}
  .qarar-ad-slide__content{padding:22px 20px 58px!important}

  /* Share bars wrap cleanly and remain tappable. */
  .qarar-share-compact{max-width:100%!important;flex-wrap:wrap!important;row-gap:8px!important}
  .qarar-share-compact__action{width:34px!important;height:34px!important;flex:0 0 34px!important}

  /* Footer stays centered and readable. */
  .qarar-corporate-footer .qarar-footer-main{
    grid-template-columns:1fr!important;gap:22px!important;text-align:center!important;
  }
  .qarar-corporate-footer .qarar-footer-about{justify-content:center!important}
  .qarar-corporate-footer .qarar-footer-logo{margin-inline:auto!important;justify-content:center!important}
  .qarar-corporate-footer .qarar-footer-column h3:after{inset-inline-start:50%!important;transform:translateX(50%)!important}
  .qarar-corporate-footer .qarar-contact-item,
  .qarar-corporate-footer .qarar-map-link{justify-content:center!important;margin-inline:auto!important}
  .qarar-corporate-footer .qarar-social-brands{justify-content:center!important}
  .qarar-corporate-footer .qarar-newsletter-field{margin-inline:auto!important;width:min(100%,320px)!important;max-width:320px!important}
  .qarar-corporate-footer .qarar-footer-bottom>.container{flex-direction:column!important;justify-content:center!important;text-align:center!important;gap:10px!important}
  .qarar-corporate-footer .qarar-footer-bottom nav{justify-content:center!important;flex-wrap:wrap!important}
}

@media(max-width:620px){
  .qarar-v7-header .header-identity-row,
  .qarar-v7-header.is-scrolled .header-identity-row,
  body.home .qarar-v7-header .header-identity-row,
  body.front-page .qarar-v7-header .header-identity-row{
    width:min(100% - 20px,1240px)!important;
    grid-template-columns:56px minmax(0,1fr) 92px!important;
    column-gap:6px!important;
  }
  .qarar-v7-header .brand-lockup.qarar-emblem-lockup{
    width:54px!important;min-width:54px!important;max-width:54px!important;height:64px!important;
  }
  .qarar-v7-header .qarar-header-emblem{width:52px!important;max-width:52px!important;height:60px!important;max-height:60px!important}
  .qarar-v7-header .qarar-header-brand-copy{padding-inline-start:7px!important}
  .qarar-v7-header .qarar-header-brand-ar{font-size:11.75px!important}
  .qarar-v7-header .qarar-header-brand-en{font-size:9.9px!important}
  .qarar-v7-header .navigation-tools{inset-inline-end:48px!important}

  /* Prevent overly large fixed paddings from dominating phone screens. */
  .section{padding-block:52px!important}
  .page-hero,.single-hero{padding:54px 0!important}
  .card-body,.opportunity-card-body{padding:19px!important}

  .archive-grid,.content-grid,.partners-grid,.section-hub-grid,.opportunity-grid,
  .training-activities-grid,.training-news-grid,.qga-grid,.qga-albums-grid{
    grid-template-columns:1fr!important;
  }
  .job-facts,.project-portal-facts,.project-impact-strip{grid-template-columns:1fr!important}
  .opportunity-facts{grid-template-columns:1fr!important}

  /* Tables remain usable instead of forcing the whole viewport wider. */
  .article-content table,.identity-content table,.internal-content table,.entry-content table{
    display:block!important;width:100%!important;max-width:100%!important;overflow-x:auto!important;
    -webkit-overflow-scrolling:touch;
  }
}

@media(max-width:480px){
  .container{width:min(100% - 20px,1240px)!important}

  .qarar-v7-header .header-identity-row,
  .qarar-v7-header.is-scrolled .header-identity-row,
  body.home .qarar-v7-header .header-identity-row,
  body.front-page .qarar-v7-header .header-identity-row{
    grid-template-columns:52px minmax(0,1fr) 84px!important;
  }
  .qarar-v7-header .qarar-header-brand-ar{font-size:10.9px!important}
  .qarar-v7-header .qarar-header-brand-en{font-size:9.1px!important}
  .qarar-v7-header .navigation-tools{inset-inline-end:43px!important}
  .qarar-v7-header .navigation-tools .search-toggle{width:34px!important;height:34px!important}
  .qarar-v7-header .menu-toggle{width:38px!important;height:38px!important}

  /* One card per row on narrow phones to preserve portrait/name legibility. */
  body.page-template-page-community .org-people-grid,
  body.page-template-page-community-group .org-people-grid,
  body.tax-qarar_person_group .org-people-grid,
  body.post-type-archive-qarar_person .org-people-grid,
  .people-grid{
    grid-template-columns:minmax(0,286px)!important;
    justify-content:center!important;
  }
  body.page-template-page-community .person-card,
  body.page-template-page-community-group .person-card,
  body.tax-qarar_person_group .person-card,
  body.post-type-archive-qarar_person .person-card{
    max-width:286px!important;margin-inline:auto!important;
  }

  .qarar-home-hero-premium .qarar-home-slide-content h1{font-size:28px!important;line-height:1.3!important}
  .qarar-home-hero-premium .qarar-home-slide-content p{font-size:14px!important;line-height:1.65!important}

  .btn,.qarar-book-hero__actions a,.qarar-publication-pdf-quick a{max-width:100%;white-space:normal;text-align:center}
  .person-modal-media{max-height:330px!important}
  .person-modal-copy{padding:22px 18px 26px!important}
}