/* ---- shared safety net: media, embeds, forms, long words ---- */
@media (max-width: 1199.98px) {
  img, video, iframe, embed, object { max-width: 100%; }
  input, select, textarea { max-width: 100%; }
  h1, h2, h3, h4, h5, h6, p, li, a, td, th, label { overflow-wrap: break-word; }
  pre { white-space: pre-wrap; }
  /* a .row placed directly inside another .row (no column) overflows by its negative margins */
  .row > .row { margin-left: 0; margin-right: 0; }
}

@media (max-width: 767.98px) {
  .modal-dialog { max-width: calc(100% - 1rem); margin: .5rem auto; }
  .modal-content { max-height: calc(100vh - 1rem); max-height: calc(100dvh - 1rem); overflow-y: auto; }
}


/* ---- header.php: between the lg breakpoint and 1200px the menu was ~95px wider than the screen ---- */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .navbar-expand-lg .navbar-nav .nav-link { padding-left: .3rem; padding-right: .3rem; }
}

/* ---- index.php "Engage, learn and lead": Facebook + LinkedIn embeds (300px each) side by side in a non-wrapping flex row ---- */
@media (max-width: 1199.98px) {
  .row.resource .visitor > .d-flex { flex-wrap: wrap; justify-content: center; }
  .row.resource .visitor > .d-flex > div { min-width: 0; max-width: 100%; }
}

/* ---- index.php, sdg-transformation.php: news / event carousel "next" arrow placed 54px outside the container ---- */
@media (max-width: 1199.98px) {
  .news-section-two .owl-nav .owl-next { right: -12px !important; }
}

/* ---- apply-for-advisory-member.php, our-board-member.php, apply-for-speaker.php: contact line in .msg-box ---- */
@media (max-width: 575.98px) {
  .msg-box .d-flex > p { min-width: 0; overflow-wrap: anywhere; }
}

/* ---- apply-for-*.php forms: fixed 304px reCAPTCHA widget ---- */
@media (max-width: 400px) {
  .g-recaptcha { transform: scale(.85); transform-origin: 0 0; }
}
@media (max-width: 360px) {
  .g-recaptcha { transform: scale(.77); }
}

/* ---- apply-for-speaker.php: presentation-mode radio labels side by side did not fit at 320-360px ---- */
@media (max-width: 575.98px) {
  .d-flex.checkbox { flex-wrap: wrap; }
  .d-flex.checkbox > label { min-width: 0; flex: 1 1 auto; }
}

/* ---- news-media.php "Why engage": 180px image + padded text side by side left ~45px for the text at 320px ---- */
@media (max-width: 575.98px) {
  .container.d-flex.why { flex-wrap: wrap; }
  .container.d-flex.why > div { min-width: 0; }
}

/* ---- board-eligibility-criteria.php: .row inside a padding-less .container.eb-wrap overflows by its gutters ---- */
@media (max-width: 1199.98px) {
  .eb-wrap > section > .row { margin-left: 0; margin-right: 0; }
}

/* ---- sdg-transformation.php: injected SDG map SVG rendered at its natural 1229px width; video title box ---- */
@media (max-width: 1199.98px) {
  svg#map-canvas { max-width: 100%; }
}
@media (max-width: 1199.98px) {
  .video-container > .title-text { left: 0; right: 0; max-width: 100%; transform: translateY(-50%); }
  .visitor .head-content { max-width: 100%; }
}

/* ---- payment/list_index_new.php (registration): grid column kept its min-content width ---- */
@media (max-width: 1199.98px) {
  #reg_form > .irx-grid > div { min-width: 0; }
}

/* ---- index.php testimonial carousels ("Testimonials", "Global Speaker Testimonials"): the "prev" arrow
        was pushed 4-18px past the left edge (right:23px / 56px on a relative arrow) ---- */
@media (max-width: 1199.98px) {
  .news-section-two .three-item-carousel .owl-nav .owl-prev,
  .news-section-two .three-item-carousel-two .owl-nav .owl-prev { right: 0 !important; }
}

/* ---- conf/index.php news/reviews carousel (review.css): the "prev" arrow sat 50px left of the carousel, off screen ---- */
@media (max-width: 1199.98px) {
  .three-item-carousel-five .owl-nav .owl-prev { left: 20px; }
}

/* ---- conf/index.php banner between 992px and 1199px: the menu bar is taller there (its "Select Language"
        box wraps) and covered the first line of the banner title; the title block starts lower ---- */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .carousel-item.banner1 > .title-text { top: 290px; }
}

/* ---- images drawn at a fixed box size by the page CSS (stretched on phones/tablets): keep their proportions ---- */
@media (max-width: 1199.98px) {
  /* header.php logo (100 x 44 box) */
  .navbar .navbar-brand > img { object-fit: contain; }
  /* upcoming-conferences.php cards (150px high), index.php / conf/index.php photo strips and gallery boxes */
  .upc img, img.scroll-image, marquee.gall img, .bor-box > img { object-fit: cover; }
  /* conf/index.php testimonial photos */
  .testimonial .pic img { object-fit: cover; }
  /* news-media.php "Why engage": the 180px image was stretched to the height of the text beside it */
  .container.d-flex.why > img { align-self: flex-start; height: auto; }
}