/* =========================================
   WHAT-WE-BUILD.CSS
   Service detail pages:
   /what-we-build/custom-homes/
   /what-we-build/acreage-homes/
   /what-we-build/secondary-dwellings/
   ========================================= */


/* =========================================
   HERO — full-height, image bg, dark overlay
   ========================================= */

.wwb_hero {
  width: 100%;
  min-height: 80svh;
  display: flex;
  align-items: flex-end;
  position: relative;
  overflow: hidden;
  background-color: var(--swatch--dark);
}

.wwb_hero_bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.wwb_hero_bg .g_visual_img {
  opacity: 0.4;
}

.wwb_hero_container {
  position: relative;
  z-index: 2;
  width: 100%;
  padding-bottom: var(--size--5rem);
  padding-top: var(--size--4rem);
}

.wwb_hero_breadcrumb {
  font-family: var(--font--secondary-family);
  font-size: var(--text-small--font-size);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  opacity: 0.55;
  margin-bottom: var(--size--1-5rem);
}

.wwb_hero_breadcrumb a {
  text-decoration: none;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.wwb_hero_breadcrumb a:hover { opacity: 1; }

.wwb_hero_title {
  font-family: var(--font--primary-family);
  font-size: clamp(3.5rem, 8vw, 8rem);
  line-height: var(--line-height--1em);
  text-transform: uppercase;
  overflow: clip;
}

.wwb_hero_tagline {
  font-family: var(--font--secondary-family);
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  line-height: var(--line-height--1-3em);
  font-weight: 300;
  max-width: 56ch;
  margin-top: var(--size--2rem);
  opacity: 0.85;
}

.wwb_hero_cta_wrap {
  margin-top: var(--size--3rem);
  display: flex;
  gap: var(--size--1-5rem);
  flex-wrap: wrap;
  align-items: center;
}


/* =========================================
   INTRO — two-column overview with label
   ========================================= */

.wwb_intro {
  width: 100%;
}

.wwb_intro_grid {
  display: grid;
  grid-template-columns: var(--grid-main);
  gap: var(--size--3rem);
  align-items: start;
  overflow: hidden;
}

.wwb_intro_label.u-column-custom {
  grid-column: 1 / span 2;
}

.wwb_intro_content.u-column-custom {
  grid-column: 3 / span 5;
  min-width: 0;
}

.wwb_intro_aside.u-column-custom {
  grid-column: 8 / span 4;
}

.wwb_section_label {
  font-family: var(--font--secondary-family);
  font-size: var(--text-small--font-size);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity: 0.5;
  padding-top: 0.3em;
}

.wwb_intro_heading {
  font-family: var(--font--primary-family);
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: var(--line-height--1-1em);
  text-transform: uppercase;
  overflow: clip;
  margin-bottom: var(--size--2rem);
}

.wwb_intro_body {
  font-family: var(--font--secondary-family);
  font-size: 1.25rem;
  line-height: 1.6;
  font-weight: 300;
  overflow-wrap: break-word;
  min-width: 0;
}

.wwb_intro_body + .wwb_intro_body {
  margin-top: var(--size--1-5rem);
}

/* Aside — key info pills */
.wwb_intro_aside_label {
  font-family: var(--font--secondary-family);
  font-size: var(--text-small--font-size);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.5;
  margin-bottom: var(--size--1rem);
}

.wwb_pill_list {
  display: flex;
  flex-direction: column;
  gap: var(--size--0-75rem);
}

.wwb_pill {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font--secondary-family);
  font-size: var(--text-small--font-size);
  padding: 0.5rem 1rem;
  border: 1px solid currentColor;
  border-radius: 100px;
  opacity: 0.65;
  width: fit-content;
}


/* =========================================
   WHAT'S INCLUDED — accordion reuse
   Inherits .sr_process_* from process.css
   ========================================= */

.wwb_includes_header {
  padding-bottom: var(--size--3rem);
}

.wwb_includes_heading {
  font-family: var(--font--primary-family);
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: var(--line-height--1-1em);
  text-transform: uppercase;
  overflow: clip;
}


/* =========================================
   PROCESS STEPS — numbered horizontal flow
   ========================================= */

.wwb_process {
  width: 100%;
}

.wwb_process_header {
  margin-bottom: var(--size--4rem);
}

.wwb_process_heading {
  font-family: var(--font--primary-family);
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: var(--line-height--1-1em);
  text-transform: uppercase;
  overflow: clip;
}

.wwb_process_link {
  display: inline-block;
  margin-top: -2rem;
  margin-bottom: var(--size--4rem);
  font-family: var(--font--secondary-family);
  font-size: var(--text-small--font-size);
  letter-spacing: 0.06em;
  opacity: 0.5;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.wwb_process_link:hover {
  opacity: 1;
}

.wwb_steps_grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--size--2rem);
}

