/* ================================================================
   YMA-RESPONSIVE.CSS  –  yashrajsports.com
   Custom mobile / tablet overrides for Yashraj Martial Arts.
   This file is loaded AFTER the Tiger Claw theme's responsive.css
   so every rule here takes priority over theme defaults.
   Breakpoints used:
     1024px  – large tablet / small laptop
      767px  – tablet portrait / large phone
      480px  – standard phone
      360px  – small phone
   ================================================================ */


/* ────────────────────────────────────────────────────────────────
   1. GLOBAL SAFETY  –  prevent any element from causing h-scroll
   ──────────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* IMPORTANT: Do NOT put overflow-x:hidden on html — it causes body to shrink
   to content width instead of filling the viewport (leaving white space on right).
   Only body gets overflow-x:hidden; both body and key wrappers get explicit 100% width. */
body {
  overflow-x: hidden;
  max-width: 100%;
  width: 100%;       /* force body to always fill full viewport width */
}

/* Safety: ensure these wrappers fill the full viewport */
.body_wrap,
.page_wrap {
  width: 100% !important;
  max-width: 100% !important;
}

/* CRITICAL: The Tiger Claw theme forces fixed-pixel widths on content_wrap at
   every breakpoint (440px at ≤639px, 300px at ≤479px, etc.).  On phones
   narrower than those thresholds the content_wrap becomes WIDER than the
   viewport, which breaks the escape-container technique used by the slider
   and full-width rows (margin-left: calc(-50vw + 50%)).
   max-width: 100% caps it at the body/viewport width without touching the
   theme's width property, so the centering math stays correct on all devices. */
.content_wrap,
.content_container {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* All images respect their container */
img {
  max-width: 100%;
  height: auto;
}


/* ────────────────────────────────────────────────────────────────
   2. HEADER LOGO  –  make it larger on mobile
   Theme responsive.css caps it at 45px at ≤959px – too small.
   We override to keep it proportional to the 100px-tall header.
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 959px) {
  /* Main header logo */
  .top_panel .sc_layouts_logo img,
  .top_panel .logo_image {
    max-height: 100px !important;
    width: auto !important;
  }
}

@media (max-width: 767px) {
  .top_panel .sc_layouts_logo img,
  .top_panel .logo_image {
    max-height: 130px !important;
    width: auto !important;
  }
}

@media (max-width: 480px) {
  .top_panel .sc_layouts_logo img,
  .top_panel .logo_image {
    max-height: 120px !important;
    width: auto !important;
  }
}

/* Logo inside the mobile fullscreen menu panel */
.menu_mobile .sc_layouts_logo img {
  max-height: 90px !important;
  width: auto !important;
}


/* ────────────────────────────────────────────────────────────────
   3. NAVIGATION  –  desktop menu hides, mobile hamburger shows
   The theme JS/CSS already handles the actual slide-in panel;
   we fix the alignment of menu items and the dropdown arrows.
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  /* Hide main horizontal nav */
  .sc_layouts_menu.hide_on_mobile,
  .sc_layouts_menu.extra_margin_right {
    display: none !important;
  }

  /* Show mobile hamburger trigger */
  .sc_layouts_iconed_text.sc_layouts_menu_mobile_button {
    display: flex !important;
  }

  /* Keep logo visible */
  .sc_layouts_logo {
    display: block !important;
  }
}

/* ── Mobile menu panel: fix item alignment ────────────────── */
/* The theme hardcodes width:30rem on each <a>, which pushes
   dropdown arrows far to the right on narrow screens.
   We replace with a percentage-based max-width approach so the
   text and arrow stay tight together and centred on any screen. */

.menu_mobile .menu_mobile_nav_area li > a {
  width: auto !important;
  max-width: 88vw !important;
  min-width: 200px;
  text-align: left !important;
  padding-right: 2.8em !important; /* room for the arrow button */
}

/* Centre the whole nav block */
.menu_mobile .menu_mobile_nav_area ul {
  display: inline-block;
  text-align: left;
  width: auto;
}

.menu_mobile .menu_mobile_nav_area {
  text-align: center;
}

