/* RPB responsive rules - consolidated here per project convention (not scattered across
   custom.css/shortcodes/*.css). Desktop is the unconditional default everywhere else in this
   theme; every rule in this file is a mobile/tablet deviation, gated behind max-width.

   The site has exactly two real breakpoints, confirmed from the approved reference's own
   compiled CSS (not guessed): 1050px (tablet) and 720px (phone). Use those two values only -
   don't introduce new ones without re-checking the reference first.

   Salient's own native mobile nav breakpoint (header desktop-nav -> slide-out menu) is
   hardcoded at 999/1000px inside its compiled core style.css, not a Redux option and not
   something this file touches - forcing it to exactly 1050px would mean overriding deeply
   nested vendor CSS, which conflicts with the "never patch vendor files" rule for a ~50px
   difference that isn't visually significant. The mobile nav's own COLORS (it shipped with
   Salient's stock demo orange, #ff6716) are fixed via the header-slide-out-widget-area-*
   Redux options instead - see [[feedback-rpb-check-salient-options-first]] - not CSS. */

/* ===== Global (base typography, buttons, section padding) ===== */
/* .shell was deleted (see custom.css) - its own width no longer needs a responsive
   override; Salient's native row content width (what every section relies on now) has its
   own responsive breakpoints built in already. */
@media (max-width: 720px){
	.rpb-section{padding-top:84px !important;padding-bottom:84px !important}
	.rpb-button{width:100%}
	/* Salient's own responsive Typography scaling generates ".col h2,body h2{font-size:...}"
	   at its own tablet/mobile breakpoints (691-999px, <=690px) - no Typography option exposes
	   this (checked), and the compound selector ties/beats a plain h2 rule even without
	   !important, so !important is the only way to reach it here. */
	h2{font-size:44px !important}
}
@media (max-width: 1000px){
body #header-outer.transparent[data-transparent-header="true"][data-remove-border="true"]{
	border-bottom: 1px solid #fff3 !important;
}
#top{border-bottom: none !important;}
}
/* Overwrites Salient's own vendor rule (compiled core CSS, not a Redux option -
   nectar/helpers/dynamic-styles.php - dynamically computed from mobile-logo-height +
   a mobile-padding constant) which sets this same padding-top at this same breakpoint.
   Zeroed here per explicit user instruction - the first/top-level row's own hero
   content already handles its own top spacing (.rpb-hero-content's own padding-top),
   so this row-level padding was just adding an unwanted extra gap on top of that. */
@media (max-width: 690px){
	.vc_row.top-level.full-width-section:not(.full-width-ns) > .span_12{padding-top:0}
}

/* ===== Footer (widgets row + copyright bar) ===== */
@media (max-width: 1050px){
	/* Salient's native .container responsive side-padding doesn't reach this footer
	   template context - add it explicitly, matching the reference's own footer inset. */
	#footer-widgets.rpb-footer-widgets-5col .container{padding-left:48px !important;padding-right:48px !important}
	#footer-outer #copyright .container{padding-left:48px !important;padding-right:48px !important}
	.rpb-footer-row{flex-wrap:wrap;gap:54px 42px}
	.rpb-footer-col-wide{flex-basis:100%}
}
@media (max-width: 720px){
	#footer-widgets.rpb-footer-widgets-5col{padding-top:58px}
	#footer-widgets.rpb-footer-widgets-5col .container{padding-left:18px !important;padding-right:18px !important}
	#footer-outer #copyright .container{padding-left:18px !important;padding-right:18px !important}
	/* Two columns, not a single stack: the wide Brand column (logo/description/social)
	   spans both, the other four (Company/Services/Connect/Contact) pair up 2x2 below
	   it - display:grid !important needed since the desktop default is display:flex,
	   unconditional (no media query of its own) in custom.css. */
	.rpb-footer-row{display:grid !important;grid-template-columns:1fr 1fr;gap:38px 24px;padding-bottom:58px}
	.rpb-footer-col-wide{grid-column:1/-1}
	/* min-width:0 overrides the grid item default of min-width:auto (= min-content) -
	   without it, a column with wider unbreakable content (e.g. Contact's phone number)
	   forces its own 1fr track wider, shrinking the other one - confirmed live (74px vs
	   241px instead of an even split). */
	.rpb-footer-col-wide,.rpb-footer-col{width:auto !important;min-width:0;flex:none !important}
	/* The email address is one unbreakable string, too long for a 158px-wide mobile
	   column (confirmed overflowing by ~83px) - was never an issue full-width, only
	   now that Contact shares a column with Connect. */
	.rpb-footer-contact{overflow-wrap:break-word}
}