.wwb_step {
  padding-top: var(--size--1-5rem);
  border-top: 1px solid currentColor;
}

.wwb_step_num {
  font-family: var(--font--primary-family);
  font-size: var(--text-large--font-size);
  line-height: var(--line-height--1em);
  opacity: 0.3;
  margin-bottom: var(--size--1rem);
}

.wwb_step_name {
  font-family: var(--font--primary-family);
  font-size: var(--text-large--font-size);
  line-height: var(--line-height--1-1em);
  text-transform: uppercase;
  overflow: clip;
  margin-bottom: var(--size--0-75rem);
}

.wwb_step_desc {
  font-family: var(--font--secondary-family);
  font-size: var(--text-main--font-size);
  line-height: var(--line-height--1-3em);
  opacity: 0.7;
}


/* =========================================
   GALLERY ROW — 3 images side by side
   ========================================= */

.wwb_gallery {
  width: 100%;
}

.wwb_gallery_grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: var(--size--1rem);
}

.wwb_gallery_item {
  overflow: hidden;
}

.wwb_gallery_img {
  aspect-ratio: 3/4;
  position: relative;
  overflow: hidden;
}

.wwb_gallery_img img {
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.wwb_gallery_item:hover .wwb_gallery_img img {
  transform: scale(1.03);
}

.wwb_gallery_caption {
  font-family: var(--font--secondary-family);
  font-size: var(--text-small--font-size);
  opacity: 0.5;
  padding-top: var(--size--0-75rem);
}


/* =========================================
   FAQ — inherits accordion from process.css
   ========================================= */

.wwb_faq_header {
  margin-bottom: var(--size--3rem);
}

.wwb_faq_heading {
  font-family: var(--font--primary-family);
  font-size: clamp(2rem, 3vw, 3rem);
  line-height: var(--line-height--1-1em);
  text-transform: uppercase;
  overflow: clip;
}


/* =========================================
   RELATED SERVICES STRIP
   ========================================= */

.wwb_related {
  width: 100%;
  border-top: 1px solid rgba(255,255,255,0.1);
  padding: var(--size--4rem) var(--padding-horizontal--main);
}

[data-theme="light"] .wwb_related {
  border-top-color: rgba(0,0,0,0.08);
}

.wwb_related_label {
  font-family: var(--font--secondary-family);
  font-size: var(--text-small--font-size);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  opacity: 0.5;
  margin-bottom: var(--size--2rem);
}

.wwb_related_grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--size--1-5rem);
}

.wwb_related_card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--size--1rem);
  padding: var(--size--2rem);
  border: 1px solid currentColor;
  text-decoration: none;
  opacity: 0.65;
  transition: opacity 0.2s ease;
}

.wwb_related_card:hover {
  opacity: 1;
}

.wwb_related_card_name {
  font-family: var(--font--primary-family);
  font-size: var(--text-large--font-size);
  line-height: var(--line-height--1-1em);
  text-transform: uppercase;
  overflow: clip;
}

.wwb_related_card_arrow {
  font-size: var(--text-large--font-size);
  flex-shrink: 0;
}


/* =========================================
   RESPONSIVE — TABLET (max 991px)
   ========================================= */

@media screen and (max-width: 991px) {

  .wwb_hero_title {
    font-size: clamp(2.5rem, 9vw, 5rem);
  }

  .wwb_intro_grid {
    display: flex;
    flex-direction: column;
    gap: var(--size--2rem);
  }

  .wwb_steps_grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .wwb_gallery_grid {
    grid-template-columns: 1fr 1fr;
  }

  .wwb_gallery_grid .wwb_gallery_item:last-child {
    display: none;
  }

  .wwb_related_grid {
    grid-template-columns: 1fr;
  }
}


/* =========================================
   RESPONSIVE — MOBILE (max 767px)
   ========================================= */

@media screen and (max-width: 767px) {

  .wwb_hero {
    min-height: 65svh;
  }

  .wwb_steps_grid {
    grid-template-columns: 1fr 1fr;
  }

  .wwb_gallery_grid {
    grid-template-columns: 1fr;
  }

  .wwb_gallery_grid .wwb_gallery_item:last-child {
    display: block;
  }

  .wwb_gallery_img {
    aspect-ratio: 16/9;
  }
}


/* =========================================
   RESPONSIVE — MOBILE PORTRAIT (max 479px)
   ========================================= */

@media screen and (max-width: 479px) {

  .wwb_steps_grid {
    grid-template-columns: 1fr;
  }

  .wwb_hero_cta_wrap {
    flex-direction: column;
    align-items: flex-start;
  }
}