/*
 * NT111 (D-128). Install path: public/wp-content/themes/drgreenrelief/nt111/dgr-nt111.css
 * Every rule is scoped to screens 480 to 767 px wide (narrower than a tablet, wider than a phone): the
 * agency's phone CSS in the child style.css (max-width 767 block) was written for 375 px and breaks in
 * this band. Phones (under 480) and tablets and desktops (768 and up) are untouched.
 * Report: audits/design/2026-11-04-format-check.md. Selectors carry .responsive #top so they outrank the
 * child style.css rules on equal media without !important, except where the child rule itself uses it.
 */
@media only screen and (min-width: 480px) and (max-width: 767px) {

	/* 1. Office cards (#locations): the child rule gives the photo min-height:60vw (444 px at 740) and
	 *    lets the photo (41%) and the text block (60%) add up to more than the card, so the text wraps
	 *    under a blank area. Cap the height and make the two fit side by side as they do on a phone. */
	.responsive #top .city-container .avia-image-container,
	.responsive #top .city-container .avia-image-container * {
		min-height: 200px;
	}
	.responsive #top .city-container .avia-image-container {
		width: 40%;
	}
	.responsive #top .city-container .avia-image-container img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.responsive #top .city-container .av-special-heading {
		width: 56%;
	}

	/* 2. Benefits list (.icon-title): the icon sits at left:35px and the text starts at 60px, so the
	 *    icon touches the first letters. Move the icon in and the text out. */
	.responsive #top .icon-title p {
		padding-left: 64px !important;
	}
	.responsive #top .icon-title::after {
		left: 18px;
	}

	/* 3. Footer Recent Posts: the child CSS centres the last entry in a 240 px box below 768
	 *    (#footer .widget_recent_entries ul li:last-child { max-width:240px; margin:0 auto }), which
	 *    reads as a stray indent at this width; keep every entry full width, flush left. */
	.responsive #top #footer .widget_recent_entries ul li:last-child {
		max-width: none;
		margin: 0;
	}
}