/* ==========================================================================
   AL13 – Residential Single Family: system blocks (plank / panel / batten)
   Every property is !important so Elementor / theme rules cannot override it;
   CSS variables (--*) are left as they are.
   Content: Elementor containers + widgets (template rsf-plank.json)
   Styles: this file only. Values measured from the old section cad49d7.
   Breakpoints match this site's Elementor settings:
     desktop > 1300, tablet_extra <= 1300, tablet <= 1025, mobile <= 769.

     .rsf-sys-wrap            full width, side gutter
       .rsf-sys               grey card: content left, illustration right
         .rsf-sys__content    logo, text, button (normal flow, no overlaps)
           .rsf-sys__logo
           .rsf-sys__text
           .rsf-sys__btn
         .rsf-sys__media
           .rsf-sys__img
   ========================================================================== */

.rsf-sys-wrap {
  --rsf-gutter: 32px;
  --rsf-wrap-top: 36px;
  --rsf-card-w: 1272px;
  --rsf-pad: 35px 8px 35px 68px;
  --rsf-col-gap: 40px;
  --rsf-content-w: 520px;
  --rsf-media-w: 569px;
  --rsf-logo-w: 275px;
  --rsf-logo-gap: 26px;
  --rsf-btn-gap: 46px;
  --rsf-fs: 29px;
  --rsf-lh: 35px;
  --rsf-ls: 0.3px;
  --rsf-ws: 2px;
  --rsf-text: #4A4A4C;
  --rsf-card-bg: #F2F2F2;
  --rsf-yellow: #FFC554;
  --rsf-dark: #4A4A4A;
}

/* ---------- Reset Elementor container / widget spacing for our blocks ---------- */

.e-con.rsf-sys-wrap,
.e-con.rsf-sys,
.e-con.rsf-sys__content,
.e-con.rsf-sys__media {
  --padding-top: 0px;
  --padding-right: 0px;
  --padding-bottom: 0px;
  --padding-left: 0px;
  --gap: 0px;
  --row-gap: 0px;
  --column-gap: 0px;
  --margin-top: 0px;
  --margin-bottom: 0px;
  --display: flex;
  display: flex !important;
  flex-wrap: nowrap !important;
  padding: 0 !important;
  gap: 0 !important;
  margin: 0 !important;
  min-width: 0 !important;
}

.rsf-sys-wrap .elementor-widget,
.rsf-sys-wrap .elementor-widget-container {
  margin: 0 !important;
  padding: 0 !important;
}

/* ---------- Layout ---------- */

.e-con.rsf-sys-wrap {
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  padding: var(--rsf-wrap-top) var(--rsf-gutter) var(--rsf-wrap-bottom, 0px) !important;
}

.e-con.rsf-sys {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: var(--rsf-col-gap) !important;
  width: 100% !important;
  max-width: var(--rsf-card-w) !important;
  padding: var(--rsf-pad) !important;
  background-color: var(--rsf-card-bg) !important;
  border-radius: 20px !important;
  box-sizing: border-box !important;
}

