/* ---- Hero ---- */
.home-hero {
  max-width: 900px;
  margin: 1.5rem auto 0;
  padding: 2.25rem 1.25rem 0;
  text-align: center;
}

.home-hero h1 {
  margin: 0;
  color: #1d2f24;
  font-size: clamp(2rem, 5vw, 3.1rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1.15;
}

.home-hero h1::after {
  content: "";
  display: block;
  width: 72px;
  height: 4px;
  margin: 1rem auto 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #2f6b46, #8aa08f);
}

.home-hero p {
  max-width: 720px;
  margin: .9rem auto 0;
  color: #425448;
  font-size: 1.12rem;
  line-height: 1.65;
}

/* ---- Logo ---- */
.logo {
  display: inline-block;
  width: 100%;
  max-width: 400px;
  margin-top: 1.75rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid #e6e0d2;
  border-radius: 28px;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(29, 37, 32, .05), 0 18px 44px rgba(29, 37, 32, .1);
}

/* ---- Description card ---- */
.home-info {
  max-width: 900px;
  margin: 2rem auto 0;
  padding: 2rem 2.25rem;
  border: 1px solid #e6e0d2;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(29, 37, 32, .05), 0 14px 38px rgba(29, 37, 32, .07);
}

.home-info-description {
  color: #2b3a31;
  font-size: 1.12rem;
  line-height: 1.85;
  white-space: pre-wrap;
}

.home-info-description p,
.home-info-description div,
.home-info-description ul,
.home-info-description ol {
  margin: 0;
}

.home-info-description ul,
.home-info-description ol {
  display: inline-block;
  color: #253b2e;
  text-align: left;
}


.home-edit-bar {
  display: flex;
  justify-content: flex-end;
  padding: .75rem 1.25rem 0;
}

/* ---- Gallery carousel ---- */
.home-gallery {
  max-width: 1100px;
  margin: 3rem auto 0;
}

.home-gallery-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 .25rem;
}

.home-gallery-header h2 {
  margin: 0;
  color: #1d2f24;
  font-size: clamp(1.4rem, 3vw, 1.8rem);
  font-weight: 700;
  letter-spacing: -.01em;
}

.home-gallery-all {
  color: #2f6b46;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.home-gallery-all:hover {
  text-decoration: underline;
}

.home-gallery-carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(230px, 30%);
  gap: 1.1rem;
  margin: 0 auto;
  padding: 1.25rem .25rem 1.75rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
}

.home-gallery-carousel:hover {
  scrollbar-width: thin;
}

.home-gallery-carousel::-webkit-scrollbar {
  height: 0;
}

.home-gallery-carousel:hover::-webkit-scrollbar {
  height: 8px;
}

.home-gallery-carousel::-webkit-scrollbar-track {
  background: transparent;
}

.home-gallery-carousel::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(93, 104, 95, .45);
}

.home-gallery-slide {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid #e6e0d2;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(29, 37, 32, .06), 0 10px 26px rgba(29, 37, 32, .08);
  transition: box-shadow .25s ease, transform .25s ease;
}

.home-gallery-slide img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .5s ease;
}

.home-gallery-slide:hover {
  z-index: 2;
  box-shadow: 0 6px 14px rgba(29, 37, 32, .1), 0 22px 44px rgba(29, 37, 32, .2);
  transform: translateY(-5px);
}

.home-gallery-slide:hover img {
  transform: scale(1.06);
}

@media (max-width: 768px) {
  .home-info {
    padding: 1.4rem 1.25rem;
    border-radius: 20px;
  }

  .home-gallery-carousel {
    grid-auto-columns: minmax(210px, 80%);
  }
}

/* ---- Typography defaults inside a page designed in the builder (the builder's own styles still win) ---- */
#home-content h1,
#home-content h2,
#home-content h3 {
  color: #1d2f24;
  letter-spacing: -.01em;
}

#home-content p {
  line-height: 1.7;
}

.home-edit-bar {
  display: flex;
  justify-content: flex-end;
  padding: .75rem 1.25rem 0;
}

.home-gallery-carousel {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 32%);
  gap: 1rem;
  max-width: 1100px;
  margin: 0 auto 0;
  padding: .75rem .25rem 1.25rem;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
}

.home-gallery-carousel:hover {
  scrollbar-width: thin;
}

.home-gallery-carousel::-webkit-scrollbar {
  height: 0;
}

.home-gallery-carousel:hover::-webkit-scrollbar {
  height: 8px;
}

.home-gallery-carousel::-webkit-scrollbar-track {
  background: transparent;
}

.home-gallery-carousel::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgba(93, 104, 95, .45);
}

.home-gallery-slide {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid #d9d2c4;
  border-radius: 8px;
  background: #ffffff;
  transition: box-shadow .2s ease, transform .2s ease;
}

.home-gallery-slide img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.home-gallery-slide:hover {
  z-index: 2;
  box-shadow: 0 10px 26px rgba(29, 37, 32, .22);
  transform: scale(1.15);
}

@media (max-width: 768px) {
  .home-gallery-carousel {
    grid-auto-columns: minmax(210px, 82%);
    margin-top: 0;
  }
}

/* ---- Default home layout: logo on the left, heading and button on the right, main text below ---- */
.home-intro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.5rem 2rem;
  max-width: 960px;
  margin: 1.75rem auto 0;
  padding: 2rem 2.25rem;
  border: 1px solid #e6e0d2;
  border-radius: 28px;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(29, 37, 32, .05), 0 18px 44px rgba(29, 37, 32, .1);
}

.home-intro-logo {
  flex: 1 1 240px;
  max-width: 420px;
  text-align: center;
}

.home-intro-logo img {
  max-width: 100%;
  height: auto;
}

.home-intro-text {
  flex: 1.2 1 260px;
  min-width: 0;
}

.home-intro-text h1 {
  margin: 0 0 1rem;
  color: #1d2f24;
  font-size: clamp(1.9rem, 4.5vw, 2.7rem);
  font-weight: 700;
  letter-spacing: -.01em;
  line-height: 1.15;
}

.home-intro-text p {
  margin: 0;
}

/* Main text, full width below the logo and the heading with the button. */
.home-body {
  max-width: 960px;
  margin: 1.5rem auto 0;
  padding: 2rem 2.25rem;
  border: 1px solid #e6e0d2;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 2px 6px rgba(29, 37, 32, .05), 0 14px 38px rgba(29, 37, 32, .07);
}

.home-body .home-info-description {
  font-size: 1.1rem;
  line-height: 1.8;
}

@media (max-width: 767.98px) {
  .home-intro-text {
    text-align: center;
  }

  .home-intro,
  .home-body {
    padding: 1.4rem 1.25rem;
    border-radius: 20px;
  }
}