/* ===== Hero ===== */
@media (max-width: 1050px){
	.rpb-hero{min-height:850px}
	.rpb-hero-proof > div{grid-template-columns:1fr;gap:5px}
}
@media (max-width: 720px){
	.rpb-hero{min-height:820px}
	.rpb-hero-image .parallax-layer{background-position:62%}
	.rpb-hero-content{padding-top:178px}
	.rpb-hero h1{font-size:clamp(57px,19vw,82px);line-height:.88}
	.rpb-hero-lead{margin-top:32px;margin-left:0;font-size:19px}
	.rpb-hero-actions{flex-direction:column;align-items:flex-start;gap:22px;margin-top:34px;margin-left:0}
	.rpb-hero-proof{grid-template-columns:repeat(3,1fr)}
	.rpb-hero-proof > div{min-height:98px;padding:14px 9px}
	.rpb-hero-proof strong{font-size:26px}
	.rpb-hero-proof span{font-size:7px}
}

/* ===== Page Hero ===== */
/* Only one real breakpoint here (confirmed against the live reference at 1000px/700px) -
   610px/230px hold steady all the way down to 721px, only dropping at the 720px breakpoint. */
@media (max-width: 720px){
	.rpb-page-hero{min-height:520px}
	.rpb-page-hero-content{padding-top:188px}
	.rpb-commercial-page-hero h1{white-space:normal}
	/* Length-aware per-instance size (--h1-mobile-size, computed in
	   rpb_page_hero_shortcode()) - only reached here, at mobile width, so desktop
	   sizing for every already-verified page is untouched. Replaces the old
	   Commercial-only font-size:48px hardcode - Commercial's own heading now gets the
	   same systematic treatment as every other page instead of a one-off fix, and
	   What We Do (an equally long heading that never had an override) gets it too. */
	.rpb-page-hero h1{font-size:var(--h1-mobile-size,44px)}
	.rpb-what-we-do-hero .rpb-page-hero-lead{white-space:normal}
	/* 195px total gutter (single-page-hero's own explicit width, see page-hero.css) is
	   sized for desktop - too aggressive below 720px, matches the 48px-per-side gutter
	   value used elsewhere on the site at this breakpoint instead. */
	.rpb-single-page-hero .rpb-page-hero-content{width:calc(100% - 96px)}
}

/* ===== Split Intro ===== */
@media (max-width: 1050px){
	.rpb-split-intro{grid-template-columns:1fr;gap:64px}
	.rpb-split-intro-copy{max-width:680px;padding-top:0}
}

/* ===== Content Panel ===== */
/* Never had a responsive rule at all in the original build - real gap, found by
   scrolling an actual mobile viewport (About's Real Experience panel rendering as
   a squeezed .9fr-wide text column instead of collapsing to full width). Matches
   the reference's own ".editorial-grid,.founder-grid,.real-experience-grid
   {grid-template-columns:1fr}" collapse rule. */
@media (max-width: 1050px){
	.rpb-content-panel{grid-template-columns:1fr;gap:32px}
	.rpb-content-panel > div:first-child{position:static}
	.rpb-content-panel-copy{padding-top:0}
}

/* ===== Services ===== */
@media (max-width: 1050px){
	.rpb-split-heading{grid-template-columns:1fr;gap:64px}
	.rpb-service-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 720px){
	.rpb-split-heading{margin-bottom:48px}
	.rpb-service-grid{grid-template-columns:1fr}
	.rpb-service-card{min-height:260px}
}

/* ===== Markets ===== */
@media (max-width: 1050px){
	.rpb-markets-heading{grid-template-columns:1fr;gap:64px}
	.rpb-market-card{min-height:500px;padding:38px}
}
@media (max-width: 720px){
	.rpb-markets-heading{margin-bottom:48px}
	.rpb-market-grid{grid-template-columns:1fr}
	.rpb-market-card{min-height:490px}
}

/* ===== Experience ===== */
@media (max-width: 1050px){
	.rpb-experience-panel{grid-template-columns:1fr;width:100%}
	.rpb-experience-copy{max-width:none}
	.rpb-experience-portrait{min-height:460px}
	.rpb-experience-portrait:after{background:linear-gradient(180deg,var(--rpb-ink-deep),transparent);width:100%;height:20%;inset:0 0 auto}
}
@media (max-width: 720px){
	.rpb-experience-copy{padding:48px 24px}
	.rpb-experience-opening{white-space:normal}
	.rpb-experience-portrait{min-height:360px}
}