.e-con.rsf-sys__content {
  flex: 0 1 var(--rsf-content-w) !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

.e-con.rsf-sys__media {
  flex: 0 1 var(--rsf-media-w) !important;
  flex-direction: column !important;
}

/* ---------- Logo ---------- */

.rsf-sys-wrap .rsf-sys__logo {
  width: var(--rsf-logo-w) !important;
  max-width: 100% !important;
}

.rsf-sys-wrap .rsf-sys__logo img,
.rsf-sys-wrap .rsf-sys__img img {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
}

/* ---------- Text ---------- */

.rsf-sys-wrap .rsf-sys__text {
  width: 100% !important;
  margin-top: var(--rsf-logo-gap) !important;
}

.rsf-sys-wrap .rsf-sys__text p,
.rsf-sys-wrap .rsf-sys__text strong {
  margin: 0 !important;
  font-family: "Helvetica Neue LT  Light", "Open Sans", Arial, sans-serif !important;
  font-size: var(--rsf-fs) !important;
  font-weight: 700 !important;
  line-height: var(--rsf-lh) !important;
  letter-spacing: var(--rsf-ls) !important;
  word-spacing: var(--rsf-ws) !important;
  color: var(--rsf-text) !important;
  text-align: left !important;
}

/* ---------- Button ---------- */

.rsf-sys-wrap .rsf-sys__btn {
  margin-top: var(--rsf-btn-gap) !important;
}

.rsf-sys-wrap .rsf-sys__btn .elementor-button {
  display: inline-block !important;
  padding: 12px 24px !important;
  font-family: "Helvetica Neue LT  Medium", "Open Sans", Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 400 !important;
  line-height: 15px !important;
  color: var(--rsf-dark) !important;
  background-color: var(--rsf-yellow) !important;
  border: 0 !important;
  border-radius: 50px !important;
  transition: all 0.3s !important;
}

.rsf-sys-wrap .rsf-sys__btn .elementor-button:hover,
.rsf-sys-wrap .rsf-sys__btn .elementor-button:focus {
  color: var(--rsf-yellow) !important;
  background-color: var(--rsf-dark) !important;
}

.rsf-sys-wrap .rsf-sys__btn .elementor-button-text {
  font: inherit !important;
  color: inherit !important;
}

/* ---------- Per system: desktop illustration width as on the old sections ---------- */

@media (min-width: 1301px) {
  .rsf-sys-wrap.rsf-sys-wrap--panel { --rsf-media-w: 534px; }
  .rsf-sys-wrap.rsf-sys-wrap--batten { --rsf-media-w: 446px; }
}

/* ---------- Tablet landscape (tablet_extra) ---------- */

@media (max-width: 1300px) {
  .rsf-sys-wrap {
    --rsf-wrap-top: 0px;
    --rsf-pad: 36px 24px 36px 48px;
    --rsf-content-w: 534px;
    --rsf-media-w: 445px;
    --rsf-logo-w: 275px;
    --rsf-logo-gap: 26px;
    --rsf-btn-gap: 40px;
    --rsf-fs: 25px;
    --rsf-lh: 30px;
    --rsf-ls: 1px;
    --rsf-ws: 1px;
  }
}

/* ---------- Tablet ---------- */

@media (max-width: 1025px) {
  .rsf-sys-wrap {
    --rsf-gutter: 24px;
    --rsf-wrap-top: 23px;
    --rsf-pad: 34px 24px 34px 42px;
    --rsf-col-gap: 32px;
    --rsf-content-w: 400px;
    --rsf-media-w: 367px;
    --rsf-logo-w: 231px;
    --rsf-logo-gap: 20px;
    --rsf-btn-gap: 20px;
    --rsf-fs: 19px;
    --rsf-lh: 21px;
  }
}

/* ---------- Mobile ---------- */

@media (max-width: 769px) {
  .rsf-sys-wrap {
    --rsf-gutter: 19px;
    --rsf-wrap-top: 0px;
    --rsf-pad: 18px 20px 31px;
    --rsf-col-gap: 0px;
    --rsf-logo-w: 215px;
    --rsf-logo-gap: 0px;
    --rsf-btn-gap: 20px;
    --rsf-fs: 17px;
    --rsf-lh: 25.5px;
    --rsf-ls: normal;
    --rsf-ws: 0px;
  }

  /* logo, illustration, text, button in one column */
  .e-con.rsf-sys {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .e-con.rsf-sys__content,
  .e-con.rsf-sys__media {
    display: contents !important;
  }

  .rsf-sys-wrap .rsf-sys__logo { order: 1 !important; align-self: center !important; }
  .rsf-sys-wrap .rsf-sys__img { order: 2 !important; align-self: center !important; width: 100% !important; max-width: 346px !important; margin-top: 23px !important; }
  .rsf-sys-wrap .rsf-sys__text { order: 3 !important; margin-top: 23px !important; }
  .rsf-sys-wrap .rsf-sys__btn { order: 4 !important; align-self: center !important; }

  .rsf-sys-wrap .rsf-sys__btn .elementor-button {
    padding: 11px 14px 9px !important;
  }
}

/* ---------- Photo card (rsf-sys-wrap--photo): photo instead of illustration,
   no button, smaller text — as on the old section 2543c31 ---------- */

.rsf-sys-wrap.rsf-sys-wrap--photo {
  --rsf-media-w: 477px;
  --rsf-logo-gap: 54px;
  --rsf-fs: 19px;
  --rsf-lh: 26px;
  --rsf-ls: normal;
  --rsf-ws: 0px;
}

.rsf-sys-wrap--photo .rsf-sys__img img {
  border-radius: 20px !important;
}

@media (max-width: 1300px) {
  .rsf-sys-wrap.rsf-sys-wrap--photo {
    --rsf-media-w: 422px;
    --rsf-logo-gap: 30px;
    --rsf-fs: 17px;
    --rsf-lh: 25px;
  }
}

@media (max-width: 1025px) {
  .rsf-sys-wrap.rsf-sys-wrap--photo {
    --rsf-media-w: 364px;
    --rsf-logo-gap: 26px;
  }
}

@media (max-width: 769px) {
  .rsf-sys-wrap.rsf-sys-wrap--photo {
    --rsf-logo-gap: 0px;
  }
}

/* ---------- Spacing above / below each block ----------
   Positive values only. Measured from the old sections: distance from the
   neighbour section's content to the card stays as it was (panel and plank
   exactly; batten-photo up to 36px more, because its old section used
   margin-top -36px). Plank uses the defaults. */

.rsf-sys-wrap.rsf-sys-wrap--panel { --rsf-wrap-top: 100px; --rsf-wrap-bottom: 0px; }
.rsf-sys-wrap.rsf-sys-wrap--batten { --rsf-wrap-top: 36px; }
.rsf-sys-wrap.rsf-sys-wrap--batten-photo { --rsf-wrap-top: 0px; }

@media (max-width: 1300px) {
  .rsf-sys-wrap.rsf-sys-wrap--panel { --rsf-wrap-top: 35px; }
  .rsf-sys-wrap.rsf-sys-wrap--batten { --rsf-wrap-top: 27px; }
}

@media (max-width: 1025px) {
  .rsf-sys-wrap.rsf-sys-wrap--panel { --rsf-wrap-top: 27px; --rsf-wrap-bottom: 30px; }
  .rsf-sys-wrap.rsf-sys-wrap--batten { --rsf-wrap-top: 30px; }
}

@media (max-width: 769px) {
  .rsf-sys-wrap.rsf-sys-wrap--panel { --rsf-wrap-top: 3px; --rsf-wrap-bottom: 20px; }
  .rsf-sys-wrap.rsf-sys-wrap--batten { --rsf-wrap-top: 0px; }
}