/* ==========================================================================
   BLOCK: .sh-home-types
   "The right home looks different for everyone." — home type list section.

   Built from the Figma frame "5" (node 321:842, 1936 x 2148).
   The design has no Auto Layout, so every measurement below was taken from
   the design and re-expressed as document flow (Flexbox) + proportional
   percentages of the 1500px content column:

     content column  1500px   (max-width 1548 incl. 24px gutters, centred)
     intro column     487px = 32.4667%
     column gap       146px =  9.7333%
     card column      867px = 57.8000%

   All rules are scoped under .sh-home-types so nothing leaks into the
   surrounding page.
   ========================================================================== */

.sh-home-types {
  /* Palette (from the Figma layers) */
  --sh-ht-ink: #282728;
  --sh-ht-accent: #c33525;
  --sh-ht-surface: #ffffff;
  --sh-ht-bg: #f6f6f6;

  /* Type (Canto = display serif, Agenda = UI sans — both licensed webfonts
     already loaded by the theme; fallbacks kept close in proportion) */
  --sh-ht-font-display: "Canto", "Canto Web", Georgia, "Times New Roman", serif;
  --sh-ht-font-text: "Agenda", "Agenda Web", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Layout proportions */
  --sh-ht-col-intro: 42%;
  --sh-ht-col-cards: clamp(30px, 39.0104166667vw + .1px, 749px);
  --sh-ht-col-gap: 9.7333%;

  /* Card proportions (% of the 867px card) */
  --sh-ht-media-w: 42.4452%;
  --sh-ht-body-pad-left: 5.1903%;
  --sh-ht-body-pad-right: 5.6517%;

  /* Per-card photo crop — overridden by the card modifiers below */
  --sh-ht-photo-w: 100%;
  --sh-ht-photo-x: 0;
  --sh-ht-photo-y: 0;

  box-sizing: border-box;
  padding: 104px 20px 127px;
  background-color: var(--sh-ht-bg);
  background-image: url("../../img/v2/texture-section.png");
  background-repeat: repeat;
  background-position: 0 0;
  font-family: var(--sh-ht-font-text);
  color: var(--sh-ht-ink);
  -webkit-font-smoothing: antialiased;
}

.sh-home-types *,
.sh-home-types *::before,
.sh-home-types *::after {
  box-sizing: border-box;
}

.sh-home-types__inner {
  display: flex;
  align-items: flex-start;
  gap: var(--sh-ht-col-gap);
  width: clamp(990px, 68.75vw + .1px, 1320px);
  max-width: 100%;
  margin: 0 auto;
}

/* --------------------------------------------------------------------------
   ELEMENT: intro column (Figma "Text" / "Frame 1370", 32px stack)
   -------------------------------------------------------------------------- */

.sh-home-types__intro {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 32px;
  flex: 0 1 var(--sh-ht-col-intro);
  min-width: 0;
}
@media screen and (min-width: 1025px) {
  .sh-home-types__intro {
    position: sticky;
    top: 170px;
  }
}

.sh-home-types__title {
  margin: 0;
  font-family: var(--sh-ht-font-display);
  font-size: clamp(45px, 4.167vw + .1px, 80px);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -1.3px;
  color: var(--sh-ht-ink);
}

.sh-home-types__title-accent {
  color: var(--sh-ht-accent);
  line-height: 0;
}

.sh-home-types__lead {
  margin: 0;
  font-size: clamp(14px, 1.041vw + .1px, 20px);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: -0.4px;
  color: var(--sh-ht-ink);
}

/* ELEMENT: primary button (Figma "Button", 293 x 64) */
.sh-home-types__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  padding: 23px 51px;
  background-color: var(--sh-ht-accent);
  background-image: url('../../img/v2/pattern-btn-red-461.svg');
  background-repeat: repeat;
  background-position: 0 0;
  border-radius: 0;
  font-family: var(--sh-ht-font-text);
  font-size: clamp(14px, 0.9375vw + .1px, 18px);
  font-weight: 500;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--sh-ht-surface);
}

/* --------------------------------------------------------------------------
   ELEMENT: card column (six "Icon Card" frames, 39px apart)
   -------------------------------------------------------------------------- */

