/* =============================================================================
   Raven Tech — Secondary pages, group A
   OWNED BY PHASE 5A — do not edit from other phases.
   Careers, About, Reviews (page-templates/{about,careers,reviews}.php).

   No new visual language: every rule below is a direct reuse/extension of
   tokens + patterns already established in main.css / home.css / services.css
   (which stay loaded sitewide — `.rt-section-head`, `.rt-check-list`,
   `.rt-certifications`, `.rt-cta-split` etc. are available here for free and
   are NOT redefined). Section-specific layout only.
   ========================================================================== */

/* ============================================================= ABOUT: STORY */
/* Mirrors the Services intro layout (services.css `.rt-services-intro`) —
   left copy (title + multi-paragraph story text) / right notched photo. */

.rt-about-story {
	padding: max(40px, min(6vw, 80px)) 0;
}

.rt-about-story__inner {
	display: grid;
	grid-template-columns: minmax(0, 599fr) minmax(0, 546fr);
	gap: max(24px, min(4vw, 51px));
	align-items: center;
}

.rt-about-story__text .rt-subtitle {
	margin-bottom: 0.5em;
}

.rt-about-story__paragraphs p {
	opacity: 0.8;
}

.rt-about-story__paragraphs p:last-child {
	margin-bottom: 0;
}

/* aspect-ratio is Safari 15+; without it these boxes have no intrinsic
   height and collapse to nothing. The padding-top percentage on a ::before
   is the pre-aspect-ratio equivalent (percentage padding resolves against
   the element's own width), scoped to browsers that lack the real thing. */
.rt-about-story__photo {
	aspect-ratio: 546 / 324;
	width: 100%;
	background-size: cover;
	background-position: center;
	border-radius: var(--rt-radius);
	box-shadow: var(--rt-shadow);
}

/* ======================================================= ABOUT: TESTIMONIAL */
/* Static single-review echo of the homepage testimonials strip (Figma
   7:506): black band + faint photo, white Title left, stars/quote/name
   right. No carousel/dots — one featured review only. */

.rt-about-testimonial {
	position: relative;
	overflow: hidden;
	background: var(--rt-black);
	padding: max(48px, min(7vw, 100px)) 0;
}

.rt-about-testimonial__bg {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background-image: url("../../img/testimonials-bg.jpg");
	background-size: cover;
	background-position: center;
	opacity: 0.2;
}

.rt-about-testimonial__inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: max(32px, min(5vw, 60px));
	align-items: center;
}

.rt-about-testimonial__title {
	color: var(--rt-white);
	margin: 0;
}

.rt-about-testimonial__stars {
	display: flex;
	gap: 6px;
	margin-bottom: 18px;
}

.rt-about-testimonial__star {
	width: 22px;
	height: 23px;
}

.rt-about-testimonial__star--empty {
	opacity: 0.25;
}

.rt-about-testimonial__quote {
	color: var(--rt-white);
	max-width: 580px;
	margin-bottom: 0.8em;
}

.rt-about-testimonial__name {
	color: var(--rt-white-soft);
	margin-bottom: 0.2em;
}

.rt-about-testimonial__city {
	color: var(--rt-white-soft);
	margin: 0;
}

@media (max-width: 1024px) {
	.rt-about-story__inner {
		grid-template-columns: 1fr;
	}
	.rt-about-story__photo {
		order: -1;
	}
	.rt-about-testimonial__inner {
		grid-template-columns: 1fr;
		text-align: center;
	}
	.rt-about-testimonial__stars {
		justify-content: center;
	}
}

/* ============================================================ CAREERS: INTRO */

.rt-careers-intro {
	padding: max(48px, min(7vw, 90px)) 0 max(28px, min(4vw, 40px));
}

.rt-careers-intro .rt-section-head {
	max-width: 709px;
	margin-left: 0;
	margin-right: 0;
}

/* Benefits checklist — same row treatment as `.rt-check-list` (shared,
   services.css) laid out in a responsive 2-column grid instead of a single
   column; this stylesheet loads after services.css so the grid override
   below wins at equal specificity. */
.rt-benefits-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px max(24px, min(4vw, 60px));
	color: var(--rt-ink-soft);
}

