/* ============================================================================
   mobile-inner-fit.css  --  2026-08-17
   Stop the INNER pages (feed, listings, profiles) panning sideways on a phone.

   Loaded from inc/header_v2_whiteLayout.asp and inc/header_v2_whiteLayout_v3.asp
   when G_FEATURE_MOBILE_INNER_FIT is True. The home pages are NOT covered here --
   they run a different shell and were fixed separately (css/sites/child-home-sb-match.css
   for AYS/.life, and the G_FEATURE_SB_HOME_MOBILE_FIT block in default.asp for
   storeboard.com).

   ---------------------------------------------------------------------------
   THE MEASUREMENT (375x812 Android profile, real device UA)
   ---------------------------------------------------------------------------
   Inner pages carry viewport meta `initial-scale=0.6`, so a 375px phone gets a
   625px LAYOUT viewport, while the shell is pinned at 720px in several places.
   Measured overflow BEFORE this file: feed 105px, businesses/images/classifieds
   listings 95px each, on both .life and AYS. This is not theoretical and it does
   not require initial-scale=1 to appear -- it pans today, at 0.6.

   The 720px comes from four independent places, which is why capping any single
   one does nothing (verified live -- capping .container-wrp alone left the
   overflow at 105px):
     #SelectLocationPanel   min-width:720px  server-forced,
                            inc/header_v2_whiteLayout.asp:1154 + _v3.asp:1147
     .container-wrp         width:720px !important   css/whiteLayout/mobile_v3.css:177
     .fotter-wrp            width:720px !important   same file
     an UNCLASSED outer <table> holding td.page-content-cell, which has no
                            authored width at all -- it stretches to its content

   That last one is the reason this needed `table-layout:fixed` rather than a
   width cap: .body-content-table is already width:100% in css/pages.css, but a
   table with table-layout:auto grows to its content's min-content width, so a
   cap is simply ignored. Fixed layout makes it honour the 100%.

   ---------------------------------------------------------------------------
   WHY max-width:767px AND NOT max-width:1179px
   ---------------------------------------------------------------------------
   mobile_v3.css authors its 720px rules under @media (max-width:1179px), which
   also covers tablets and narrow desktop windows where 720px FITS and is the
   intended layout. Phones report a 625px layout viewport, so 767px catches every
   phone while leaving 768-1179px exactly as it is today. Deliberately narrower
   than the rules being overridden.

   The 720px caps are kept as max-width so nothing WIDENS: where 720px already
   fits, the result is still 720px; only narrower viewports shrink.

   Rollback: G_FEATURE_MOBILE_INNER_FIT = False in inc/global.asp AND
   inc/universal.asp (both roots), or ?innerfit=0 for a single request.
   ============================================================================ */

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

	/* server-forced min-width:720px on the location panel -- must be released
	   before any width cap can take effect */
	body #SelectLocationPanel{
		min-width:0 !important;
		width:100% !important;
		max-width:720px !important;
		box-sizing:border-box !important;
	}

	/* the two 720px !important shells from css/whiteLayout/mobile_v3.css */
	body .container-wrp,
	body .fotter-wrp{
		width:100% !important;
		max-width:720px !important;
		box-sizing:border-box !important;
	}

	/* legacy nested layout tables: cap them, and force the content table to a
	   fixed layout so width:100% is actually obeyed instead of being overridden
	   by min-content. Long unbroken strings wrap rather than widening a column. */
	body table{ max-width:100% !important; }
	body table.body-content-table{ table-layout:fixed !important; }
	body table.body-content-table td{
		word-wrap:break-word;
		overflow-wrap:break-word;
	}

	/* Ad banners and post images are authored at desktop widths (e.g. 970x90), so cap
	   their WIDTH only.

	   height:auto was here and had to come out (2026-08-17, user-reported): it is the
	   browser default for images anyway, so it bought nothing -- but as !important it
	   also beat every explicit height in the stylesheets. .footer-logo>img is
	   height:15px on mobile (css/default.css:1901; 25px desktop at :680), so the AYS
	   feed/board footer logo rendered at its natural aspect instead -- measured
	   104.5px tall x 605px wide against an intended 15px.
	   Without the override, images carrying an explicit height keep it, and images
	   that do not still scale proportionally, because auto is already the default. */
	body img{
		max-width:100% !important;
	}

	/* header auth cluster */
	body .user-btn-wrp,
	body #authJoinWrap{ max-width:100% !important; }
}