/* Arrow (open_child_menu) sits at the right edge of the <a> */
.menu_mobile .menu_mobile_nav_area .open_child_menu {
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%);
}

/* Bigger tap area for menu items */
.menu_mobile .menu_mobile_nav_area > ul > li > a {
  font-size: 1.25em !important;
  padding-top: 0.4em !important;
  padding-bottom: 0.4em !important;
  line-height: 1.6em !important;
}


/* ────────────────────────────────────────────────────────────────
   3. HERO SLIDER  –  expand to full viewport width on all screens
   ──────────────────────────────────────────────────────────────── */
/* The Revolution Slider lives inside a normal vc_row → widget_slider →
   slider_wrap chain, all of which are constrained to content_wrap width.
   We use the "margin-left escape" technique instead of left+transform:

     margin-left: calc(-50vw + 50%)

   where:
     50vw  = half the viewport width
     50%   = half the containing block width (= content_wrap, capped at 100vw
             by the max-width rule in Section 1 above)

   Their difference is exactly how far left the element must shift so its
   left edge lines up with x=0 of the viewport.  This works at EVERY
   viewport size because the content_wrap max-width:100% rule ensures
   the containing block never exceeds the viewport. */

/* Step 1 — Widget ancestors must not clip the expanded slider */
.sc_widget_slider,
.vc_widget_slider,
.widget_slider {
  overflow: visible !important;
  width: 100% !important;
}

/* Step 2 — Expand the slider_wrap to 100 vw using margin escape */
.slider_wrap.slider_engine_revo {
  width: 100vw !important;
  max-width: none !important;
  position: relative !important;
  margin-left: calc(-50vw + 50%) !important;
  left: auto !important;        /* clear any stale left offset */
  transform: none !important;   /* clear any stale transform */
  overflow: hidden !important;  /* RevSlider needs this to clip slide transitions */
}

/* Step 3 — Inner RS elements fill the full-width slider_wrap */
.wp-block-themepunch-revslider,
#rev_slider_1_1_wrapper,
rs-module-wrap,
rs-module,
.rev_slider_wrapper,
.rev_slider {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  left: auto !important;
  transform: none !important;
}

@media (max-width: 767px) {
  .rev_slider .tp-mask-wrap,
  .rev_slider rs-layer {
    font-size: 0.7em !important;
  }
}


/* ────────────────────────────────────────────────────────────────
   4. BELT JOURNEY ANIMATION  (index.html)
   Desktop: Yellow Belt  →  Arrow+Squares  →  Black Belt  (row)
   Tablet:  two cards side by side, arrow hidden
   Mobile:  column stack: Yellow → arrow (rotated) → Black
   ──────────────────────────────────────────────────────────────── */

/* ── Tablet (≤ 767px): side-by-side cards, hide wide arrow ── */
@media (max-width: 767px) {
  .yma-belt-journey {
    gap: 1.2em;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
  }

  .yma-belt-card {
    width: 44vw;
    max-width: 180px;
    min-width: 120px;
  }

  /* Hide the horizontal arrow/squares on tablet; belt cards are self-explanatory */
  .yma-belt-arrow {
    display: none;
  }
}

/* ── Small phone (≤ 480px): single column, vertical arrow ── */
@media (max-width: 480px) {
  .yma-belt-journey {
    flex-direction: column;
    align-items: center;
    gap: 0.6em;
  }

  .yma-belt-card {
    width: 72vw;
    max-width: 240px;
  }

  /* Show a compact vertical arrow between the two belt cards */
  .yma-belt-arrow {
    display: block;
    width: 48px;
    height: 48px;
    position: relative;
  }

  /* Replace the wide SVG with a simple CSS downward chevron */
  .yma-belt-arrow svg {
    display: none;
  }

  .yma-belt-arrow::after {
    content: "↓";
    font-size: 2em;
    color: #ff5001;
    display: block;
    text-align: center;
    line-height: 1;
  }
}


/* ────────────────────────────────────────────────────────────────
   5. EVENT PAGES  –  photo grid inside .tribe-events-event-image
   The theme doesn't apply a grid here; photos are inline <img>
   elements with hard-coded width/height attributes.
   We convert the wrapper to flexbox so photos tile responsively.
   ──────────────────────────────────────────────────────────────── */
