/* ==========================================================================
   HOME — sections that exist only on the homepage
   1. Hero   2. About   3. Why choose us   4. Reviews head
   ========================================================================== */

/* 1. HERO ----------------------------------------------------------------
   Layout of Construcfy "home v2": one large photo with the text over it.
   The photo starts right under the header, lines up with the left edge of the
   page content and runs to the right edge of the screen. The yellow of the
   header area stops partway down (--hang), and two white squares cut the
   photo's lower-left corner. A round button at the bottom right scrolls to
   the figures and credentials.                                             */
.page-top--home {
  --hero-pixel: clamp(36px, 6.9vw, 100px);   /* side of each white square */
  --hang: calc(var(--hero-pixel) * 3.2);     /* white area under the yellow */
  /* Space between the content column and the edge of the screen: the photo
     grows into it so it reaches the right edge of the page */
  --bleed: max(var(--container-pad), calc((100vw - var(--container-max)) / 2));
  background: linear-gradient(to bottom, var(--color-top) 0, var(--color-top) calc(100% - var(--hang)), var(--color-bg) calc(100% - var(--hang)));
  overflow-x: clip;   /* the photo never adds a sideways scroll */
}

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 560px;
  margin-right: calc(var(--bleed) * -1);
  padding: clamp(2rem, 7.8vw, 7rem) clamp(1.5rem, 7.6vw, 6.875rem) calc(var(--hero-pixel) * 2 + 1.25rem);
  color: var(--white);
}

@media (min-width: 992px) {
  .hero {
    min-height: 700px;                                              /* fallback */
    min-height: clamp(620px, calc(100svh - var(--header-height)), 800px);
  }
}

.hero__content {
  position: relative;
  z-index: 2;
  max-width: 52rem;
}

.hero__title {
  max-width: 14em;
  color: var(--white);
  font-size: var(--text-hero);
  line-height: 1.06;
}

.hero__text {
  max-width: 37rem;
  margin: var(--space-s) 0 var(--space-m);
  color: rgba(255, 255, 255, 0.88);
  font-size: var(--text-m);
  line-height: 1.5;
}

@media (min-width: 768px) {
  .hero__text {
    margin: var(--space-m) 0 var(--space-l);
    font-size: var(--text-l);
  }
}

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem 0.75rem;
  margin-top: var(--space-m);
  font-size: var(--text-s);
  font-weight: 600;
}

.hero__trust .rating .icon {
  width: 1rem;
  height: 1rem;
}

.hero__trust .rating {
  color: var(--yellow-500);
}

/* The photo fills the whole hero; a navy layer keeps the text readable.
   On wide screens it is darkest behind the text and lets the photo show on
   the right; on narrow screens the text covers the whole photo. */
.hero .hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: var(--navy-900);
}

/* The electrician stands on the right of the photo (the crop is set in photos.json, 78%).
   On a wide screen the crop moves so he stands a little further right, clear of the headline. */
@media (min-width: 1200px) {
  .hero .hero__media img {
    object-position: 45% 50% !important;
  }
}

.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 15, 48, 0.78) 0%, rgba(0, 15, 48, 0.66) 50%, rgba(0, 15, 48, 0.86) 100%);
}

@media (min-width: 992px) {
  .hero__media::after {
    background: linear-gradient(90deg, rgba(0, 15, 48, 0.9) 0%, rgba(0, 15, 48, 0.76) 45%, rgba(0, 15, 48, 0.3) 100%);
  }
}

/* The two white squares: top-left and bottom-right of a 2 × 2 block */
.hero__squares {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 3;
  width: calc(var(--hero-pixel) * 2);
  height: calc(var(--hero-pixel) * 2);
  pointer-events: none;
}

.hero__squares i {
  position: absolute;
  width: var(--hero-pixel);
  height: var(--hero-pixel);
  background: var(--color-bg);
}

.hero__squares i:nth-child(1) { left: 0; top: 0; }
.hero__squares i:nth-child(2) { right: 0; bottom: 0; }

/* Round "scroll down" button */
.hero__scroll {
  position: absolute;
  right: clamp(1rem, 3.7vw, 3.3rem);
  bottom: clamp(1rem, 4.4vw, 4rem);
  z-index: 3;
  display: grid;
  place-items: center;
  width: clamp(56px, 9.7vw, 140px);
  height: clamp(56px, 9.7vw, 140px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
  color: var(--white);
}

.hero__scroll .icon {
  width: 34%;
  height: 34%;
  stroke-width: 1.25;
}

.hero__scroll:hover,
.hero__scroll:focus-visible {
  border-color: var(--white);
  background: var(--white);
  color: var(--navy-900);
}

/* Credentials under the hero: licenses, accreditations, Google rating and
   24/7 service, all as badges in one row (see .badges in components.css) */
.trust {
  padding-top: clamp(2.5rem, 1.5rem + 4vw, 5rem);
}

/* 2. ABOUT ---------------------------------------------------------------- */
.about {
  display: grid;
  gap: var(--space-l);
}

.about__body p + p {
  margin-top: var(--space-s);
}

.about__body .btn-row {
  margin-top: var(--space-m);
}

.about__social {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  margin-top: var(--space-l);
  padding-top: var(--space-m);
  border-top: 1px solid var(--color-line);
  color: var(--color-ink);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.about__social div {
  display: flex;
  gap: var(--space-s);
}

.about__social a {
  color: var(--color-ink);
}

.about__media-b {
  --pixel-color: var(--color-bg);
}

@media (min-width: 992px) {
  .about {
    grid-template-columns: 5fr 6fr;
    grid-template-areas:
      "a head"
      "a b"
      "body b";
    grid-template-rows: auto auto 1fr;
    column-gap: var(--space-xl);
  }

  .about__head { grid-area: head; }
  .about__media-a { grid-area: a; }
  .about__body { grid-area: body; }
  .about__media-b { grid-area: b; }
}

/* 3. WHY CHOOSE US -------------------------------------------------------- */
.why {
  display: grid;
}

.why__media {
  aspect-ratio: 4 / 3;
}

.why__panel {
  --pixel-color: var(--color-bg);
  position: relative;
  padding: clamp(2rem, 1rem + 5vw, 5rem);
}

.why__head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-m);
}

.why__intro > p:not(.eyebrow) {
  max-width: 32rem;
  margin: var(--space-s) 0 var(--space-l);
}

.why__panel .btn {
  margin-top: var(--space-l);
}

@media (min-width: 992px) {
  .why {
    grid-template-columns: 5fr 7fr;
    align-items: stretch;
  }

  .why__media {
    aspect-ratio: auto;
    margin-bottom: var(--space-xl);
  }

  .why__panel {
    margin-top: var(--space-xl);
    margin-left: calc(var(--space-xl) * -1);
    z-index: 1;
  }
}

/* 4. REVIEWS HEAD --------------------------------------------------------- */
.reviews-head {
  display: grid;
  gap: var(--space-s);
  margin-bottom: var(--space-l);
}

@media (min-width: 900px) {
  .reviews-head {
    grid-template-columns: 1.4fr 1fr;
    align-items: end;
    gap: var(--space-xl);
  }
}

.reviews-head .rating {
  margin-bottom: var(--space-xs);
}