.rt-benefits-grid li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 16px;
	line-height: 1.4;
}

.rt-benefits-grid .rt-check-list__icon {
	flex: 0 0 auto;
	width: 21px;
	height: 21px;
	margin-top: 0.1em;
}

/* ======================================================= CAREERS: POSITIONS */

.rt-positions {
	padding: max(28px, min(4vw, 40px)) 0 max(60px, min(8vw, 90px));
}
/* The Apply buttons on each role card jump to the panel below (#apply). */
.rt-positions__panel {
	scroll-margin-top: 140px;
}

.rt-positions__title {
	margin-bottom: max(24px, min(3.5vw, 40px));
}

.rt-positions__list {
	display: flex;
	flex-direction: column;
	gap: max(20px, min(3vw, 28px));
}

.rt-position-card {
	background: var(--rt-white);
	border-radius: var(--rt-radius);
	box-shadow: var(--rt-shadow);
	padding: max(24px, min(4vw, 40px));
}

.rt-position-card__title {
	margin-bottom: 0.3em;
}

.rt-position-card__meta {
	color: var(--rt-ink-soft);
	opacity: 0.75;
	font-weight: 700;
	margin-bottom: 1em;
}

.rt-position-card__sep {
	margin: 0 8px;
}

.rt-position-card__desc p {
	opacity: 0.85;
}

.rt-position-card__desc p:last-child {
	margin-bottom: 1.4em;
}

.rt-position-card__apply {
	display: flex;
}

/* Openings status + application form share one box (client direction: "show the
   application form in the same box as the current openings"). The status copy
   is only present while nothing is posted; the form is permanent, so the rule
   between them is drawn on the form half and simply doesn't appear when the
   status copy is gone. */
.rt-positions__panel {
	background: var(--rt-white);
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: var(--rt-radius);
	box-shadow: var(--rt-shadow);
	padding: max(28px, min(4vw, 44px));
}
/* Cards above, then the box — only needed when roles are actually listed. */
.rt-positions__list + .rt-positions__panel {
	margin-top: max(20px, min(3vw, 28px));
}

.rt-positions__status {
	text-align: center;
	max-width: 640px;
	margin: 0 auto;
}
.rt-positions__status p {
	margin: 0 0 0.75em;
}
.rt-positions__status p:last-child {
	margin-bottom: 0;
	opacity: 0.8;
}
.rt-positions__status-lead {
	font-family: var(--rt-font-heading);
	font-size: max(18px, min(1.8vw, 22px));
}

.rt-positions__status + .rt-positions__apply {
	margin-top: max(24px, min(3vw, 36px));
	padding-top: max(24px, min(3vw, 36px));
	border-top: 1px solid rgba(0, 0, 0, 0.1);
}
.rt-positions__apply-title {
	margin: 0 0 0.35em;
}
.rt-positions__apply-text {
	opacity: 0.8;
	margin-bottom: 1.5em;
}

@media (max-width: 768px) {
	.rt-benefits-grid {
		grid-template-columns: 1fr;
	}
}

/* =========================================================== REVIEWS: INTRO */

.rt-reviews-intro {
	padding: max(48px, min(7vw, 90px)) 0 max(28px, min(4vw, 40px));
}

.rt-reviews-aggregate {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	max-width: 709px;
	margin: 8px auto 0;
	text-align: center;
}

.rt-reviews-aggregate__stars {
	display: flex;
	gap: 6px;
}

.rt-reviews-aggregate__star {
	width: 26px;
	height: 27px;
}

.rt-reviews-aggregate__star--empty {
	opacity: 0.25;
}

.rt-reviews-aggregate__score {
	margin: 0;
}

.rt-reviews-aggregate__count {
	font-family: var(--rt-font-body);
	font-weight: 400;
	font-size: 16px;
	opacity: 0.65;
	margin-left: 0.4em;
}

/* ================================================== REVIEWS: PLATFORM LINKS */
/* template-parts/components/review-links.php — the ask, between the intro copy
   and the testimonial grid. Tinted band so it reads as the page's one action
   rather than another block of text; buttons wrap and go full-width on phones so
   neither ever ends up a cramped tap target. */