/* ===== Results Preview ===== */
@media (max-width: 720px){
	.rpb-results-top{flex-direction:column;align-items:stretch}
	.rpb-result-cards{grid-template-columns:1fr;gap:48px}
}

/* ===== News Teaser ===== */
@media (max-width: 1050px){
	.rpb-news-teaser-inner{grid-template-columns:1fr;gap:64px}
}

/* ===== News Archive ===== */
/* Never had responsive rules at all in the original build - real gap, found by
   scrolling the actual page at 800px width and seeing the 2-col card grid squeezed
   into ~200px columns next to a still-300px-wide sidebar. */
@media (max-width: 1050px){
	.rpb-news-layout{grid-template-columns:1fr;gap:56px}
	.rpb-news-grid{grid-template-columns:1fr}
	.rpb-news-sidebar{border-left:0;border-top:1px solid var(--rpb-line);padding-left:0;padding-top:48px;position:static}
}
@media (max-width: 720px){
	.rpb-news-card{min-height:0}
}

/* ===== Enquiry ===== */
@media (max-width: 1050px){
	.rpb-enquiry-grid{grid-template-columns:1fr;gap:64px}
	.rpb-contact-placeholders{flex-direction:column;gap:24px;margin-top:44px}
	.rpb-enquiry-form{padding:30px 22px}
	.rpb-enquiry-form .gform_fields{grid-template-columns:1fr !important}
}
@media (max-width: 720px){
	#enquire{min-height:0}
}

/* ===== Team (About) ===== */
/* Never had responsive rules in the original build - values from the reference's own
   CSS bundle (.team-member/.team-photo). */
@media (max-width: 1050px){
	.rpb-team-member{grid-template-columns:1fr 1fr;gap:5vw}
}
@media (max-width: 720px){
	.rpb-team-member{grid-template-columns:1fr;gap:36px;padding:48px 0}
	.rpb-team-photo,.rpb-team-photo img{min-height:430px}
}

/* ===== Offer List (Residential/Commercial) ===== */
/* Never had responsive rules in the original build - values from the reference's own
   CSS bundle (.residential-offer/.commercial-offer, identical rules for both). */
@media (max-width: 1050px){
	.rpb-offer{grid-template-columns:1fr 1fr;min-height:620px}
	.rpb-offer-copy{padding:32px 20px 32px 5vw}
	.rpb-offer:nth-child(2n) .rpb-offer-copy{padding:32px 5vw 32px 20px}
}
@media (max-width: 720px){
	.rpb-offer{grid-template-columns:1fr;min-height:0;padding:46px 0}
	.rpb-offer-image,.rpb-offer-image img{min-height:350px}
	.rpb-offer ul{grid-template-columns:1fr;grid-auto-rows:auto;gap:12px}
	.rpb-offer-list .rpb-offer:last-child ul{grid-template-rows:none;grid-auto-flow:row}
}

/* ===== Expertise Links (What We Do) ===== */
/* Never had responsive rules in the original build - values from the reference's own
   CSS bundle (.expertise-links). */
@media (max-width: 720px){
	.rpb-expertise-links{grid-template-columns:1fr}
	.rpb-expertise-links > a{min-height:260px;padding:28px}
}

/* ===== Google Reviews (Real Results) ===== */
/* Never had responsive rules in the original build - values from the reference's own
   CSS bundle (.reviews-heading/.google-review-grid). */
@media (max-width: 1050px){
	.rpb-reviews-heading{grid-template-columns:1fr;gap:22px;margin-bottom:28px}
	.rpb-review-grid{grid-template-columns:1fr}
	.rpb-review-grid article{min-height:0;padding:24px 22px}
}

/* ===== Results Grid (Real Results, native nectar_post_grid) ===== */
/* Our own CSS Grid override (results-grid.css) never had a mobile collapse either -
   was forcing 2 columns via !important at every viewport regardless of the shortcode's
   own columns_phone="1" param, which our !important override makes moot. */
@media (max-width: 720px){
	.rpb-results-grid .nectar-post-grid{grid-template-columns:1fr !important}
	.rpb-results-grid .nectar-post-grid-item-bg-wrap{height:320px !important}
}