.tribe-events-event-image {
  display: flex !important;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
}

/* Each photo: 3-up on desktop */
.tribe-events-event-image > img {
  flex: 1 1 calc(33.33% - 10px);
  min-width: 160px;
  width: auto !important;        /* override HTML width="" attribute */
  height: 220px !important;     /* uniform grid height */
  object-fit: cover;
  object-position: center;
  border-radius: 4px;
}

/* 2-up on tablet */
@media (max-width: 767px) {
  .tribe-events-event-image > img {
    flex: 1 1 calc(50% - 10px);
    min-width: 130px;
    height: 180px !important;
  }
}

/* Full-width on small phone */
@media (max-width: 480px) {
  .tribe-events-event-image > img {
    flex: 1 1 100%;
    min-width: 0;
    height: 220px !important;
  }
}


/* ────────────────────────────────────────────────────────────────
   6. GALLERY PAGE  –  grid images & special blocks
   ──────────────────────────────────────────────────────────────── */

/* Khelo India featured photo: inline max-width:46% collapses on mobile */
@media (max-width: 767px) {
  /* Target the inline-styled wrapper around the Khelo India photo */
  .sc_team [style*="max-width: 46%"],
  [style*="max-width: 46%"] {
    max-width: 90% !important;
    width: 90% !important;
  }
}

/* Gallery section title: keep long names from overflowing */
.sc_item_title.sc_title_title {
  word-break: break-word;
  overflow-wrap: break-word;
}

/* Gallery grid thumbnails: maintain aspect ratio at all widths */
.gallery-grid .sc_team_item_thumb {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.gallery-grid .sc_team_item_thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  object-position: center;
}

@media (max-width: 480px) {
  /* On very small phones, tighten gallery section spacing */
  .gallery-grid .sc_team_item_thumb {
    aspect-ratio: 16 / 9;
  }
}


/* ────────────────────────────────────────────────────────────────
   7. ABOUT PAGE  –  instructor portrait cards
   Theme already reflows columns (1/3 → 1/2 → 1/1).
   We just ensure the portrait aspect ratio holds at every width.
   ──────────────────────────────────────────────────────────────── */
.yma_instructors .sc_team_item_thumb {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 3 / 4 !important;
  overflow: hidden;
}

.yma_instructors .sc_team_item_thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center 20% !important;
}

/* Instructor name & rank text */
@media (max-width: 480px) {
  .yma_instructors .sc_team_item_title {
    font-size: 1em !important;
  }

  .yma_instructors .sc_team_item_subtitle {
    font-size: 0.85em !important;
  }
}


/* ────────────────────────────────────────────────────────────────
   8. ACHIEVEMENTS PAGE  –  card images & grid
   ──────────────────────────────────────────────────────────────── */
.sc_team_item_thumb img {
  max-width: 100%;
  height: auto;
}

/* Achievements hero / banner image */
.tribe-events-event-image img,
.vc_single_image-wrapper img {
  max-width: 100%;
  height: auto;
}


/* ────────────────────────────────────────────────────────────────
   9. BRANCHES TEXT  (index.html footer widget)
   Prevent "Dehu Road…" nowrap text from causing h-scroll
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  [style*="white-space: nowrap"] {
    white-space: normal !important;
    word-break: break-word;
  }
}


/* ────────────────────────────────────────────────────────────────
   10. WPBakery COLUMNS  –  graceful stacking on very small screens
   The theme handles most column reflow; these add extra safety.
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Full-width columns: already handled by theme, we reinforce */
  .vc_col-sm-12 {
    width: 100% !important;
    float: none !important;
  }

  /* Inner row columns: ensure they stack properly */
  .vc_row.vc_inner .wpb_column {
    width: 100% !important;
    float: none !important;
  }

  /* Sidebar hide (the site uses sidebar_hide class already) */
  .sidebar_hide .sidebar_outer {
    display: none !important;
  }
}

@media (max-width: 480px) {
  .vc_col-sm-4,
  .vc_col-sm-3,
  .vc_col-sm-6,
  .vc_col-sm-8 {
    width: 100% !important;
    float: none !important;
  }
}


