/*---------------------------------------------------------------------------------

 Theme Name:   Divi Child
 Theme URI:    
 Description:  The Business Growers Divi Child Theme
 Author:       The Business Growers
 Author URI:   https://thebusinessgrowers.com
 Template:     Divi
 Version:      2.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html

------------------------------ ADDITIONAL CSS HERE ------------------------------*/


/*
 * ---------------------------------------------------------------
 * Homepage hero headline (page 28) - intermediate desktop sizing
 * ---------------------------------------------------------------
 * The hero H1 renders at 54px. Its row (.et_pb_row_0) is width:80%
 * capped at max-width:1200px, so the 3_5 column only stops growing
 * at a 1500px viewport. Between Divi's tablet breakpoint (981px)
 * and 1500px the column shrinks with the viewport while the font
 * stayed fixed, so "Enterprise-Grade Voice." wrapped to a 4th line.
 *
 * Divi has no responsive tier in this band - its _tablet field only
 * reaches 980px - hence plain CSS here.
 *
 * 3.6vw == 54px at exactly 1500px, and below that the column width
 * is directly proportional to viewport width, so a fixed vw value
 * holds the text/column ratio constant across the whole band.
 *
 * NOTE: .et_pb_text_0 is Divi's positional class for the first text
 * module on the page. If a text module is ever added above the hero
 * this selector must be renumbered.
 */
@media (min-width: 981px) and (max-width: 1499px) {
	body.page-id-28 .et_pb_text_0 h1 {
		font-size: 3.6vw;
	}
}

/* 768-980px: columns stack full-width, but 54px still overflows on
   the narrower tablets. Cap at the desktop size, scale below it. */
@media (min-width: 768px) and (max-width: 980px) {
	body.page-id-28 .et_pb_text_0 h1 {
		font-size: min(54px, 6vw);
	}
}

/*
 * ---------------------------------------------------------------
 * Homepage hero graphic (page 28) - hide at 980px and below
 * ---------------------------------------------------------------
 * The headset photo is a SECTION BACKGROUND IMAGE on
 * .et_pb_section_0, not an et_pb_image module, so it cannot be
 * switched off with Divi's per-module "disable on phone" toggle -
 * there is no module to disable.
 *
 * Below Divi's 981px breakpoint the hero columns stack full-width,
 * so the H1 runs underneath the graphic and the last word of
 * "Enterprise-Grade Voice." becomes unreadable. Divi already
 * shrinks the image to 30% under 980px, which is not enough.
 * 980px and down is the entire broken band: at 981px+ the text and
 * graphic sit side by side correctly, so the rule stops there.
 *
 * NOTE: .et_pb_section_0 is Divi's positional class for the first
 * section on the page. If a section is ever added above the hero
 * this selector must be renumbered - the same caveat as
 * .et_pb_text_0 above.
 */
@media (max-width: 980px) {
	body.page-id-28 div.et_pb_section.et_pb_section_0 {
		background-image: none !important;
	}
}