/* Case study cards and testimonial cards.
   Output of [flextur_case_studies] and [flextur_testimonials] (inc/case-studies.php).
   Page sections, hero and logo ticker are built in Beaver Builder. */

.flextur-cs, .flextur-cs__buttons {
	--cs-yellow: #f5d13f;
	--cs-gutter: 32px;
	--cs-columns: 2;
	font-family: "Roboto", sans-serif;
	color: #000;
}

.flextur-cs p { margin: 0; color: inherit; font-size: 18px; line-height: 22px; }

/* Anchor targets clear the sticky header: the builder rows given the IDs
   #case-studies and #testimonials, and each review card (#testimonial-{key}). */
#case-studies, #testimonials, .flextur-cs__review { scroll-margin-top: 130px; }

/* Buttons. For the hero's two anchor buttons, in an HTML module:
   <div class="flextur-cs__buttons">
     <a class="flextur-cs__btn" href="#case-studies">Case Studies</a>
     <a class="flextur-cs__btn flextur-cs__btn--light" href="#testimonials">Testimonials</a>
   </div> */
.flextur-cs__buttons { display: flex; flex-wrap: wrap; gap: 18px; font-family: "Roboto", sans-serif; }
.flextur-cs__btn, .flextur-cs__btn:visited { display: inline-block; padding: 10px 18px; background: var(--cs-yellow); font-size: 20px; font-weight: 700; line-height: 24px; color: #000; text-decoration: none; transition: background-color .15s, color .15s; }
.flextur-cs__btn--light, .flextur-cs__btn--light:visited { background: #efefef; }
.flextur-cs__btn:hover, .flextur-cs__btn:focus { background: #000; color: var(--cs-yellow); text-decoration: none; }
.flextur-cs__btn:focus-visible, .flextur-cs__card-link:focus-visible { outline: 2px solid var(--cs-yellow); outline-offset: 3px; }

/* Case study cards */
.flextur-cs__cards { display: grid; grid-template-columns: repeat(var(--cs-columns), minmax(0, 1fr)); gap: var(--cs-gutter); }
.flextur-cs__card { display: flex; flex-direction: column; gap: var(--cs-gutter); padding: 16px; background: rgba(0, 0, 0, .5); color: #fff; text-align: left; }
.flextur-cs__card-media { display: block; height: 380px; overflow: hidden; background: #222; }
.flextur-cs__card-img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.flextur-cs__card:hover .flextur-cs__card-img { transform: scale(1.03); }
.flextur-cs__card-body { display: flex; flex: 1; flex-direction: column; align-items: flex-start; gap: 18px; }
.flextur-cs__card-client { margin: 0; font-family: "Roboto", sans-serif !important; font-size: 30px; font-weight: 700; line-height: 36px; color: #fff; }
.flextur-cs p.flextur-cs__card-title, .flextur-cs__card-title--solo { margin: 0; font-family: "Roboto", sans-serif !important; font-size: 18px; font-weight: 700; line-height: 22px; color: var(--cs-yellow); }
.flextur-cs__card-title--solo { font-size: 24px; line-height: 30px; }
.flextur-cs p.flextur-cs__card-summary { color: #fff; }
.flextur-cs__card-link, .flextur-cs__card-link:visited { color: #fff; font-size: 18px; line-height: 22px; text-decoration: underline; text-underline-offset: 2px; }
.flextur-cs__card-link:hover, .flextur-cs__card-link:focus { color: var(--cs-yellow); }

/* Testimonial cards */
.flextur-cs__reviews { --cs-columns: 3; display: grid; grid-template-columns: repeat(var(--cs-columns), minmax(0, 1fr)); align-items: start; gap: var(--cs-gutter); }
.flextur-cs__review { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 16px; background: #fff; text-align: left; }
.flextur-cs__review:target, .flextur-cs__review--active { outline: 4px solid var(--cs-yellow); outline-offset: 0; }
.flextur-cs__stars { display: flex; justify-content: center; gap: 18px; padding: 8px 0; }
.flextur-cs__stars svg { width: 36px; height: 34px; fill: var(--cs-yellow); }
.flextur-cs__quote { margin: 0; padding: 0; border: 0; font-size: 18px; font-style: normal; line-height: 22px; color: #000; }
.flextur-cs__quote p + p { margin-top: 1em; }
.flextur-cs__person { display: flex; flex-direction: column; gap: 16px; }
.flextur-cs__name { font-size: 22px; font-weight: 700; line-height: 28px; }
.flextur-cs__role { font-size: 18px; font-style: italic; line-height: 22px; }

/* Responsive */
@media (max-width: 1100px) {
	.flextur-cs__reviews { grid-template-columns: repeat(min(var(--cs-columns), 2), minmax(0, 1fr)); }
	.flextur-cs__card-media { height: 300px; }
}
@media (max-width: 768px) {
	.flextur-cs { --cs-gutter: 24px; }
	.flextur-cs__cards, .flextur-cs__reviews { grid-template-columns: minmax(0, 1fr); }
	.flextur-cs__card-media { height: 240px; }
	.flextur-cs__card-client { font-size: 26px; line-height: 32px; }
	.flextur-cs__stars { gap: 12px; }
	.flextur-cs__stars svg { width: 30px; height: 28px; }
}

/* Beaver Builder rows on the Case Studies page (classes set on the rows/modules
   in the builder: cs-hero, cs-eyebrow, cs-title, cs-intro). */
.cs-hero > .fl-row-content-wrap::after { background-image: linear-gradient(117.6deg, #000 0%, rgba(0, 0, 0, 0) 53.75%); }
/* Three-class selectors: the builder emits per-node margins at two-class specificity. */
.fl-col-content > .fl-module.cs-eyebrow, .fl-col-content > .fl-module.cs-title, .fl-col-content > .fl-module.cs-intro { max-width: 550px; margin-left: auto; margin-right: auto; }
.cs-hero .fl-rich-text p, .cs-intro .fl-rich-text p, .cs-eyebrow .fl-rich-text p { margin: 0; }
@media (max-width: 768px) {
	.cs-hero > .fl-row-content-wrap::after { background-image: linear-gradient(rgba(0, 0, 0, .55), rgba(0, 0, 0, .55)); }
}