/* ────────────────────────────────────────────────────────────────
   11. TYPOGRAPHY SCALING  –  headings on small screens
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  h1 { font-size: 1.8em; }
  h2 { font-size: 1.5em; }
  h3 { font-size: 1.3em; }
  h4 { font-size: 1.1em; }

  /* Section titles */
  .sc_item_title.sc_title_title {
    font-size: 1.5em !important;
  }

  /* Khelo India caption stays legible but not huge */
  .sc_team_item_title[style*="font-size: 1.6em"] {
    font-size: 1.2em !important;
  }
}

@media (max-width: 480px) {
  h1 { font-size: 1.5em; }
  h2 { font-size: 1.25em; }

  /* Paragraph text readable on small screens */
  p,
  .wpb_text_column p {
    font-size: 0.95em;
    line-height: 1.65;
  }
}


/* ────────────────────────────────────────────────────────────────
   12. FOOTER  –  stacked columns & readable links
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Footer widget columns: stack vertically */
  .footer_wrap .vc_col-sm-4,
  .footer_wrap .vc_col-sm-3,
  .footer_wrap .vc_col-sm-6 {
    width: 100% !important;
    float: none !important;
    margin-bottom: 2em;
  }

  /* Center footer text on mobile */
  .footer_wrap .wpb_text_column,
  .footer_wrap p {
    text-align: center !important;
  }
}


/* ────────────────────────────────────────────────────────────────
   13. SINGLE EVENT PAGES  –  layout, date/meta, content
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Event title */
  .tribe-events-single h1.tribe-events-single-event-title,
  #post-335 h1,
  #post-359 h1 {
    font-size: 1.5em;
    margin-bottom: 0.6em;
  }

  /* Event meta sidebar stacks below content */
  .tribe-events-single-section.tribe-events-event-meta {
    width: 100% !important;
    float: none !important;
    margin-bottom: 1.5em;
  }

  /* Navigation arrows between events */
  .tribe-events-nav-pagination {
    flex-direction: column;
    gap: 0.5em;
  }
}


/* ────────────────────────────────────────────────────────────────
   14. TOUCH / TAP IMPROVEMENTS
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  /* Bigger tap targets for menu items */
  .menu_mobile .menu_mobile_nav_area li a {
    padding: 0.7em 1em;
    display: block;
  }

  /* Larger button tap targets */
  .sc_button {
    padding: 0.8em 1.6em !important;
    min-height: 44px;
  }

  /* Hover effects don't make sense on touch; suppress slow transitions */
  .post_featured.hover_dots .post_featured_cats {
    opacity: 1 !important;
  }
}


/* ────────────────────────────────────────────────────────────────
   15. MISCELLANEOUS OVERFLOW FIXES
   ──────────────────────────────────────────────────────────────── */

/* Prevent wide inline styles from causing overflow */
[style*="width: 600"],
[style*="width:600"] {
  max-width: 100% !important;
}

/* Tables */
table {
  max-width: 100%;
  overflow-x: auto;
  display: block;
}

/* Embeds / iframes */
iframe {
  max-width: 100%;
}

/* Hardcoded widths on some event images (width="430", width="300" etc.) */
.tribe-events-event-image img[width],
.wp-post-image[width] {
  max-width: 100% !important;
}

@media (max-width: 767px) {
  /* Spacing adjustments: reduce large empty spaces on mobile */
  .vc_empty_space {
    height: 1.5em !important;
  }

  /* But keep hide_on_mobile class working */
  .hide_on_mobile.vc_empty_space {
    display: none !important;
  }
}

/* ────────────────────────────────────────────────────────────────
   16. FULL-WIDTH VC_ROWS  –  CSS expansion (WPBakery JS fallback)
   WPBakery JS sets data-vc-full-width-init="true" and applies
   inline margin/width styles to stretch rows to 100vw.  We add
   a CSS-only version using the same centering-escape technique so
   it works even before JS fires or if JS is unavailable.
   The !important beats the JS inline styles; the JS calc matches
   calc(-50vw + 50%) when content_wrap is perfectly centred.
   ──────────────────────────────────────────────────────────────── */
