/* ==========================================================
   WAVERLY – Warm Craft Design (Scoped)
   Bigger photos (hero + gallery) without changing colors/design
   Wrapper: .waverly-project
   ========================================================== */

:root{
  --wv-walnut: #7b3f1f;
  --wv-walnut-dark: #3c1e10;
  --wv-cream: #fff4ea;
  --wv-paper: #fbf7f2;
  --wv-ink: #2a2320;
  --wv-muted: #6b5c52;
  --wv-sage: #2e6b5f;
  --wv-border: #ead6c8;
  --wv-gold: #d8b26e;
}

/* Overall frame (bigger page width) */
.waverly-project{
  max-width: 1280px;               /* was 1100px */
  margin: 28px auto;
  padding: 20px;
  border-radius: 22px;
  background:
    radial-gradient(1200px 500px at 20% 0%, rgba(123,63,31,0.12), transparent 60%),
    radial-gradient(900px 500px at 90% 20%, rgba(46,107,95,0.10), transparent 60%),
    linear-gradient(180deg, var(--wv-paper), var(--wv-cream));
  border: 1px solid var(--wv-border);
  box-shadow: 0 22px 60px rgba(0,0,0,0.10);
  color: var(--wv-ink);
}

/* Typography */
.waverly-project h1,
.waverly-project h2,
.waverly-project h3{
  color: var(--wv-ink);
  letter-spacing: -0.02em;
}

.waverly-project p,
.waverly-project li{
  color: var(--wv-muted);
  font-size: 1.06rem;
  line-height: 1.9;
}

.waverly-project strong{
  color: var(--wv-ink);
  font-weight: 800;
}

/* ========= HERO (BIGGER IMAGE) ========= */
.waverly-project .kp-hero{
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 18px 45px rgba(0,0,0,0.10);
}

/* If your hero has a media wrapper, make it “photo-first” */
.waverly-project .kp-hero-media{
  position: relative;
}

/* Soft “film” over the hero image for warmth */
.waverly-project .kp-hero-media::after{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(180deg, rgba(0,0,0,0.00), rgba(0,0,0,0.30));
  pointer-events:none;
}

/* BIGGER HERO IMAGE RULES */
.waverly-project .kp-hero img{
  width: 100%;
  height: auto;
  max-height: none;
  object-fit: unset;
}


/* Keep text styling unchanged */
.waverly-project .kp-hero-text{
  padding: 18px 18px 20px;
  background:
    linear-gradient(90deg, rgba(123,63,31,0.10), rgba(46,107,95,0.08));
  border-top: 1px solid rgba(0,0,0,0.06);
}

.waverly-project .kp-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 0.88rem;
  color: var(--wv-walnut-dark);
  background: rgba(255,255,255,0.75);
  border: 1px solid rgba(123,63,31,0.22);
}

.waverly-project .kp-eyebrow::before{
  content:"";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--wv-sage);
  box-shadow: 0 0 0 4px rgba(46,107,95,0.15);
}

.waverly-project .kp-title{
  font-size: 2.1rem;
  margin: 10px 0 6px;
  color: var(--wv-ink);
}

.waverly-project .kp-subtitle{
  margin: 0;
  color: rgba(42,35,32,0.80);
  font-weight: 600;
}

/* ========= SECTION HEADERS ========= */
.waverly-project .kp-section{
  margin-top: 18px;
  padding: 18px;
  border-radius: 16px;
  background: rgba(255,255,255,0.70);
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 12px 28px rgba(0,0,0,0.06);
}

.waverly-project .kp-section > h2{
  display: inline-block;
  margin: 0 0 14px;
  padding: 8px 12px;
  border-radius: 12px;
  background:
    linear-gradient(90deg, rgba(123,63,31,0.14), rgba(46,107,95,0.10));
  border: 1px solid rgba(123,63,31,0.22);
  color: var(--wv-ink);
  font-size: 1.2rem;
}

/* ========= CARDS ========= */
.waverly-project .kp-card{
  padding: 16px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid rgba(123,63,31,0.14);
  box-shadow: 0 12px 24px rgba(0,0,0,0.06);
}

.waverly-project .kp-card h3{
  margin-top: 0;
  color: var(--wv-walnut-dark);
}

.waverly-project .kp-card ul{
  margin: 10px 0 0;
  padding-left: 1.15rem;
}

.waverly-project .kp-card li{
  margin: 6px 0;
}