.sh-home-types__list {
  display: flex;
  flex-direction: column;
  gap: 39px;
  flex: 0 1 var(--sh-ht-col-cards);
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sh-home-types__item {
  display: block;
}

.sh-home-types__card {
  display: flex;
  align-items: stretch;
  width: 100%;
  background-color: var(--sh-ht-surface);
  background-image: url("../../img/v2/texture-card.png");
  background-repeat: repeat;
  background-position: 0 0;
  background-size: 125.25px 38.25px; /* the texture sits at 0.75 scale on the cards */
  border-radius: 0;
}

/* ELEMENT: photo frame (368 x 287 window, image clipped) */
.sh-home-types__media {
  flex: 0 0 var(--sh-ht-media-w);
  aspect-ratio: 368 / 287;
  overflow: hidden;
}

.sh-home-types__photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  margin: 0;
  border: 0;

}

/* MODIFIERS: the exact crop each photo has in the design */
.sh-home-types__card--front-drive {
  --sh-ht-photo-w: 100%;
  --sh-ht-photo-x: 0;
  --sh-ht-photo-y: 0;
}

.sh-home-types__card--laned {
  --sh-ht-photo-w: 127.4457%;
  --sh-ht-photo-x: -13.587%;
  --sh-ht-photo-y: -4.3478%;
}

.sh-home-types__card--estate {
  --sh-ht-photo-w: 137.5%;
  --sh-ht-photo-x: -24.1848%;
  --sh-ht-photo-y: -13.8587%;
}

.sh-home-types__card--duplex {
  --sh-ht-photo-w: 121.4674%;
  --sh-ht-photo-x: -16.8478%;
  --sh-ht-photo-y: -2.4457%;
}

.sh-home-types__card--townhome {
  --sh-ht-photo-w: 120.6522%;
  --sh-ht-photo-x: -0.8152%;
  --sh-ht-photo-y: -0.8152%;
}

.sh-home-types__card--condo {
  --sh-ht-photo-w: 116.5761%;
  --sh-ht-photo-x: -16.5761%;
  --sh-ht-photo-y: 0;
}

/* ELEMENT: card copy (Figma "Frame 1318", 405 wide, 22px stack, centred) */
.sh-home-types__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 22px;
  min-width: 0;
  padding: 16px var(--sh-ht-body-pad-right) 16px var(--sh-ht-body-pad-left);
}

.sh-home-types__card-title {
  margin: 0;
  font-family: var(--sh-ht-font-display);
  font-size: 38px;
  font-weight: 400;
  line-height: 32px;
  letter-spacing: -0.76px;
  color: var(--sh-ht-ink);
}
.sh-home-types__card .sh-home-types__card-title a {
  text-decoration: none;
}

.sh-home-types__card-text {
  margin: 0;
  font-size: clamp(14px, 1.041vw + .1px, 20px);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.4px;
  color: var(--sh-ht-ink);
}

.sh-home-types__card a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: .2em;
}
.sh-home-types__card a:hover {
  text-decoration: none;
  color: #F34C7F;
}

/* ELEMENT: "Discover …" link row (Figma "Frame 1", 12px gap) */
.sh-home-types__link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  max-width: 100%;
  text-decoration: none;
  color: var(--sh-ht-ink);
}

.sh-home-types__link-label {
  font-size: 18px;
  font-weight: 500;
  line-height: 18px;
  text-transform: uppercase;
}

.sh-home-types__link-arrow {
  display: block;
  flex: 0 0 auto;
  width: 21px;
  height: 15px;
  color: var(--sh-ht-accent);
}

/* ==========================================================================
   Tablet — ≤1024px: the two columns stack, type steps down proportionally.
   ========================================================================== */