.vc_row[data-vc-full-width="true"] {
  width: 100vw !important;
  max-width: none !important;
  position: relative !important;
  margin-left: calc(-50vw + 50%) !important;
  left: auto !important;
  transform: none !important;
}

/* Keep column content visually inside the content_wrap zone */
.vc_row[data-vc-full-width="true"] > .vc_column_container > .vc_column-inner,
.vc_row[data-vc-full-width="true"] > .wpb_column > .vc_column-inner {
  padding-left:  max(1rem, calc(50% - 570px)) !important;
  padding-right: max(1rem, calc(50% - 570px)) !important;
}

@media (max-width: 1439px) {
  .vc_row[data-vc-full-width="true"] > .vc_column_container > .vc_column-inner,
  .vc_row[data-vc-full-width="true"] > .wpb_column > .vc_column-inner {
    padding-left:  max(1rem, calc(50% - 485px)) !important;
    padding-right: max(1rem, calc(50% - 485px)) !important;
  }
}

@media (max-width: 1023px) {
  .vc_row[data-vc-full-width="true"] > .vc_column_container > .vc_column-inner,
  .vc_row[data-vc-full-width="true"] > .wpb_column > .vc_column-inner {
    padding-left:  1rem !important;
    padding-right: 1rem !important;
  }
}


/* ────────────────────────────────────────────────────────────────
   17. REVOLUTION SLIDER  –  background image & layer fixes
   ──────────────────────────────────────────────────────────────── */

/* 17a: Slide background image – force it to fill the full slide.
   RS6 JS calculates the bg image size/position by scaling gridwidth (1170px)
   down to the current viewport.  On narrow phones it applies an inline
   transform: scale(0.33) which makes the image tiny (~290px) regardless of
   our width/height rules.  We MUST include transform:none !important here
   so that CSS sizing (width/height 100% + object-fit:cover) takes full control.
   right/bottom:0 is added as belt-and-suspenders alongside top/left:0 so the
   image is pinned to all four edges of the slide.
   max-width/max-height:none override the global "img { max-width:100% }" rule
   from §1 so the cover fill is never clipped. */
.rev-slidebg,
rs-slide > .rev-slidebg {
  position:   absolute !important;
  top:    0 !important;
  left:   0 !important;
  right:  0 !important;
  bottom: 0 !important;
  width:  100% !important;
  height: 100% !important;
  max-width:  none !important;
  max-height: none !important;
  transform:       none !important;   /* ← KEY: cancels RS6 scale(0.33) on mobile */
  transform-origin: top left !important;
  object-fit:      cover !important;
  object-position: center center !important;
  display:    block !important;
  visibility: visible !important;
  opacity:    1 !important;
}

/* Mobile: hide the slide background image entirely.
   On phone we show only the orange slide background + the text layers.
   The fighter/leg image is hidden so the slide looks clean with just
   the "YASHRAJ MARTIAL ARTS" heading on the orange background.
   On desktop (>767px) the full background image shows as normal. */
@media (max-width: 767px) {
  .rev-slidebg,
  rs-slide > .rev-slidebg {
    display:    none !important;
    visibility: hidden !important;
    opacity:    0 !important;
  }
}

/* 17b: "Affiliated by – Asian Martial Arts Federation" subtitle text.
   RS6 reads data-vbility="t,t,t,f" and adds display:none inline style at
   the 4th responsive level (phone viewport, ≤ ~480 px wide).
   CSS !important overrides inline display:none so the subtitle stays visible
   on all screen sizes.  Applied at ≤767px so it covers the whole mobile range. */
@media (max-width: 767px) {
  /* Both slide-1 and slide-2 carry a layer with this ID */
  #slider-1-slide-5-layer-9 {
    display:    block !important;
    visibility: visible !important;
    opacity:    1 !important;
  }
}

/* 17c: RS6 lazy-load safety net.
   RS6 "smart" lazy loading swaps src="dummy.png" → the real image URL after
   the slider becomes visible.  On some mobile browsers the IntersectionObserver
   fires while rs-module-wrap still has visibility:hidden, so the swap never
   happens and the slide stays blank.  The <script> tag added below index.html's
   </body> handles this at the JS level; the CSS here ensures the img element is
   correctly sized so that once the src IS swapped the photo fills the slide. */


