/**
 * Floor Ready Pro - Flexible Sections service template
 *
 * Styles for template-service-flexible.php and template-parts/flex/*.
 * Most layouts reuse components from home.css (cards, cost ranges, tables,
 * process steps, checklists, contractor card, CTA band) and the page header
 * from about.css; this file adds section backgrounds and layout-only bits.
 */

/* ----------------------------------------------------------------------
 * Hero
 * -------------------------------------------------------------------- */
.frp-flex-hero__text {
  max-width: 70ch;
}

.frp-flex-hero__text p + p {
  margin-top: var(--frp-space-3);
}

.frp-flex-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--frp-space-4);
  margin-top: var(--frp-space-8);
}

.frp-flex-hero .frp-btn--outline {
  border-color: rgba(255, 255, 255, 0.5);
  color: var(--frp-white);
}

.frp-flex-hero .frp-btn--outline:hover,
.frp-flex-hero .frp-btn--outline:focus-visible {
  background: var(--frp-white);
  border-color: var(--frp-white);
  color: var(--frp-ink);
}

/* ----------------------------------------------------------------------
 * Section wrapper + backgrounds
 * -------------------------------------------------------------------- */
.frp-flex {
  padding-top: var(--frp-space-20);
  padding-bottom: var(--frp-space-20);
}

.frp-flex--bg-white {
  background: var(--frp-white);
}

.frp-flex--bg-beige {
  background: var(--frp-beige);
}

.frp-flex--bg-grey {
  background: var(--frp-grey-50);
}

.frp-flex--bg-navy {
  background: var(--frp-navy);
  color: var(--frp-on-dark-70);
}

.frp-flex--bg-navy .frp-heading {
  color: var(--frp-white);
}

.frp-flex--bg-navy .frp-heading_eyebrow {
  border-bottom-color: var(--frp-hairline);
}

.frp-flex--bg-gold {
  background: var(--frp-gold);
}

/* Cost cards sit on grey on the homepage; flip them on grey sections. */
.frp-flex--bg-grey .frp-materials__table-wrap,
.frp-flex--bg-beige .frp-callout {
  background: var(--frp-white);
}

.frp-flex__intro {
  margin-top: var(--frp-space-5);
  line-height: var(--frp-lh-loose);
}

.frp-flex__head-link {
  margin-top: var(--frp-space-4);
}

.frp-flex__list-title {
  margin-bottom: var(--frp-space-4);
  font-weight: var(--frp-fw-semibold);
  color: var(--frp-ink);
}

.frp-flex .frp-section-head__text {
  max-width: 820px;
}

/* ----------------------------------------------------------------------
 * Cards
 * -------------------------------------------------------------------- */
.frp-flex-cards {
  display: grid;
  gap: var(--frp-space-6);
}

.frp-flex-cards--cols-2 {
  grid-template-columns: repeat(2, 1fr);
}

.frp-flex-cards--cols-3 {
  grid-template-columns: repeat(3, 1fr);
}

.frp-flex-cards--cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

.frp-flex--bg-white .frp-flex-card:not(.is-featured) {
  background: var(--frp-bg-grey);
  box-shadow: none;
}

.frp-flex-card__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  background: var(--frp-navy);
  color: var(--frp-white);
  font-size: var(--frp-fs-h4);
  font-weight: var(--frp-fw-bold);
}

.frp-flex-card.is-featured .frp-flex-card__badge {
  background: var(--frp-white);
  color: var(--frp-gold);
}

.frp-flex-card__pin {
  border-radius: var(--frp-radius-circle);
}

.frp-flex-card__note {
  margin-bottom: var(--frp-space-6);
}

.frp-flex-cards--plain .frp-flex-card {
  border-top: 3px solid var(--frp-gold);
}

/* A card whose text runs long (2 columns) reads better a touch larger. */
.frp-flex-cards--cols-2 .frp-type-card__title {
  font-size: var(--frp-fs-h3);
}

.frp-flex-cards--cols-2 .frp-type-card__text {
  font-size: var(--frp-fs-body);
}

/* ----------------------------------------------------------------------
 * Cost
 * -------------------------------------------------------------------- */
.frp-flex-cost__example {
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--frp-space-4);
}

.frp-flex-cost__example .frp-cost-range__label {
  grid-column: auto;
  margin-top: 0;
  font-size: var(--frp-fs-body);
  color: var(--frp-white);
}

.frp-flex-cost__example-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: var(--frp-radius-circle);
  background: rgba(255, 255, 255, 0.12);
  color: var(--frp-gold);
}

.frp-flex-cost__table {
  max-width: 900px;
}

.frp-flex-cost__price {
  font-weight: var(--frp-fw-bold);
  color: var(--frp-gold-dark);
}

.frp-flex--cost .frp-costs__actions {
  margin-top: var(--frp-space-10);
}

/* ----------------------------------------------------------------------
 * Steps (navy band, reuses .frp-process__*)
 * -------------------------------------------------------------------- */
.frp-flex--steps .frp-process__steps.frp-flex-steps--4 {
  grid-template-columns: repeat(4, 1fr);
}

.frp-flex--steps .frp-process__steps.frp-flex-steps--3 {
  grid-template-columns: repeat(3, 1fr);
}

/* Six steps: two rows of three; the single-row gold rail no longer fits. */
.frp-flex--steps .frp-process__steps.frp-flex-steps--6 {
  grid-template-columns: repeat(3, 1fr);
  row-gap: var(--frp-space-12);
}

.frp-flex--steps .frp-process__steps.frp-flex-steps--6::before,
.frp-flex--steps .frp-process__steps.frp-flex-steps--7::before,
.frp-flex--steps .frp-process__steps.frp-flex-steps--8::before {
  display: none;
}