@media (max-width: 1024px) {
  .sh-home-types {
    --sh-ht-media-w: 38%;
    --sh-ht-body-pad-left: 4.5%;
    --sh-ht-body-pad-right: 4.5%;
    padding: 72px 0 80px;
  }

  .sh-home-types__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 48px;
  }

  .sh-home-types__intro,
  .sh-home-types__list {
    flex: 0 1 auto;
  }

  .sh-home-types__intro {
    max-width: 620px;
  }

  .sh-home-types__title {
    font-size: 48px;
    line-height: 48px;
    letter-spacing: -0.96px;
  }

  .sh-home-types__lead {
    font-size: 18px;
    line-height: 31px;
    letter-spacing: -0.36px;
  }

  .sh-home-types__list {
    gap: 28px;
  }

  .sh-home-types__body {
    gap: 18px;
    padding-top: 20px;
    padding-bottom: 20px;
  }

  .sh-home-types__card-title {
    font-size: 32px;
    line-height: 30px;
    letter-spacing: -0.64px;
  }

  .sh-home-types__card-text {
    font-size: 18px;
    line-height: 28px;
    letter-spacing: -0.36px;
  }
}

/* ==========================================================================
   Mobile — ≤768px: the photo moves above the copy, everything full width.
   ========================================================================== */

@media (max-width: 768px) {
  .sh-home-types {
    padding: 56px 0 64px;
  }

  .sh-home-types__inner {
    gap: 40px;
    padding: 0 20px;
  }

  .sh-home-types__intro {
    gap: 24px;
    max-width: none;
  }

  .sh-home-types__title {
    font-size: 38px;
    line-height: 40px;
    letter-spacing: -0.76px;
  }

  .sh-home-types__lead {
    font-size: 17px;
    line-height: 28px;
    letter-spacing: -0.34px;
  }

  .sh-home-types__cta {
    padding: 20px 36px;
    font-size: 16px;
    line-height: 16px;
  }

  .sh-home-types__list {
    gap: 24px;
  }

  .sh-home-types__card {
    flex-direction: column;
  }

  .sh-home-types__media {
    flex: 0 0 auto;
    width: 100%;
    /* same 368:287 window as the design, so every photo keeps its crop */
    aspect-ratio: 368 / 287;
  }

  .sh-home-types__body {
    gap: 16px;
    padding: 24px;
  }

  .sh-home-types__card-title {
    font-size: 28px;
    line-height: 28px;
    letter-spacing: -0.56px;
  }

  .sh-home-types__card-text {
    font-size: 17px;
    line-height: 27px;
    letter-spacing: -0.34px;
  }

  .sh-home-types__link-label {
    font-size: 16px;
    line-height: 16px;
  }
}

/* ==========================================================================
   Small mobile — ≤400px (holds down to 320px).
   ========================================================================== */

@media (max-width: 400px) {
  .sh-home-types {
    padding: 44px 0 52px;
  }

  .sh-home-types__inner {
    padding: 0 16px;
  }

  .sh-home-types__title {
    font-size: 32px;
    line-height: 34px;
    letter-spacing: -0.64px;
  }

  .sh-home-types__cta {
    width: 100%;
    padding: 19px 24px;
  }

  .sh-home-types__body {
    padding: 20px;
  }

  .sh-home-types__card-title {
    font-size: 26px;
    line-height: 26px;
  }

  .sh-home-types__link {
    gap: 10px;
  }

  .sh-home-types__link-label {
    font-size: 15px;
    line-height: 15px;
  }
}



.sh-home-types.kd-v3 {
    background: #28282a url(/wp-content/uploads/2026/10/top-right-bg-dark.jpg) no-repeat top left / 100% auto scroll;
  --sh-ht-ink: #fff;
  --sh-ht-accent: var(--kd-v3-red);
  --sh-ht-bg: #333132;
  --sh-ht-surface: #494849;
}
.sh-home-types.kd-v3 .sh-home-types__card {
  background-image: none;
}
.sh-home-types.kd-v3 .sh-home-types__body {
  gap: 10px;
}
.sh-home-types.kd-v3 .sh-home-types__cta {
  color: #fff !important;
}
.sh-home-types.kd-v3 .sh-home-types__card-title {
  color: #F34C7F;
  font-family: inherit;
  font-size: clamp(18px, 1.25vw + .1px, 24px);
  letter-spacing: .03em;
  text-transform: uppercase;
  font-weight: 600;
}
.sh-home-types.kd-v3 .sh-home-types__link-arrow {
  fill: #fff;
  width: clamp(30px, 2.08vw + .1px, 40px);
  height: auto;
  transition: .3s ease;
}
.sh-home-types.kd-v3 .sh-home-types__link-arrow:hover {
  fill: #F34C7F;
}