/* Page sections. Shared components live in brand.css. */

/* Hero: inset dark image panel that the site header sits over */
.hero {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: var(--inset);
  padding: 126px 0 80px;
  border-radius: var(--radius);
  background-color: var(--color-charcoal);
  background-image:
    linear-gradient(var(--color-overlay), var(--color-overlay)),
    url("../images/house-at-east-berlin-germany-on-a-cloudy-day-2026-03-25-23-30-15-utc-1-1-p-1600.webp");
  background-position: 0 0;
  background-size: cover;
  color: var(--color-parchment);
}

.hero--home {
  min-height: 96vh;
}

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
  text-align: center;
}

.hero__title {
  width: 60%;
  font-size: var(--text-hero);
  font-weight: 400;
  line-height: var(--leading-hero);
}

/* About */
.about {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 35px;
  padding: var(--section-space) var(--gutter);
}

.about__card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 25px;
  width: 50%;
  min-height: 675px;
  padding: 54px;
  border-radius: var(--radius);
  background-color: var(--color-sand);
}

.about__text {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.about__text .lead {
  margin-bottom: 10px;
}

.about__more {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.about__media {
  width: 50%;
  overflow: hidden;
  border-radius: var(--radius);
}

.about__media img {
  display: block;
  width: 100%;
  height: 675px;
  object-fit: cover;
  border-radius: var(--radius);
}

/* What makes us different */
.difference,
.services {
  display: flex;
  flex-direction: column;
  padding: 0 var(--gutter) var(--section-space);
}

.difference {
  gap: 40px;
}

.difference .title,
.services .title {
  margin: 20px 0 10px;
}

.difference__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}

/* Lordicon animation; plays when the whole card is hovered (target=".card").
   The <img> inside is the static fallback, shown only until the lord-icon element is registered. */
.card__icon {
  position: relative;
  display: block;
  width: 35px;
  height: 35px;
}

.card__icon img {
  display: block;
  width: 100%;
  height: 100%;
}

.card__icon:defined img {
  display: none;
}

.cta-banner--homes {
  background-image:
    linear-gradient(var(--color-overlay), var(--color-overlay)),
    url("../images/beautiful-square-row-houses-in-the-center-of-berli-2026-03-25-22-49-06-utc-1-p-1600.webp");
}

@media (max-width: 991px) {
  .hero {
    padding-left: var(--header-pad-x);
    padding-right: var(--header-pad-x);
  }

  .hero__title {
    width: 100%;
    max-width: 640px;
  }

  .about {
    flex-direction: column;
    align-items: stretch;
  }

  .about__card,
  .about__media {
    width: 100%;
  }

  .about__card {
    min-height: 0;
    padding: 32px;
  }

  .about__media img {
    height: 420px;
  }

  .difference__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

@media (max-width: 767px) {
  .hero {
    padding-top: 120px;
    padding-bottom: 48px;
  }

  .hero--home {
    min-height: 80vh;
  }

  .hero {
    background-image:
      linear-gradient(var(--color-overlay), var(--color-overlay)),
      url("../images/house-at-east-berlin-germany-on-a-cloudy-day-2026-03-25-23-30-15-utc-1-1-p-800.webp");
  }

  .cta-banner--homes {
    background-image:
      linear-gradient(var(--color-overlay), var(--color-overlay)),
      url("../images/beautiful-square-row-houses-in-the-center-of-berli-2026-03-25-22-49-06-utc-1-p-800.webp");
  }

  .about__card {
    padding: 24px;
  }

  .about__media img {
    height: 300px;
  }
}

/* Contact */
.hero--page {
  min-height: 50vh;
}

.contact {
  display: grid;
  grid-template-columns: 5fr 7fr;
  align-items: start;
  gap: 40px;
  padding: 80px var(--gutter) var(--section-space);
}

.contact__info {
  gap: 12px;
}

.contact__info a {
  font-weight: 700;
}

.contact__label {
  margin-top: 12px;
  font-size: var(--text-body);
  font-weight: 700;
}

@media (max-width: 991px) {
  .contact {
    grid-template-columns: 1fr;
    padding-top: 48px;
  }
}

/* Text pages (privacy, terms, 404) */
.hero--band {
  min-height: 0;
  padding-top: 200px;
  padding-bottom: 64px;
  background-image: none;
}

.hero--band.hero--tall {
  min-height: 70vh;
}

.hero__text {
  max-width: 560px;
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

.prose {
  max-width: calc(720px + 2 * 16px);
  margin: 0 auto;
  padding: 80px 16px var(--section-space);
  font-size: var(--text-prose);
  line-height: var(--leading-prose);
}

.prose h2 {
  margin: 40px 0 12px;
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
}

.prose p,
.prose ul {
  margin-bottom: 12px;
}

.prose ul {
  padding-left: 24px;
}

.prose a {
  font-weight: 700;
}

.draft-notice {
  margin-bottom: 32px;
}

@media (max-width: 767px) {
  .hero--band {
    padding-top: 140px;
    padding-bottom: 40px;
  }

  .prose {
    padding-top: 48px;
  }
}