/* Seven or eight steps: rows of four. */
.frp-flex--steps .frp-process__steps.frp-flex-steps--7,
.frp-flex--steps .frp-process__steps.frp-flex-steps--8 {
  grid-template-columns: repeat(4, 1fr);
  row-gap: var(--frp-space-12);
}

/* ----------------------------------------------------------------------
 * Comparison table
 * -------------------------------------------------------------------- */
.frp-flex-table .frp-materials__table tbody td {
  color: var(--frp-ink);
}

.frp-flex-table .frp-materials__table thead th:not(:first-child) {
  width: 36%;
}

.frp-flex-table--3 .frp-materials__table thead th:last-child {
  background: var(--frp-gold);
}

.frp-flex-table--2 {
  max-width: 900px;
}

.frp-flex-table--2 .frp-materials__table thead th:not(:first-child) {
  width: 60%;
}

.frp-flex-columns__link {
  margin-top: var(--frp-space-6);
}

/* ----------------------------------------------------------------------
 * Media + text
 * -------------------------------------------------------------------- */
.frp-flex-media--reversed .frp-replace__media {
  order: 2;
}

.frp-flex-media--single {
  padding-right: 0;
  padding-bottom: 0;
}

.frp-flex-media--single .frp-replace__media-main img {
  aspect-ratio: 5 / 4;
}

/* ----------------------------------------------------------------------
 * Text columns
 * -------------------------------------------------------------------- */
.frp-flex-columns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--frp-space-8);
}

.frp-flex-columns__item {
  padding: var(--frp-space-10);
  background: var(--frp-white);
  border-top: 4px solid var(--frp-gold);
  box-shadow: var(--frp-shadow-sm);
}

.frp-flex-columns__item:nth-child(even) {
  border-top-color: var(--frp-navy);
}

.frp-flex-columns__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-bottom: var(--frp-space-5);
  background: var(--frp-gold-10);
  color: var(--frp-gold);
}

.frp-flex-columns__title {
  margin-bottom: var(--frp-space-5);
  font-size: var(--frp-fs-h3);
}

.frp-flex-columns__text {
  line-height: var(--frp-lh-loose);
}

.frp-flex-columns__text p + p {
  margin-top: var(--frp-space-4);
}

/* ----------------------------------------------------------------------
 * Checklist (contractors)
 * -------------------------------------------------------------------- */
.frp-flex-checklist--solo {
  grid-template-columns: 1fr;
  max-width: 860px;
}

.frp-flex-checklist__after {
  margin-top: var(--frp-space-6);
}

/* ----------------------------------------------------------------------
 * FAQ
 * -------------------------------------------------------------------- */
.frp-flex-faq {
  max-width: 980px;
}

.frp-flex--faq .frp-section-head {
  margin-bottom: var(--frp-space-8);
}

.frp-flex--bg-beige .frp-faq__item {
  background: var(--frp-white);
}

/* ----------------------------------------------------------------------
 * CTA related links
 * -------------------------------------------------------------------- */
.frp-flex-cta__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--frp-space-4);
  margin-top: var(--frp-space-10);
  padding-top: var(--frp-space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}

.frp-flex-cta__links-title {
  font-size: var(--frp-fs-sm);
  font-weight: var(--frp-fw-semibold);
  color: var(--frp-navy);
  text-transform: uppercase;
  letter-spacing: var(--frp-ls-eyebrow);
}

.frp-flex-cta__links ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--frp-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.frp-flex-cta__links a {
  display: inline-flex;
  align-items: center;
  gap: var(--frp-space-2);
  padding: var(--frp-space-2) var(--frp-space-4);
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: var(--frp-radius-pill);
  font-size: var(--frp-fs-sm);
  font-weight: var(--frp-fw-medium);
  color: var(--frp-white);
}

.frp-flex-cta__links a:hover,
.frp-flex-cta__links a:focus-visible {
  background: var(--frp-white);
  color: var(--frp-ink);
}

/* ----------------------------------------------------------------------
 * Responsive
 * -------------------------------------------------------------------- */
@media (max-width: 1200px) {
  .frp-flex-cards--cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .frp-flex--steps .frp-process__steps.frp-flex-steps--4,
  .frp-flex--steps .frp-process__steps.frp-flex-steps--6,
  .frp-flex--steps .frp-process__steps.frp-flex-steps--7,
  .frp-flex--steps .frp-process__steps.frp-flex-steps--8 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 1024px) {
  .frp-flex-cards--cols-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .frp-flex-columns {
    grid-template-columns: 1fr;
  }

  .frp-flex-media--reversed .frp-replace__media {
    order: 0;
  }
}

@media (max-width: 640px) {
  .frp-flex {
    padding-top: var(--frp-space-12);
    padding-bottom: var(--frp-space-12);
  }

  .frp-flex-cards--cols-2,
  .frp-flex-cards--cols-3,
  .frp-flex-cards--cols-4,
  .frp-flex--steps .frp-process__steps.frp-flex-steps--3,
  .frp-flex--steps .frp-process__steps.frp-flex-steps--4,
  .frp-flex--steps .frp-process__steps.frp-flex-steps--6,
  .frp-flex--steps .frp-process__steps.frp-flex-steps--7,
  .frp-flex--steps .frp-process__steps.frp-flex-steps--8 {
    grid-template-columns: 1fr;
  }

  .frp-flex-columns__item {
    padding: var(--frp-space-6);
  }

  .frp-flex-hero__actions .frp-btn {
    width: 100%;
    white-space: normal;
  }
}