/* ========= SPECS (material / finish / size) ========= */
.waverly-project .kp-specs{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.waverly-project .kp-spec{
  border-radius: 14px;
  padding: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,244,234,0.60));
  border: 1px solid rgba(234,214,200,0.95);
  box-shadow: 0 10px 22px rgba(0,0,0,0.05);
  position: relative;
  overflow: hidden;
}

.waverly-project .kp-spec::before{
  content:"";
  position:absolute;
  left:-40px;
  top:-40px;
  width: 120px;
  height: 120px;
  border-radius: 999px;
  background: rgba(123,63,31,0.09);
}

.waverly-project .kp-spec-label{
  font-weight: 900;
  color: var(--wv-sage);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 0.78rem;
}

.waverly-project .kp-spec-value{
  font-weight: 800;
  color: var(--wv-ink);
  margin-top: 4px;
}

/* ========= GALLERY (BIGGER PHOTOS) ========= */
/* Change from 3 columns to 2 columns so each image is much larger */
.waverly-project .kp-gallery{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));  /* was 3 columns */
  gap: 16px;                                         /* slightly more breathing room */
  margin-top: 12px;
}

/* Bigger “card” feel without changing the style */
.waverly-project .kp-figure{
  border-radius: 18px;                               /* slightly larger */
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.06);
  box-shadow: 0 16px 36px rgba(0,0,0,0.10);           /* a touch stronger so bigger images feel anchored */
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.waverly-project .kp-figure:hover{
  transform: translateY(-2px);
  box-shadow: 0 20px 44px rgba(0,0,0,0.14);
}

/* Make gallery images visually larger and consistent */
.waverly-project .kp-figure img{
  width: 100%;
  height: auto;          /* let image decide */
  object-fit: contain;  /* never crop */
  background: #fff;
}

.waverly-project .kp-figure figcaption{
  padding: 12px 14px;                                /* a bit more space */
  border-top: 1px solid rgba(0,0,0,0.06);
  color: var(--wv-muted);
  font-weight: 650;
  background: linear-gradient(180deg, #fff, rgba(255,244,234,0.55));
}

/* ========= REVIEW BLOCK ========= */
.waverly-project .kp-quote{
  padding: 18px;
  border-radius: 16px;
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(123,63,31,0.14);
  box-shadow: 0 12px 28px rgba(0,0,0,0.06);
}

.waverly-project .kp-quote blockquote{
  margin: 0;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--wv-cream);
  border-left: 6px solid var(--wv-walnut);
  color: var(--wv-ink);
  font-weight: 650;
}

.waverly-project .kp-quote cite{
  display: block;
  margin-top: 10px;
  color: rgba(42,35,32,0.70);
  font-weight: 800;
}

/* ========= CTA ========= */
.waverly-project .kp-cta{
  margin-top: 18px;
  padding: 18px;
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(123,63,31,0.12), rgba(46,107,95,0.10));
  border: 1px solid rgba(123,63,31,0.22);
  box-shadow: 0 16px 38px rgba(0,0,0,0.08);
}

.waverly-project .kp-cta h2{
  margin: 0 0 10px;
  color: var(--wv-ink);
}

.waverly-project .kp-cta-button{
  display: inline-block;
  padding: 12px 18px;
  border-radius: 14px;
  text-decoration: none;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(180deg, var(--wv-walnut), var(--wv-walnut-dark));
  border: 2px solid rgba(255,255,255,0.35);
  box-shadow: 0 18px 34px rgba(123,63,31,0.28);
  transition: transform 160ms ease, box-shadow 160ms ease, opacity 160ms ease;
}

.waverly-project .kp-cta-button:hover{
  transform: translateY(-2px);
  box-shadow: 0 22px 44px rgba(123,63,31,0.33);
  opacity: 0.98;
}

/* ========= MOBILE ========= */
@media (max-width: 980px){
  .waverly-project{
    padding: 14px;
    margin: 18px 10px;
  }

  .waverly-project .kp-title{
    font-size: 1.65rem;
  }

  .waverly-project .kp-specs{
    grid-template-columns: 1fr;
  }

  /* Gallery becomes 1 column on small screens (still big) */
  .waverly-project .kp-gallery{
    grid-template-columns: 1fr;
  }

  .waverly-project .kp-figure img{
    height: auto;          /* avoid huge fixed height on phones */
    max-height: 520px;
  }

  .waverly-project .kp-hero img{
    max-height: 520px;
  }
}