/* ────────────────────────────────────────────────────────────────
   18. FULL-SITE IMAGE FIX  –  prevent ALL content images from
       being cropped or half-visible on mobile
   ──────────────────────────────────────────────────────────────── */

/* ─ 18a: Global wp-image / attachment classes ─────────────────
   WordPress inserts width="" and height="" HTML attributes on every
   <img> it generates.  CSS max-width alone is usually enough, but
   if the theme's style.css uses "width: Xpx !important" those pixel
   values can override max-width.  Setting width:100% !important +
   height:auto !important here wins regardless of inline-attribute or
   theme-CSS width rules on these specific image classes. */
img.attachment-tiger_claw-thumb-large,
img.attachment-tiger_claw-thumb-extra,
img.attachment-post-thumbnail,
img.wp-post-image,
img[class*="attachment-"],
img[class*="size-tiger_claw"] {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  display: block !important;
}

/* ─ 18b: .post_featured thumbnail containers ──────────────────
   Tiger Claw's main style.css (not loaded here) sets a fixed height
   and overflow:hidden on .post_featured to create uniform-height
   thumbnail cards.  On desktop this looks neat; on mobile the fixed
   height clips the lower portion of the image (especially noticeable
   on the 900×843 classes-grid images and 370×335 team photos).

   On mobile we release the fixed height so the image shows at its
   natural aspect ratio.  overflow:visible is required so the image
   is not clipped.  The hover-dot overlay still works visually
   (dots are positioned relative to the parent, not the container). */