.rt-review-links {
	background: var(--rt-hero-tint);
	padding: max(32px, min(4vw, 48px)) 0;
}

.rt-review-links__inner {
	text-align: center;
}

.rt-review-links__lead {
	margin: 0 0 18px;
	font-family: var(--rt-font-heading);
	font-weight: 700;
}

.rt-review-links__buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
}

/* =========================================================== REVIEWS: GRID */

.rt-reviews-grid-section {
	padding: max(28px, min(4vw, 40px)) 0 max(60px, min(8vw, 90px));
}

.rt-reviews-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: max(20px, min(3vw, 32px));
}

.rt-review-card {
	background: var(--rt-white);
	border-radius: var(--rt-radius);
	box-shadow: var(--rt-shadow);
	padding: max(24px, min(3vw, 32px));
	display: flex;
	flex-direction: column;
}

.rt-review-card__stars {
	display: flex;
	gap: 4px;
	margin-bottom: 14px;
}

.rt-review-card__star {
	width: 18px;
	height: 19px;
}

.rt-review-card__star--empty {
	opacity: 0.25;
}

.rt-review-card__quote {
	opacity: 0.85;
	flex: 1 1 auto;
}

.rt-review-card__name {
	margin-bottom: 0.2em;
}

.rt-review-card__business {
	font-weight: 400;
	opacity: 0.75;
}

.rt-review-card__city {
	opacity: 0.65;
	margin: 0;
}

.rt-reviews-grid-section__empty {
	text-align: center;
	opacity: 0.75;
	font-style: italic;
}

@media (max-width: 1024px) {
	.rt-reviews-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.rt-reviews-grid {
		grid-template-columns: 1fr;
	}
	/* Stacked, full-width: two side-by-side review buttons squeeze below ~430px,
	   and this page's whole job is getting that tap to land. */
	.rt-review-links__buttons {
		flex-direction: column;
	}
	.rt-review-links__btn {
		width: 100%;
		justify-content: center;
	}
}

@media (max-width: 390px) {
	.rt-about-testimonial__quote {
		font-size: 20px;
	}
}

/* ------------------------------------------- legacy: aspect-ratio fallback */
@supports not (aspect-ratio: 1 / 1) {
	.rt-about-story__photo::before {
		content: "";
		display: block;
		padding-top: 59.3407%; /* 324 / 546 */
	}
}

/* =============================================================================
   LEGACY FALLBACK — flexbox `gap`
   `gap` only works on flex containers from Safari 14.1; before that it is
   ignored outright and every flex row/stack in this file collapses to zero
   spacing. WebKit shipped flex `gap` and the `inset` shorthand in the same
   release, so `@supports not (inset: 0)` is an exact probe for "this engine
   has no flex gap" on Safari (and only catches a few pre-2020 Chrome/Firefox
   builds, which get the same correct spacing anyway).

   Recipes below, matching each container's direction:
     column        -> `> * + *` margin-top
     row, no wrap  -> `> * + *` margin-left
     row + wrap    -> margin-bottom on every child + margin-right on all but
                      the last, with a negative margin-bottom on the container
                      cancelling the trailing row. Containers that are
                      themselves children of another wrapping container skip
                      that compensation, since their parent already sets
                      margin-bottom on them.
   Modern browsers never see any of this.
   ========================================================================== */
@supports not (inset: 0) {
	/* column stacks */
	.rt-positions__list > * + * { margin-top: max(20px, min(3vw, 28px)); }
	.rt-reviews-aggregate > * + * { margin-top: 8px; }

	/* single-line rows */
	.rt-about-testimonial__stars > * + * { margin-left: 6px; }
	.rt-benefits-grid li > * + * { margin-left: 12px; }
	.rt-reviews-aggregate__stars > * + * { margin-left: 6px; }
	.rt-review-card__stars > * + * { margin-left: 4px; }

	/* wrapping rows */
	.rt-review-links__buttons > * { margin-bottom: 16px; }
	.rt-review-links__buttons > *:not(:last-child) { margin-right: 16px; }
	.rt-review-links__buttons { margin-bottom: -16px; }

	@media (max-width: 600px) {
		.rt-review-links__buttons > * { margin-right: 0; }
	}
}