@media (max-width: 767px) {
  .post_featured,
  .post_featured.with_thumb,
  .post_featured.sc_team_item_thumb,
  .sc_team_item_thumb {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  /* Force images inside these containers to fill width at natural height */
  .post_featured img,
  .post_featured.with_thumb img,
  .sc_team_item_thumb img {
    position: relative !important;   /* cancel any absolute positioning */
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: unset !important;    /* show full image, no cover-cropping */
    transform: none !important;
    display: block !important;
  }
}

/* ─ 18c: Classes grid (.sc_classes_item) ─────────────────────
   Images are 900×843 — nearly square.  At 1/3-column width on
   desktop (~370px) the natural height is ~347px.  The theme likely
   fixes the container at ~250-280px, cutting off ~15% from the
   bottom.  Mobile already covered by §18b above; these rules add
   extra safety for the intermediate tablet range. */
@media (max-width: 1023px) {
  .sc_classes_item .post_featured,
  .sc_classes_list .post_featured,
  .sc_classes_default .post_featured {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .sc_classes_item .post_featured img,
  .sc_classes_list .post_featured img {
    width: 100% !important;
    height: auto !important;
  }
}

/* ─ 18d: trx_addons columns ───────────────────────────────────
   1/3 and 1/2 columns on mobile may still be constrained by the
   Tiger Claw content_wrap width calculation.  Ensure their images
   never exceed the column and always scale proportionally. */
@media (max-width: 767px) {
  .trx_addons_column-1_3,
  .trx_addons_column-1_2,
  .trx_addons_column-1_4,
  .trx_addons_column-2_3,
  .trx_addons_column-3_4 {
    width: 100% !important;
    float: none !important;
    clear: both !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .trx_addons_column-1_3 img,
  .trx_addons_column-1_2 img,
  .trx_addons_column-1_4 img,
  .trx_addons_column-2_3 img,
  .trx_addons_column-3_4 img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
  }
}

/* ─ 18e: Essential Grid (gallery.html) ────────────────────────
   ESG's inline <style> blocks set overflow:hidden on .esg-entry-media.
   On mobile we override that so images in the grid are not cropped.
   ESG uses its own JS to layout items — we preserve the container
   width/height calc by only changing overflow, not dimensions. */
@media (max-width: 767px) {
  .esg-entry-media,
  .esg-entry-media-inner,
  .esg-media-poster {
    overflow: visible !important;
    height: auto !important;
  }

  .esg-entry-media img,
  img.esg-entry-media-img,
  .esg-media-poster img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: unset !important;
    border-radius: 0 !important; /* ESG circle crops don't work with visible overflow */
  }
}

/* ─ 18f: WPBakery single image shortcodes ─────────────────────
   vc_single_image elements sometimes carry inline max-width styles
   from WPBakery's alignment system that can clip images on mobile. */
@media (max-width: 767px) {
  .wpb_single_image .vc_figure,
  .vc_single_image-wrapper {
    display: block !important;
    width: 100% !important;
    overflow: visible !important;
  }

  .wpb_single_image img,
  .vc_single_image-wrapper img {
    max-width: 100% !important;
    width: 100% !important;
    height: auto !important;
  }
}

/* ─ 18g: Recent events & achievements thumbnail rows ──────────
   sc_recent_news items on index.html use .post_featured with a fixed
   height set in the theme's responsive.css (depends on sidebar status).
   We release those on mobile. */
@media (max-width: 767px) {
  .sc_recent_news .post_featured,
  .sc_events_default .post_featured,
  .sc_team_default .post_featured {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .sc_recent_news .post_featured img,
  .sc_events_default .post_featured img,
  .sc_team_default .post_featured img {
    width: 100% !important;
    height: auto !important;
  }
}

/* ─ 18h: Inline-style overrides that force pixel widths ───────
   WPBakery and page-builder elements sometimes inject
   style="width:900px" or style="max-width:46%" inline.
   We cap all such inline-width elements on mobile. */
@media (max-width: 767px) {
  /* Catch any element whose inline style forces a pixel width */
  [style*="width: 9"][style*="px"],
  [style*="width:9"][style*="px"],
  [style*="width: 8"][style*="px"],
  [style*="width:8"][style*="px"],
  [style*="width: 7"][style*="px"],
  [style*="width:7"][style*="px"],
  [style*="width: 6"][style*="px"],
  [style*="width:6"][style*="px"],
  [style*="width: 5"][style*="px"],
  [style*="width:5"][style*="px"],
  [style*="width: 4"][style*="px"],
  [style*="width:4"][style*="px"] {
    max-width: 100% !important;
  }
}

/* ─ 18i: Prevent any image from ever overflowing its parent ───
   Belt-and-suspenders rule for any images we haven't targeted above. */
@media (max-width: 767px) {
  main img,
  article img,
  .entry-content img,
  .wpb_row img,
  .wpb_column img,
  .vc_column-inner img {
    max-width: 100% !important;
    height: auto !important;
  }
}

/* ────────────────────────────────────────────────────────────────
   HERO SLIDER ON PHONE — show the WHOLE fighter, zoomed to fill
   the screen width, on seamless orange (#FF5001 = the photos' bg).
   RS6 draws the slide bg cover-cropped onto a <canvas>; we hide it
   and paint the photo ourselves per slide (keys from index.html).
   ──────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  rs-sbg canvas { display: none !important; }

  rs-sbg-px,
  rs-sbg-wrap {
    transform: none !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  rs-slide,
  rs-slides,
  rs-module,
  rs-module-wrap,
  #rev_slider_1_1_wrapper {
    background: #ff5001 !important;
  }

  rs-sbg { background-repeat: no-repeat !important; }

  /* Slide 1 — new.png (subject in left 45%) */
  rs-sbg-wrap[data-key="rs-1"] rs-sbg {
    background-image:    url("/wp-content/uploads/2017/06/new.png") !important;
    background-size:     197vw auto !important;
    background-position: calc(50vw - 49.8vw) calc(50vh - 85.5vw) !important;
  }
  /* Slide 2 — slider_1_3.png (subject in left half) */
  rs-sbg-wrap[data-key="rs-5"] rs-sbg {
    background-image:    url("/wp-content/uploads/2017/06/slider_1_3.png") !important;
    background-size:     180vw auto !important;
    background-position: calc(50vw - 58.9vw) calc(50vh - 95.4vw) !important;
  }
  /* Slide 3 — slider_1_2.png (subject centred) */
  rs-sbg-wrap[data-key="rs-6"] rs-sbg {
    background-image:    url("/wp-content/uploads/2017/06/slider_1_2.png") !important;
    background-size:     206vw auto !important;
    background-position: calc(50vw - 102.8vw) calc(50vh - 79.9vw) !important;
  }
}